Detailed content
🎯 Copy what already wins: the power law strategy
The biggest lever for building a good website isn't having an original idea — it's discover what already works and go from there. Imagine a chef opening a restaurant: they eat at the best places in town, note what works, and only then create their own menu — a better one, because it builds on what’s already been validated.
A building approach that starts with observation, not imagination. You map the websites that already get results and extract their patterns.
Reference sites have already gone through years of trial and error. You inherit that learning for free and avoid reinventing the wheel.
"Don’t reinvent the wheel" · extract patterns (CTAs, purpose, structure) · use AI to build quickly from what’s been validated.
🍽️ The chef analogy
The site is the module’s 3-step system. Step 1 — you "eat at the best restaurants" (research competitors). Step 2 — becomes the waiter taking the order (design brief). Step 3 — cook and serve (build and publish). Everything starts from what’s already proven.
🔎 Competitive intelligence: research + evaluation matrix
Use the Firecrawl inside Claude Code to find and read websites of competitors in your niche. Then you go from a broad list to a top 5 and put together a evaluation matrix that turns guesswork into an objective scoring grid.
Scrape competitors with Firecrawl and score them in a table by criteria (offer, social proof, clarity, design, SEO).
It’s the raw material for your website. Without this foundation, you’re building in the dark. The matrix reveals recurring patterns among the winners.
Broad list → top 5 · sources (Google reviews, SEO ranking, clarity of the offer) · "what do the 5 best have that the 5 worst don't?".
🪜 Step by step
- Create a new folder (e.g.,
website) and open Claude Code in it. - Connect Firecrawl (firecrawl.dev) to the agent.
- Send the competitor research prompt (see “Ready-made prompts”).
- Answer the clarifying questions: who the client is, what the angle is, and which region.
- Get the report with the list, top 5, and comparative analysis. If it comes without formatting, ask "create an HTML summary of this research".
📝 The structured design brief (best-principles.md)
Turn the research into a single document— best-principles.md — where you paste all the research and extracted principles. The agent builds much better when it reads an organized brief than when it gets scattered instructions in chat.
A file .md that becomes the project's source of truth: name, offering, audience, tone, and research principles.
A clear brief provides guidance without boxing things in. It bridges the research and what the agent will build.
Less prescriptive is better · give the agent freedom · let research guide pricing/positioning.
✓ Do it this way
- ✓Set the direction: name, offer, audience, tone.
- ✓Paste all the research from Step 1 into the file.
- ✓Answer in general terms; leave room for good decisions.
✗ Avoid
- ✗Fill it with meticulous rules that box in the agent.
- ✗Send scattered instructions in chat, without a document.
- ✗Fixing the price/position before the research points the way.
💡 Practical tip
After pasting the research, ask: "familiarize yourself with best-principles.md and let me know when you understand the brief". The questions the agent asks you show whether the brief is good.
🤖 Parallel Agents: Three Websites at Once
The same prompt produces different results each time you run it. Instead of hoping for the best with a single attempt, open multiple terminals — each one with a Claude Code building a version using a different strategy—and choose the winner.
Run parallel versions of the site: from the brief alone, from an HTML inspiration reference, and from a reference design system.
You compare "flavors" and aren't at the mercy of a single output that might miss the mark.
Parallel terminals · separate folders (1/, 2/, 3/) · three strategies · compare and choose.
Open three terminals
Rename them: “brief version,” “HTML inspiration version,” “design system version.” Each one reads the best-principles.md.
Run different strategies
Ask each agent to save its version in its own folder (1/, 2/, 3/).
Compare and choose
Open each version on localhost, compare them, keep the best one, and delete the others.
✂️ UI sniping + SEO: polish that converts
With the chosen version in hand, add the finishing touches. UI sniping is to pick up ready-made, attractive components from galleries and integrate them; in parallel, run packages of UI/UX and SEO to make the site accessible and rankable.
Bring in proven interface snippets from 21st.dev and Codepen, and run a UI/UX agent and an SEO agent at the same time.
You get top-notch visual quality without drawing from scratch—and beautiful design that no one can find doesn't convert.
21st.dev and Codepen · integrate “below the H1” / “in the testimonials section” · UI/UX and SEO packages in parallel · report with checked items.
📊 Refinement flow
- •Choose a component (testimonials, highlight effect), copy the code, and ask the agent to integrate it and adjust the text.
- •In a terminal, run the UI/UX package (contrast, button size, navigation, mobile) "without mercy".
- •In another one, run the SEO package (keywords, copy, schema markup) without changing the design.
- •Ask for a report with everything marked and do the final critical review.
Going deeper (optional): use only what fits
Not every attractive component suits your business. Use what reinforces the message and discard the rest. UI galleries are a starting point, not a requirement—coherence beats quantity.
🚀 Deploy to Vercel: from localhost to a public URL
A website that only runs on your computer is no use to anyone. GitHub stores the code (like a “video game save”: if something breaks, you go back to the previous version) and the Vercel puts the site online at a URL you can send to anyone.
Push the project to GitHub and connect it to Vercel to generate a URL anyone can access.
The public URL is what you send to clients. Without a deploy, the website doesn't exist for the world.
GitHub as backup and “save state” · private vs. public repository · Vercel connects to GitHub · custom domain and 301 redirect.
🪜 Step by step
- Ask the agent to connect to GitHub via CLI (or confirm it's already connected).
- Ask it to create a repository with the entire project.
- Ask it to connect to the Vercel CLI.
- Ask: "publish this on Vercel". You'll get a public URL.
- (Optional) In Vercel, add a custom domain and wait for propagation.
Self-check (optional): why build the site in parallel versions?
✏️ Exercises
1. Competitor research (medium)
Choose a real niche and run the research prompt with Firecrawl. Criterion: you have a top 5 list and a completed evaluation matrix.
2. Design brief (medium)
Build the best-principles.md with the research. Criterion: the agent confirms it understood the brief and asks relevant questions.
3. Parallel Agents (medium)
Build three versions of the site in separate folders. Criterion: you open all three on localhost and explain which one you chose and why.
4. UI sniping (medium)
Integrate at least two components from 21st.dev or Codepen, with the text adjusted. Criterion: the components appear and make sense in context.
5. Deploy (difficult)
Publish on Vercel. Criterion: you open the public URL in an incognito browser, and the site loads.
⌨️ Ready-to-use prompts
These are the key prompts for the 3-step system. Notice the tone: clearly, in Portuguese, saying what e for whom, and leaving room for the agent to make good decisions. The full database is in the Library → Prompts.
Competitor research (Firecrawl)
Hi! I want to create a website for an online growth consultancy that builds websites and helps businesses get customers. At its core, it needs to be something that helps businesses have a website that works. What I want you to do: use the Firecrawl connection and find the best and most successful consultancies/website builders in my market. I’ll operate in [REGION], but it can be international. 1. Identify a broad list of these companies. 2. Narrow it down to the top 5. You can evaluate them however you think best: Google reviews, SEO rankings, clarity of the offer, etc. Create a scoring matrix to help assess and rate each one. 3. Deliver a report on the 5 best. 4. Do a deep analysis: what do the 5 best have in common that the 5 worst do NOT? I want to use these principles to build my website. Ask me any questions you need to clarify your understanding.
Original (EN):
Hi! I'd like to create a website for an online growth consultancy that builds websites and helps businesses get customers. Fundamentally, it needs to be something that helps businesses get a website that works. What I'd like you to do: use the Firecrawl connection and find the very best, most successful website consultancies / website builders in my market. I'll be operating in [REGION], but this could be international. 1. Identify a large list of these. 2. Narrow it to the top 5. Assess them however you see fit — Google reviews, SEO ranking, offer clarity, etc. Build a judging matrix that helps you understand and score them. 3. Deliver a report of the 5 best. 4. Do a deep analysis: what do the 5 best have in common that the 5 worst do NOT? I want to use those principles to build mine. Ask me any questions you need to clarify your understanding.
Design brief / build from the best-principles.md
Hi! I want you to familiarize yourself with the best-principles.md document. We’ll build a website together for a [TYPE OF BUSINESS]. Use the principles drawn from the competitor research as a foundation. Be less prescriptive rather than more—you have the freedom to decide what works best. Use the best resources and libraries available to make the site as beautiful and interactive as possible. Let me know when you understand the brief; then we’ll start building.
Original (EN):
Hi! Please familiarize yourself with the best-principles.md document. We're going to build a website together for a [BUSINESS TYPE]. Use the principles extracted from the competitor research as your base. Be less prescriptive rather than more — you have freedom to decide what works best. Use the best resources and libraries available to make this as beautiful and interactive as possible. Let me know when you've understood the brief, then we'll start building.
UI sniping — integrate a component
Great work. I want you to integrate the component below [right after the H1 / in the testimonials section] and adjust the text to make sense on our site. Here’s the component code/URL: [PASTE HERE].
Deploy on Vercel
1. Conecte-se ao GitHub via CLI. Se já estiver conectado, apenas confirme. 2. Crie um repositório no GitHub com este projeto inteiro. 3. Conecte-se à CLI da Vercel. Se já estiver conectado, apenas confirme. 4. Publique este site na Vercel e me dê a URL pública.
Final critical review
I want you to act as a critical, demanding evaluator. Go through the site and find inconsistencies, nonsensical text, and poor design. Return with a list ranked as critical / high / medium / low. Don't invent critical bugs where none exist, but take a real look to help me improve. Include any relevant repository/package that might help.
⚠️ Common errors
- ✗Being too prescriptive in the brief. Too many "hard-and-fast" rules box in the agent and make the result rigid. Give it direction, but leave room for good decisions.
- ✗Build just one version. The same prompt produces different outputs each time you run it. With just one attempt, you might end up with the worst one by chance.
- ✗Forget to make the site public/accessible. A site available only on localhost is no use to anyone. Check whether the repository is private or public, and verify HTTPS.
- ✗Skip SEO and accessibility. A beautiful website that no one can find (and that excludes people with disabilities) doesn't convert. Run the packages before considering it ready.
- ✗Blindly trust the result. Always do a final critical review: copy, consistency, domain propagation, broken links.
✅ Module summary
Completion checklist
- ☐ I ran competitor research with Firecrawl and have a top 5 report.
- ☐ I built the evaluation matrix with criteria and scores.
- ☐ I created best-principles.md, and the agent confirmed it understood the brief.
- ☐ I built 2–3 versions in parallel and chose the best one with a clear rationale.
- ☐ I applied UI sniping with at least two integrated and customized components.
- ☐ I ran SEO and UI/UX and received the reports.
- ☐ I deployed to Vercel and have a public URL that opens in an incognito browser.
Next module:
2.2 — Building Apps: From Static Site to First Interactive Application