This is the written version of an interactive, slide-by-slide deck. The live diagrams, worked examples and practice quiz are in the interactive deck.
In this lesson
- Google Stitch 2.0
- Claude Code (Web)
- GitHub Pages
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.That's the pipeline.
It doesn't end here. 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 LinkedIn
