Streamlines the process of turning fragmented frontend code into cohesive, reusable design systems. This skill guides Claude Code in identifying repeated UI patterns—such as buttons, cards, forms, and layout sections—and extracting them into shared component libraries with documented APIs, default properties, and standardized design tokens. It is ideal for refactoring legacy UI markup, eliminating one-off styling values, and establishing scalable, maintainable frontend architecture across your projects.
主要功能
01Extracts hardcoded styling and spacing values into standardized design tokens
02Refactors legacy buttons, cards, forms, and layout containers across projects
0352 GitHub stars
04Identifies and consolidates duplicate frontend UI markup into shared components
05Establishes clean, documented component APIs with sensible default properties
06Facilitates incremental design system adoption without breaking existing layouts
使用场景
01Consolidating fragmented button and form implementations into a unified component library
02Refactoring hardcoded colors, typography, and spacing into centralized CSS or design tokens
03Standardizing layout containers and card patterns across an existing web application