design-flow
CommunityGuide UI design from spec to polished HTML.
Authortuanemuy
Version1.0.0
Installs0
System Documentation
What problem does it solve?
Design teams often struggle to translate textual specs into cohesive UI designs and consistent HTML outputs across multiple review cycles. This skill automates the end-to-end workflow from specification and plan artifacts to tokenization, draft visuals, production pages, and review artifacts, reducing manual coordination and rework.
Core Features & Use Cases
- Transform spec artifacts (spec/index.md, spec/pages/index.md) into a staged UI design workflow across phases.
- Generate HTML design drafts, tokens, and final design pages, along with structured review records in spec/design/.
- Integrate design references and guidelines to ensure consistency and traceability from concept to delivery.
Quick Start
Start by preparing your spec and page inventories, then invoke the design-flow skill to generate the initial Phase 1 drafts.
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: design-flow Download link: https://github.com/tuanemuy/dotfiles/archive/main.zip#design-flow 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.