Design with Stitch

Sketch the layout and visual direction of your career site before writing a line of code. Stitch is fast, opinionated, and designed for exactly this kind of brief.

You're not aiming for production-grade markup here. You're aiming for a reference image and a few words you can hand to Antigravity in step 5 so the build has a target to hit.

Open Stitch

Open Stitch

1. Sign in with the same Google account you used for the setup.
2. Start a new design and pick Web (not Mobile app) — we're building a website.

Generate your first design

Paste the Stitch prompt from step 3 — the first of the two fenced code blocks NotebookLM generated. It already encodes the must-have sections, layout principles, target employer references for your Market Profile, and your visual identity, so Stitch's first generation should land close to what you have in mind.

If you skipped the spec step or want a generic starting point, use this fallback prompt:

A modern personal career website for an IT student with: (1) Hero
section with name, tagline, and circular photo placeholder, (2) About
Me with a 2-3 sentence bio, (3) Projects grid with 3-4 cards showing
image, title, description, tech tags, and link, (4) Tech Stack section
showing technologies as honest pill tags with proficiency context (no
percentage progress bars), (5) An FAQ section titled "Ask me about..."
with 5 questions and answers, (6) Contact section with email, LinkedIn,
GitHub. Clean, professional, dark theme with a blue accent color.

Generate. Stitch will give you a few variants — pick the one closest to what you imagined.

Iterate

The first generation is rarely the keeper. Refine with short, specific follow-ups:

• "Make the hero section taller with a subtle gradient background."
• "Change the accent color to teal."
• "Add a sticky navigation bar across the top."
• "Make it responsive — single column on mobile, three columns for projects on desktop."
• "Use rounded pill tags for the tech stack — proficiency context as small annotations, not percentage bars."

Iterate two or three times until the layout feels right. Don't sink 30 minutes here — step 5 is where the polish actually happens.

Export and keep the tab open

1. Click Export in Stitch (or use the Copy HTML/CSS button in the code panel).
2. Save the HTML/CSS or take a screenshot — step 5 will tell you exactly where to put it (./design-reference.html or ./design-reference.png in the project folder).
3. Keep the Stitch browser tab open in case you want to grab additional screens or iterate further during the build.