Section 1
Why This Works
Most people think building a landing page means hiring a designer, waiting two weeks, paying a few thousand dollars, then going back and forth on revisions. Or spending hours in some drag-and-drop builder that still looks like a template.
Here's what actually happens now. You show Claude Code a screenshot of a landing page you like, tell it what yours is for, and it builds the whole thing. HTML, CSS, responsive design, everything. Live on your website in minutes.
The trick is one skill file that turns Claude into a design-obsessed frontend builder. Without it, you get functional but ugly. With it, you get pages that look like a human designer spent days on them.
Quick Note
Why We Build on Astro
The prompt tells Claude to build an Astro page. Here's why.
Astro ships zero JavaScript by default. Your page loads instantly. Google loves fast pages, so you rank higher with zero extra work. It uses standard HTML and CSS under the hood, which means Claude builds cleaner code and you can actually read what it wrote.
If you already have a website on a different framework, the prompt still works. Just swap "Astro page" for whatever you use. The design principles are the same.
Step 1
Install the Frontend Design Skill
Anthropic maintains an official library of skills for Claude Code. The one you want is called frontend-design. It teaches Claude how to think about visual hierarchy, spacing, typography, and color like an actual designer.
Here's how to install it:
Go to the Anthropic Skills repo
Head to github.com/anthropics/skills and find the frontend-design skill.
Install it
Follow the install instructions in the README. It takes about 30 seconds. Once installed, Claude Code automatically uses it whenever you trigger /frontend-design.
Verify it's there
Open Claude Code in your project folder, type /, and look for frontend-design in the list. If it's there, you're good.
Step 2
Find Your Inspiration
You have two options here. Both work. Pick whichever feels easier.
Screenshot a landing page you like
Find any website with a design you want to match. Take a full-page screenshot (or multiple screenshots of different sections). The more screenshots you give Claude, the better it understands what you're going for.
Mock it up yourself
If you have a design concept in your head, use an AI image generator (I use Nano Banana 2) to mock up rough images of the layout you want. These don't need to be perfect. They just need to communicate the vibe, colors, and general structure.
The more context you give Claude, the better your output. One screenshot is fine. Three screenshots of the hero, the features section, and the footer is better. Reference images are the difference between "close enough" and "that's exactly what I wanted."
Step 3
The Prompt
Open Claude Code in your project folder. Attach your reference images. Then paste this prompt. Replace the bracketed section with your own details.
The last line is the most important part. Use /frontend-design tells Claude to activate the skill you installed in Step 1. Without this line, you get a functional page. With it, you get a page that actually looks good.
I want you to build me a landing page. I've attached reference images showing the design I want to match.
You are a world-class web designer who understands conversion funnels, visual hierarchy, whitespace, and modern design principles. Your job is to look at these reference images and build me a production-ready landing page that matches their style, layout, and feel.
Build this as an Astro page (.astro file) using Tailwind CSS for styling.
Here's what the page is for:
[REPLACE THIS: What your landing page promotes. Who it's for. What action you want the visitor to take. Example: "A landing page for my freelance design agency targeting startup founders. The CTA is booking a free 15-minute strategy call."]
Requirements:
- Match the visual style, spacing, typography, and layout from the reference images as closely as possible
- Fully mobile responsive
- Clean, semantic HTML
- Clear hero section with a headline, subheadline, and one primary call-to-action
- Fast-loading, no unnecessary dependencies
Use /frontend-designImportant: Replace the bracketed section with specifics about your page. "A landing page for my business" is vague. "A landing page for my dog training business targeting first-time puppy owners in Austin. The CTA is booking a free consultation call" gives Claude everything it needs to write copy and design the layout.
Step 4
Sit Back and Watch
Hit enter. Claude reads your reference images, activates the frontend-design skill, and starts building. You'll see it writing HTML, adding styles, making layout decisions. It takes about 2 minutes.
When it's done, you'll have a complete Astro page file. If you're running a dev server (npm run dev), you can preview it in your browser immediately.
Step 5
Iterate Until It's Right
The first version probably won't be perfect. That's normal and expected. Maybe the spacing is off, or the colors don't match, or the CTA button needs to be bigger. That's fine.
Just tell Claude what to fix. "Make the hero section taller." "Change the accent color to this hex." "The mobile version looks cramped, add more padding." Claude iterates fast. Two or three rounds of feedback and you'll have something you're genuinely proud of.
Pro move: turn it into a template. Once you dial in a landing page design you love, save it. Next time you need a new landing page, you already have the layout. You can even build a Claude skill that launches new pages from your template with one command. That's how I build every landing page on this site now.
Coming Next
Day 3 Preview
Day 3 of the AI for Dummies series is about automating the first repetitive task in your life. No code. No complicated setups. Just the one thing you do every week that Claude can take off your plate entirely.
It'll land in your inbox as part of this series. Nothing to do on your end.
Zero to Automated
Get the full AI operating system
Guides are a great start. But inside Zero to Automated, you get a done-for-you AI system deployed within 48 hours, plus everything you need to keep building:
- Claude Code 101 — 8 lessons, zero to automating real work by Sunday
- Ready-to-install Claude Skills — a growing library with 2+ new skills every week
- Done-for-you workflows — copy, paste, run. New ones every week.
- Weekly live builds — watch real projects get built, ask questions, follow along
- Small group coaching — direct access to both founders
Price locked for life at whatever you join at.