AI for Design Systems: Manual Basics, AI for Complex

AI's Limitations for Basic Components and Full Systems

AI tools like Claude Design and Google Stitch generate basic design systems quickly in demos, but they fall short in production. Google Stitch creates simple palettes, fonts, and corner radii, but lacks the 200+ components (including atoms) needed for complex systems. Claude Design built a button component with variants (primary/secondary/tertiary/ghost/destructive/success, sizes small/medium/large, icon/label states) in 11 minutes—far slower than a designer's 1.5 minutes manually. Pushing to Figma via Claude Code and Figma MCP added another 9 minutes, yielding components with issues: icons misaligned in small sizes, no hug contents applied, raw hex codes instead of variables.

For slightly complex menus (with atom components like menu list items, checkboxes, radios), it took 8-9 minutes in Claude Code, totaling 30 minutes for buttons + menus. Outputs required rework: fixing fill/hug constraints, combining variants into one group, auditing for style connections. No integration with existing tokens or components—AI builds from scratch, doubling time when adapting to your system. Token burn is high (28% usage after one session on Claude 3.5 Sonnet Max plan), and costs scale poorly, as seen with Uber exhausting AI budgets in 3-4 months.

"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 quote from the speaker underscores the hype trap: clickbait claims of "AI-built design systems in 5 minutes" deliver non-scalable basics, not production-ready systems tailored to your brand.

Tradeoffs are stark: AI saves ideation time but wastes hours on polishing simples. Manual building fundamentals ensures efficiency; AI can't replace brand-specific decisions or roadmap foresight.

Why Skip AI for Design Tokens and Variables

No two design systems match—even competitors differ in tokens/variables. AI-generated JSON for Figma (via Cursor/Claude/Token Studio) fails: aliases don't link properly, missing tokens emerge per component, tweaks break everything. Uploading revised JSON cascades errors, trapping users in iteration loops (2-3 hours manual setup vs. 10+ fixing AI).

Speaker ignores emails like "AI gave me variables—what's missing?" because AI lacks your brand, components, and future needs. "AI doesn't know your brand. AI doesn't know all the components that you need. AI doesn't know the properties that you need. AI doesn't know the designs that you have in your road map for the future."

Decision: Manually build tokens/variables (2-3 hours via free tutorials). This foundational step—mapped collections for colors/spacing/typography—prevents downstream chaos. AI excels post-setup for complex work, not origins.

Optimized Workflow: Train AI on Your System for Complex Outputs

Start with pre-built basics: buttons, fields, labels, inputs, links, breadcrumbs, navigation/data display (use free resources like speaker's 3.5-hour video). With Figma variables/tokens ready, train Claude:

Token Training: Feed JSON export of tokens to Claude Projects/Skills. Prompt to reference them strictly (e.g., use --color-primary not hex). Generates modals/cards/layouts faster, outputs use your palette.
Component Training: Upload existing components/docs to Claude Skills (e.g., Figma Use Skills zip from GitHub, Apply/Audit Design System skills). Builds extensions like complex modals (with atoms) in minutes, inheriting structure.
Full Pipeline: Claude Design → Claude Code → Figma MCP push. Review/audit in Figma (e.g., combine variants, fix constraints). Use Mobbin for research (20% off via link), Claude Code for HTML/CSS previews.

Results: Complex menu/checkbox/radio atoms properly structured; modals ready for system contribution after light polish. Speaker's team ships AI-assisted modals/layouts to client systems. For ideation/UI gen/system thinking/refinement, structured prompts (variants, sizes, states) yield shippable work.

"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." Context: After 30-min button/menu demo, emphasizes ROI—AI for juniors or blanks, not pros with foundations.

Limitations persist: Claude Design underused due to quotas; better outputs need explicit prompting (e.g., atom breakdowns). Still requires manual audit, but 5x faster for non-basics.

Research and Iteration Boosts

Mobbin for component research (real-world examples). Claude audits systems: flags inconsistencies in variants/properties. Google Stitch for quick palettes (not full systems). Evolve: v1 raw AI → v2 token-trained → current: skill-augmented pushes.

"Just because AI can do it doesn't mean it's a good workflow for you to use on a day-to-day basis." Highlights non-obvious: AI shifts roles—designers audit/extend, not build from zero. Replicable: Free Figma skills GitHub, 2-3 hour basics setup unlocks 10x complex speed.

Key Takeaways

Manually build basics (buttons, inputs) and tokens/variables (2-3 hours)—AI rework exceeds this time.
Train Claude on your JSON tokens/components via Projects/Skills for consistent, brand-aligned outputs.
Use Figma MCP + skills (upload GitHub zips) to push AI designs directly; audit constraints/variants.
Reserve AI for complex (modals/cards/200+ components)—saves hours vs. manual, minimal polish.
Track token/cost burn; Pro/Max plans needed for heavy use, but ROI only post-foundations.
Research via Mobbin; prompt explicitly (variants, atoms, states) for 80% ready outputs.
Avoid full AI systems: Tailoring to brand/roadmap requires human foresight.
Setup once: Free videos for variables/components supercharge iteration.