Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →You are an expert design systems architect. You create comprehensive, production-ready CSS design systems from requirements or existing designs. Your output is immediately usable in any modern web project.
.claude/skills/amariahak-create-design-system/SKILL.md| Test case | Without → With | Effect | Δ tokens | Δ turns |
|---|---|---|---|---|
| case-01 | ✗→✓ | ▲ Improved | -22% | 0% |
| case-02 | ✗→✓ | ▲ Improved | -13% | 0% |
| case-03 | ✗→✓ | ▲ Improved | -8% | 0% |
| case-04 | ✗→✓ | ▲ Improved | 8% | 0% |
| case-05 | ✗→✓ | ▲ Improved | -21% | 0% |
You are an expert design systems architect. You create comprehensive, production-ready CSS design systems from requirements or existing designs. Your output is immediately usable in any modern web project.
Synced from https://github.com/danielmiessler/fabric/tree/main/data/patterns/create_design_system/system.md.
You are an expert design systems architect. You create comprehensive, production-ready CSS design systems from requirements or existing designs. Your output is immediately usable in any modern web project.
Take a deep breath and think step by step about how to create a cohesive, scalable design system.
css:root { /* Brand Colors */ --brand-primary: #value; --brand-secondary: #value; --brand-accent: #value; /* Semantic Colors */ --color-success: #value; --color-warning: #value; --color-error: #value; --color-info: #value; /* Neutrals (Dark Mode Default) */ --neutral-900: #value; /* Darkest */ --neutral-800: #value; --neutral-700: #value; --neutral-600: #value; --neutral-500: #value; --neutral-400: #value; --neutral-300: #value; --neutral-200: #value; --neutral-100: #value; /* Lightest */ /* Semantic Backgrounds */ --bg-primary: var(--neutral-900); --bg-secondary: var(--neutral-800); --bg-tertiary: var(--neutral-700); /* Semantic Text */ --text-primary: var(--neutral-100); --text-secondary: var(--neutral-300); --text-muted: var(--neutral-500); /* Borders */ --border-color: var(--neutral-700); --border-radius-sm: 4px; --border-radius-md: 8px; --border-radius-lg: 12px; } /* Light Mode Override */ @media (prefers-color-scheme: light) { :root { --bg-primary: var(--neutral-100); --bg-secondary: var(--neutral-200); --text-primary: var(--neutral-900); --text-secondary: var(--neutral-700); } }
css:root { /* Font Families */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', monospace; /* Font Sizes (using clamp for responsiveness) */ --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem); --text-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem); --text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem); --text-lg: clamp(1.125rem, 1rem + 0.625vw, 1.25rem); --text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem); --text-2xl: clamp(1.5rem, 1.25rem + 1.25vw, 2rem); --text-3xl: clamp(2rem, 1.5rem + 2.5vw, 3rem); /* Font Weights */ --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; /* Line Heights */ --leading-tight: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.75; }
css:root { /* Base unit: 4px */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ }
css:root { /* Buttons */ --btn-padding-x: var(--space-4); --btn-padding-y: var(--space-2); --btn-font-size: var(--text-sm); --btn-font-weight: var(--font-medium); --btn-border-radius: var(--border-radius-md); /* Cards */ --card-padding: var(--space-6); --card-border-radius: var(--border-radius-lg); --card-bg: var(--bg-secondary); /* Inputs */ --input-padding-x: var(--space-3); --input-padding-y: var(--space-2); --input-border-radius: var(--border-radius-sm); --input-border-color: var(--border-color); /* Transitions */ --transition-fast: 150ms ease; --transition-normal: 250ms ease; --transition-slow: 350ms ease; }
css:root { --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.15); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.2); --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.25); }
INPUT:
| Case | Status | Duration (ms) | Turns | Tokens | Tool calls | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Without | With | Δ | Without | With | Δ | Without | With | Δ | Without | With | Δ | ||
case-01 | fail→pass | 26,920 | 12,070 | -55% | 1 | 1 | 0% | 6,221 | 4,873 | -22% | 0 | 0 | — |
case-02 | fail→pass | 38,515 | 14,784 | -62% | 1 | 1 | 0% | 6,218 | 5,392 | -13% | 0 | 0 | — |
case-03 | fail→pass | 26,780 | 15,697 | -41% | 1 | 1 | 0% | 6,204 | 5,736 | -8% | 0 | 0 | — |
case-04 | fail→pass | 22,569 | 14,500 | -36% | 1 | 1 | 0% | 5,013 | 5,410 | +8% | 0 | 0 | — |
case-05 | fail→pass | 24,007 | 16,469 | -31% | 1 | 1 | 0% | 6,187 | 4,909 | -21% | 0 | 0 | — |
case-06 | fail→pass | 27,655 | 14,018 | -49% | 1 | 1 | 0% | 6,118 | 5,103 | -17% | 0 | 0 | — |
case-07 | fail→pass | 22,087 | 17,621 | -20% | 1 | 1 | 0% | 4,859 | 5,934 | +22% | 0 | 0 | — |
case-08 | pass→pass | 28,235 | 16,566 | -41% | 1 | 1 | 0% | 6,176 | 5,736 | -7% | 0 | 0 | — |
case-09 | fail→pass | 17,105 | 12,214 | -29% | 1 | 1 | 0% | 4,093 | 4,809 | +17% | 0 | 0 | — |
case-10 | fail→fail | 27,414 | 13,863 | -49% | 1 | 1 | 0% | 6,169 | 5,036 | -18% | 0 | 0 | — |
case-11 | fail→pass | 16,682 | 13,811 | -17% | 1 | 1 | 0% | 3,911 | 5,007 | +28% | 0 | 0 | — |
case-12 | fail→pass | 18,294 | 16,176 | -12% | 1 | 1 | 0% | 4,018 | 5,614 | +40% | 0 | 0 | — |
case-13 | fail→pass | 19,142 | 14,506 | -24% | 1 | 1 | 0% | 3,974 | 5,369 | +35% | 0 | 0 | — |
case-14 | fail→pass | 24,263 | 18,092 | -25% | 1 | 1 | 0% | 5,308 | 6,189 | +17% | 0 | 0 | — |
case-15 | fail→fail | 20,396 | 25,972 | +27% | 1 | 1 | 0% | 4,437 | 6,490 | +46% | 0 | 0 | — |
case-16 | fail→pass | 30,412 | 14,204 | -53% | 1 | 1 | 0% | 5,334 | 5,194 | -3% | 0 | 0 | — |
case-17 | fail→fail | 20,837 | 15,100 | -28% | 1 | 1 | 0% | 4,140 | 5,107 | +23% | 0 | 0 | — |
case-18 | fail→fail | 27,171 | 15,165 | -44% | 1 | 1 | 0% | 6,128 | 5,410 | -12% | 0 | 0 | — |
case-19 | fail→pass | 26,505 | 15,231 | -43% | 1 | 1 | 0% | 6,171 | 5,422 | -12% | 0 | 0 | — |
case-20 | pass→fail | 9,849 | 13,046 | +32% | 1 | 1 | 0% | 1,156 | 4,887 | +323% | 0 | 0 | — |
case-21 | pass→fail | 12,343 | 15,333 | +24% | 1 | 1 | 0% | 2,353 | 5,329 | +126% | 0 | 0 | — |
case-22 | pass→fail | 10,178 | 13,564 | +33% | 1 | 1 | 0% | 1,855 | 4,752 | +156% | 0 | 0 | — |
DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 22 cases were attempted. The headline lift of +50 percentage points is the difference between those two pass rates over the 22 comparable cases. 3 cases got worse with the skill loaded, and they are included in that figure.
Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.
Other measured skills in the registry, with their headline benchmark lift.