Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

Get Started Free →

Design System Generator · vibeeval | DecimalAI

Design System Generator

SkillScore36Maintained

design-system-generator

Generate design systems with color palettes, typography, spacing scales, component tokens, and Tailwind config

Frontendby vibeeval

Links this skill to your agents and keeps it current with the author’s updates.

Automatic

Frontend / UI pack

1 · One-time — install the CLI (docs ↗)

pip install decimalai

2 · Get the skill — writes .claude/skills/design-system-generator/SKILL.md

decimalai skills pull design-system-generator --out .claude/skills/

No CLI? Get the same file — curl · raw file

curl -fsSL --create-dirs -o .claude/skills/design-system-generator/SKILL.md https://app.decimal.ai/s/design-system-generator/SKILL.md

Raw file: /s/design-system-generator/SKILL.md ↗ · machine-readable summary at /s/design-system-generator.json ↗

In productionGlobal

how this skill behaves on real traffic · last 30 days

No production data for this skill yet — usage numbers appear here once agents start running it.

Anonymized aggregate across every org using this skill — proof from real production use, not a demo.

Does this skill help? · Benchmark: with vs. withoutsign in to run this on your agents

22 test cases from the publisher’s eval.yaml · each run twice on gemini-3.6-flash — with the skill injected, then without · last run 55d ago

Yes — +27% lift · at higher cost+61% tokens0% turns36% of whole cases pass with skill (8/22)

Test case	Without → With	Effect	Δ tokens	Δ turns
case-13	✗→✓	▲ Improved	—	—
case-17	✗→✓	▲ Improved	—	—
case-09	✗→✓	▲ Improved	—	—
case-02	✗→✓	▲ Improved	—	—
case-14	✗→✓	▲ Improved	—	—

Showing 5 of 22 cases

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v4 — 7/30/2026

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

vibeeval / vibecosystem

skills/design-system-generator/SKILL.md

View on GitHub ↗

License MITImported 8/1/2026Version v1

Skill contents

SKILL.md

Design System Generator

Input'a gore tutarli design system uret. 3-layer token mimarisi.

Input

Asagidaki bilgileri iste veya cikar:

Product type: SaaS, e-commerce, blog, dashboard, mobile app
Industry: Fintech, healthcare, education, developer tools, etc.
Style preference: Minimal, bold, playful, corporate, dark-first
Brand colors (varsa): Primary HEX, secondary HEX
Font preference (varsa): Sans-serif, serif, mono

3-Layer Token Architecture

Layer 1: Primitive Tokens (Ham degerler)

css
/* Primitive - ASLA direkt kullanilmaz */
--color-blue-50: #eff6ff;
--color-blue-100: #dbeafe;
--color-blue-500: #3b82f6;
--color-blue-600: #2563eb;
--color-blue-700: #1d4ed8;
--color-blue-900: #1e3a5f;

--color-gray-50: #f9fafb;
--color-gray-100: #f3f4f6;
--color-gray-200: #e5e7eb;
--color-gray-300: #d1d5db;
--color-gray-500: #6b7280;
--color-gray-700: #374151;
--color-gray-900: #111827;

--color-green-500: #22c55e;
--color-red-500: #ef4444;
--color-yellow-500: #eab308;

Layer 2: Semantic Tokens (Anlam tasiyan)

css
/* Light mode */
--color-primary: var(--color-blue-600);
--color-primary-hover: var(--color-blue-700);
--color-primary-subtle: var(--color-blue-50);

--color-danger: var(--color-red-500);
--color-success: var(--color-green-500);
--color-warning: var(--color-yellow-500);

--color-text-primary: var(--color-gray-900);
--color-text-secondary: var(--color-gray-500);
--color-text-muted: var(--color-gray-300);

--color-bg-primary: #ffffff;
--color-bg-secondary: var(--color-gray-50);
--color-bg-tertiary: var(--color-gray-100);

--color-border: var(--color-gray-200);
--color-border-strong: var(--color-gray-300);

css
/* Dark mode */
.dark {
  --color-primary: var(--color-blue-500);
  --color-primary-hover: var(--color-blue-600);
  --color-primary-subtle: var(--color-blue-900);

  --color-text-primary: var(--color-gray-50);
  --color-text-secondary: var(--color-gray-300);
  --color-text-muted: var(--color-gray-500);

  --color-bg-primary: var(--color-gray-900);
  --color-bg-secondary: #1a1a2e;
  --color-bg-tertiary: var(--color-gray-700);

  --color-border: var(--color-gray-700);
  --color-border-strong: var(--color-gray-500);
}

Layer 3: Component Tokens (Kullanim yeri)

css
/* Button */
--btn-primary-bg: var(--color-primary);
--btn-primary-hover: var(--color-primary-hover);
--btn-primary-text: #ffffff;
--btn-secondary-bg: transparent;
--btn-secondary-border: var(--color-border-strong);
--btn-danger-bg: var(--color-danger);

/* Input */
--input-bg: var(--color-bg-primary);
--input-border: var(--color-border);
--input-border-focus: var(--color-primary);
--input-text: var(--color-text-primary);
--input-placeholder: var(--color-text-muted);

/* Card */
--card-bg: var(--color-bg-primary);
--card-border: var(--color-border);
--card-shadow: 0 1px 3px rgb(0 0 0 / 0.1);

Typography System

| Eleman | Font | Weight | Size | Line Height | |--------|------|--------|------|-------------| | Display | Primary | 700 | 3rem (48px) | 1.1 | | H1 | Primary | 600 | 2.25rem (36px) | 1.2 | | H2 | Primary | 600 | 1.5rem (24px) | 1.25 | | H3 | Primary | 500 | 1.25rem (20px) | 1.3 | | Body | Primary | 400 | 1rem (16px) | 1.5 | | Small | Primary | 400 | 0.875rem (14px) | 1.4 | | Caption | Primary | 400 | 0.75rem (12px) | 1.3 |

Font Pairing Onerileri

| Industry | Heading | Body | Karakter | |----------|---------|------|----------| | SaaS / Tech | Inter | Inter | Temiz, notr | | Fintech | DM Sans | DM Sans | Guvenir, profesyonel | | Healthcare | Source Sans Pro | Source Sans Pro | Okunabilir, sicak | | Education | Nunito | Open Sans | Samimi, erisilebilir | | Dev Tools | JetBrains Mono | Inter | Teknik, modern | | Luxury | Playfair Display | Lato | Sofistike, zarif |

Spacing Scale (4px base)

Token    Value    Use Case
xs       4px      Icon gap, compact badges
sm       8px      Input padding-y, small gaps
md       12px     Button padding-y
base     16px     Card padding, standard gap
lg       24px     Section padding, comfortable gap
xl       32px     Section gap
2xl      48px     Page section gap
3xl      64px     Hero padding

Tailwind Config Ciktisi

typescript
// tailwind.config.ts
import type { Config } from 'tailwindcss'

export default {
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        primary: {
          DEFAULT: 'var(--color-primary)',
          hover: 'var(--color-primary-hover)',
          subtle: 'var(--color-primary-subtle)',
        },
        danger: { DEFAULT: 'var(--color-danger)' },
        success: { DEFAULT: 'var(--color-success)' },
        warning: { DEFAULT: 'var(--color-warning)' },
        surface: {
          DEFAULT: 'var(--color-bg-primary)',
          secondary: 'var(--color-bg-secondary)',
          tertiary: 'var(--color-bg-tertiary)',
        },
      },
      borderColor: {
        DEFAULT: 'var(--color-border)',
        strong: 'var(--color-border-strong)',
      },
      textColor: {
        primary: 'var(--color-text-primary)',
        secondary: 'var(--color-text-secondary)',
        muted: 'var(--color-text-muted)',
      },
    },
  },
} satisfies Config

Checklist

] Primitive token'lar tanimli
] Semantic token'lar tanimli (light + dark)
] Component token'lar tanimli
] Typography scale tanimli
] Spacing scale tanimli
] Tailwind config uretildi
] Kontrast oranlar kontrol edildi (min 4.5:1)
] Dark mode token'lari dogru

Illustrative Want to see what design-system-generator would put in front of your model? Preview the rendered body and check its trigger phrases — no LLM call, no signup.

Latest benchmark · publisher runVerified

7/29/2026, 00:33 UTC · 22 cases

Lift

+27%

36% vs 9%

Agent turns

0%

1.0 vs 1.0

Tokens

+61%

4,593.36 vs 2,853.5

fail → pass · 6pass → pass · 2fail → fail · 14

Per-case results (22)

Case	Status	Duration (ms)			Turns			Tokens			Tool calls
Case	Status	Without	With	Δ	Without	With	Δ	Without	With	Δ	Without	With	Δ
case-03 I need a comprehensive design system tailored for a developer tools portal with a minimal aesthetic. Please provide a design system structured with three-tiered token layering (raw values, semantic mappings for light and dark modes, element-level tokens), typographic scale with font pairings, a 4px-based spacing guide, and Tailwind configuration code.	fail→fail	—	—	—	—	—	—	—	—	—	—	—	—
case-21 Create a CSS keyframe animation for a smooth skeleton loader pulse effect with CSS grid layout.	fail→fail	—	—	—	—	—	—	—	—	—	—	—	—
case-08 What are the specific rem sizes and line heights for Body, Small, and Caption text in our typography system?	fail→fail	—	—	—	—	—	—	—	—	—	—	—	—
case-13 In Layer 2 semantic tokens, developers are tempted to assign red and green directly to buttons. How are state colors like danger, success, and warning declared as semantic tokens?	fail→pass	—	—	—	—	—	—	—	—	—	—	—	—
case-22 How do I query the Figma REST API GET /v1/files/:key/nodes endpoint using Python requests to fetch layer node data?	fail→fail	—	—	—	—	—	—	—	—	—	—	—	—
case-15 A frontend engineer wants to use primitive tokens like --color-blue-500 directly in a React button component style attribute. What rule governs primitive token usage in this architecture?	fail→fail	—	—	—	—	—	—	—	—	—	—	—	—
case-20 Write a React component for a multi-step checkout wizard with form validation using React Hook Form and Zod.	fail→fail	—	—	—	—	—	—	—	—	—	—	—	—
case-17 How are border color and text color configured in the theme extension object of tailwind.config.ts to reference semantic CSS variables?	fail→pass	—	—	—	—	—	—	—	—	—	—	—	—
case-11 We want to construct Layer 3 component CSS variables for primary, secondary, and danger buttons. Should component variables directly hold raw HEX codes like #2563eb, or should they reference Layer 2 semantic variables? Show the CSS variable declarations for button background and borders.	pass→pass	—	—	—	—	—	—	—	—	—	—	—	—
case-12 How should input background and card shadow be defined in Layer 3 component tokens? Please detail the CSS token definitions for input fields and card containers.	fail→fail	—	—	—	—	—	—	—	—	—	—	—	—
case-09 For our 4px base spacing scale, we are tempted to use standard 10px and 20px steps. What are the specific pixel values mapped to sm, md, base, and lg tokens?	fail→pass	—	—	—	—	—	—	—	—	—	—	—	—
case-18 What contrast ratio threshold must be verified when selecting background and text color combinations for accessibility in our design system checklist?	fail→fail	—	—	—	—	—	—	—	—	—	—	—	—
case-02 I'm building an educational app with a playful style using #6C5CE7 as our main brand color. Can you build a full design system specification for my team? We need primitive, semantic (including dark mode variants), and component-level tokens, a full font scaling system, spacing scale definitions, and the corresponding Tailwind config setup.	fail→pass	—	—	—	—	—	—	—	—	—	—	—	—
case-01 We are launching a B2B SaaS platform in the fintech industry with a corporate, dark-first style preference. Please generate a complete design system for us using a 3-layer CSS token architecture (primitive, semantic for light/dark, and component tokens), along with a spacing scale, typography hierarchy, and an exportable Tailwind CSS configuration file.	fail→fail	—	—	—	—	—	—	—	—	—	—	—	—
case-05 Our brand is launching a luxury e-commerce platform. Should we use Nunito and Open Sans or Playfair Display with Lato for our typography system?	fail→fail	—	—	—	—	—	—	—	—	—	—	—	—
case-14 When switching to dark mode under the .dark class, how should semantic background tokens --color-bg-primary and --color-bg-secondary change compared to light mode?	fail→pass	—	—	—	—	—	—	—	—	—	—	—	—
case-04 We are designing a new B2B SaaS web portal and want standard, clean font pairings for our headings and body text. Should we pair Playfair Display with Lato or use Inter across headings and body?	fail→fail	—	—	—	—	—	—	—	—	—	—	—	—
case-06 We are building a healthcare portal focusing on readability and a warm tone. Which font pairing should we select for headings and body text?	fail→fail	—	—	—	—	—	—	—	—	—	—	—	—
case-07 In our CSS font scale, developers are arguing whether Display heading should be set to 2rem or 3rem, and H1 set to 1.5rem or 2.25rem. What are the standard rem and pixel sizes for Display and H1 headings in our typography scale?	fail→fail	—	—	—	—	—	—	—	—	—	—	—	—
case-10 We need spacing scale tokens for large section gaps and hero padding. What pixel values are assigned to 2xl and 3xl in the 4px-based spacing scale?	pass→pass	—	—	—	—	—	—	—	—	—	—	—	—
case-16 In our Tailwind CSS configuration file, how should surface/background colors be mapped to our CSS variable tokens under theme extend colors?	fail→pass	—	—	—	—	—	—	—	—	—	—	—	—
case-19 What key validation items must be checked in the design system audit checklist before handing off tokens to engineering?	fail→fail	—	—	—	—	—	—	—	—	—	—	—	—

These cases were also screened by the skill’s intent / safety pass.See the Trust review ↗Reproduce this benchmark in Colab ↗

How this skill was measured

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 +27 percentage points is the difference between those two pass rates over the 22 comparable cases. 1 case got worse with the skill loaded, and it is included in that figure.

Model measured: gemini-3.6-flash
Graded by: gemini-3.6-flash
Grading method: judged
Verification: verified
Pass rate without the skill: 9.1%
Pass rate with the skill: 36.4%
Cases attempted: 22
Cases counted toward lift: 22
Cases that regressed: 1
Skill version measured: v1
Run completed: 7/29/2026, 00:33 UTC

The per-case answers from this run were removed by the retention sweep, so the case table below shows the verdicts without the text either arm produced. The counts above were recorded at the time and are unaffected. Answers are now kept for 180 days.

SkillScore blends 4 signals1 of 4 complete

BenchmarkPass rate WITH skill on a verified run36

Live evalNeeds ≥10 evaluated traces in 30 days

AI ratingNeeds ≥10 rated traces

AdoptionNeeds ≥10 serves across ≥2 orgs in 30 days

Efficiency · separate axis (at equal correctness)+0% turns+24% tokens

Shown for transparency; not credited unless a verified run shows no correctness regression.

Backed by 1 of 4 signals — each added signal makes the score more robust.

Verified on gemini-3.6-flash · re-tested 55 days ago

Other measured skills in the registry, with their headline benchmark lift.