---

name: design-system-assembler description: Query a curated catalog of styles, palettes, font pairings, and UX rules and assemble a stack-specific design system before any code is written. Use when working on design system assembler.

Design System Assembler

On project start, runs parallel searches across a design-intelligence database and returns a per-industry palette, type stack, spacing scale, and component patterns for React, Next.js, Tailwind, SwiftUI, or Flutter. Use to prevent generic AI slop when starting a project by grounding the visual language in real, curated references before Claude writes any UI.

What you get

• Palette plus font pairing
• tokens.json
• Component patterns doc
• Stack-specific implementation notes
• Light and dark defaults
• Sample hero for tone

Customize your output

• Framework: React, Next.js, Vue, SwiftUI, Flutter
• Industry: fintech, healthcare, consumer, dev-tools, agency
• Brand mood: editorial, playful, corporate, brutalist
• Light/dark defaults: light, dark, both
• Density: airy, balanced, dense
• Type stack override: yes, no

Example output

'A fintech dashboard project starts with a slate palette, Inter plus JetBrains pairing, 4-pt spacing, and Radix-style component recommendations.'

Best for

Design engineers, PM-designer hybrids.

---

Note: Depends on external catalog subscription. High confidence.

Source: Griffin Wooldridge · https://www.youtube.com/watch?v=iZl5vH81jZM Category: Design · Priority: P4