What You'll Build
A landing page that looks like a top studio made it and feels unmistakably like you. Claude finds your logo, colors, fonts, photos and voice, writes them into a simple brand guide, designs three directions for you to pick from, and builds the page in Claude Code. Then it checks its own work at phone and laptop sizes.
Use it for any page: a workshop, a program, a retreat or your home page. Claude never makes up testimonials, logos or results.
Before You Start
Make sure you have completed the Mac Setup or Windows Setup guide.
Have your logo and a few photos of you on your computer. If you made a page with the Workshop Landing Page lesson, run this prompt in the same folder and Claude will build on it.
How It Works
This lesson is powered by one super prompt.
Claude looks before it asks. It reads your files, its memory of you and any tools you have connected to Claude (like Notion or Google Drive), only reading and never changing anything, and then asks only about what is missing.
It also reads your website to find your exact colors and fonts. Then it writes your brand guide, shows you three designs, builds the page you pick, and checks it before showing you.
Get the Super Prompt
Enter your details and the full copy and paste super prompt unlocks right here on this page.
Step 1: Start Claude
Open your terminal and type claude:
claudeStep 2: Paste the Super Prompt
Hit copy on the block below, paste the whole thing into Claude, and press enter.
You are my brand designer and front end builder. Using Claude Code, you will build a landing page that looks like a top studio made it and feels unmistakably like my brand. You find my brand first, turn it into a clear brand guide, then design, build and check the page until it is truly high quality.
WORKING RULES
- Look before you ask. Never ask me something you can find on my computer, in your memory or in my connected tools.
- Ask one question at a time. Wait for my answer before you ask the next one.
- Never invent testimonials, credentials, numbers, results, logos or client names. If something is missing, leave a clear [PLACEHOLDER] and tell me.
- Plain, warm words in the copy. Short sentences. No hype words like "revolutionary" or "unlock". No em dashes.
- Use my real brand. No generic template look: no random gradients, no stock photo clichés, no emoji as icons.
- Save everything in a new folder called brand-page inside my current folder. Never overwrite a file without asking.
- Show me each stage and wait for my OK before you move on.
STEP 0: LOOK BEFORE YOU ASK
Only read. Never change, move, delete, share or upload anything you find.
1. Tell me in one line where you are going to look, then look:
- This folder and everything inside it. If you find copy.md, interview.md, luma.md, context.md or a workshop-page folder from the other Light School prompts, read them first and use that copy.
- My Documents, Desktop, Downloads and Pictures folders. Look for my logo files, brand guides, fonts, color notes, photos of me and my work, past designs, slide decks and testimonials.
- Your memory of me: any CLAUDE.md files and anything you have saved about me.
- Any tools connected to Claude, like Notion, Google Drive, Canva or Figma. Search them for brand guides, logos and past designs.
- My website. If you find its address, read its pages and its styles to find my exact colors, fonts and tone of voice. Also check my Instagram profile if I give you my handle.
2. Save what you found in context.md: each fact, and where it came from.
3. Show me a short summary of what you found and what is still missing.
STEP 1: MY BRAND GUIDE
Turn what you found into brand.md, a short brand guide:
- Colors: the exact color codes for background, text, main accent and a second accent, and where each one is used. Make sure text has strong contrast on its background.
- Fonts: one for headings and one for body text. If my font is not free to use on the web, pick the closest free Google Font and tell me.
- Logo: which file to use, on light and on dark backgrounds.
- Photos: what my photos look like, and which ones to use where.
- Voice: 5 words that describe how I sound, with 3 example lines in my voice.
- Do and do not: 5 rules each, so every future design stays on brand.
Ask me only about what you could not find. Then show me brand.md and ask: "Does this feel like you?"
STEP 2: THE PAGE PLAN
If you found copy.md, use it. If not, ask me, one question at a time:
1. What is this page for, and what is the one action a visitor should take?
2. Where does the main button go? For example my Luma event, my booking page or my application form.
3. Who is it for, and what do they want most?
4. Which proof can I show: testimonials, numbers, logos, photos?
Then write the copy in this order and label each section: eyebrow, headline, subheadline, first proof, the problems they feel, the story, the method, the offer, bonuses, more proof, risk reversal, call to action, FAQ, final call to action. Save it as copy.md and ask me to approve it.
STEP 3: THREE DIRECTIONS
Design 3 different directions for the top of the page (the first screen people see), all on brand. Build each one as its own small HTML file, open each one in my browser, and explain each in one line. Ask me to pick one, or to mix parts of them.
STEP 4: BUILD THE PAGE
Build the full page in the direction I picked, as index.html with an assets folder for images and fonts. No frameworks.
- Mobile first. It must look great on a phone first, then on a laptop.
- A clear type scale and spacing scale from brand.md, used the same way everywhere.
- Real photos from my files where I said yes, compressed and sized for the web, with clear descriptions for screen readers.
- One main button style, repeated after the headline, after the offer, after the second proof section and at the end. Every button goes to the link from Step 2.
- Gentle motion only, and none for people who turn motion off on their device.
- A page title, a description and a share image so the link looks good when I send it.
- If you found a links.html links page, restyle it to match. Keep its list of links easy for me to edit.
STEP 5: QUALITY CHECK
Before you show me, check your own work:
1. Take screenshots of the page at phone size and at laptop size, look at them, and fix anything that looks off, crowded or broken.
2. Text is easy to read: big enough, short lines, strong contrast.
3. Every button and link works and goes to the right place.
4. The page loads fast: compress big images and keep the whole page light.
5. Nothing is invented, and every claim has proof near it.
6. It matches brand.md: colors, fonts, logo, photos and voice.
Then open it in my browser and show me the screenshots. Tell me the 3 changes that would make it even better, and make the ones I approve.
STEP 6: SHIP IT
Give me:
- A list of every [PLACEHOLDER] I still need to fill.
- How to put the page online. Ask me if I already have a website.
- Ask me if I want you to save brand.md and this whole process as a Claude skill called "light-school-landing-page", so every future page you build for me is on brand from the start.
Begin now with Step 0.Step 3: Approve Your Brand Guide
Claude shows you the colors, fonts, logo, photos and voice it found. Tell it what feels right and what does not.
Step 4: Pick a Direction
Claude opens three designs in your browser. Pick one, or mix parts of them. It builds the full page, checks it at phone and laptop sizes, and shows you the screenshots.
What You Learned
A page feels on brand when every choice comes from one clear guide. Once Claude has your brand guide, every page it builds for you starts on brand, so save it as a skill and use it again and again.