Skip to content

ds-prerequisite-for-ai-tools

Insight: At Dropbox, AI design tools (Figma Make, Cursor) counterintuitively expose design shortcuts rather than hide them. Detached components, skipped auto-layout, custom colors instead of tokens — all cause AI tools to produce inaccurate results. A well-maintained design system with proper token libraries is a prerequisite for AI tool adoption, not an optional improvement.

Detail: Clayton reports from Dropbox's experience: their design system team built an MCP server for their design system during a Hackweek that reads directly from the DS, making Cursor's output more realistic. However, generated code still isn't production-ready — one designer shipped Cursor-generated code only after engineer refactoring. Older products with technical debt integrate worse than newer products. The insight that "AI exposes design shortcuts" is particularly valuable: if your Figma files lack proper structure, AI tools will fail visibly, making the case for DS investment easier. Internal champions are critical for adoption — organizations willing to adapt quickly will arrive sooner at the designer-pushes-PRs workflow.

Sources

Related: existing entry "Making design systems AI-legible" in external/design-systems.md — CORROBORATES