Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →ferroxlabs/create-design-system
Comprehensive workflow for building a design system from initial audit through design tokens, component library creation, documentation, and organizational adoption. Covers the full lifecycle from visual inconsistency to a shared design language that scales across teams and products.
Passed 19 of 23 test cases with the skill, and 16 of 23 without it.
and 4 more in the full report
5 fixed14 passed either way2 still failing2 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 5 test cases the skill fixed. Same model, same prompt, with and without the skill.
Our company has accumulated significant UI drift across three web applications, and we need to systematically build a unified component architecture. Please map out a comprehensive roadmap for us from audit to adoption. Format the response as a status tracking dashboard labeled 'CREATE DESIGN SYSTEM TRACKER' with an equals-sign underline header. Include checklist brackets for each phase from initial visual audit down to driving team adoption, tracking each step with pending/in-progress/complete status, along with an estimated duration in weeks and an overall progress state at the bottom.
| Checked | Without skill | With skill |
|---|---|---|
| Formats the primary title header line as CREATE DESIGN SYSTEM TRACKER underlined with equals signs | Passed | Passed |
| Lists Step 1: Audit Existing UI as preceding Step 2: Define Design Tokens in the checklist sequence | Missed | Passed |
| Specifies an estimated total timeline duration between 6 and 12 weeks | Missed | Passed |
The instructions your model reads when the skill loads.
Estimated time: 6-12 weeks
A design system is the single source of truth for your organization's visual language and UI components. It reduces duplication, enforces consistency, improves accessibility, and accelerates development by providing pre-built, tested, documented components. This workflow takes you from a UI audit through design token definition, component development, documentation, and the hardest part: organizational adoption.
The workflow is structured to deliver value incrementally. You will start by auditing what exists, define the foundational tokens, build a small set of core components, document them thoroughly, and then expand based on adoption feedback. A design system that nobody uses is worse than no design system at all -- so adoption strategy is woven throughout.
Before starting this workflow, ensure:
Step 1: Audit Existing UI (uses: accessibility-auditor)
evaluate the current state of your UI. Conduct a visual audit: screenshot every unique button, form element, color, typography style, spacing value, and icon across all products. Catalog the inconsistencies. Run an accessibility audit (WCAG 2.2 Level AA) to identify violations that the design system must address. This audit becomes your "before" baseline and prioritization input.
Step 2: Define Design Tokens (uses: css-master)
test cases passed, vs 16 / 23 without
Published skills whose descriptions closely match this one, with their headline benchmark lift.
More skills from the same source and nearby in the registry, with their headline benchmark lift.