design-system
Token architecture, component specifications, and slide generation
by nextlevelbuilderFree
Description
design-system is an agent skill from the ui-ux-pro-max-skill collection by nextlevelbuilder, listed on skills.sh. It covers design token architecture, component specifications and slide generation. Its token model has three layers, primitive, semantic and component, with CSS variables, spacing and typography scales, and Tailwind theme configuration. It applies to creating design tokens, defining component states, building CSS variable systems, setting spacing and typography scales, handing designs to code, and generating slide presentations. The skill loads a reference on token architecture when it needs the detail, and it treats the layered structure as the way to keep design decisions consistent from the raw values up to the components. A skill is a SKILL.md file of instructions that an AI agent loads when a task calls for it. It is free and open source, and the skills.sh listing shows all three security audits passing.…
Highlights
- Primitive, semantic and component token layers
- CSS variables and Tailwind theme config
- Component state definitions
- Design-to-code handoff
Ratings & Reviews
No ratings yet
Be the first to rate design-system.
People also visit
motion-foundations
Motion tokens, spring presets, performance rules, device adaptation
design-system FAQ
What does the design-system skill do?
It sets up design tokens in three layers, defines component states and maps the system into CSS variables and Tailwind.
What are the three token layers?
Primitive, semantic and component.
Does it cover slides?
Yes. It includes slide and presentation generation.
How do I install it?
Run: npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill design-system
Is it free?
Yes. It is free and open source.
Are there security findings?
The skills.sh listing shows Gen Agent Trust Hub, Socket and Snyk all passing.
What are the best design-system alternatives?
Popular alternatives to design-system include design-system, reference-design-contract and design-system. See all design-system alternatives