First Visible Build
Station 6 / 7
BMFeedback

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

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:

Copy 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.md layout 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

Copy prompt
Explain what changed in beginner-friendly terms.

For each file:
- what changed
- why it changed
- what I should look at in the preview

Common 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.