The Tech Pulse

November 28, 2025•8 min read•
Tags ▼
No tags
•
Share ▼

I Built My Entire Design System in 4 Hours With AI. Full Tutorial (Claude + Cursor + Figma)

One Sentence Summary:

Building a comprehensive design system in code can be quick and efficient using AI tools like Claude, streamlining development.

Main Points:

  1. Teams take significantly less time when design systems are built in code.
  2. 62% of developers waste time rebuilding designs due to poor handoffs.
  3. The process involves creating a style guide directly from Figma components in TypeScript.
  4. Use Claude to generate style tokens, including colors, typography, and spacing, from Figma.
  5. Maintain a single source of truth by extracting design tokens into a central file.
  6. Build detailed component libraries with behavior, interactions, and usage examples.
  7. Use workflows and prompts to guide AI through analyzing, building, and documenting components.
  8. Generate interactive components with full variants and proper TypeScript integration.
  9. Document components thoroughly for developers and designers, ensuring consistency.
  10. Save project context and chats to track progress and facilitate updates.

Takeaways:

  1. Automating design-to-code conversion saves time and reduces manual errors.
  2. Structuring prompts and workflows ensures AI produces consistent, high-quality components.
  3. Building a style guide from Figma accelerates establishing a solid design foundation.
  4. Thorough documentation helps maintain design consistency across teams.
  5. Regularly updating and saving project context keeps development aligned with design changes.

Summary

This transcript shows a repeatable workflow for turning a Figma design system into a code-based design system (tokens + components + screens) using Claude with a Figma MCP connection, producing a single source of truth in TypeScript (e.g., style tokens.ts), then generating components (e.g., a KPI/Metric Card) and assembling them into a feature screen, with documentation files per component and a persistent project log saved to project_context.md.

Main problem addressed: broken handoffs between Figma and code causing repeated rebuilds, inconsistent UI, and slow shipping.

Primary tools/tech: Figma, Claude / Claude Code, Figma MCP, TypeScript, design tokens (colors, typography, spacing, borders), component library + documentation.

Detailed Step-by-Step Breakdown

1) Establish the design foundation by generating code tokens from Figma

  1. Open Claude.
  2. Start a new Claude chat dedicated to the design system foundation.
    • Implementation rule from transcript: one chat per feature / project slice to keep context clean.
  3. Prompt Claude to create the style guide and tokens file:
    • Create style guide
    • Name the tokens file style tokens.ts
    • Include:
      • All color variables
      • Typography
      • Spacing
      • Borders
    • Create a style guide page
    • Extract values from the MCP connection (pull directly from Figma MCP)

Expected output artifacts:

  • style tokens.ts containing codified tokens in TypeScript
  • A style guide page/section including:
    • Foundations
    • Colors
    • Typography
    • Icons
    • Basic usage recommendations
  • Resulting principle: tokens become the single source of truth for all UI styling.

2) Build the component library from Figma specs (example: KPI / Metric Card)

  1. Use an existing or new component library structure (the speaker already started compiling one).
  2. Create a “workflow prompt” that forces Claude to execute in phases before writing UI code.

Workflow phases (as described):

  1. Initialize / setup / analysis
    • Look at the Figma file
  2. Analyze and extract component data
    • Extract:
      • hover states
      • interactions
      • behavior rules
  3. Follow specifications
    • Visual specifications
    • Behavioral specifications
  4. Implement
    • Create the fully interactive component
    • Add proper TypeScript
    • Include all variants
    • Create a preview
    • Apply design tokens
    • Ensure preview uses the required preview property (transcript mentions preview repeatedly; exact framework not named)
  5. Documentation generation
    • Create a .txt file per component
    • Include rules/specs/tokens used
  6. Output structure
    • Add component to the component page in an additional tab
  7. Provide execution order and “Go”
  8. Run the prompt; Claude produces a task list and checks off each stage.
  9. Review the generated component (example path mentioned conceptually):
    • Navigate to metric card / KPI card
  10. Confirm fidelity:
    • “Matches Figma perfectly” (speaker claim)
  11. Confirm docs exist:
    • A documentation .txt that includes:
      • tokens used
      • build details
      • how devs/designers should use/update it
  12. Apply change management rule:
    • Update the token file and component when the design changes → changes propagate everywhere the component is used.

3) Assemble a real feature screen using the components

  1. Start a new Claude chat window for the screen feature.
  2. Paste a prompt similar to the component workflow prompt, but oriented to screen composition.

Screen workflow requirements (as described):

  • Initiate → analyze → generate screen specs
  • Follow exact Figma implementation
  • Create preview
  • Follow design tokens (explicit requirement)
  • Ensure layout adheres to existing platform components
  1. Run prompt; Claude generates to-do list and completes tasks.
  2. Test the resulting UI.
  3. Fix issues found in first draft:
    • Example: spacing issues
    • Example adjustment: set spacing to 16pt (speaker specifically mentions “it should be 16 point” and fixes it)
  4. Re-test to confirm it matches the Figma design.

4) Persist work across chats: save project context to a markdown log

  1. In each chat, after completing work, prompt Claude:
    • “save this chat record to project_context.md”
  2. Claude appends a session log:
    • includes session number
    • includes date
    • includes summary of what happened in that chat
  3. Repeat this for every chat window to build a durable project record.

Suggested learning order (explicit):

  1. Build your style guide first
  2. Build one component
  3. Build one feature
  4. Keep notes/logs in notes.md (explicitly recommended)

Key Technical Details

Implementation artifacts explicitly named

  • style tokens.ts — TypeScript tokens file for:
    • colors
    • typography
    • spacing
    • borders
  • Component documentation .txt — per component spec + usage + tokens used
  • project_context.md — persistent log of chat sessions (session/date/summary)
  • notes.md — recommended additional notes file

Core integration point

  • Figma MCP connection (MCP) used to:
    • extract token values
    • extract component interaction specs (hover states, behavior)

Workflow enforcement technique

  • Use a highly structured “workflow prompt” so Claude must:
    • analyze first
    • extract from MCP
    • implement only after specs are confirmed
    • generate docs
    • update file structure + previews

Roles & usage pattern

  • Designers + devs share the same codified system:
    • update tokens / components
    • propagate changes across product usage

Pro Tips

  • Use one Claude chat per feature/component to preserve clean context and reduce accidental cross-contamination of requirements.
  • Force determinism by requiring Claude to produce a task list and mark each stage complete before it writes code.
  • Always include “extract from MCP” language so the model doesn’t hallucinate values instead of pulling them from Figma.
  • Treat tokens as the only allowed styling source:
    • forbid ad-hoc hex values / spacing constants outside style tokens.ts
  • Generate per-component .txt specs so:
    • devs can reuse components consistently
    • designers can verify behavior
    • updates are traceable
  • Always do a quick “first draft QA” pass:
    • spacing/layout issues are common → fix quickly (example: spacing should be 16pt)
  • Persist work with project_context.md session logs so you can reconstruct decisions later.

Potential Limitations/Warnings

  • The transcript does not specify:
    • the exact MCP implementation (server config, auth, scopes)
    • the target UI framework (React, Next.js, etc.)
    • the preview system (“preview property” is mentioned but not tied to a named platform)
  • “Matches Figma perfectly” can fail in practice due to:
    • font rendering differences
    • layout constraints/responsiveness
    • missing interaction details if MCP extraction is incomplete
  • Token naming and versioning strategy is not covered; without it you risk:
    • breaking changes across components
    • inconsistent token usage over time

Assumption: Standard/Typical Setup (not specified in transcript)

  • A TypeScript front-end codebase exists (likely component-based)
  • A working Figma MCP connection is already set up and authorized
  • A component library structure exists with:
    • /tokens/ or similar for style tokens.ts
    • /components/MetricCard/ (or similar)
    • /docs/ or per-component docs folder for .txt
    • /pages/ or /screens/ for screen composition

Recommended Follow-Up Resources

  • MCP (Model Context Protocol) documentation for your Claude + Figma connector setup (auth, capabilities, extraction formats).
  • A concrete token standard to keep things consistent:
    • Design Tokens Community Group (W3C) design token format concepts (naming, modes, semantics).
  • A component documentation format upgrade (beyond .txt):
    • MDX docs or Storybook docs pages tied to token usage and variants.
  • Add automated enforcement:
    • lint rules to prevent raw colors/spacing outside style tokens.ts
    • visual regression testing to catch “spacing drift” from Figma specs

If you paste your actual generated style tokens.ts and one component output, I can rewrite them into a stricter, production-ready structure (token naming, typing, modes/themes, and a reusable component/docs template) without adding any assumptions beyond what’s in your files.

Related reading

Get New Posts

Follow on your preferred channel for new articles, notes, and experiments.