AI Excels at Complex Design Components, Not Basics

AI's Limitations for Building Full Design Systems

Every design system is unique to a company's needs, brand, and roadmap—AI can't generate a complete one from a single prompt. Tools like Google Stitch produce basic palettes, fonts, and corner radii, but real systems require 200+ components, atom-level primitives, variables, and tokens tailored to specific use cases. Claude Design generates a decent button with variants (primary, secondary, destructive, sizes small/medium/large, icon placements) in 11 minutes, but scaling to complex elements like menus (with sub-components like menu list items, checkboxes, radios) takes even longer—8:53 minutes just for code generation before Figma push. Total for two simple components: 30 minutes, plus manual fixes for hug/fill constraints, variant grouping, and raw hex codes instead of variables.

"Right away if you're expecting one magical prompt to be able to build you an entire design system complete with uh variables, text styles, uh tokens, basic components, more advanced components. We're not there yet." This sets the core problem: hype around 'AI-built design systems in 5 minutes' is clickbait, ignoring the bespoke nature of production systems.

Tradeoffs are stark—time inefficiency (a experienced designer builds buttons in 1.5 minutes), token burn (28% of Claude Design quota after one session on Pro Max plan), and rework (components not linked to existing styles or trees). Uber reportedly exhausted its AI budget in 3-4 months; solo designers face similar scaling costs.

High Costs of AI for Basic Components Make Manual Builds Smarter

Pushing Claude Design outputs to Figma via Claude Code + Figma MCP (connectors for Claude-Figma integration) and custom skills (apply-design-system.md, audit-design-system.md from GitHub) works, but for buttons: 9 minutes to generate variants with properties, yet icons misalign on small sizes, hug contents fail on long text. Menus look solid (menu items with checkbox/radio variants) but need rework for unified variant sets and fill constraints.

Decision chain: Evaluated direct Claude Design (visual but slow), Claude Code alone (needs more prompting), full pipeline (MCP + skills). Rejected for basics because AI builds on blank canvas, ignoring existing systems—doubling time/tokens when connecting tokens. Better: Manually craft buttons, inputs, labels, links, breadcrumbs (starter set), using free resources like the speaker's 3.5-hour YouTube tutorial.

"This took 11 minutes on the dot to build. And this is just a button component. This is the easy of easy components." Highlights why basics aren't worth it—AI outputs require junior-designer-level cleanup, but pros do it faster without tools.

Essential Prep: Manual Tokens and Starter Components Unlock AI Value

No two design systems share identical Figma variables/tokens, even in the same industry—AI-generated JSON (via Cursor/Claude/Token Studio) fails because it misses aliases, future components, or brand specifics. Uploading breaks on iterations; speaker ignores emails like "AI gave me variables, what's missing?" since AI lacks context.

Right approach: Spend 2-3 hours manually building tokens (mapped collections in Figma variables) and basics. Then train AI: Upload token JSON/CSS to Claude, create custom skills (e.g., Claude Skill for tokens/components). Speaker's workflow uses academy design system (forms, nav, data display) as base.

"Just because AI is able to generate a JSON file for you doesn't mean that it's going to that it should replace the manual work involved to build out your design tokens to build out your Figma variables." Emphasizes human judgment for completeness.

Optimized Workflow for Complex, Ship-Ready Components

With prep, AI shines for modals, cards, layouts taking hours manually. Steps:

Research via Mobbin (UI pattern library, 20% off via link).
Prompt Claude Code with tokens/components uploaded, e.g., "Build modal using our design system variables, atom components."
Generate, review in Claude, push to Figma via MCP/skills.
Audit/refine with skills; outputs now use variables, attach to trees.

Results: Components like modals contribute directly to client systems (speaker's team builds for living via designsystemlabs.co). Claude Design better visuals than Code, but combine for efficiency. Evolution: From raw generations (failures) to trained skills (production-ready). Non-obvious: Train separate skills for tokens vs. components; explicit variant/property specs cut rework.

"Don't have it build your button and basic components because the time it takes and the tokens that it burns through are simply not worth the results." Core opinion—fundamentals require designer knowledge jobs still demand.

Speaker demos training: Upload token file, prompt "Use these tokens for all outputs"; review skill generates consistent palettes. Component skill pulls from existing Figma file, builds extensions like complex menus.

Limitations persist: Claude Design quotas fill fast; no full-system automation soon. Pivot to research (Mobbin for patterns), ideation, auditing existing systems.

Key Takeaways

Manually build Figma variables/tokens and basic components (buttons, inputs) first—2-3 hours beats AI's 10+ hours of fixes.
Use Claude Design for visuals, Claude Code + Figma MCP/skills for Figma pushes; upload JSON/CSS to train on your system.
Target complex elements (modals, cards, menus with atoms)—they ship after light audit, saving hours.
Track token costs: Simple button burns 28% quota; scale back like Uber if unchecked.
Research patterns on Mobbin before prompting; explicit specs (variants, sizes, states) reduce rework 50%+.
Create custom Claude Skills for tokens/components/audits—reusable across projects.
Avoid JSON token generators; they break on iterations without full context.
Start with starter kits (speaker's free video/resources) to supercharge AI.
AI augments, doesn't replace design system designers—jobs need fundamentals.
Test outputs rigorously: Constraints (hug/fill), variable links, variant logic.