what I learned redesigning my website with an AI coding agent

I redesigned this website in a day with Codex and a lot of screenshot critique. That sounds like a speed story, but the better lesson is about taste.

Fast tools make it easy to produce more interface. They do not automatically make the interface clearer. So the real loop was not “ask the agent to make it cooler.” It was:

Say what a rushed visitor should understand.
Ask Codex for a plan before implementation.
Implement one pass.
Look at desktop, tablet, and mobile screenshots.
Remove the parts where the ink did not earn its place.
Write the lesson back into a heuristics file.

That last step matters. I wanted this to become a teaching artifact for COGS 125, Advanced Interaction Design, where I am a TA. Students often hear “make it clearer” or “use better hierarchy,” but those phrases can stay abstract. A living markdown file gives the critique something to hold onto.

Download the heuristics MD Open the case study

The site before the loop

The older site was useful, but it was mostly a container for information. The new version tries to make the story visible sooner: I am a UC San Diego HCI PhD student studying how interfaces can sharpen design judgment, especially in an age where AI can generate many plausible directions quickly.

Wayback Machine screenshot of the older homepage before redesign — The older homepage had the facts, but the visual story was less directed.

Screenshot of the redesigned homepage — The new homepage puts thesis, proof, and next actions closer together.

What the agent was good for

I used Codex with high-reasoning, plan-first implementation loops. The useful thing was not outsourcing taste. The useful thing was making iteration cheaper: more variants, faster screenshots, more chances to notice what felt wrong.

Donald Schon writes about the reflective practitioner as someone who thinks through action. That framing fits this kind of work surprisingly well. You make a move, the material talks back, and then you reframe the next move. In this case, the material was the website: awkward line breaks, a bubble covering my face, a motion section becoming too dominant, a blog page that felt narrower than its purpose.

What changed

The biggest design rule became: every ounce of ink should matter. Color should mean action, state, or grouping. Motion should explain what changed. Whitespace should manage cognitive load, not create mystery.

01 Hierarchy before flash.

The homepage now starts with the research claim and routes people to publications, projects, blog, and contact.

02 Motion as explanation.

The research sketch maps to design, evaluate, and situated modes instead of being an unrelated animation.

03 Heuristics as memory.

The markdown file records the critique so future agents and students can start from better taste.

Credit where credit is due

I was also borrowing from people and artifacts I admire. The AI in Design 2026 report helped frame the moment: infinite output makes taste and craft more important. Katie Dill says, “AI is sparking a creative renaissance in design.” Stripe’s site was useful as a pattern reference for calm motion, crisp hierarchy, and compact controls.

The point is not to copy them. The point is to notice the underlying practice: make the claim legible, put proof near the claim, and let details increase trust.

The lesson for students

If you give an AI agent vague taste, you usually get vague interface. If you give it constraints, screenshots, critique roles, and a living heuristics file, you get a much better collaborator.

So my recommendation is simple: do not just prompt for prettier. Build a small design memory. Use it to critique. Then keep revising until the page is clearer, not merely louder.

Sources and inspirations: AI in Design 2026, the Craft chapter, Stripe, Katie Dill at Stripe Sessions, Donald Schon’s The Reflective Practitioner, and this Wayback snapshot of the old site.