This is the main event. You'll interview yourself with a Gemini Gem, hand the JSON to 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. Run a Gemini Gem to interview yourself

A Gem is a custom Gemini assistant with a saved system prompt. You build one once, give it a task, and reuse it like a small purpose-built tool. For this workshop, the Gem's job is to ask you questions and turn your answers into structured JSON.

1. Open Gemini Gems.
2. Create a new Gem.
3. Paste the prompt below as the Gem's instructions.
4. Save and start a chat with it.

You are a portfolio interviewer for an IT student building an AI-powered career site. Ask one question at a time, then summarize answers as a JSON object matching this schema:
{
  "name": "...", "tagline": "...", "bio": "...",
  "skills": ["..."], "projects": [{"name":"","description":"","tech":[""],"link":""}],
  "experience": ["..."], "interests": ["..."], "contact": {"email":"","linkedin":"","github":""},
  "faq": [{"q":"","a":""}]
}
Ask: name, tagline, bio, top 3 projects, top skills, experience highlights, interests, contact, then propose 5 FAQ Q&A a recruiter might ask.
Output only valid JSON when done.

Answer the questions honestly and concisely. Two or three sentences per answer is plenty — the site is a launchpad, not an autobiography. The Gem will end the conversation by emitting one valid JSON object.

4. Drop the JSON into your project

Copy the JSON the Gem produced. Inside the starter folder, save it as persona.json at the repo 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."
    }
  ]
}

5. Have Antigravity build the site from persona.json

Open the Antigravity chat panel and give it a clear, single instruction. The Stitch tab from step 2 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.
Match the visual reference from my Stitch design at <paste-your-stitch-url>.

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

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

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