Personal site redesign - COGS 125 teaching artifact

Vibe-Coding a Research Portfolio

I redesigned this portfolio as a small reflective-practice experiment: use an AI coding agent for speed, then use design judgment to decide what deserved to stay.

Plan-first prompting Screenshot critique Design heuristics

Download heuristics MD Read the reflection Old site snapshot

Current redesigned Sirui Tao homepage with a warm editorial layout

Question

How can a personal academic website quickly teach visitors who I am, what I study, and where to go next?

Process

Work in loops: plan, implement, screenshot, critique, remove what feels decorative, and record the durable rule.

Outcome

A warmer research-first portfolio, a four-theme system, and a reusable heuristics file students can adapt.

Before, after, and why it changed

The old site did its job, but it asked visitors to assemble the story themselves. The redesign tries to make the first glance more generous: research thesis first, proof close to the claim, and fewer visual elements that exist only because they look cool.

Wayback Machine screenshot of the older homepage before the redesign — Before: useful information, but weaker first-glance hierarchy.

Screenshot of the redesigned homepage with research-first hierarchy — After: thesis, affiliation, actions, and proof live closer together.

Taste as a loop

The most useful part of working with Codex was not that it could generate code quickly. It was that speed created more chances to practice judgment. I used high-reasoning, plan-first implementation loops: make a plan, implement a small pass, inspect screenshots, critique the page from several visitor roles, then simplify.

That loop is close to Donald Schon’s idea of the reflective practitioner: the designer acts, sees what the situation says back, and reframes the next move. In this project, the website itself became the material talking back.

01 Make the claim visible.

The homepage now says the research thesis before asking visitors to parse a long biography.

02 Use motion as explanation.

The interactive sketch maps to design, evaluation, and situated assistance instead of acting as decoration.

03 Record the rule.

Every critique that survived became part of a living heuristics file for future design sessions.

The motion sketch

Stripe’s homepage inspired the restraint: a compact control, a proof-like visual, and a calm relationship between claim and interaction. Katie Dill’s craft framing and the AI in Design 2026 report helped sharpen the bigger point: when AI makes output cheap, taste, critique, and judgment become more important.

Research motion section showing mode controls, canvas animation, and detail panel — The motion section is a diagram first and an animation second.

Blog index screenshot with pinned card and cleaner reading layout — The blog became a clearer field-notes index, not a pile of posts.

Use the heuristics

The reusable part is the markdown file. My hope is that students in COGS 125, or anyone redesigning a portfolio, can give it to their own agent and ask for a critique pass grounded in the same design values.

Download WEBSITE_DESIGN_HEURISTICS.md Open the source file

Credits

This redesign borrows ideas, not assets, from work I admire: the AI in Design 2026 report, Katie Dill’s writing and talks on craft, Stripe’s interaction design, and Donald Schon’s reflective-practice framing. The point of credit is not formality. It is a design habit: know where your taste came from.