Start Here · 06 / 07
First Visible Build
Let Antigravity implement the first Work Card, then check the visible website section against your plan and ask AI to explain what changed.
Vibe 101 / Current checkpoint
First Visible Build
Ready to stamp - Saved in this browser only.
0 of 7 checkpoints complete.
First Visible Build
You pass this stage when one real website section is visible, built from your first Work Card.
What this is
First Visible Build is the first change you can see. Antigravity reads the saved plan and implements only the current Work Card — one section or one page — then verifies it and updates build-status.md.
Why it matters
Visible progress gives confidence, but too much progress at once hides the learning. One visible section lets you compare the brief, the plan, and the browser result before you continue.
What to do
Build only the first Work Card
Good first sections:
- homepage hero
- simple menu or service list
- about / profile section
- contact section without a backend
Use the shared implementation loop from Build One Work Card. Paste this prompt:
Read build-status.md, build-blueprint.md, design.md, and the current work card listed in build-status.md.
Implement only the current work card.
Rules:
- do not build other sections unless the card says so
- do not add login, payment, database, dashboard, chat, or backend
- follow the visual rules in design.md
- do not copy external brand identity, logos, testimonials, stats, or images
- keep it readable on mobile
After finishing:
1. run the verification steps,
2. summarize what changed,
3. update build-status.md,
4. stop.Check the visible result
After Antigravity changes the files, open the preview and compare it with your plan. Before approving the first Work Card, check:
- Does it match the goal in
project-brief.md? - Does the section follow the
design.mdlayout rules? - Does it match the chosen mood without cloning the inspiration?
- Are spacing, cards/buttons, and typography feel intentional?
- Is the first screen readable on mobile?
- Did the AI add fake logos, fake stats, fake testimonials, or generic AI decoration?
- Is it still only the first Work Card?
Ask AI to explain what changed
Explain what changed in beginner-friendly terms.
For each file:
- what changed
- why it changed
- what I should look at in the previewCommon mistakes
- Asking for the whole website in one prompt.
- Accepting code without opening the preview.
- Skipping the explanation.
- Letting AI add login, database, or animations too early.
- Ignoring the design direction and accepting a generic-looking section.