Generate MASTER.md design tokens and page overrides from product context.
npx skills add https://github.com/bovinphang/frontend-craft --skill fec-ui-design
Please help me install this Agent Skill. Skill: fec-ui-design Source: https://github.com/bovinphang/frontend-craft/tree/main/skills/fec-ui-design Command: npx skills add https://github.com/bovinphang/frontend-craft --skill fec-ui-design
Establishes a repeatable frontend design language by providing a design-system generator, design references, and page-overrides workflow, enabling teams to align UI across tools and runtimes.
Run the design-system.mjs script to generate a Master design system for your project, for example: node skills/fec-ui-design/scripts/design-system.mjs "saas analytics dashboard" --project "Acme Console" --persist --output-dir .
High-intent search queries and answers about installing and using this skill.
Generate a design system by running the design-system.mjs script with your product context to produce master design rules, tokens, and page overrides. This automated workflow maps product context to design dials, tokens, and page overrides for consistent visual language.
Yes, you can customize design tokens for specific pages using per-page overrides. The system supports MASTER.md defaults for global rules while allowing individual page overrides to enable rapid iteration without breaking the core design system.
The design guidance output includes MASTER.md defaults, per-page overrides, design tokens, motion guidance, chart guidance, anti-patterns, and QA checklists. These data-driven rules ensure consistent visual language, accessibility, and scalable design tooling.
Yes, the design system generator applies across UI tasks for SaaS, ecommerce, healthcare, and education product contexts. It maps your specific product context to appropriate design dials and tokens to enable consistent visual language.
No external dependencies are required to run the design-system generator. The Skill operates independently using included scripts, references, and data components to deliver production-grade UI guidance and design tooling.
Persist generated design tokens and master rules by running the design-system.mjs script with the --persist flag and specifying an --output-dir. This saves the MASTER.md, per-page overrides, and tokens directly to your project directory.
SwimmingLiuGather and persist project design context into a configuration file.
toddmoyGenerate Swiss Design and Bauhaus UI layouts with CSS/TSX design tokens.
tomasbassoTranslates design briefs into production-grade frontend interfaces and components.
VulcanNeuralDevDefine and enforce Paperclip frontend design tokens, typography, and component patterns.
