P16 the design to code converter multimodal ai

Project 16: “The Design to Code Converter” — Multimodal AI

Attribute	Value
File	`KIRO_CLI_LEARNING_PROJECTS.md`
Main Programming Language	CSS / React
Coolness Level	Level 5: Pure Magic
Difficulty	Level 2: Intermediate
Knowledge Area	Multimodal AI

What you’ll build: Convert a hand-drawn layout into Tailwind CSS.

Why it teaches Vision: You learn how precise you must be when using sketches.

Success criteria:

The rendered UI matches the sketch’s layout hierarchy.

Real World Outcome

You’ll upload a hand-drawn wireframe (photo or sketch) to Kiro and get back production-ready Tailwind CSS that matches the layout. This demonstrates multimodal AI’s ability to understand visual design and translate it to code.

1. The Sketch (hand-drawn wireframe):

┌─────────────────────────────────────┐
│  [Logo]        Nav  Links  Button   │
├─────────────────────────────────────┤
│                                     │
│         Hero Title Here             │
│         Subtitle text               │
│         [CTA Button]                │
│                                     │
├─────────────────────────────────────┤
│  ┌────────┐  ┌────────┐  ┌────────┐│
│  │ Card 1 │  │ Card 2 │  │ Card 3 ││
│  │  Icon  │  │  Icon  │  │  Icon  ││
│  │  Text  │  │  Text  │  │  Text  ││
│  └────────┘  └────────┘  └────────┘│
└─────────────────────────────────────┘

2. Kiro CLI Session:

$ kiro
You: [Attach image: wireframe.jpg]

Convert this wireframe into a React component with Tailwind CSS. Make it responsive.

Kiro: I can see your wireframe showing:
- A header with logo, navigation links, and a button
- A hero section with centered title, subtitle, and CTA button
- A three-column card layout with icons and text

Let me create the React component:

[Writes file: src/components/LandingPage.tsx]

3. Generated Code:

src/components/LandingPage.tsx:

export default function LandingPage() {
  return (
    <div className="min-h-screen bg-white">
      {/* Header */}
      <header className="border-b border-gray-200">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-16">
            <div className="text-2xl font-bold text-gray-900">Logo</div>
            <nav className="hidden md:flex space-x-8">
              <a href="#" className="text-gray-700 hover:text-gray-900">Features</a>
              <a href="#" className="text-gray-700 hover:text-gray-900">Pricing</a>
              <a href="#" className="text-gray-700 hover:text-gray-900">About</a>
            </nav>
            <button className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">
              Sign Up
            </button>
          </div>
        </div>
      </header>

      {/* Hero Section */}
      <section className="py-20 px-4">
        <div className="max-w-4xl mx-auto text-center">
          <h1 className="text-5xl font-bold text-gray-900 mb-4">
            Hero Title Here
          </h1>
          <p className="text-xl text-gray-600 mb-8">
            Subtitle text that explains the value proposition
          </p>
          <button className="bg-blue-600 text-white px-8 py-3 rounded-lg text-lg hover:bg-blue-700">
            Call to Action
          </button>
        </div>
      </section>

      {/* Three Cards */}
      <section className="py-16 px-4 bg-gray-50">
        <div className="max-w-7xl mx-auto">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {[1, 2, 3].map((i) => (
              <div key={i} className="bg-white p-6 rounded-lg shadow-sm text-center">
                <div className="w-16 h-16 bg-blue-100 rounded-full mx-auto mb-4 flex items-center justify-center">
                  <span className="text-2xl">🎯</span>
                </div>
                <h3 className="text-xl font-semibold mb-2">Card {i}</h3>
                <p className="text-gray-600">
                  Description text for this feature or benefit
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

4. Rendered Result: When you run npm run dev and view the page, you see:

Pixel-perfect match to the wireframe layout
Responsive design (collapses to mobile on small screens)
Hover states on buttons and links
Proper spacing and typography matching the sketch’s visual hierarchy

What you’re seeing:

Vision understanding - Kiro interprets hand-drawn boxes as layout sections
Semantic HTML - Proper use of header/section/nav tags
Responsive grid - Cards stack on mobile, side-by-side on desktop
Design system - Consistent spacing, colors, and typography
Production-ready code - Not just a prototype, but deployable components

This is the same technology behind tools like v0.dev, Galileo AI, and Figma-to-code plugins.

The Core Question You’re Answering

“Can AI understand visual design intent from rough sketches and translate it to production code?”

Think about the traditional design-to-code workflow:

Designer creates wireframe in Figma
Developer interprets the design
Developer writes HTML/CSS (hours of work)
Back-and-forth to fix spacing, colors, responsiveness
Repeat for every screen

With multimodal AI, you can:

Sketch on paper → photo → code in minutes
Iterate designs without opening Figma
Prototype faster than traditional design tools
Bridge the designer-developer communication gap

This project teaches you:

How vision models parse layouts - Understanding hierarchy from visual cues
Prompt engineering for design - How to describe design intent clearly
Multimodal context - Combining images with text instructions
Design token extraction - How AI infers spacing, colors, and typography
Limitations of vision - Where it struggles (fine details, exact measurements)

By the end, you’ll know when to use AI for design-to-code and when traditional tools are better.

Concepts You Must Understand First

Stop and research these before coding:

Tailwind CSS Utility Classes
- What’s the difference between px-4 and p-4?
- How does Tailwind’s responsive system work? (sm:, md:, lg:)
- What’s the purpose of utility-first CSS vs traditional CSS?
- How do you compose complex layouts with just utility classes?
- Book Reference: “Refactoring UI” by Adam Wathan - All chapters
Layout Hierarchy Recognition
- How do designers communicate hierarchy visually? (size, spacing, weight)
- What’s the difference between a card, section, and container?
- How do you represent visual grouping in HTML structure?
- Why does semantic HTML matter for layout interpretation?
- Book Reference: “Don’t Make Me Think” by Steve Krug - Ch. 3-4
Responsive Design Principles
- What’s mobile-first design?
- How do you handle different screen sizes without media queries?
- What’s the difference between fluid and fixed layouts?
- How do you test responsive designs efficiently?
- Book Reference: “Responsive Web Design” by Ethan Marcotte - Ch. 1-2
Vision Model Capabilities
- How do vision models understand spatial relationships?
- What’s the difference between image classification and layout analysis?
- Why might a model misinterpret hand-drawn sketches?
- How do you improve vision model accuracy with prompts?
- Blog: OpenAI GPT-4 Vision System Card (2023)

Questions to Guide Your Design

Before implementing, think through these:

Sketch Quality
- How detailed should the sketch be? (low-fidelity vs high-fidelity)
- Should you annotate the sketch with labels? (“Header”, “Hero”, etc.)
- Does the sketch need to show exact measurements or just proportions?
- How do you communicate color intent in a black-and-white sketch?
Code Generation Strategy
- Should Kiro generate a single component or split into multiple files?
- How do you handle repeated elements (cards, buttons)?
- Should the code include placeholder content or real text?
- Do you want inline Tailwind classes or a component library?
Responsive Behavior
- Should the layout stack vertically on mobile or stay horizontal?
- Where should breakpoints be? (Tailwind defaults or custom?)
- How do you communicate responsive behavior in a static sketch?
- Should text sizes scale or stay fixed?
Iteration Workflow
- If the output doesn’t match, do you refine the sketch or the prompt?
- How do you provide feedback to Kiro? (Screenshot comparison?)
- Should you iterate on the same component or generate multiple variations?
- How do you version control design iterations?

Thinking Exercise

Analyze What Makes a Good Design Sketch for AI

Before uploading a sketch, think about what information the AI needs:

Good Sketch (High Success Rate):

Clear boxes with labels (“Header”, “Hero Section”, “Card Grid”)
Arrows showing hierarchy or flow
Annotations for interactive elements (“Button”, “Link”)
Relative sizing (big title vs small subtitle)
Grouping indicators (dotted lines around related elements)

Bad Sketch (Likely to Fail):

Ambiguous shapes (is this a button or a text box?)
No labels or context
Inconsistent spacing that doesn’t reflect intent
Missing sections (no header drawn, but you want one)
Too much fine detail that obscures structure

Questions while sketching:

If I showed this to a junior developer, could they build it?
Does the hierarchy (title > subtitle > body) come through visually?
Are interactive elements obvious? (buttons, links, forms)
Does spacing communicate grouping? (related items close together)

The Interview Questions They’ll Ask

Prepare to answer these:

“How does a vision model understand the difference between a button and a text label in a wireframe?”
“If the AI generates a layout that’s close but not quite right, how do you refine it? Walk me through your iteration process.”
“Compare design-to-code AI tools (v0.dev, Galileo) to traditional Figma-to-React plugins. What are the tradeoffs?”
“How would you handle complex interactions (hover states, animations) that aren’t visible in a static wireframe?”
“Describe a scenario where AI design-to-code would fail. How do you know when to use traditional methods?”
“If you wanted to enforce a design system (specific colors, spacing, components), how would you instruct the AI?”

Hints in Layers

Hint 1: Starting Point Draw a simple wireframe on paper or use a tool like Excalidraw. Focus on boxes and labels, not pixel-perfect design. Take a clear photo or screenshot.

Hint 2: The Prompt Upload the image to Kiro and provide context:

You: [Attach: wireframe.jpg]

Convert this wireframe into a React component using Tailwind CSS. The layout should be:
- Responsive (mobile-first)
- Use semantic HTML
- Include hover states on interactive elements

Hint 3: Refining the Output If the result doesn’t match, provide specific feedback:

You: The cards should be in a grid, not stacked. Also, make the hero title larger and the button more prominent.

Kiro will regenerate with adjustments.

Hint 4: Handling Ambiguity If your sketch is ambiguous, Kiro might ask clarifying questions:

Kiro: I see three boxes in your sketch. Should these be:
Image cards with captions?
Feature blocks with icons?
Call-to-action cards with buttons?

Provide clear direction to avoid wrong assumptions.

Hint 5: Extracting Reusable Components After generating code, ask Kiro to refactor:

You: Extract the card component into a reusable component that accepts title, icon, and description as props.

This produces a component library from the initial sketch.

Hint 6: Testing Responsiveness Ask Kiro to show you how it looks at different screen sizes:

You: Show me how this layout would look on mobile (375px) vs desktop (1440px).

Kiro can describe or generate screenshots for visual verification.

Books That Will Help

Topic	Book	Chapter
Tailwind CSS Patterns	“Refactoring UI” by Adam Wathan	All chapters
Layout Hierarchy	“Don’t Make Me Think” by Steve Krug	Ch. 3-4 (Visual Hierarchy)
Responsive Design	“Responsive Web Design” by Ethan Marcotte	Ch. 1-2
Design Systems	“Atomic Design” by Brad Frost	Ch. 2 (Atoms, Molecules)
Component Architecture	“React Design Patterns” by Michele Bertoli	Ch. 3 (Composition)

Common Pitfalls & Debugging

Problem 1: “AI generates wrong layout structure”

Why: The sketch is ambiguous or labels are missing

Fix: Add annotations to your sketch:

[Header Section]
[Hero: centered, large text]
[Cards: 3 columns on desktop, 1 on mobile]

Quick test: Show the sketch to a colleague—can they understand it without your explanation?

Problem 2: “Colors don’t match the design system”

Why: The sketch doesn’t specify colors, so AI uses defaults
Fix: Provide color palette in the prompt: ``` You: Use these colors:
Primary: #3B82F6 (blue)
Background: #F9FAFB (light gray)
Text: #111827 (dark gray) ```
Quick test: Check the generated code for hard-coded colors and verify against your palette

Problem 3: “Spacing is inconsistent”

Why: The sketch doesn’t communicate spacing intent clearly

Fix: Add spacing notes to the sketch or prompt:

You: Use 8px spacing units. Headers should have 32px padding, sections 64px.

Quick test: Inspect with browser DevTools and verify p-* and m-* classes are consistent

Problem 4: “Responsive behavior is wrong”

Why: The AI assumes a default responsive strategy

Fix: Be explicit about breakpoints:

You: On mobile (<768px), stack cards vertically. On desktop (≥768px), show 3 columns.

Quick test: Resize browser to test breakpoints: 375px, 768px, 1024px, 1440px

Problem 5: “Interactive elements don’t work”

Why: Static wireframes don’t show behavior, only structure

Fix: Describe interactions explicitly:

You: The CTA button should navigate to /signup on click. Navigation links should scroll to section anchors.

Quick test: Click buttons and links to verify behavior matches intent