Draw what's in your head before you ask the AI to build it
My guess is that after EP.5,
the first time you ask the AI to change a page,
you'll hit a familiar moment:
You try adjectives, feelings, comparisons.
After 5 rounds
what the AI gives you drifts further away.
And you start wondering:
is the AI not smart enough, or am I not clear enough?
Honest answer:
usually it's you not being clear.
Human visual memory is much stronger than verbal memory.
You have a picture in your head,
and turning that picture into words
loses 80% of the information.
So this episode teaches the one extra skill most worth a vibe coder's time:
using Figma to think the screen through.
The goal is narrow.
It's one more channel for talking to the AI,
and it has nothing to do with becoming a designer.
There are plenty of design tools in 2026:
Figma, Sketch, Adobe XD, Penpot, Framer...
But for a vibe coder,
Figma has three advantages the others don't:
So I won't cover Sketch or the others here.
For you, Figma is the only learning investment that pays off.
Figma has something like 200 features in total.
You only need 5 of them.
When I built NaLi Match, leoaido.com, and Crispy Kingdom 脆脆王國,
these 5 were the Figma features I used.
A Frame is the most basic thing in Figma.
Think of it as a sheet of paper.
Every Frame is one screen.
For a phone app, every page is a Frame.
For a website, every block (hero, feature, CTA) is a Frame.
Handy shortcut: F to drag out a Frame,
then pick a preset size in the right panel, iPhone 16, Desktop 1440, and so on.
This is the most important Figma feature for a vibe coder,
because the concept is identical to CSS Flexbox,
and learning it means you start thinking about design the way the web works.
Select a Frame, press Shift + A,
and it turns into Auto Layout.
After that, whatever you drop inside
gets spaced and aligned by Figma automatically.
A web page repeats a lot of things:
buttons, cards, avatars, tags.
Select an element you finished, right click, Create Component (or Ctrl/Cmd + Alt + K),
and it becomes the main component.
Everything you drag out afterwards is a copy.
Change the main component and every copy changes with it.
This is the same logic as React components.
The design system you build in Figma
maps cleanly onto the component structure in your code.
Added in 2024, mainstream by 2026.
In Figma you can define:
・primary color = #c9a96e
・heading size = 32px
・card corner radius = 12px
・base spacing = 16px
Then every component uses the variables,
and when you want a different theme color (a dark version, say),
you change one variable and the whole design follows.
The 2025 / 2026 versions added Expression Tokens,
so variables can do math (primary color 20% lighter, for example),
which brings the design system closer to what real code can do.
Select a Frame, scroll to the bottom of the right panel, Export, PNG / SVG / PDF.
That's it.
With the exported PNG you can:
For a vibe coder,
the exported image is the real output of Figma.
How the screen looks inside Figma doesn't matter.
What matters is that the AI can pick it up.
Figma's AI feature, launched in 2025.
Give it a text description and it generates UI components, writes copy, and makes illustrations,
using the Variables and Components you already set up,
so it won't produce something that clashes with your design system.
Better still, Figma Make can look at what it made.
It analyzes its own screenshots
and adjusts spacing, alignment, and structure until the result matches your description.
For a vibe coder
that's an AI pair for the design stage.
Talk to Figma Make inside Figma
and you get a first version of the design.
Code Connect lets you bind a component in Figma
to the real React / Swift / Android component in your GitHub repo.
When a developer clicks a button in Figma's Dev Mode,
what they see is the React component this button maps to, PrimaryButton, at src/components/Button.tsx.
They take the code and use it,
which is a big step up from design specs that only said padding 12px.
For a vibe coder,
this turns design to code into a one-way process with no redoing.
When the AI later sees a Figma link in your project,
it finds the matching component instead of inventing a new one.
You don't need to watch all 200 videos of Figma's official tutorials.
Here's the 30 minute workflow I run at the start of every project:
One pass through those 30 minutes
gives you a design you're happy with and the AI can read.
What those 30 minutes replace
is 10 rounds with the AI, 5 hours of edits, and still feeling it's wrong.
The most common beginner problem:
4 hours aligning the hero section perfectly,
then what the AI generates doesn't line up anyway because of responsive screens.
Remember:
a vibe coder's Figma file is a draft for the AI to read.
Stop as soon as it feels right.
Chasing print-shop quality will eat unlimited time.
A design with no Variables
means changing a color later in 50 places.
You'll also find the AI's code full of hardcoded colors,
because it couldn't see that those colors were one variable.
Put 5 pages of content in one Frame
and Figma won't complain, but the AI reading the PNG can't find the page boundaries.
Every logically separate screen deserves its own Frame.
The free plan has a 3 files / 3 pages limit (the 2026 numbers, check again before you publish).
Files you create in a team space count against that quota,
while a personal space doesn't have the limit.
A vibe coder should start in a personal space.
Three common routes, depending on which AI tool you use:
That last line, tell me which swatches and type sizes you picked up, matters.
The AI aligns with you, and you get to check whether it read the design correctly.
v0 is Vercel's design-to-React tool,
and it's trained hardest on Figma-style screenshots.
Drop in a PNG and it returns React + Tailwind + shadcn/ui components.
v0's advantage is that it gives you production-grade component code.
Its downside is that it only does UI, no backend.
So v0 suits the stage where you just want the screen built.
The 2026 advanced route:
install Figma's MCP server
and your AI tool reads your Figma files directly,
with no PNG export.
The workflow feels great but the setup bar is high,
so I'd stay on the PNG route for your first few projects
and move up to MCP once Figma feels familiar.
Next time you hand a Figma design to the AI,
use this structure:
Point 3 is the key one.
The AI tells you which parts of your design get stuck in implementation,
and that feedback makes your next Figma file smarter.
A vibe coder's bottleneck is usually their own ability to describe things.
Once you know Figma, a lot of problems turn into let me sketch it for you.
With Figma plus the three levels of instruction from EP.5,
you can build a page you're actually happy with.
But a finished page still only lives on your computer.
Close the laptop and it's gone,
friends can't see it,
clients can't reach it,
and you have no version history to go back to.
EP.7 is about GitHub:
why you can't keep files only on your computer,
and how to get the AI to manage versions for you,
so tomorrow you can still find yesterday's version.