# Day 3: The Surface **Claude Code Accelerator · Day 3 · Friday, June 5, 2026 · 1:00 PM EDT** Today we stop asking Claude Code to "make a website" and hoping taste appears. That is how you get lavender fog, three cards named Fast/Easy/Smart, and a button that says Get Started even though nobody knows what they are starting. Day 3 is the antidote. You are going to give Claude Code a page target, reference evidence, a sales argument, a design contract, a build brief, and a review gate before it writes the first draft. If you are watching the replay, this page should be enough. Pause at each step. Paste the prompt. Check the file. Move on. ## Open These First Keep these open while you work: - Day 3 hub: https://theaicreativestrategist.com/day-3.html - Prompt Library: https://theaicreativestrategist.com/prompts.html - Landing Page Build Coach: https://theaicreativestrategist.com/prompts.html#landing-page-build-coach - Skills and tools: https://theaicreativestrategist.com/skills.html - Dashboard Builder: https://theaicreativestrategist.com/dashboard.html - Awesome `DESIGN.md` repo: https://github.com/VoltAgent/awesome-design-md Use these when the step calls for them: - Dribbble: https://dribbble.com - Awwwards: https://www.awwwards.com/ - Godly: https://godly.website/ - Land-book: https://land-book.com/ - It's Hover: https://www.itshover.com/ - 21st components: https://21st.dev/community/components - UI/UX Pro Max skill: https://github.com/nextlevelbuilder/ui-ux-pro-max-skill - CSS Peeper: https://csspeeper.com/ ## What You Are Building Bring one page that should already exist. Good targets: - a landing page for an offer - an about page - a case-study page - a client one-pager - a workshop or lead-magnet page - a tiny microsite for something you keep explaining by hand Bad targets: - a fake demo nobody needs - a full brand site with 14 pages - a dashboard with no decision - a product you cannot explain in one sentence Use real material. Fake pages teach weak lessons because nothing is at stake. ## The Enemy This is the thing we are avoiding. ![The trap compared with a better surface](https://theaicreativestrategist.com/img/day3/slop-vs-surface-client.svg) The trap decorates uncertainty. The better move creates taste, proof, and review gates before code. ## Key Calls Use this table when you are tempted to move faster than the page is ready for. | Recommendation | The trap | Better move | Why it works | |---|---|---|---| | Starting the build | "Claude, make me a landing page." | "Claude, create the folder, write the rules, gather evidence, write DESIGN.md, then build." | Claude aims before it writes code. | | Design | "Make it modern and clean." | "Use the frontend-design skill and write `DESIGN.md` with exact type, color, spacing, image, motion, and mobile rules." | Taste turns into a contract. | | Research | Browse inspiration until you feel productive. | Use Exa or the reference sites to find candidates, then use Firecrawl to extract patterns into `SURFACE-RESEARCH.md`. | The build studies decisions, not vibes. | | Landing-page copy | Ask for a whole page in one shot. | Run the Landing Page Build Coach and save the buyer, promise, mechanism, proof plan, FAQs, and CTA into `LANDING-PAGE-COPY.md`. | The sales argument gets fixed before layout. | | Proof | Let Claude invent believable numbers. | Use only real proof. If proof is missing, label it as a proof gap and design around it. | Trust stays intact. | | Review | Ask "make it better." | Review against `DESIGN.md`, `SURFACE-BRIEF.md`, mobile, and the Slop Detector. | The critique becomes specific enough to act on. | | Dashboard | Build a pretty chart page. | Use Dashboard Builder only after the decision, user, source, metric meaning, and action are clear. | The dashboard starts with the decision. | ## The Surface Stack A surface is any screen Claude builds that another human looks at. Today has three surfaces: 1. **Public Surface**: the page a stranger lands on. 2. **Handoff Surface**: the editor a client can use without breaking the layout. 3. **Decision Surface**: the dashboard that helps someone choose the next move. The loop: ```text standard -> evidence -> sales argument -> DESIGN.md -> brief -> build -> review -> deploy ``` ![Three Surfaces](https://theaicreativestrategist.com/img/day3/three-surfaces-sharp-interface-map-labeled-v2.png) ![Surface Stack](https://theaicreativestrategist.com/img/day3/surface-stack-sharp-labeled.png) ## Step 1A: Run The Full Landing Page Build Coach What you are doing: If this is a landing page, offer page, workshop page, lead magnet, or any page that needs to sell, start here. Do not use a shortened version of this prompt. Use the full Landing Page Build Coach. It has the awareness logic, traffic-source check, mechanism fallback, adaptive page structure, headline testing, and final sales filter. Use this resource now: - Landing Page Build Coach: https://theaicreativestrategist.com/prompts.html#landing-page-build-coach - Download prompt file: https://theaicreativestrategist.com/downloads/day3/landing-page-build-coach-prompt.md Tell Claude Code: ```text Open the full Landing Page Build Coach from: https://theaicreativestrategist.com/prompts.html#landing-page-build-coach Use the whole prompt. Do not summarize it. Do not skip the awareness and traffic-source checks. Do not write the whole landing page in one shot. Coach me through it phase by phase. Ask a few questions at a time. When the sales argument is ready, stop and wait before building. ``` Done when: - You know the buyer. - You know the awareness level and traffic source. - You know the one promise. - You know the named mechanism. - You know what proof is real. ## Step 1B: Pick The Smallest Real Page What you are doing: Use this if the target is not clearly a sales page, or if someone does not know what to build yet. You are choosing a target small enough to ship and real enough to matter. Tell Claude Code: ```text I need to choose the smallest real page to build today. Ask me 5 questions that help me pick between: - landing page - about page - case-study page - client one-pager - workshop or lead-magnet page - small microsite - dashboard-style decision page After I answer, recommend one page target. Keep the recommendation small enough to build today. Do not create files yet. ``` Answer with: - the thing you keep explaining by hand - who needs to see it - what they should do after seeing it - what proof or assets you already have - where the page should eventually live Done when: - You can say the page in one sentence. - You know the audience. - You know the one action. ## Step 2: Create The Project Folder What you are doing: You are giving the build one home. No loose files. No mystery screenshots on the Desktop. No "final-final-v3" nonsense. Tell Claude Code: ```text I am designing a landing page. Please create a project folder for this build and set up this starter structure: my-page/ CLAUDE.md SURFACE-RESEARCH.md LANDING-PAGE-COPY.md DESIGN.md SURFACE-BRIEF.md REVIEW-NOTES.md CLIENT-EDIT-GATE.md README.md references/ assets/ site/ Before you create anything, ask me: 1. What should the project folder be called? 2. Where should it live? 3. Is this a landing page, an about page, a client page, or a dashboard-style page? After I answer, create the folder structure and show me the files you created. Do not build the page yet. ``` Done when: - The project folder exists. - The files exist. - Claude has not built the page yet. ## Step 3: Load The Right Skills What you are doing: You are telling Claude which expert mode to use before it starts acting like the average internet. Use these resources now: - Frontend Design skill: https://theaicreativestrategist.com/skills.html - Research tools setup: https://theaicreativestrategist.com/skills.html#research-tools - Dashboard Builder: https://theaicreativestrategist.com/dashboard.html Tell Claude Code: ```text Before we build, check which relevant skills and tools are available in this workspace. For this project, I want you to use: - frontend-design for the page UI and anti-generic design rules - Firecrawl or Firecrawl agent when you need to scrape reference pages - dashboard-setup only if this becomes a decision dashboard If a skill or tool is not installed, tell me what is missing and give me the closest fallback. Do not install anything. Do not build the page yet. ``` If Claude says a skill is missing: - Open the Skills and Tools page. - Download or install the missing skill if you want to use it. - If you are moving fast, ask Claude for the fallback prompt version. Done when: - You know whether frontend-design is available. - You know whether Firecrawl or Exa is available. - You know whether dashboard-setup is available. ## Step 4: Write The Local Project Rules What you are doing: You are creating the rulebook Claude has to obey inside this project. Tell Claude Code: ```text Create CLAUDE.md for this project. Write short project rules for this page build: - ask clarifying questions before building - keep all work inside this project folder - use SURFACE-RESEARCH.md, LANDING-PAGE-COPY.md if it exists, DESIGN.md, and SURFACE-BRIEF.md before editing the site - use frontend-design before making UI decisions - do not invent proof, numbers, testimonials, logos, screenshots, guarantees, or customer quotes - keep the page focused on one buyer, one promise, and one action - check mobile before calling the page ready - keep deploy notes in README.md After you write CLAUDE.md, summarize the rules in plain English. Do not build the page yet. ``` Done when: - `CLAUDE.md` exists. - It says Claude must ask before building. - It says Claude cannot invent proof. - It says frontend-design should guide UI decisions. ## Step 5: Set The Bar Before The Build What you are doing: You are writing what "good" means before Claude gives you a pretty average first draft. Tell Claude Code: ```text I am building a page for [audience] who need [job]. Before we build, help me define the quality bar for this page. Ask me 5 clarifying questions first. After I answer, write the quality bar into SURFACE-BRIEF.md under a section called "Quality Bar." Include: - what the page must prove above the fold - what would make it feel generic - what would make it feel trustworthy - the one action the page should cause - what proof must appear high on the page - mobile rules - three mistakes to avoid Do not build the page yet. ``` Answer with: - who the page is for - what they are trying to do - what makes them hesitate - what proof you actually have - what you want them to do next Done when: - `SURFACE-BRIEF.md` has a "Quality Bar" section. - The above-the-fold job is written. - The page still has not been built. ## Step 6: Run Surface Scout What you are doing: You are finding the patterns strong pages already use, so Claude is not building from memory sludge. Use these resources now: - Land-book for landing page structure: https://land-book.com/ - Awwwards for higher-end references: https://www.awwwards.com/ - Godly for modern web patterns: https://godly.website/ - Dribbble for visual direction: https://dribbble.com - Firecrawl setup: https://theaicreativestrategist.com/skills.html#research-tools Tell Claude Code if you already have reference links: ```text Use these reference sites: [paste 3-5 links] Create SURFACE-RESEARCH.md for my page. For each reference, extract: - section order - headline patterns - trust signals - CTA patterns - proof assets needed - visual patterns worth borrowing - weak patterns to avoid - what the page must prove immediately If Firecrawl is available, use it to scrape the references into clean Markdown first. If Firecrawl is not available, inspect the pages manually from the links I provide. Then summarize the shared pattern across the references. Do not copy the brands. Extract the structure and decisions. Do not build the page yet. ``` Tell Claude Code if you do not have reference links: ```text Help me find 5 reference pages for this build. Use this target: - page type: [landing page / about page / case-study page / dashboard] - audience: [audience] - offer or job: [offer/job] - style I want: [practical, premium, editorial, playful, technical, luxury, bold, etc.] Use Exa if available to find candidate sources. Use Land-book, Awwwards, Godly, and Dribbble as inspiration sources. Give me 5 candidate links and tell me what each one is useful for. Do not build the page yet. ``` Done when: - `SURFACE-RESEARCH.md` exists. - It names patterns from references. - It lists proof the page needs. - It includes patterns to avoid. ## Step 7: Save The Sales Argument What you are doing: Use this step after Step 1A. The coach did the thinking. This step turns the answers into the file Claude Code will use later. If this is a sales page and you skipped Step 1A, stop and run Step 1A now. Use this resource now: - Landing Page Build Coach: https://theaicreativestrategist.com/prompts.html#landing-page-build-coach Tell Claude Code: ```text Using my answers from the Landing Page Build Coach, write LANDING-PAGE-COPY.md. Include: - one buyer - where that buyer is standing right now - awareness level - offer and deal - one promise - named mechanism - Rule of One - above-the-fold draft - proof plan - features and objections - FAQ - second CTA - founder note beats If any of those are missing, ask me only for the missing pieces. Do not invent proof. Do not build the page yet. ``` Answer with: - what you sell - who the one buyer is - what moment makes them look for this - what they already know - what the deal is - why your thing works - what proof you actually have Done when: - `LANDING-PAGE-COPY.md` exists. - It has one buyer, one promise, and one action. - The named mechanism passes the competitor test. - The above-the-fold section passes the five-second grunt test. ## Step 8: Choose A Design Contract What you are doing: You are giving Claude a visual contract. "Make it clean" is not a design contract. It is an invitation to slop. Use these resources now: - Awesome `DESIGN.md`: https://github.com/VoltAgent/awesome-design-md - Frontend Design skill: https://theaicreativestrategist.com/skills.html - UI/UX Pro Max skill: https://github.com/nextlevelbuilder/ui-ux-pro-max-skill - CSS Peeper for inspecting references: https://csspeeper.com/ - 21st components: https://21st.dev/community/components - It's Hover: https://www.itshover.com/ Tell Claude Code: ```text Use the frontend-design skill for this step. I need a DESIGN.md for this page before you build. Use: - SURFACE-RESEARCH.md - LANDING-PAGE-COPY.md if it exists - the Quality Bar in SURFACE-BRIEF.md - these reference links: [paste links] - this DESIGN.md inspiration if useful: https://github.com/VoltAgent/awesome-design-md First, recommend 3 possible design directions. For each direction, show: - visual thesis - typography feel - color roles - layout rhythm - imagery strategy - what it would make the page feel like - what could go wrong Use this format for your recommendation: - The trap: what a generic AI page would do - Better move: the direction you recommend - Why it works: what specifically changed and why Do not write code. Do not build the page yet. ``` Pick one direction. Then tell Claude Code: ```text Write DESIGN.md for the direction I picked. Include: - visual thesis - exact color roles - typography rules - spacing and density - component rules - imagery rules - motion rules - mobile rules - do and don't list - what to borrow from the references - what not to copy - anti-slop rules specific to this page Make the rules specific enough that a first draft can be judged against them. Do not build the page yet. ``` Done when: - `DESIGN.md` exists. - It has exact visual rules. - It says what to avoid. - It gives Claude enough constraints to make a non-generic first draft. ## Step 9: Build The Surface Brief What you are doing: You are combining the job, reference evidence, sales argument, and design contract into one file Claude can build from. Tell Claude Code: ```text Create the final SURFACE-BRIEF.md for this build. Use: - CLAUDE.md - SURFACE-RESEARCH.md - LANDING-PAGE-COPY.md if it exists - DESIGN.md - the Quality Bar already in SURFACE-BRIEF.md - my audience - my offer or page goal - my reference links The brief should include: - page type - audience - one primary action - one promise and named mechanism, if this is a landing page - section order - above-the-fold burden - proof needed - design rules - copy constraints - image and asset needs - mobile requirements - deploy target: GitHub + Vercel End the brief with this instruction: "Before building, ask any clarifying questions that would change the page." Do not build the page yet. ``` Done when: - `SURFACE-BRIEF.md` is complete. - It says what the page should do. - It says what the page should feel like. - It says what Claude should ask before building. ## Step 10: Build The First Draft What you are doing: Now Claude can build. This is the first time it should touch the actual page. Tell Claude Code: ```text Use the frontend-design skill. Read: - CLAUDE.md - SURFACE-RESEARCH.md - LANDING-PAGE-COPY.md if it exists - DESIGN.md - SURFACE-BRIEF.md Before building, ask me any clarifying questions that would change the page. After I answer, build the first version of the site inside the site folder. Prioritize: - clean responsive layout - strong above-the-fold section - real section hierarchy - proof placed where it matters - no generic stock SaaS feel - mobile usability - deployable files After building, tell me: - which files changed - the local command to preview the site - what you want me to check first ``` Done when: - The page exists locally. - Claude gives you a local preview command. - The first screen says what the page offers and who it is for. - The page uses the design contract. ## Step 11: Preview The Page Locally What you are doing: You are opening the page before asking for polish. Do not review a page you have not seen. Tell Claude Code: ```text Start the local preview server for this site. Give me the local URL. If the first port is busy, use another one. Do not make code changes while starting the server. ``` Then check: - Open the local URL. - Check desktop. - Narrow the browser and check mobile. - Click the buttons. - Make sure images load. - Check whether the page looks like the selected `DESIGN.md`. Done when: - The local URL opens. - The layout does not break on mobile. - The buttons go somewhere intentional. - You know what feels weak before asking Claude to fix it. ## Step 12: Run The Slop Detector What you are doing: You are checking whether the page has the usual AI smell before anyone else sees it. ![AI Website Slop Detector](https://theaicreativestrategist.com/img/day3/slop-detector.png) Tell Claude Code: ```text Review the current site against the AI Website Slop Detector. Create REVIEW-NOTES.md with: - can a stranger say what this is in five seconds? - is there one buyer? - is the mechanism named? - is the proof real? - did DESIGN.md exist before the first draft? - did we review mobile as its own surface? - what still feels like default AI output? - the top 5 fixes in order Be direct. Do not protect the draft. Do not make changes yet. ``` Done when: - `REVIEW-NOTES.md` exists. - You know the top five fixes. - The critique names sections, not vague feelings. ## Step 13: Fix One Section At A Time What you are doing: You are driving the feel pass. Claude can improve the page. You still have to name what feels off. Scroll the site slowly. Mark: - the section that feels flat - the section that feels unclear - the section where the eye gets lost - the part that feels like default AI output Tell Claude Code: ```text The [section name] section feels [flat / unclear / generic / visually weak]. Improve only this section. Keep the content job the same, but improve: - hierarchy - spacing - visual contrast - proof placement - interaction or motion if it earns its place - mobile behavior Use DESIGN.md as the constraint. Do not redesign the whole page. After the change, tell me exactly which files changed. ``` Done when: - Only the intended section changed. - The section improved on desktop and mobile. - The fix did not break the rest of the page. Repeat this step until the page is good enough to deploy. ## Step 14: Deploy With GitHub And Vercel What you are doing: GitHub holds the files. Vercel puts them online. The finish line is a URL someone else can open. ![GitHub + Vercel Launch Route](https://theaicreativestrategist.com/img/day3/github-vercel-launch-route.png) Tell Claude Code: ```text Prepare this project for deployment through GitHub and Vercel. Check: - the site runs locally - the build command is clear - the output folder is clear - no secrets are committed - README.md has the local run command - README.md has deploy notes Then walk me through the GitHub and Vercel deploy steps one screen at a time. Do not skip ahead. ``` Done when: - The URL opens in a normal browser. - The URL does not start with `localhost`. - You can send the link to someone else. - The repo has the files needed to rebuild the site. ## Step 15: Build The Client Edit Gate What you are doing: This is the handoff surface. The client should edit words and images. They should not be able to detonate the layout. Tell Claude Code: ```text Design a client edit gate for this page. Do not build it yet. Map: - which fields a client should be allowed to edit - which layout and brand rules should be locked - how changes get approved - how publishing works - how rollback works if the edit breaks something Write the plan into CLIENT-EDIT-GATE.md. ``` Done when: - `CLIENT-EDIT-GATE.md` exists. - The client can change content. - The system protects structure. - Every publish has a rollback path. ## Step 16: Bridge Into Dashboards What you are doing: A website faces a stranger. A dashboard faces a decision. Use this resource now: - Dashboard Builder: https://theaicreativestrategist.com/dashboard.html Tell Claude Code: ```text Use the dashboard-setup skill. I want to build a dashboard for [account/project/client]. Before designing the dashboard, ask me: - what decision this dashboard should improve - who uses it - what data sources are allowed - what each metric means - what action someone should take after reading it Do not draw the dashboard until the decision is clear. ``` Done when: - You know the decision. - You know the user. - You know the allowed data. - You know what action the dashboard supports. ## MOV Today Memory: - `CLAUDE.md` - `SURFACE-RESEARCH.md` - `LANDING-PAGE-COPY.md`, if this is a sales page - `DESIGN.md` - `SURFACE-BRIEF.md` - `REVIEW-NOTES.md` - `CLIENT-EDIT-GATE.md` - `README.md` Organization: - one project folder - named files - reference links separated from final assets - deploy notes in the repo Visualization: - plan as page - website as live URL - dashboard as decision surface - client editor as handoff surface ## If You Get Stuck | Problem | What to tell Claude Code | |---|---| | I do not know what to build. | `Ask me 5 questions to pick the smallest real page I can ship today.` | | The site looks generic. | `Review DESIGN.md. Strengthen the design rules, then tell me which section violates them most.` | | Claude starts building too soon. | `Stop. Do not build yet. Ask clarifying questions before touching files.` | | The page has nice sections but no point. | `Rewrite the primary action and above-the-fold burden in SURFACE-BRIEF.md before editing the site.` | | The offer feels fuzzy. | `Run the Landing Page Build Coach again and fix the one promise, mechanism, and Rule of One.` | | The design feels average. | `Use the frontend-design skill and create 3 stronger design directions before changing code.` | | The references are thin. | `Use Exa to find better references, then Firecrawl to extract the strongest two.` | | The live link only works for me. | `I am looking at localhost. Walk me through GitHub and Vercel until I have a public URL.` | | Vercel fails to build. | `Inspect the build error. Identify the build command, the output folder, and the first failing file. Fix one issue at a time.` | | A component breaks the project. | `Rebuild the same effect using the current stack. Do not force a component that does not fit.` | | The mobile version is bad. | `Review mobile as its own surface. Fix layout, tap targets, type scale, and overflow before desktop polish.` | | The client handoff feels risky. | `Lock layout. Make only content fields editable. Add approval and rollback.` | ## After This Session Ship one page. Minimum finish line: - project folder - `CLAUDE.md` - `SURFACE-RESEARCH.md` - `LANDING-PAGE-COPY.md`, if this is a sales page - `DESIGN.md` - `SURFACE-BRIEF.md` - local site - live URL - one review pass against the standard Then post or save: ```text Live URL: What I built: What the page is supposed to make someone do: What I changed after the review pass: What I would fix next: ``` ## Next Session: Apps The app session takes the same loop and stretches it. Bring the app shape of the same annoyance: - an internal tool - a client portal - a calculator - a dashboard with actions - a workflow you want someone to log into and use You do not need the whole product figured out. You need the first flow worth clicking through.