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

1. Open the project in Antigravity

Clone the workshop starter, install dependencies, and start the dev server. Then open the folder in Antigravity.

git clone https://github.com/fabkrum/agentic-coding-workshop-2026.git
cd agentic-coding-workshop-2026/starter
npm install
npm run dev

Open http://localhost:3000 in Chrome. You should see the starter career template with placeholder content. Leave the dev server running — it auto-reloads as Antigravity edits files.

In Antigravity, use File → Open Folder and pick the starter directory. From here on, everything happens inside the IDE.

2. Install Superpowers and the MCP servers

Three quick installs add the agentic workflow patterns and the external context that Antigravity will lean on.

claude plugins add superpowers
claude mcp add stitch
claude mcp add context7

Superpowers is a skill system for agentic coding — brainstorming, TDD, parallel work, structured planning. Stitch MCP lets the assistant pull your design directly from Stitch. Context7 MCP serves up-to-date library docs so the assistant doesn't hallucinate APIs.

Verify everything is connected:

claude mcp list

You should see stitch and context7 in the list.

3. Pull in your spec from step 2

You ran the Gemini Gem in step 2 and saved its output. You should have at minimum:

• persona.json — your structured data (name, tagline, projects, skills, contact)
• A design brief — already used in Stitch in step 3
• A build brief — paste this into Antigravity in the next prompt

Drop persona.json at the project root. It should look roughly like this:

{
  "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."
    }
  ]
}

4. Have Antigravity build the site from your spec

Open the Antigravity chat panel and give it a clear, single instruction. Paste the build brief from step 2, then point it at persona.json and the Stitch design from step 3 (the Stitch tab stays open so Antigravity, via the Stitch MCP, can match the visual reference).

Read persona.json and update public/index.html and public/styles.css
to populate hero, About, Projects, Skills, and an FAQ section.
Follow the build brief below and match the visual reference from my
Stitch design at <paste-your-stitch-url>.

Build brief:
<paste the build brief from step 2 here>

Antigravity will plan, edit files, and show you a diff. Approve the changes and refresh http://localhost:3000. You should now see your name, your projects, and your tagline rendered against the design from step 3.

5. 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."

6. Optional: pre-rendered FAQ

Your Gem already produced a faq array in persona.json. 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.