Automate UI design workflows from specifications to production HTML pages.
npx skills add https://github.com/tuanemuy/dotfiles --skill design-flow
Please help me install this Agent Skill. Skill: design-flow Source: https://github.com/tuanemuy/dotfiles/tree/main/config/claude/skills/design-flow Command: npx skills add https://github.com/tuanemuy/dotfiles --skill design-flow
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.
Start by preparing your spec and page inventories, then invoke the design-flow skill to generate the initial Phase 1 drafts.
High-intent search queries and answers about installing and using this skill.
You can convert design specs into HTML drafts by using a phase-driven pipeline that processes spec/index.md and spec/pages/index.md to generate tokenized design outputs and draft HTML files stored under spec/design/.
Managing UI design tokens across review cycles is handled by defining them in spec/design/tokens.md, ensuring consistent visual application from draft HTMLs through to final production pages.
Yes, you can generate production HTML pages from markdown specifications by running the staged workflow that transforms spec artifacts into draft visuals, applies design references, and outputs final pages.
The design workflow supports structured review artifacts by generating and storing review records within the spec/design/ directory throughout its multi-phase pipeline, ensuring traceability from concept to delivery.
You integrate design references into the UI HTML generation workflow by applying optional reference guidelines during the pipeline, which ensures implementation consistency and traceability across all generated drafts and pages.
Yes, you need pre-existing page inventories such as spec/pages/index.md and spec/index.md as starting inputs, because the workflow reads these specification artifacts to initialize the first phase of design drafts.
tuanemuyAutomate specification workflows from idea to ADRs with structured outputs.
yolo-labs-hqGenerate production-ready frontend components and pages with HTML/CSS/JS.
hgxszhj-pixelApply style recipes and component mappings to PowerPoint slide designs.
ashiqcodeleafGenerate HTML/CSS for web pages using real-world design systems.
