Introduction & Your First AI-Generated Component
Session 1: Introduction & Your First AI-Generated Component
Duration: 2 hours
Prerequisites: None
You'll need: A laptop, internet connection
Part 1: Course Introduction (30 min)
The Problem You've Always Had
You know exactly how something should look and feel. You've built the design system. You've defined the tokens. You've documented the patterns.
And then you hand it off, wait, get something back that's not quite right, give feedback, wait again. The iteration cycle is slow. Sometimes your intent gets lost in translation.
You've probably tried AI tools. They generate code fast—but it's generic. It ignores your tokens. It uses the wrong components. It looks like every other AI-generated thing. You end up spending more time fixing the output than you saved.
The core problem: AI couldn't consume your design system.
What Changed
That problem is solved.
Claude Code can now read your Figma files directly through MCP (Model Context Protocol). It sees your component hierarchy, your variants, your constraints—not just a screenshot. Combined with simple markdown documentation of your tokens and patterns, Claude generates code that actually uses your system.
Your years of design system work just became a competitive advantage. The more rigorous your Figma structure, the better Claude's output.
What is a "Shipping AI Designer"?
A designer who can execute their own designs to production.
You're not becoming a developer. You're not learning to code. You're gaining a colleague who can implement what you design—using your components, your tokens, your patterns.
End state: Figma design → production pull request in under an hour.
The Two Paths to Production
Path 1: Figma → Claude
You design in Figma. Claude fetches your design via MCP. Claude implements it.
When to use it:
- You're exploring layouts
- The design is complex and visual
- You're working on something new
- You need to "draw to think"
This path leverages everything you already know.
Path 2: Prompt → Browser
You describe the change. Claude implements it. You verify in browser.
When to use it:
- Quick refinements: "More padding here"
- Logic and behavior: "Show error state when invalid"
- Content changes: "Update this headline"
- Polish: "Make the hover more subtle"
The 70/30 Principle: About 70% of iterations happen via prompts, 30% benefit from going back to Figma. You'll develop an instinct for which path to take.
Why Claude Code? (Not Figma Make)
Figma Make generates React code. It's fast. It produces working prototypes.
But the output is a .zip file. To use it in production:
- Copy code into your project
- Replace Make's components with your actual components
- Convert hardcoded colors to your tokens
- Adjust to match your conventions
This integration gap is where AI-generated code has always died.
Claude Code is different. It writes directly into your codebase. It reads your existing components. It uses your CSS variables. When you say "create a card," it generates a card using your <Button>, your --color-primary, your file structure.
Figma Make: "What should this look like as code?"
Claude Code: "How should this integrate with your codebase?"
Key Principles
1. Figma Stays Your Design Tool
You're adding a path to production, not replacing Figma. Your Figma expertise is more valuable now—a well-structured file translates directly to well-structured code.
2. You Never Review Code
You review what's in the browser. Does it look right? Does it match your design? If not, describe what you see. Claude fixes it.
3. The 70/30 Principle
Prompt when you can describe it in one sentence. Go to Figma when you need to see options.
4. Iteration IS the Design Work
The first output is a starting point. The design work happens in refinement—turning generic into distinctly yours.
Part 2: Meet Leigher (20 min)
Throughout this course, you'll work with Leigher—a production codebase, not a sandbox.
What is Leigher?
An AI-powered personalization platform. It helps businesses define "if visitor is X, show them Y" rules visually.
Example: A hotel chain showing different content to business travelers vs. families vs. couples.
Tech Stack
| Layer | Technology | |-------|------------| | Frontend | React 19 + Vite | | Backend | Cloudflare Workers | | Hosting | Cloudflare Pages |
Claude generates React components. The patterns apply to most modern web projects.
Why Leigher Works for This Course
Leigher has what every project needs for this workflow:
- Figma MCP connected — Claude can read the designs directly
- Design tokens documented — Claude knows the color, spacing, and typography values
- Component patterns documented — Claude knows how cards, buttons, and modals work here
- Anti-slop rules defined — Claude knows what to never do
- Product specs documented — Features have requirements and acceptance criteria
You've likely already done this work on your own projects. The tokens exist in your Figma variables. The patterns exist in your component library. The difference is that now this information is formatted so Claude can consume it.
Sessions 3-5 teach you how to set this up for any project.
The Spec-First Workflow
Real features don't start from thin air. They start from specs—documented requirements that describe what to build and how to verify it's right.
Leigher has a docs/spec/ folder with:
- Feature specs — Requirements, UI/UX decisions, acceptance criteria
- User journeys — End-to-end flows across features
These specs exist in two formats:
- Markdown files — The source of truth. Claude reads these.
- HTML artifact — A browsable version for stakeholders and quick reference.
In Session 9, you'll learn to work with specs: read them, have Claude reference them, and verify your work against acceptance criteria.
Part 3: The Wow Moment (60 min)
Demo: Path 1 (Figma → Claude)
Watch as the instructor demonstrates:
Scenario: New segment card component needed.
-
Figma file open — The segment card design: icon, title, description, signal tags, usage count.
-
Prompt: "Implement the segment card from Figma. Match our existing card patterns."
-
Claude works — Reads Figma via MCP. Generates React component. Uses existing tokens.
-
Browser — Component appears, styled correctly.
Time: ~5 minutes from design to working component.
Demo: Path 2 (Prompt → Browser)
Scenario: Refinements needed.
-
Review — Card is good, but needs more breathing room below description, tags should wrap on mobile, add hover state.
-
Prompt: "Add 8px more padding below the description. Make tags wrap on small screens. Add a hover state that elevates the card slightly."
-
Claude refines — Targeted edits to existing component.
-
Verify — Changes appear in browser.
Time: ~2 minutes per refinement.
What Made This Work
Claude didn't guess. It read:
- Your Figma design (structure, hierarchy)
- The project documentation (conventions, rules)
- The token definitions (actual values to use)
- The pattern documentation (how components work here)
Your design system—already in Figma and your head—is now in a format Claude can consume.
Your Turn: First Conversation
You don't have a full setup yet. But let's establish that Claude Code is just conversation.
Exercise 1: Explore a Project
Prompt:
Look at this project structure. What kind of project is this?
What are the main parts? Where would I find the UI components?
Claude describes the project in plain language.
Exercise 2: Find the Design Decisions
Prompt:
Find any documentation about design tokens or visual styling.
Summarize the design decisions that have been made.
This shows how Claude surfaces existing design system information.
Exercise 3: Understand a Component
Prompt:
Show me how the card component works in this project.
What patterns does it follow?
Claude explains existing components—useful when understanding any codebase.
Part 4: Wrap-up (10 min)
What You Learned
-
The breakthrough — AI can now consume your design system. Your Figma work translates directly.
-
Two paths — Figma → Claude for exploration. Prompt → Browser for refinement.
-
Why Claude Code — No integration gap. Uses your components, your tokens, your conventions.
-
Leigher — The production project you'll ship real features to.
What's Next
Session 2: Setting Up Your AI Workspace
Install Claude Code, connect Figma MCP, clone the Leigher repo.
Optional Preparation
- Create a Claude account at claude.ai
- Review Leigher's Figma file (link from instructor)
- Watch: Meaghan Choi: From Design to Code
Session 1 Checklist
- [ ] Understand the breakthrough: AI can now consume design systems
- [ ] Know when to use Figma → Claude vs. Prompt → Browser
- [ ] Understand why Claude Code beats Figma Make for production
- [ ] Had at least one conversation with Claude Code
Session 1 of 10 • The Shipping AI Designer Course
Next: Session 2 — Setting Up Your AI Workspace