Building a design system in 4 hours with AI — The Design Project talk

What the video covers

Dianne Alter from The Design Project walks through a complete workflow for turning a Figma design system into production-ready code in a single afternoon, using Claude Code and Cursor. The tutorial covers style guide extraction, component analysis, code generation, and a documentation approach using notes.md files. Alter draws on experience working with over 50 B2B SaaS product teams and provides exact prompts and workflow steps.

Who it’s for

Design engineers, front-end developers, and product team leads at B2B SaaS companies who want to establish a coded design system quickly. The workflow assumes existing Figma components and targets teams that have been blocked by the months-long timeline traditionally required to build a component library in code.

Key takeaways

1. Start with style guide extraction, not component code. The workflow begins by having AI analyze the Figma file’s design tokens — colors, spacing, typography, border radius — and create a style guide document. This foundational step ensures that all subsequent components follow the same visual language.

2. Component specs matter more than raw code generation. Rather than asking AI to “build a button component,” the workflow generates detailed specifications first — what states exist, what accessibility requirements apply, what variants are needed. The specification document then guides code generation with much higher accuracy.

3. Notes.md creates a living workflow log. Alter uses a notes.md file as an ongoing record of decisions, component status, and AI-generated observations. This documentation step, often skipped, proves valuable when reviewing what was generated and why.

4. Start with one component, build one feature, then expand. The recommended approach avoids generating all components at once. Instead, you build a single component, use it in an actual feature, verify it works in context, and then continue. This catches integration problems early.

5. The time savings are real but conditional. Alter reports 2-3x speed improvements in teams that follow this workflow. However, the gains depend on having a well-organized Figma file with consistent component structures. Messy design files produce messy code.

Worth watching if…

You have Figma components ready and want a step-by-step process for turning them into a coded component library in a day rather than a quarter, using Claude Code and Cursor.