Live replay
Websites onAutopilot, live
A real website built live, with an AI doing the typing and me doing the deciding. Brand kit first, the interview, the plan and the build prompts, the visuals, then Grok Build one prompt at a time while Grok Bot checks the work.
Prompts fromthis live
Stage 1. The interview (Grok Bot or any chat AI)
Plan the site in one chat, one question at a time, before anyone opens a file.
Stage 2. The section plan
Turn the brief into pages, sections, and the pictures you still need to make.
Stage 3. The meta-prompt: "write me all the build prompts"
Have the AI write every build prompt, in order, each one ready to paste on its own.
Stage 4. The RULES paragraph template
Fill this in once. It sits at the top of every build prompt after that.
AntiHero example
A filled-in RULES paragraph for a demo brand, so you can see the shape.
5.1 Setup and backup
Start the Astro project, save a first commit, and put the logo and fonts in place.
5.2 Hero
Build the first screen: one big headline, one line under it, one button.
5.3 Navigation
Add the slim top bar, and a full-screen menu for the phone.
5.4 Sections (one prompt per section)
Add one section with real copy and layout. Motion comes later.
5.5 Lenis smooth scroll
Make scrolling feel weighted, and switch it off when someone wants less motion.
5.6 GSAP ScrollTrigger reveals
Bring headings, images, and cards in as they reach the screen.
5.7 Scroll-scrubbed video
Play a video forward and back with the scroll.
5.8 Page transitions
Move between pages without a hard cut, and keep the nav steady.
5.9 Three.js 3D scene
Put one 3D scene on a big screen, and a still image on a phone.
5.10 Hover glow titles
Warm a heading up under the cursor. Phones stay still.
5.11 Performance and media compression
Shrink the pictures and video so the first screen shows up fast.
5.12 Credits page
Name everything you borrowed, with the person, the license, and the link.
5.13 QA with Playwright
Open every page in a real browser and catch what broke.
Hero still
Ask for the first picture, with calm space left for the headline.
Scroll video
Turn a still you already like into one slow shot you can scrub.
The watcher prompt
Hand each commit to a second AI and ask if the task is actually done.
Stage 8. Review and the fix list
Get a numbered fix list, most important first, written so you can paste it back.
9.1 The NO SLOP RULES (written for the AI, not for you)
Paste this into the RULES so the site does not come out looking like every other one.
9.2 The Visual Interview
Settle the look, the type, and the motion before anyone writes CSS.
9.3 The Standout Features Interview
Pick the 3 to 5 moments worth building, and drop the tricks.
Typography and spacing pass
Give the type and the gaps one scale, and stop every section from sharing a shape.
Motion pass
Keep the motion that has a job. Take out the motion that is only there to move.
Imagery pass
Check every picture against the brand, and mark a replacement where one is off.
Copy pass
Rewrite the lines in your voice, and mark TODO where a real fact is missing.
Act as a jury of three Awwwards judges
Score the site the way a jury would, and skip the pep talk.
Turn this fix list into Grok Build prompts
Turn a fix list into prompts you can run one commit at a time.
9.5 The Post-launch Quality Upgrade Interview
A week after the site is live, find what feels flat and write the upgrades.
Investigate before you fix
Find out why something is broken without letting the AI change a thing.