Build with Antigravity

This is the main event. You'll feed your spec from step 3 into Antigravity and watch a real career site come together. The work here is mostly steering, not typing.

1. Open your project

You'll start from an empty folder. The agent scaffolds the project — writes the HTML/CSS/JS in public/, a small server.js, a Dockerfile, runs npm install, and starts the dev server — as part of its first turn. No starter repo to clone.

Create the folder, initialize a git repo in it, and remember the path:

mkdir -p ~/projects/career-launchpad && cd ~/projects/career-launchpad && git init

Initializing git up front means the diff-tracking hook you'll add in section 3 has a repo to talk to from turn one. Then open the folder in your agentic editor:

cd ~/projects/career-launchpad

gemini

2. Bring in your Stitch design

When you finished your Stitch design in step 4, you noted the layout, palette, and components. Now hand that to the agent — there are two equally good ways, both copy-paste, no MCP setup needed.

Either approach works for both Antigravity and Gemini CLI. Pick whichever feels easier.

3. Add a hook to keep things deterministic

Skills and MCP servers give the agent more to do. Hooks are the opposite — they constrain what happens around every tool call. Same agent, same prompt, same outcome — every run.

A hook is a shell command your agent runs automatically before or after a tool call (Bash, Edit, Write, etc.). Think git pre-commit hook, but for agents. Both Antigravity and Gemini CLI read hooks from .gemini/settings.json, so the same file works in either path. Three workshop-relevant uses:

• Observe. Log every file the agent touches, so you have a trail without scrolling the diff panel.
• Verify. Auto-format or lint after every Edit / Write — output style stops drifting between iterations.
• Constrain. Block destructive shell commands before they run (rm -rf, curl | sh) — the same hygiene the security slide called out.

Create .gemini/settings.json at the project root with this minimal hook:

{
  "hooks": {
    "PostToolUse": [
      {
        "matcher": "Edit|Write",
        "hooks": [
          { "type": "command", "command": "git diff --stat HEAD" }
        ]
      }
    ]
  }
}

From now on, every time the agent edits a file you'll see a one-line summary of what changed in the project. No more "wait, did it really only touch the file I asked for?" — the hook tells you, on every turn, automatically.

4. Give the agent a memory

Hooks make every turn deterministic. Memory makes every session deterministic. The agent has no recall between runs and a finite context window within them — so the facts you want it to keep have to live somewhere it will reliably look.

Three layers, in order of how often you'll touch them:

1. Project memory · GEMINI.md. A small markdown file at the project root. Antigravity loads it at the start of every session — facts the agent should never have to re-derive (project structure, dev commands, the shape of persona.json, what not to touch).
2. Spec artifacts · persona.json + the Antigravity prompt from step 3. Long-form truth that lives in files. When the agent contradicts a constraint, paste the relevant paragraph from the prompt back into the chat — re-grounding takes ten seconds and saves twenty minutes of correction.
3. Session memory · the current chat. The most volatile layer. Long sessions accumulate dead-end paths, abandoned ideas, and contradicted decisions. When the agent starts feeling "off," it usually means session memory is poisoned — start fresh with /clear and reload from layers 1 and 2.

Drop a starter GEMINI.md at the project root:

# Career Launchpad — agent notes

## Project shape
- Plain HTML/CSS site, no framework, no build step.
- `public/` holds `index.html`, `styles.css`, optional `app.js`.
- `server.js` at the root serves `public/` and reads `process.env.PORT` (default 8080).
- Dev: `node server.js` (or `npm run dev` if the package script exists). Refresh the browser to see edits.

## Source of truth
- `persona.json` — name, tagline, projects, skills, contact, faq.
  Edits to content go here, not in HTML.
- `docs/antigravity-prompt.md` — the original prompt from step 3 with
  Market Profile, sections, and constraints. When in doubt, re-read it.

## Don't touch
- `package.json`, `package-lock.json` — leave dependencies alone unless asked.
- `node_modules/` — never edit.

## Conventions
- Plain HTML, CSS, vanilla JS. No framework, no transpiler. Keep it that way.
- One commit per accepted change. Short imperative messages.

Edit it as the project grows — but keep it tight. Every line in GEMINI.md is paid for in context tokens on every turn.

5. Pull in your prompt from step 3

From step 3 you have two prompts — one for Stitch (used in step 4) and one for Antigravity. The Antigravity prompt is the second of the two fenced code blocks NotebookLM generated. It already includes everything Antigravity needs: the plain-HTML/CSS stack, the section list, basic SEO, and an instruction to write a persona.json at the project root. You don't need to construct anything else.

The persona.json Antigravity will write looks roughly like this — useful to know the shape because the bonus tracks (steps 8 and 9) read from it:

{
  "name": "Alex Schmidt",
  "tagline": "IT student turning ideas into shipping software.",
  "bio": "Third-year IT student in Munich focused on web platforms and applied AI. I like small teams, sharp problems, and building things that ship.",
  "skills": ["TypeScript", "Node.js", "Python", "Google Cloud", "Postgres"],
  "projects": [
    {
      "name": "Campus Map",
      "description": "An indoor wayfinding app for the university — 800+ active users in the first semester.",
      "tech": ["React", "Mapbox", "Cloud Run"],
      "link": "https://github.com/alex/campus-map"
    }
  ],
  "experience": ["Working student at a fintech, 12 months"],
  "interests": ["Climbing", "Live music", "Open source"],
  "contact": {
    "email": "alex@example.com",
    "linkedin": "https://linkedin.com/in/alex",
    "github": "https://github.com/alex"
  },
  "faq": [
    {
      "q": "What kind of role are you looking for next?",
      "a": "A working student or junior backend role on a small product team."
    }
  ]
}

6. Have the agent build the site

Paste the Antigravity prompt from step 3 as your first agent message. Append a single line at the bottom telling it where the design reference lives — the file you saved in section 2.

<paste the Antigravity prompt from step 3 here — the second
fenced code block NotebookLM generated>

Match the visual reference at ./design-reference.html — implement the same
layout, color palette, typography, and component styling in plain HTML/CSS.

If you used a screenshot instead of the HTML/CSS export, change the path to ./design-reference.png and the line becomes: "Match the visual reference at ./design-reference.png — implement the same layout, palette, typography, and component shapes in plain HTML/CSS."

Read ____________ and create ____________________
to render a list of posts with title, date, excerpt, and a link to the
full post. Match the existing site's design tokens.

Build brief:
______________________________________________________________

Read posts.json and create public/blog/index.html and a small
public/blog/post.html template
to render a list of posts with title, date, excerpt, and a link to the
full post. Match the existing site's design tokens.

Build brief:
A simple chronological blog index. No comments, no auth. Each post is
markdown rendered to HTML at build time. Stitch reference at
<paste-your-stitch-url>.

7. Iterate

The first build will be 80% of the way there. Send small, focused follow-ups instead of one giant rewrite request:

• "Add a subtle hover effect to the project cards — slight lift, soft shadow."
• "Change the hero to a diagonal gradient using the accent color."
• "Make the layout work on a 375px-wide phone — single column, no horizontal scroll."
• "Replace the skill progress bars with rounded pill tags."
• "Add a footer with my contact links from persona.json."

8. Optional: pre-rendered FAQ

The persona.json Antigravity wrote includes a faq array (or you can add one yourself with two or three Q/A pairs). Tell Antigravity to render it as a static "Ask me about..." section near the bottom of the page.

Render the faq array from persona.json as a section titled
"Ask me about..." with each question as a heading and the answer
underneath. No collapsing — make all answers visible.

This gives the page an "AI-aware" feel without any runtime risk: no API calls, no rate limits, no tokens to manage. It also makes the page actually useful to a recruiter scanning quickly. The real, live chatbot is covered in the bonus track — this is the lightweight version.

Troubleshooting

Antigravity / Node

npm cache clean --force

rm -rf node_modules package-lock.json

npm install

# find and kill it (macOS / Linux)
lsof -ti:8080 | xargs kill -9

# or run on a different port
PORT=8081 npm run dev

Stitch handoff