Skip to main content
Week 02 • Track 06 • The Tool

Vision to
Vibe.

Stop writing HTML from scratch. Learn to use the AI as a visual Sampler. Upload a sketch, get the code, and keep the flow moving.

Sketch
Screenshot
Prompt
Component

The Mental Model

The Visual Sampler.

In music, producers sample old records to get a vibe. In coding, we sample Images.

1

Vision is the new API. Modern AI can "see" layouts, spacing, and hierarchy.

2

Images are unambiguous. "Make it look like this" beats 500 words of description.

3

Speed is the goal. From concept to code in seconds, not hours.

// The Old Way

Look at design → Guess padding → Type div → Check browser → Repeat.

// The Synth Way

Upload Image → "Build this in Tailwind" → Copy Code.

<div className="p-4 bg-white rounded shadow">
  <div className="h-4 w-12 bg-gray-200"/>
  ...
</div>

The Input Types

Theory
What to Upload

Not all inputs are equal. The quality and type of your visual artifact directly impacts output quality.

  • BestClean screenshot of existing UI. AI knows exactly what to build.
  • GoodWireframe/mockup. Clear structure, leaves room for interpretation.
  • OkayHand-drawn sketch. Works if boxes and hierarchy are clear.
  • AvoidText-only description. Ambiguous, leads to guessing.

Pro tip: Combine a screenshot with "but change the colors to..." for best results.

Quality Spectrum

UI

Screenshot — 95% accuracy

Wireframe — 80% accuracy

Sketch — 60% accuracy

"make a
card with
shadow"

Text only — 40% accuracy

Input Type 01
✏️

The Napkin Sketch

Hand-drawn → Code

AI vision is surprisingly good at reading handwriting and rough shapes. Draw boxes, label them, and the AI will interpret structure.

Best for: Early ideation, quick prototypes, mobile-first layouts.
headerhero
Tip: Label your boxes! "nav", "hero", "footer" helps AI understand intent.
Input Type 02
📸

The Screenshot

Existing UI → Your Code

Screenshot existing UI you admire. The AI reverse-engineers the layout, spacing, and structure. Ethical note: Use for learning structure, not copying brand identity.

Best for: Learning from pros, understanding patterns, cloning layouts.
⌘+Shift+4
Pro tip: Crop to just the component you want, not the full page.

The Constraint Prompt

If you just upload an image with no instructions, the AI will guess your tech stack. You must constrain the output to match your project.

Critical

Tech Stack

Specify React, Vue, vanilla HTML. Specify Tailwind vs CSS.

"Use React + Tailwind CSS"
Important

Styling Rules

No custom CSS? Dark mode? Specific color palette?

"Use only Tailwind utilities, no custom CSS files"
Details

Icon Library

Lucide, Heroicons, or SVG? Be specific or get random.

"Use Lucide React for icons"
Often Forgot

Responsive

Mobile-first? Tablet breakpoints? State this upfront.

"Make it mobile responsive with md: breakpoints"

Complete Example Prompt

"Recreate this UI I've attached.

Requirements:

1. Use React with TypeScript

2. Use Tailwind CSS utilities only (no custom CSS)

3. Use Lucide React for any icons

4. Make it responsive (mobile-first)

5. Match the spacing and proportions closely"

The Tool Stack

▲

v0.dev

By Vercel

Best for pure UI generation. It renders the code live so you can see it and iterate in real-time.

✓Live preview
✓Shadcn/ui integration
✓One-click export
-Limited logic capability
Best for: "I need a pricing table, fast"
✴️

Claude Sonnet

By Anthropic

The smartest logic. Upload a screenshot and ask it to not just build the UI, but wire up click handlers too.

✓Complex logic
✓Multi-file awareness
✓Debugging capability
-No live preview
Best for: "Build this form with validation logic"
🤖

ChatGPT-4o

By OpenAI

Excellent vision capabilities. Good all-rounder that can handle both UI and logic with strong reasoning.

✓Strong vision model
✓Canvas for editing
✓Wide knowledge base
-Can be verbose
Best for: "Explain this UI then rebuild it"

Common Pitfalls

✗ What Goes Wrong

Wrong Tech Stack

AI defaults to vanilla HTML/CSS if you don't specify React/Vue/etc.

Inline Styles

Without "Tailwind only", you might get style={} everywhere.

Wrong Proportions

AI may guess sizing. Add "match the proportions exactly" to your prompt.

Missing Responsiveness

Desktop-only output is default. Always specify mobile-first.

✓ The Fix

Be Explicit

"Use React with TypeScript and Tailwind CSS" — leave no ambiguity.

Add Constraints

"No inline styles. No custom CSS files. Tailwind utilities only."

Reference Real Values

"The card should be 400px wide with p-6 padding" — be specific.

Iterate Fast

"Make the button smaller" or "Increase the gap to gap-6" — quick fixes.

The Exercises

From vision to code in under 60 seconds.

01

The Napkin Test

Hand-Drawn → Code

  • →Draw a "Login Card" on paper
  • →Snap a photo with your phone
  • →Upload to v0 or Claude
  • →Prompt: "Build this in React + Tailwind"
Goal: See how AI interprets rough sketches
02

The Remix

Screenshot → Modified

  • →Screenshot a component you admire
  • →Upload with a twist request
  • →"Use this layout but make it dark mode"
  • →Paste the code into your project
Goal: Learn ethical sampling and remixing
03

The Full Prompt

Constrained Generation

  • →Pick any website hero section
  • →Write a full constraint prompt
  • →Include: stack, styling, icons, responsive
  • →Compare output with/without constraints
Goal: Master the art of the constraint prompt

📋 Quick Reference Cheatsheet

Basic Prompt

"Recreate this UI in React + Tailwind"

With Constraints

"...no custom CSS, Lucide icons, mobile-first"

Iteration

"Make the gap larger" "Use rounded-xl"
Proceed to Track 07: Studio Flow