sf-design-from-scratch
OfficialCreate a professional, centralized design system from existing UI.
Authordiane-defores
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill streamlines the process of establishing a coherent and professional design-token system from scattered UI elements, enabling consistent styling across projects.
Core Features & Use Cases
- Visual Inventory: Assess current fonts, colors, sizes, and spacing to identify what needs centralization.
- Design-System Architecture: Define a complete, validated source of truth for design tokens, including typography, colors, spacings, and more.
- Migration Planning: Develop a bounded plan to replace hardcoded literals with semantic variables, ensuring visual consistency and easier maintenance.
- Use Case: A developer can input their existing CSS/Theme files and generate a centralized token system suitable for Tailwind or CSS variables, then apply it across a web app.
Quick Start
Specify your project’s style stack and representative files to generate a comprehensive design system foundation.
Dependency Matrix
Required Modules
None requiredComponents
references
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: sf-design-from-scratch Download link: https://github.com/diane-defores/shipflow/archive/main.zip#sf-design-from-scratch Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.