Your First Design Prototype
Describe a design, watch Claude build it, and learn to iterate
You have Claude Code installed. You have a project folder. Now you are going to build something real — a hero section for a product landing page, starting from a description in your head and ending with a working prototype you can see in your browser. This chapter walks through every step.
That is the design loop. Everything in this book builds on it. By the end of this chapter, you will have run through it three times and built something you can open in a browser. Not a screenshot. Not a mockup. A real, working HTML file.
3.1 What We Are Building
What We Are Building
We are building a hero section — the top banner of a landing page. If you have designed one in Figma, you know exactly what this is.
A hero section is the right first project for three reasons. You already know what a good one looks like, so you can judge the output. It involves layout, typography, color, and spacing — the fundamentals of visual design. And it can live in a single HTML file with no dependencies, no build tools, no npm.
Here is the design brief:
| Element | Specification |
|---|---|
| Background | Full-viewport gradient, dark navy to slate blue |
| Heading | Large white text: "Build faster. Ship smarter." |
| Subheading | Lighter gray, smaller: "The AI-powered tool that understands your codebase" |
| CTA button | Blue (#3b82f6), white text, rounded corners, hover effect |
| Layout | Vertically and horizontally centered |
| Font | System font stack (no external fonts needed) |
Nothing exotic. A hero section you have designed a hundred times. The difference is that this time, you are going to describe it to Claude Code instead of building it yourself.
Why a single HTML file?
This chapter deliberately uses plain HTML with inline CSS. No frameworks, no build tools, no React. The goal is to learn the design loop, not to learn a framework. Single-file HTML is the fastest path from idea to browser. Frameworks come later in the book, once you are comfortable with the loop.
3.2 Describing Your Design Intent
Describing Your Design Intent
The prompt is where your design skill meets Claude's code ability. How you describe what you want directly determines what you get back.
Think of the prompt like a design brief you would hand to a developer. A vague brief produces generic work. A specific brief produces work that matches your intent. The same principle applies here.
Specific prompt
"Create a single HTML file called hero.html with a hero section. Full-viewport height with a gradient background from dark navy #0a1628 to slate blue #1e3a5f. Large white heading that says 'Build faster. Ship smarter.' A subheading in light gray (#94a3b8) that says 'The AI-powered tool that understands your codebase.' A centered call-to-action button with rounded corners, white text on blue (#3b82f6), with a hover effect. Use system fonts. Center everything vertically. All CSS inline in a style tag."
Vague prompt
"Make a nice landing page hero section."
The vague prompt leaves every decision to Claude. The specific prompt tells Claude exactly what you want — colors, copy, layout, fonts, file structure. Both will produce output. Only one will produce output that matches your vision.
| Prompt Style | What You Get | When to Use It |
|---|---|---|
| Vague | Generic defaults, Claude's aesthetic choices | Exploring ideas, getting a starting point you will heavily revise |
| Moderate | Decent structure, some specific details right | When you have a general direction but are flexible on details |
| Specific | Output close to your intent, small iteration needed | When you have a clear design in mind and know the details |
The prompt does not need to be perfect. It needs to be specific about what matters to you. Colors, copy, and layout are the three things to specify. Let Claude handle reasonable defaults for everything else.
My Take
The biggest mindset shift for designers using AI is treating the first output like a first draft from a junior developer, not a finished design. Your value is in the iteration and design judgment, not the initial generation. Some simple designs will come out near-perfect on the first try. Most will need two to four rounds of feedback. That is the process working as intended.
3.3 First Generation
The First Generation
Time to run the prompt and see what Claude produces. Open Claude Code in your project folder and type the prompt.
If you are using the Desktop app, open it and navigate to the project folder you created in Chapter 2. If you are using the VS Code extension, open the folder in VS Code and open the Claude Code panel. If you are in the terminal, navigate to your project folder and type claude to start a session.
Type this prompt:
Create a single HTML file called hero.html with a landing page hero section.
Design requirements:
- Full-viewport height hero section with a gradient background
(deep navy #0a1628 to slate blue #1e3a5f)
- Large white heading: "Build faster. Ship smarter."
- Subheading in light gray: "The AI-powered tool that understands your codebase"
- A centered call-to-action button with rounded corners, white text on
a bright accent color (#3b82f6), with a subtle hover effect
- Use system fonts: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif
- All CSS must be inline in a <style> tag within the HTML file
- No external dependencies or frameworksHit Enter. Claude will think for a moment and then create the file. You will see it write the HTML and CSS, explaining what it is doing along the way.
Here is what Claude generates:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Landing Page</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.hero {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #0a1628, #1e3a5f);
color: white;
text-align: center;
padding: 80px 24px;
}
.hero h1 {
font-size: 3.5rem;
font-weight: 700;
margin-bottom: 16px;
letter-spacing: -0.02em;
}
.hero p {
font-size: 1.25rem;
color: #94a3b8;
margin-bottom: 40px;
max-width: 500px;
line-height: 1.6;
}
.cta-button {
background-color: #3b82f6;
color: white;
border: none;
padding: 14px 32px;
font-size: 1rem;
font-weight: 600;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.2s ease, transform 0.1s ease;
}
.cta-button:hover {
background-color: #2563eb;
transform: translateY(-1px);
}
</style>
</head>
<body>
<section class="hero">
<h1>Build faster. Ship smarter.</h1>
<p>The AI-powered tool that understands your codebase</p>
<button class="cta-button">Get Started</button>
</section>
</body>
</html>That is a complete, working hero section in a single file. The CSS uses flexbox to center everything — the same as using align center and justify center in Figma. The gradient, colors, fonts, and copy all match the brief. There is even a hover state on the button that darkens the color and lifts it slightly.
The first generation will not be perfect. But notice how close it gets to the brief. The colors are right. The layout is centered. The typography hierarchy is there. The hover state was not explicitly asked for — Claude added it because it is a common pattern for buttons. This is Claude making reasonable defaults.
Tip: Open it right now
Before reading further, open the file in your browser. Seeing the output makes everything in this chapter more concrete. On macOS, type open hero.html in the terminal. On Windows, type start hero.html. Or drag the file from Finder into your browser window. Come back when you have seen it.
3.4 Iterating on the Design
Iterating on the Design
The first output is a starting point, not the finish line. Now you iterate — the same way you would give feedback on a mockup, except the mockup updates instantly.
Each iteration round focuses on a different kind of change. This is deliberate. It teaches you the three main types of design feedback you will give Claude: value adjustments, feature additions, and structural changes.
Round 1: Adjusting Values
The hero section is close, but the spacing feels tight and the button is undersized. You want to adjust specific values — the same kind of tweak you would make in Figma's inspector panel.
Type this follow-up prompt in the same Claude Code session:
The hero section looks good overall. Make these changes:
1. Add more vertical padding — the heading feels cramped at the top.
Add 120px padding-top and 80px padding-bottom.
2. The CTA button is too small. Make it larger: 18px font size,
16px vertical padding, 40px horizontal padding.
3. Add a subtle text-shadow to the heading for depth:
0 2px 4px rgba(0,0,0,0.3)
4. Add a semi-transparent white overlay pattern — like a very subtle
geometric grid — behind the text using CSS only.Claude reads your feedback and modifies the file. The changes are specific CSS property adjustments — padding values, font sizes, shadow definitions. This is the easiest type of iteration because you are telling Claude exactly which values to change.
Notice the prompt style. Each change is numbered. Each specifies the CSS property and the exact value. This is not about learning CSS syntax — it is about being precise about what you want changed. You can describe changes in plain English too ("make the heading bigger"), but exact values leave less room for misinterpretation.
Round 2: Adding Features
The spacing and sizing are better. Now you want to add something new — a radial gradient and a fade-in animation. These are features that did not exist in the first output.
Better. Two more changes:
1. The gradient feels flat. Change it to a radial gradient that radiates
from the center-top of the viewport. Keep the same colors.
2. Add a subtle animation: the heading should fade in and slide up 20px
when the page loads. Use CSS @keyframes. Keep it smooth —
0.8s ease-out.Claude swaps the linear gradient for a radial one and adds a @keyframes animation. The heading now fades in and slides up when the page loads. These are additions, not adjustments — Claude is creating new CSS from your description.
The key phrase in this prompt is "fade in and slide up 20px." That is design language. Claude translates it into the correct CSS animation. You did not need to know the @keyframes syntax. You described the visual effect you wanted.
Tip: Use design language
Describe what you want to see, not the CSS to write it. "Fade in and slide up" works. "Add a staggered delay so elements appear one after another" works. "Make the button feel clickable on hover" works. Claude knows CSS. You know design. Play to your strengths.
Round 3: Structural Changes
This is where it gets powerful. Instead of typing more changes, paste a screenshot of a hero section you like. Claude can read images and use them as reference.
Find a hero section you admire from material you are allowed to use: your own work, an internal reference approved for this project, a public product page used only for structural inspiration, or a screenshot you have permission to share with an AI tool. Do not ask Claude to copy another company's brand, artwork, icons, proprietary copy, or exact visual identity.
[Paste screenshot of a reference hero section]
Use this screenshot for layout structure only. Do not copy the brand,
imagery, icons, typography, proprietary copy, or exact visual identity.
Match the general text positioning and button placement, but keep my
current colors and copy.
Specifically: move the text block to the left side of the viewport
instead of centered, and add a placeholder area on the right that
could hold an illustration later (a rounded rectangle with a
subtle border, 400px wide).In the terminal, paste images with Ctrl+V (not Cmd+V). In the Desktop app and VS Code extension, the standard paste shortcut works.
Claude reads the screenshot, understands the layout structure, and restructures the hero section. The centered layout becomes a split layout — text on the left, placeholder on the right. Your colors and copy stay the same.
Reference safely
Screenshot prompting is powerful and legally sensitive. Use references to communicate structure, density, interaction intent, and visual hierarchy. Do not use it to clone protected creative work, client-confidential screens, unreleased product designs, logos, illustrations, icon sets, or copy you do not have rights to reuse.
Here is the file after all three rounds:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Landing Page</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.hero {
min-height: 100vh;
display: flex;
align-items: center;
background: radial-gradient(ellipse at top center, #1e3a5f, #0a1628);
color: white;
padding: 80px 60px;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
background-size: 60px 60px;
pointer-events: none;
}
.hero-content {
flex: 1;
max-width: 560px;
}
.hero h1 {
font-size: 3.5rem;
font-weight: 700;
margin-bottom: 16px;
letter-spacing: -0.02em;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
opacity: 0;
transform: translateY(20px);
animation: fadeSlideUp 0.8s ease-out forwards;
}
@keyframes fadeSlideUp {
to {
opacity: 1;
transform: translateY(0);
}
}
.hero p {
font-size: 1.25rem;
color: #94a3b8;
margin-bottom: 40px;
line-height: 1.6;
opacity: 0;
transform: translateY(20px);
animation: fadeSlideUp 0.8s ease-out 0.2s forwards;
}
.cta-button {
background-color: #3b82f6;
color: white;
border: none;
padding: 16px 40px;
font-size: 18px;
font-weight: 600;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.2s ease, transform 0.1s ease;
opacity: 0;
transform: translateY(20px);
animation: fadeSlideUp 0.8s ease-out 0.4s forwards;
}
.cta-button:hover {
background-color: #2563eb;
transform: translateY(-1px);
}
.hero-illustration {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
margin-left: 60px;
}
.illustration-placeholder {
width: 400px;
height: 320px;
border: 2px dashed rgba(255,255,255,0.15);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
color: rgba(255,255,255,0.25);
font-size: 0.875rem;
}
</style>
</head>
<body>
<section class="hero">
<div class="hero-content">
<h1>Build faster. Ship smarter.</h1>
<p>The AI-powered tool that understands your codebase</p>
<button class="cta-button">Get Started</button>
</div>
<div class="hero-illustration">
<div class="illustration-placeholder">
Illustration placeholder
</div>
</div>
</section>
</body>
</html>Three rounds took you from a centered, static hero section to a split-layout hero with a radial gradient, geometric grid overlay, staggered fade-in animation, and an illustration placeholder. Each round focused on one type of change:
| Round | Change Type | What You Learned |
|---|---|---|
| 1 | Value adjustments | Claude understands specific CSS property changes with exact values |
| 2 | Feature additions | Claude can add new behavior from design-language descriptions |
| 3 | Structural changes + image reference | Claude can read screenshots and restructure layouts to match |
When iteration goes off track
If you have corrected Claude more than twice on the same issue in one session, the conversation context gets cluttered with failed approaches. Run /clear and start a fresh session with a more specific prompt that incorporates what you learned. Think of /clear as creating a new artboard — a clean slate with better information.
3.5 Viewing Your Prototype
Viewing Your Prototype
You have a file. Now you need to see it. Here are the ways to view your prototype, from simplest to most powerful.
Method 1: Open directly in your browser
The fastest path. One command, no installation required.
Open a terminal window and navigate to your project folder.
Run one of these commands depending on your operating system:
# macOS
open hero.html
# Windows
start hero.html
# Linux
xdg-open hero.htmlYou can also run this directly from within Claude Code using the ! prefix, which executes shell commands without leaving your session:
! open hero.htmlThis opens the file using the file:// protocol. It works for any self-contained HTML file with inline CSS. No server needed.
Method 2: VS Code Live Server
If you are using VS Code, the Live Server extension creates an auto-refresh loop. Every time Claude edits the file, the browser updates.
Install the "Live Server" extension in VS Code (by Ritwick Dey).
Open hero.html in VS Code.
Right-click in the editor and select "Open with Live Server."
Your browser opens at http://127.0.0.1:5500/hero.html. Changes auto-refresh on save.
Live Server is the best option during the iteration phase because Claude edits the file and the browser refreshes automatically. You see changes without switching windows.
Method 3: Claude Code with browser access
The most powerful option. If you have the Claude Code Chrome extension installed (version 1.0.36 or later), Claude can open the browser, see your output, and compare it against a reference screenshot.
Start Claude Code with browser support:
claude --chromeThen prompt Claude to verify the output:
Open hero.html in the browser. Compare the rendered layout to
this reference screenshot [paste screenshot]. List every visual
difference and fix each one.Claude opens the file in Chrome, sees what it looks like, compares it to your reference, and makes corrections. This closes the feedback loop entirely — Claude can see what you see.
My Take
The Chrome extension is the most immediately powerful integration for designers, because it gives Claude eyes on the output. Being able to say "compare what you built to this screenshot and fix the differences" is a fundamentally different workflow than describing changes in words. If you do one thing after finishing this chapter, install the Chrome extension and try the screenshot comparison workflow.
3.6 What Just Happened
What Just Happened
Step back and look at the process you just ran. Three things happened that are worth naming explicitly.
First, you translated a visual design into a text description. This is a skill, and it gets better with practice. You started with a specific prompt that included colors, copy, layout, and font choices. The more precise your translation, the closer the first output gets to your intent.
Second, you iterated in rounds, each focused on a different kind of change. Value adjustments (spacing, sizing), feature additions (animation, gradient), and structural changes (layout reflow). These three types cover most of the design feedback you will ever give Claude.
Third, you closed the loop by viewing the output in a browser and using what you saw to inform the next round. This is the same feedback loop you use with human developers — you review, you give notes, they implement. The difference is speed. Each round took seconds instead of hours.
This is the design loop: describe, review, refine. Everything else in this book builds on this loop. The next chapter deepens the "describe" part — how to write prompts that communicate visual intent more effectively. Because the better you get at describing what you want, the faster the loop converges on your design.
You just built a working prototype from a description. That is real. It is not a mockup in Figma waiting for a developer. It is not a static image. It is a file that opens in a browser, with working hover states and animations, that you generated and refined in a single session. The gap between design intent and working code is shorter than it has ever been.