vibeproof

Your AI builds your website with you, so it does not look vibe coded. It grills you on your goal, your colors, and sites you love before it writes any code, then checks 59 things before you launch.

Paste this into any AI chat (ChatGPT, Claude, Gemini, Codex, Cursor, Lovable, v0), then say what you need:

Read https://raw.githubusercontent.com/nradawg/vibeproof/main/README.md and run it on me.

For example: "Build me a website for my landscaping business", "Vibeproof my site: example.com", or "Help me pick colors for my bakery".

You end up with a site-brief.md (goal, palette, pages, and proof in one place), the site built from it, and a launch report: what is done, what got skipped and why, and what still needs you.

You can spot a one prompt website in about two seconds. Purple gradients, fake reviews, buttons that go nowhere, no privacy policy. This is the fix.

Instructions for the AI running this

Help someone ship a website that looks like a real business made it. You do the thinking. They make a few decisions. Everything you need is in this one file: the steps, then Parts 1 to 8.

The steps

Run these in order. Don't write site code until the brief in step 4 has a yes.

1. Grill them. Follow Part 1. The grill. Ask in short rounds and give a recommended answer for every question, so they can just say yes. Never accept a vague answer.
2. Read their references. Their current site, if they have one, and one to three sites they love. Follow Part 2. Inspiration and components.
3. Pick the colors. Follow Part 3. Color. Diagnose what they have, then offer two palettes with hex codes, roles, and contrast checked.
4. Write the brief. Fill in the template in Part 4. The site brief and save it as site-brief.md in their project. If you cannot write files, give it to them in one code block and tell them to paste it in at the start of every new chat. Walk them through it and get a yes. From then on the brief is the source of truth. Re-read it at the start of every session.
5. Build. Build from the brief. Use components from the libraries in Part 2. Inspiration and components and restyle them to the palette. If they build somewhere you can't write code (Lovable, v0, Bolt, Framer, Webflow), turn the brief into one paste ready prompt for that tool instead. If you are a chat only AI, give them every file in full, one code block per file.
6. Vibeproof it. Go through every checklist and mark each item Done, Not needed (with the reason), or Missing. Fix everything Missing, then check again.
   • Part 5. Features checklist: 20 features
   • Part 6. Trust, legal, and accessibility checklist: 19 trust, legal, and accessibility checks
   • Part 7. Before launch checklist: 20 things before launch
   • Part 8. Vibe coded tells: what gives an AI built site away
7. Report. Finish with the report below.

Shortcuts

• "Check my site" or just a URL: read the site (step 2), then run step 6 on the live site. Give them the fix list, then fix it if they want.
• "Just help with colors": run step 3 on its own.
• They want it fast: ask round 1 of the grill, fill everything else with your recommended answers, and let them correct the brief.

Rules

• The goal runs the page. Most sites have one job: get the visitor on a call with the business. Every section moves toward that one action. If their goal is different (buy, sign up, visit), use theirs.
• Easy to scroll. Within five seconds a visitor should know what the business does, who it's for, and what to do next. One idea per section, short headings, plain words. Use the page order in Part 1. The grill unless there's a reason not to.
• Never make things up. No invented reviews, numbers, logos, team members, addresses, or awards. Ask for the real thing, or leave a clearly marked gap and list it in the report.
• Take patterns, not assets. Learn layout, spacing, and type from sites they love. Never copy another company's text, images, logos, or code.
• Legal pages are real pages. Privacy, terms, refunds, and cookies describe what the site actually does. You aren't their lawyer, so tell them to have a professional check anything they're unsure about.
• Ask before adding tracking. Analytics, pixels, and cookies change what they have to disclose and get consent for.
• Restyle every component. Library default colors, radius, and fonts are the fastest way to look vibe coded.

The report

Vibeproof report: <site name>

Goal: <the one action>, <where the main button sits>
Palette: <hex codes and roles>
Features: <n> done, <n> not needed
Trust, legal, and accessibility: <n> done, <n> not needed
Before launch: <n> done, <n> not needed
Vibe coded tells fixed: <list, or none>

Not needed, and why:
- <item>: <reason>

Still needs you:
- <item>: <what you need from them>

Part 1. The grill

Pull out every decision the site needs, with as little effort from them as possible.

How to ask

• Four rounds, three to five questions each. Number the questions. Skip anything they've already answered.
• Put your recommended answer under every question, so they can reply "yes to all" or only fix the ones they disagree with.
• If your tool can show multiple choice questions, use it.
• Push back on vague answers. "Modern", "clean", "professional", and "make it pop" mean nothing on their own. Ask which website looks that way to them.
• Find facts yourself. If they give a URL, read it before you ask about it.
• When nothing is left to decide, sum up the answers in five lines and get a yes before moving on.

Format each question like this:

Q1. The goal. When someone lands on your site, what's the one thing you want them to do? Recommended: book a call with you.

Round 1: the basics

1. What you do. In one sentence, what does the business do, and for who? Recommended: draft the sentence yourself from what they've told you, then ask them to fix it.
2. The goal. What's the one action a visitor should take? Recommended: book a call. Almost every service business wins on this.
3. The customer. Who's visiting, and what are they worried about when they land? Recommended: suggest the most likely customer and their biggest worry, based on the business.
4. Current site. Do they have a website now? Get the URL. Recommended: if they do, read it before round 2 so you don't ask what it already answers.

Round 2: look and feel

1. Colors. Do they already have brand colors (hex codes, a logo, a sign, a truck wrap), or should you pick? Recommended: keep the brand color for recognition and build the rest of the palette around it.
2. Three feeling words. How should a visitor feel in the first five seconds? Calm, bold, premium, friendly, fast, local... Recommended: suggest three based on the business and the customer.
3. Sites they love. One to three websites they like the look of, from any industry. Apple, Nike, Airbnb, a competitor, anything. What do they like about each one? Recommended: if they can't think of any, suggest two from inspiration.md that fit their feeling words.
4. Anything they hate. Colors, styles, or sites they never want to look like.

Round 3: proof and content

1. Services or offers. Get every one. The site shows all of them.
2. Proof. Real reviews, case studies, before and after photos, client logos, awards, a team photo. What do they actually have? Recommended: for a small business, a real team photo and three real reviews beat everything else.
3. Location. Do customers come to them, or do they serve an area? Recommended: if they're local, add a map, directions, and local business schema.
4. Response time. How fast do they answer a call request or a message? Recommended: promise something they can keep, like "We reply within one business day."
5. Questions customers always ask. Get five. They become the FAQ.

Round 4: the build

1. Where it gets built. Claude Code, Cursor, Codex, Lovable, v0, Bolt, Framer, Webflow, WordPress? Recommended: whatever they already use. If nothing, Next.js with Tailwind and shadcn/ui, deployed on Vercel.
2. Booking. How do people book the call: a scheduling link (Cal.com, Calendly), a form, or a phone number? Recommended: a scheduling link, plus a phone number for people who'd rather call.
3. Pages. Which pages do they need? Recommended: Home, Services, About, Contact, Privacy policy, Terms, a thank you page, and a custom 404. Add a refund policy if they sell online.
4. Data. Do they sell online, collect emails, or want analytics? Recommended: only collect what the goal needs. The answer decides which legal pages and consent steps are required.

The default page order

Use this unless their goal or references say otherwise. Each section answers the visitor's next question.

1. Hero: what they do, who it's for, and one button for the goal (three words or less). Under it, one trust line, like the response time promise or a real rating.
2. Proof strip: real reviews or client logos.
3. Services: every offer, one plain sentence each.
4. How it works: three steps, and the last step is the call.
5. Deeper proof: case studies, before and afters, longer reviews.
6. About: the team photo and why they do this work.
7. FAQ: five real questions that open and close.
8. Final call to action: the same button, the response time promise, real contact details, and a map if they're local.

On phones, keep a sticky button for the goal at the bottom of the screen.

Part 2. Inspiration and components

Sites they love

When they name a site, open it (or ask for screenshots if you can't browse) and write down what makes it work:

• Hero: how many words, how big, what's behind it, where the button sits
• Navigation: how many links, what stays sticky, what happens on mobile
• Type: serif or sans serif, heading size, space between lines
• Spacing: room between sections, how wide the text column is
• Imagery: real photos, product shots, illustration, or video
• Motion: what moves, how fast, and what triggers it
• The ask: how they lead people to the main action

Tell them what you're taking in one sentence per site, like: "From Apple: huge headlines, lots of empty space, and one idea per screen."

Take the pattern. Never copy their text, photos, logos, or code.

Good places to start

A competitor or a business they admire in their own industry is often the most useful reference of all.

Galleries

• Godly: https://godly.website
• Land-book: https://land-book.com
• Lapa Ninja: https://www.lapa.ninja
• One Page Love: https://onepagelove.com
• SiteInspire: https://www.siteinspire.com
• Awwwards: https://www.awwwards.com
• SaaS Landing Page: https://saaslandingpage.com

Component libraries

Most of these are React and Tailwind, copy and paste. Pick one base library (usually shadcn/ui) and one for flair. Restyle everything to the palette and fonts in the brief before it ships, because library defaults are a tell.

Before you use any component, read the code, check the license, and swap its colors, radius, and fonts for the ones in the brief.

Part 3. Color

Use this to read the colors a business already has and to build a palette that fits its goal.

The color wheel in one minute

• Primary: red, yellow, blue. Secondary: orange, green, purple. Tertiary: the six in between, like blue green.
• Warm colors (red, orange, yellow) feel energetic and close. Cool colors (blue, green, purple) feel calm and farther away.
• Tints add white. Shades add black. Tones add gray. Good sites use lots of tints and shades of one or two hues, not lots of hues.

Harmonies

Pick one on purpose and name it when you present a palette.

For most business sites: a neutral base, the brand hue, and one accent from across the wheel that only the goal button uses.

The 60-30-10 rule

• 60% neutral background, tinted slightly toward the brand hue instead of pure gray
• 30% the brand color and its shades: headings, section backgrounds, icons
• 10% the accent, saved for the goal button and key links

If the accent shows up everywhere, the button stops standing out.

What colors usually say

These are common associations in Western markets, not laws. Meaning shifts with culture, shade, and what sits next to it. Use this to reason, then check it against the actual business.

Diagnose an existing site

When they point you at their site, work through this, then tell them plainly what they need.

1. Collect the colors. Logo, buttons, links, headings, backgrounds. If you can read the HTML or CSS, check the color variables (like --primary) and the button styles. Write down each hex code and where it's used.
2. Name the harmony, or say there isn't one.
3. Read the signal. What do the colors say, and is that what the business wants to say? A law firm in neon orange says cheap and loud. A spa in bright red says urgent, not calm.
4. Check contrast on text and buttons, using the rules below.
5. Prescribe. Keep what builds recognition (usually the logo color). Change what fights the goal. Give exact hex codes and the job each one does.

The tone to use:

Your navy says trust, which is right for a lender, so keep it. The problem is your buttons are navy too, so nothing tells people where to click. Make the booking button #E07A2F, a warm orange from across the wheel, with near black text on it (5.7:1). White text on that orange only gets 3:1, which fails for button text.

Always calculate the contrast of any color you suggest before you say it passes.

Contrast rules (WCAG AA)

• Body text: at least 4.5:1 against its background
• Large text (24px and up, or 18.7px and up if bold): at least 3:1
• Buttons, inputs, icons, and focus rings: at least 3:1 against what's around them
• Check light mode and dark mode separately
• Never use color alone to carry meaning. Errors and success messages also get text or an icon.

Check any pair with the WebAIM contrast checker: https://webaim.org/resources/contrastchecker/

Build the palette

Give them two options. Each one needs:

• Background and surface (cards, sections): near white, or near black in dark mode, tinted slightly toward the brand hue
• Text and muted text: a near black and a softer one that still passes 4.5:1
• Brand: their color, plus a lighter and a darker shade
• Accent: the goal button only
• States: success green, error red, and a focus ring color that passes 3:1

Present it like this:

Then say which harmony it uses and why it fits their three feeling words.

Palettes that look vibe coded

• Purple to blue gradients with glowing blobs behind the hero
• Neon colors on pure black
• A different bright color on every card
• Gradient text on headings
• Gray text on gray backgrounds
• Every button and link in the accent color

Part 4. The site brief

Fill this in and save it as site-brief.md.

# Site brief: <business name>

The source of truth for this build. Re-read it at the start of every session. Change it here first, then in the code.

## The business
- What we do, in one sentence:
- Customer, and their biggest worry:
- Location or service area:

## The goal
- The one action:
- How it happens (scheduling link, form, phone):
- Response time promise:

## Look and feel
- Three feeling words:
- Sites we love, and what we take from each:
  - <site>: <what we take>
- Things to avoid:

## Palette
Harmony: <name>, because <reason>

| Role | Hex | Used for | Contrast |
|---|---|---|---|
| Background