Spec your site with Gemini + NotebookLM

Before you design or code, give the AI a clear brief. This step uses two tools in sequence: the workshop Gem interviews you for ~10 minutes and outputs a structured brief; then you paste that brief into the workshop NotebookLM, which generates two production-ready prompts — one for Stitch (next step) and one for Antigravity (step 5).

Why two tools?

Each tool does what it's best at. The Gem has a fixed system prompt that enforces a disciplined one-question-at-a-time interview — it stays on script and gets clean answers out of you. NotebookLM's strength is the opposite: it's a grounded chat over the workshop's research corpus (the same notebook from step 2 — recruiter blog posts, hiring research, plus deep market reports for the EU, Turkey, Egypt, Tunisia, and Morocco). When NotebookLM generates your prompts, it injects regional employer names, salary anchors, and credential signals from cited research instead of inventing them.

The handoff between the two is a structured YAML brief that you copy out of the Gem and paste into NotebookLM. One copy, no editing in between.

Step A — Run the Gem interview

Open the workshop Gem 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.

participant:
  name: ""
  current_city: ""
  current_country: ""
target_market:
  profile: ""              # A, B, C, D, E, F, G, or H
  description: ""          # one sentence, e.g. "EU-remote from Cairo, targeting Berlin SaaS"
  backup_profile: null     # or another letter if you're split
target_role: ""            # specific, e.g. "React frontend dev focused on accessibility"
audience: ""               # who must this site convince
experience:
  - ""                     # one bullet per relevant item, with numbers where possible
projects:
  - title: ""
    problem: ""            # who is the user, what specific pain point
    stack: ""              # tech stack with one-line why
    contribution: ""       # what you specifically built or owned
    ai_usage: ""           # which AI tools, where you went beyond what AI suggested
    result: ""             # quantified impact
differentiator: ""         # what makes you memorable in one sentence
voice:
  tone: ["", ""]           # 2–3 adjectives
  languages_needed: [""]   # ["English"], ["English", "French"], etc.
visual_identity:
  palette: ""              # description or hex codes
  fonts: ""                # e.g. "modern sans like Inter or Manrope"
  color_mode: "auto"       # or "light", "dark"
  motifs: null             # optional cultural / aesthetic cues
constraints:
  domain: ""               # yourname.dev or yourname.vercel.app
  exclude: [""]            # things you explicitly don't want
notes: ""                  # B2B-ready, open to relocation, specific company target, etc.

The Gem walks you through 8 areas in roughly 6–8 questions (one at a time — some get bundled when you give rich answers):

• Identity — name, current city and country
• Target market — the most important question. Which country (or kind of role) do you want to start your career in? Local, EU-remote, US-remote, or hybrid? The Gem classifies you into one of eight Market Profiles (A–H) that drives every later choice.
• Target role — be precise. "Frontend dev" is too vague; "React frontend dev focused on accessibility" lands.
• Audience — who must this site convince? Local recruiters, EU-remote hiring managers, freelance clients?
• Experience — internships, freelance, hackathons, open-source PRs, with concrete numbers where possible
• 3–5 projects — for each: problem, stack, your specific contribution, how you used AI, the result
• Differentiator — what makes you memorable in a sea of "junior full-stack developer" applications?
• Voice + language + visual identity + constraints — tone, languages the site needs (English-only, bilingual EN+FR, EN+TR, etc.), color palette, fonts, light/dark, domain, anything you explicitly don't want

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

Step B — Copy the YAML brief

When the Gem has covered all 8 areas, it summarizes and asks "Ready to generate your brief?" Reply yes, and it outputs one fenced YAML block — your structured spec.

It looks roughly like this:

participant:
  name: "Yara Belkacem"
  current_city: "Tunis"
  current_country: "Tunisia"
target_market:
  profile: "B"
  description: "EU-remote from Tunis, targeting Berlin/Paris SaaS scaleups"
  backup_profile: "F"
target_role: "Backend engineer focused on payment-system reliability"
audience: "EU-remote hiring managers at Series B/C fintech"
experience:
  - "INSAT engineering grad, 2025; final-year project at Telnet"
  - "GDG Tunis volunteer organizer, two Build-with-AI events"
projects:
  - title: "PayLoop"
    problem: "Tunisian SMEs lose 12% of card payments to retry storms"
    stack: "Go + Postgres + Redis; deployed on Cloud Run"
    contribution: "Designed the idempotency layer end-to-end; wrote the chaos tests"
    ai_usage: "Used Claude for the retry-policy decision tree; verified with 200 chaos runs"
    result: "Cut retry-storm losses to 1.4% in pilot at one SME"
differentiator: "Reliability-first backend engineer with chaos-testing discipline"
voice:
  tone: ["confident", "precise"]
  languages_needed: ["English"]
visual_identity:
  palette: "deep navy + single warm accent"
  fonts: "modern sans, e.g. Inter or Manrope"
  color_mode: "auto"
constraints:
  domain: "yarabelkacem.dev"
  exclude: ["no skill progress bars", "no animations"]
notes: "B2B-ready via auto-entrepreneur status; open to relocation"

Select the entire fenced block (including the opening ```yaml and closing ```) and copy it.

Step C — Paste into NotebookLM

Switch to the workshop NotebookLM (the same one from step 2). Start a fresh chat — don't reuse the chat where you asked research questions earlier.

Open the workshop NotebookLM

Copy the generation prompt below and paste it as your first message in the new chat. Find the line [PASTE YAML BRIEF HERE] inside the prompt and replace that placeholder with the YAML you copied from the Gem (the entire fenced block — opening ```yaml, body, and closing ```).

You are generating two production-ready prompts for a workshop participant. **Your only output is two fenced code blocks** — Prompt 1 for Google Stitch (design) and Prompt 2 for Google Antigravity (build). Do not write commentary, do not include source citations inside the fenced blocks, do not ask follow-up questions.

Below is the participant's brief produced by an earlier interview. Read it, look up the relevant Market Profile in this notebook's regional research sources (Turkey, Egypt, Tunisia, Morocco, EU-remote MENA, US-remote pipeline, plus the original portfolio/career sources), and generate the two prompts using profile-specific details for employers, salary anchors, credential emphasis, and tech-stack recommendations.

## The brief

[PASTE YAML BRIEF HERE]

## How to use the brief

- The `target_market.profile` letter (A–H) tells you which Market Profile applies. Use the notebook's regional research to pull employer name-drops, credential signals, and stack emphasis for that profile.
- The `participant`, `target_role`, `projects`, `differentiator`, `voice`, `visual_identity`, and `constraints` fields drive the personalization in both prompts.
- For Profile B (EU remote from MENA): require an explicit "Available for remote roles, EU time zones" badge in the hero, plus a time-zone overlap line near contact (Turkey GMT+3, Egypt GMT+2, Tunisia/Morocco GMT+1).
- For Profile C (US remote): require the same plus a `WORK-AVAILABILITY.md` file in the Antigravity output covering timezone overlap, B2B entity country, async-communication evidence.
- For bilingual sites (Profiles F, G, sometimes D): specify a language toggle (top-right, persists via localStorage) and which sections need both languages.

## Output rules

1. Output **exactly two fenced code blocks** in this order: Stitch prompt first, Antigravity prompt second.
2. State the profile letter at the top of each block as a comment line: `# Market profile: B — EU remote from outside EU`.
3. **Do not include source citations inside the fenced blocks.** Citations are fine in any commentary outside the blocks, but the prompts themselves must be clean text — Stitch and Antigravity will be confused by `[1]` markers.
4. After the second fenced block, stop. No closing remarks, no offers to revise.

## Prompt 1 — Google Stitch design prompt requirements

The Stitch prompt must:
- Open with: "You are designing a career website for [name from brief], a [target_role] based in [current_city, current_country]."
- Include the participant's one-sentence value proposition exactly as it should appear in the hero. Synthesize this from `target_role` + `differentiator` if not explicit in the brief.
- Specify the must-have sections (single page with anchor navigation) in this order: **Hero** (name + role + value prop, primary CTA highest visual contrast); **About** (2–3 sentences max, no life story); **Tech Stack** (categorized lightly by Frontend / Backend / Tools, honest proficiency annotations like "React (2 years, daily use)" — explicitly forbid percentage progress bars); **Projects** (3–5 cards, each with title, one-sentence value prop, tech tags, demo link, repo link); **Experience**; **Contact** (visible at the bottom of the page).
- Include each project's title and one-sentence description from the brief so Stitch lays out real cards, not lorem ipsum.
- Specify visual identity from the brief: color palette (hex codes if known, otherwise descriptive), font pairing (1–2 fonts max — suggest Inter, Manrope, or similar if brief is vague), one accent color, color mode (light/dark/auto from brief).
- Specify layout principles: F-pattern hero, 4–5 nav items max with action-oriented labels (no abstract labels like "Musings"), 8pt spacing system, mobile-first responsive (one phone-width and one desktop-width view), generous white space.
- For Profile B / C: explicit "Available for remote roles, [EU/US] time zones" badge in hero; "Time zone: UTC+X — overlap with [CET/ET]" near contact.
- For bilingual sites (F, G, sometimes D): language toggle pattern top-right, persists via localStorage; specify which sections need both languages.
- Inject 2–3 target employer names appropriate for the profile (pull from the notebook's regional research) as guidance for the About / target-companies section. Phrase as: "Feature 2–3 of these target employers as text mentions or logo references in the About section: [list]." Examples: Profile B → GitLab, Zapier, HashiCorp, GitHub, RevenueCat, Hotjar, plus EU companies. Profile D Turkey → Trendyol, Peak Games, Insider, OBSS. Profile E Egypt → Microsoft Egypt, Valeo, Paymob, Instabug. Profile F Tunisia → Vermeg, Telnet, Talan, Capgemini Tunisia. Profile G Morocco → Capgemini Maroc, OCP Solutions, UM6P-network startups. Use the notebook's research to pick the 2–3 most relevant for this participant's role.
- Forbid anti-patterns explicitly: no skill progress bars, no embedded AI chatbot that hallucinates, no default template look, no tutorial-clone projects.
- End with: "Output: a single-page design with desktop and mobile views covering Hero, About, Tech Stack, Projects, Experience, and Contact."

## Prompt 2 — Google Antigravity build prompt requirements

The Antigravity prompt must:
- Open with: "You are an agentic coding assistant building the career website for [name] from the visual reference at `./design-reference.html`. Match its layout, palette, typography, and component shapes — then add the technical layer below."
- Specify stack: **plain HTML, CSS, and a small amount of vanilla JS — no framework, no build step.** Site files live in `public/`. A tiny Node 20 `server.js` at the project root serves `public/` and reads `process.env.PORT` (default 8080) so the same server works locally and on Cloud Run.
- Sections (single page with anchor navigation): **Hero**, **About**, **Tech Stack** (honest pill tags with proficiency context — no percentage progress bars), **Projects** (3–5 cards with title, one-sentence value prop, tech tags, link), **Experience**, **Contact** (visible at the bottom). Each section has a clear `id` for anchor links.
- Mobile-first responsive layout using modern CSS (Grid, Flexbox, custom properties). Aim for a clean Lighthouse pass but don't gate the build on it.
- Require a `persona.json` at the project root containing the participant's structured data extracted from the brief — at minimum: `name`, `tagline` (one-sentence value prop), `bio` (2–3 sentence About), `skills` (array), `projects` (array of `{name, description, tech, link}`), `experience` (array), `interests` (array, optional), `contact` (`{email, linkedin, github}`), `faq` (array of `{q, a}`, optional). This file is the single source of truth for the bonus tracks (MCP server in step 8, chatbot in step 9). The page can either fetch `persona.json` at runtime or render the same content directly into the HTML — both are fine, but the file must exist.
- Render the FAQ from `persona.json` as a static "Ask me about..." section near the bottom — each question as a heading, the answer below. No collapsing.
- Require an `AI-USAGE.md` at project root disclosing which AI tools were used to build the site itself (radical transparency — baseline for trust in 2026 hiring).
- For Profile B / C: include an "Available for remote roles, [EU/US] time zones" badge in the hero, plus a one-liner near contact like "Time zone: UTC+X — overlap with [CET/ET]".
- For bilingual sites (Profiles F, G, sometimes D): a top-right language toggle that swaps a `data-lang` attribute on `` and persists to `localStorage`. Specify which sections need both languages.
- Inject 2–3 target employer name-drops appropriate for the profile (pull from the notebook's regional research) inside the About section. Profile B → GitLab, Hotjar, RevenueCat. Profile D Turkey → Trendyol, Peak Games, Insider. Profile E Egypt → Microsoft Egypt, Valeo, Paymob, Instabug. Profile F Tunisia → Vermeg, Telnet, Talan. Profile G Morocco → Capgemini Maroc, OCP Solutions. Use the notebook to pick the 2–3 most relevant for this participant's role.
- Include basic SEO: meta title, meta description, OpenGraph card. Skip sitemap/robots for the live build — they're trivial to add later.
- Scaffold from the empty directory. Write `package.json`, `server.js`, the HTML/CSS/JS in `public/`, `persona.json`, `Dockerfile`, `GEMINI.md`, and `AI-USAGE.md`. Run `npm install` and start the dev server (`node server.js`) as the last action so the participant sees `localhost:8080` light up.
- The `Dockerfile` is a single-stage `node:20-slim` image: copy files, `npm ci --omit=dev`, `EXPOSE 8080`, `CMD ["node", "server.js"]`. Designed for `gcloud run deploy --source .` on Cloud Run.
- Write a starter `GEMINI.md` at project root with: project shape (`public/` holds the site, `server.js` is the server), dev/build commands, source-of-truth files (`persona.json`, `docs/antigravity-prompt.md`), and "don't touch" rules (`package.json`, `node_modules`).
- Make a single initial commit at the very end (`git add . && git commit -m 'initial scaffold'`). The participant has already run `git init` in the empty folder.
- End with: "Output: a working site at `localhost:8080`, with `persona.json`, `AI-USAGE.md`, `Dockerfile`, and `GEMINI.md` at the project root. Launch checklist: all links work, no lorem ipsum, projects have real descriptions, contact visible at the bottom, mobile layout works at 375px, hero passes the 8-second scan test."

The Copy button appears in the corner of the block on hover — use that to grab the whole prompt in one shot.

NotebookLM responds with two fenced code blocks:

1. Stitch design prompt — used in step 4 to generate the visual design
2. Antigravity build prompt — used in step 5 to generate the actual site code

Each block starts with a comment line like # Market profile: B — EU remote from outside EU so you (and the downstream tools) can see which framing was applied.

Save both prompts

Copy each fenced block into a text editor or notes app you can paste from later. Once the agent has scaffolded your project in step 5, save the Antigravity prompt to docs/antigravity-prompt.md at the project root — the agent references it for re-grounding when it drifts. You'll need:

• Stitch prompt — paste this into Stitch in step 4 (Design)
• Antigravity prompt — paste this into Antigravity in step 5 (Build)

Iterate if needed

If the brief feels off, re-run the Gem — it's free and fast. If the brief is right but the NotebookLM output feels generic, paste the brief again into a fresh NotebookLM chat. Better to fix it here than to discover misalignment in step 5 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 through grounded research. A generic "build me a portfolio" prompt produces a generic site. A prompt that says "make this Tunis-based engineer look credible to Berlin Series B fintech recruiters, with a French/English language toggle and a GMT+1 time-zone badge" produces something specific — and that specificity comes from the workshop's research corpus, injected automatically through NotebookLM.