Capstone: shipping your own site

This is the written version of Capstone: shipping your own site, taken from the lesson itself. The simulations, drag-and-drop activities and quizzes only work in the interactive lesson.

How to go from an idea to a live website in one sitting, using Google Stitch, Claude Code, and GitHub Pages.

🎨 Google Stitch 2.0 ⌘ Claude Code (Web) 🚀 GitHub Pages

MBI800 · Capstone Bonus Lecture

Three tools, one afternoon: describe what you want, one AI designs it, another AI builds it, and GitHub Pages puts it online for free. Here's each stage, in order.

STAGE 01 GOOGLE STITCH 2.0

Design the layout.

Describe the site you want in plain language — the audience, the sections, the mood. Stitch turns that into real screens: hero, nav, content blocks. Then you refine in rounds — "make the hero calmer," "give the projects section more air" — until it looks right.

One instruction at a time. Don't describe the whole site in one prompt.
Export the HTML/CSS once you're happy — that's your starting repo.
This stage is sketching, not shipping. It doesn't need to be production-ready.

STAGE 02 CLAUDE CODE ON THE WEB

Turn it into real code.

Bring the Stitch export into Claude Code, running in your browser — no local setup needed. Ask it to add the contact form, wire up the project grid, make the nav responsive, write tests. It reads the repo, makes the changes, runs checks, and shows you the diff before anything ships.

Describe outcomes, not implementations: "let visitors book a call from the hero" beats "add a button."
Ask for a review pass — accessibility, broken links, mobile layout.
This is where the site stops being a mockup and becomes software.

Ship it.

Push the repo to GitHub and turn on Pages in the repository settings. Your site is live at yourname.github.io within minutes. Every future push republishes it. No hosting bill, no server to manage — just a URL you can put on a resume or a business card.

Point a custom domain at it later with a CNAME file.
Commit often — your git history is a record of the site improving.
This is the step most courses skip, and the one that makes the other two matter.

The Interactive Prompt Foundry

Pick a style for your site.

Choose the one closest to what you want, then copy the prompt into Stitch and Claude Code.

academic_portfolio.prompt.md

# SYSTEM PROMPT — Stitch + Claude Code

ROLE
You are designing a personal academic portfolio for [YOUR NAME], a
[FIELD] researcher. Optimize for a reader who has 20 seconds and a lot
of judgment.

VISUAL DIRECTION
- Palette: warm paper white (#FAFAF7) background, near-black ink, one
  restrained accent (deep forest or oxblood) used only for links and
  a single hero rule.
- Typography: a serif built for long-form reading, paired with a quiet
  sans for labels and metadata. Line-height 1.6+, body measure capped
  at ~68 characters.
- Layout: single column, generous white space, no cards, no shadows.
  Let whitespace and thin rules do the separating, not boxes.

STRUCTURE
1. Hero — name, title, one-line research thesis. No photo required.
2. Selected Publications — a list, not cards: title, venue, year,
   PDF/DOI link.
3. Research Interests — 3-4 short paragraphs, not a bullet dump.
4. CV download, plus contact: email, Google Scholar, ORCID.
5. Optional: Teaching, Talks & Media.

BUILD NOTES FOR CLAUDE CODE
- Static HTML/CSS, no build step — deploy straight to GitHub Pages.
- Semantic HTML (article, section, nav) for accessibility and
  citation crawlers.
- Add a print stylesheet so the page exports cleanly to PDF for
  tenure or grant packets.
- No animation beyond a 150ms link-underline transition.

# Ship something a hiring committee can read in 20 seconds
# and trust in 20 more.

Alumni Resource Vault

Want more, after the course?

Leave your email if you're interested in a system-prompt library, a deployment checklist, and future alumni build sessions. No spam, and no fixed schedule — just added to the list.

System prompt library Deployment checklist Alumni workshop access

That's the course.

This pipeline doesn't end with the course. Keep the repo, keep pushing commits, and let an agent take the first pass so you can spend your time on the parts only you can judge.

— Yasas Sri Wickramasinghe MBI800 Lecturer