2

Spec your site with Gemini

15 min

Before you design or code, give the AI a clear brief. The workshop's Gemini Gem interviews you for ~10 minutes and outputs a complete spec — persona data, design brief, build brief — ready to feed into Stitch (next step) and Antigravity (step 4).

What is a Gem?

A Gem is a custom Gemini configuration with a fixed system prompt. It's persistent across sessions, shareable via a single link, and ideal for repeatable structured workflows like this interview.

Open the workshop's Gem

Your instructor has shared a Gem URL. Open it in a new tab and start a fresh chat.

Open the workshop Gem

The link looks like gemini.google.com/gem/<workshop-gem-id>. Sign in with the same Google account you used in step 1.

Run the interview

The Gem will ask you ~10 questions, one at a time. It covers:

Answer in two or three sentences each. The site is a launchpad, not an autobiography.

Be specific

The Gem can't read your mind. If you say "minimalist" you'll get one thing; if you say "minimalist with a single bold accent color and Inter font" you'll get a much sharper result. Same for projects — concrete > generic.

Save the output

The Gem produces three artifacts. Save them somewhere you can paste from later (a text editor, a notes app, your clipboard manager):

  1. persona.json — structured data. Used in step 4 (Antigravity) to populate the site.
  2. Design brief — a one-paragraph description of the visual direction. Used in step 3 (Stitch) as the design prompt.
  3. Build brief — a structured task list. Used in step 4 (Antigravity) as the implementation prompt.

The persona.json the Gem produces will 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.",
  "skills": ["TypeScript", "Node.js", "Python", "Google Cloud", "Postgres"],
  "projects": [
    {
      "name": "Campus Map",
      "description": "An indoor wayfinding app for the university — 800+ active users.",
      "tech": ["React", "Mapbox", "Cloud Run"],
      "link": "https://github.com/alex/campus-map"
    }
  ],
  "interests": ["Climbing", "Live music", "Open source"],
  "contact": {
    "email": "alex@example.com",
    "linkedin": "https://linkedin.com/in/alex",
    "github": "https://github.com/alex"
  }
}

Iterate if needed

If the brief feels off, run the Gem again. It's free and fast. Better to fix it here than to discover misalignment in step 4 when Antigravity is two prompts deep.

Why this step exists

Decoupling content from layout. When you spec first, you can iterate on visuals (Stitch) and code (Antigravity) without re-deciding what the site is about. The spec is the source of truth; everything downstream is presentation.

Better AI input. Antigravity does its best work when you hand it a tight spec, not a vague vibe. Same for Stitch. Ten focused minutes here saves you twenty messy minutes of "no, more like this" later.

Key takeaways
  • The Gem turns a 10-minute interview into a complete site spec.
  • Save all three outputs (persona.json, design brief, build brief) before continuing.
  • One spec produces all downstream artifacts — re-run if it feels off.