A website that learned to ask a better question

Vibe-Coding a Research Portfolio

My old site listed projects and papers, but it did not tell visitors what I was actually studying. I wanted the redesign to feel like me—curious, a little playful, and serious about evidence—while making the research question easier to find than the interface tricks.

Design question How can the site show both the work and the judgment that shaped it without asking people to read a development log?

Open the live homepage Download the heuristics Open the old site

Archive, redesign, ongoing experiments

The redesign did not arrive as one reveal. These are the three turns that changed what the site was for.

  1. 1 · The archive made the problem visible

    I could see the work, but not the thread.

    The February archive is competent and crowded. Papers, projects, biography, and navigation all ask for attention at once. Saving that page gave me something concrete to critique instead of redesigning from memory.

    Wayback Machine capture of Sirui Tao's older homepage with a text-led introduction, portrait, and research cards
    Archive · February 9, 2026. Wayback served this 1440 × 1000 artifact at 01:34:29 UTC. The source viewport, theme, interaction state, and producing commit were not retained.

  2. 2 · The research question became the front door

    I made the thesis louder and the interface quieter.

    The next direction brought my research claim, affiliation, proof routes, and a small number of actions into one reading order. Paper, desk objects, and motion stayed only when they helped a visitor understand how I design, evaluate, and situate AI tools.

    Historical homepage checkpoint with a research-first introduction, portrait, paper slips, and desk-like proof artifacts
    Artifact stage · repository change June 16. This file records the warmer paper-and-desk direction, not today's live page. Its original capture conditions were not recorded.

  3. 3 · The experiments started telling their own stories

    I stopped hiding the design thinking behind a history icon.

    The live site now uses a quiet thread glint to point from an interaction back to its origin. If someone follows it, the project page explains the question, change, evidence, and limit—not merely the commits.

Five principles I kept

The full heuristics file is a living teaching artifact, not a wall of rules to embed in every story. These five principles do most of the work:

  1. Lead with the question. A visitor should understand what I study before decoding my biography or interface.
  2. Spend attention once. Fewer type levels, containers, actions, and repeated explanations make the remaining choices feel intentional.
  3. Make motion mean something. Movement should reveal a state, comparison, or path—and settle into an equally legible still frame.
  4. Keep proof close. Put the paper, project, image, data, or limitation beside the claim it supports.
  5. Render, notice, reframe. Compare fixed screenshots as a research peer, student, non-specialist, and collaborator; keep the change only if the story becomes clearer.

Read the living source Download the Markdown Read my AI-assisted design reflection

A sketch for “Design, Evaluate, Situate.”

The 2D layer below explains three research moves. The new Dot Orbit field stays behind it: each mode changes spread, density, and tempo, but the words and semantic drawing still carry the idea. If WebGL disappears, nothing a visitor needs disappears with it.

Research sketch

Try the research sketch.

Change the research lens, then the time-of-day theme. The semantic drawing keeps explaining the idea while a quiet shader changes the field underneath it.

Showing the Design motion sketch. Put several design options side by side so people can name what changed and choose what to test.

Design lens

Human-AI for design and taste

This lens makes design options visible enough for students to compare what changed and decide why it matters.

Moves
  1. 01

    Name the variable behind a vague vibe.

  2. 02

    Keep alternatives comparable before critique.

  3. 03

    Use motion to show how options gather, compare, and reopen.

Motion note Inspired by motion craft from Stripe's design team and Katie Dill at Stripe Sessions.

Live field The visible Dot Orbit layer uses Paper Shaders by Paper; the restraint also follows the founder's design walkthrough.

The site is part of the practice

Codex made implementation passes fast; it did not decide what deserved attention. I used the rendered site as a shared object for reflection: I acted, noticed what the page made easy or awkward, and reframed the next move. That is close to Donald Schön’s The Reflective Practitioner, and it is also distributed cognition in a very practical sense—the screenshots, heuristics, browser states, code, and critique carried parts of the judgment across sessions. The goal is not a frozen style guide. It is stronger professional vision with each pass.

Receipts: captures, commits, and reproduction notes
  • Archive artifact: old-home-wayback.png, 1440 × 1000, captured by Wayback at 20260209013429; added to this repository on May 23 at e4f021520. The exact historical site commit, source viewport, theme, and interaction state are not retained.
  • Artifact-stage checkpoint: the legacy-named current-home-desktop.png, 1440 × 1100, last changed at d5c636509 on June 16. Its capture date and environment were not recorded. “Current” is a filename, not a status claim.
  • Current evidence: the live homepage and linked case studies. No static image on this page is labeled as a current capture.
  • Paper texture: generated deterministically from Paper Texture in @paper-design/shaders@0.0.80. The seed, parameters, output hash, generator, Apache license, and vendor hashes are stored beside the asset and dependency.
  • Review method: compare the same route, viewport, theme, and interaction state; keep the research meaning and signature phrases fixed; record what became clearer or harder to notice.
  1. WaybackArchived the older public homepage at 01:34:29 UTC; its producing Git commit is unknown.
  2. e4f021520Introduced the research-motion redesign checkpoint and ingested the archive artifact.
  3. d5c636509Last changed the paper-and-desk artifact now labeled as historical; its capture date is unknown.

Credits

This redesign borrows principles, not visual identities or assets, from work I admire. The static paper surface and quiet research substrate use Paper Shaders by Paper; the founder’s design walkthrough sharpened the “less, but more intentional” pass.

Other important references are AI in Design 2026, its craft chapter, Stripe, Jackie Hu’s portfolio, Katie Dill at Stripe Sessions, Donald A. Schön’s The Reflective Practitioner, and the Wayback snapshot that made the starting point inspectable.