2026
The prompt wasn’t the work
Website
Design + Development
AI
I designed this site in Figma and shipped it as a production Next.js app with an AI chat that turns a visitor's questions into a project brief. I directed almost all of the code rather than writing it. The site is the artifact. The part worth reading about is what had to exist first to make that reliable.
- Project
- bonnie.design
- Timeframe
- 2026
- Role
- Designer & Developer
- Scope
- Web design, Front-end
The handoff I’d always accepted
Every personal site I’ve made has started in Figma and ended in someone else’s hands. Usually Ugi’s — the best design engineer I’ve worked with, and also my husband, which is a convenient arrangement right up until we’re both out of evenings.
This time I wanted to see how far I could take it myself. I began with a GitHub repository and little understanding of what happened beyond the interface. In April, I was prompting until something worked while the code quietly came apart underneath it. By August, I had a shared rulebook, a proper review process, and two AI coding tools that could work on the same product without dismantling each other’s changes.
The shift wasn’t from designer to engineer. It was from handing over a finished design to owning far more of what happened after it.
AI could produce a competent interface. It couldn’t make it mine.
I described what I wanted and looked at what came back: correct spacing, safe hierarchy, a hero and some cards and a footer. Every direction I asked for arrived at roughly the same layout wearing a different color. Nothing was wrong with it. Nothing was mine either.
The question was never simply, “Does this work?” It was, “Does this feel like me?” What I wanted was easier to recognize than to request: rhythm between sections so scrolling feels composed rather than stacked. Restraint — one accent color, nothing decorative carrying weight it hasn’t earned. Craft in the hover and the focus and the transition, where a site stops feeling like a template.
Those are a hundred decisions made against a standard I hold and can’t fully articulate, which is exactly the kind of standard you can’t hand to a model. So I stopped asking it to design the site and opened Figma.
Then the code looked right and behaved wrong
With the design settled, I went back to prompting for code. It worked—until I inspected the behavior. The site is built on Vortex, a component and icon library we built ourselves. I’d told the agent to use it. Sometimes it did; sometimes it built a component that looked identical. Matching the visual was easy. Preserving the behavior wasn’t.
The failure was never visible in a screenshot. A Text Field rendered correctly, then handled its error message wrong, put the helper text in the wrong place, and lost the focus state. A button looked right at rest and did nothing on hover. Sections stopped responding to the light and dark switch, and the inverted sections stopped inverting. All invisible in a static review, all obvious the second someone tabs into a field. I asked directly whether it had used the Vortex component. It said no. It had built its own.
Meanwhile, I was splitting work between Claude Code and Codex—initially leaning on Claude for Figma and layout, and Codex for motion, debugging, and tests. One pass would quietly undo another, leaving me to repeat the same constraints until the context filled with my own instructions and the whole thing turned to spaghetti.
Iteration was making the work worse. The tools didn’t need another carefully worded prompt. They needed a shared way of working.
A rule I have to repeat isn’t a rule
My standards lived in my head, in Figma, and temporarily inside a conversation. They disappeared at the end of a session and didn’t transfer between tools. I’d been treating this as a prompting problem. It was a systems problem, and I’d have recognized it instantly in anyone else’s team.
That’s where I asked Ugi for help, and where his role changed. He set up the engineering scaffolding, taught me the delivery model — branches, pull requests, what a review gate is actually for — and encoded my standards as rules both agents read before they touch anything. The standards were mine. Making them executable was his, and at that point, it wasn’t work I could have done alone.
My prompts got shorter, because the constraints were already loaded. The tools stopped contradicting each other, because they shared the same foundation. And mistakes became visible before they could accumulate.
Across 317 commits and 69 reviewed pull requests, 507 tests kept change controlled at a volume I couldn’t have supervised through attention alone.
Vortex design system meant there was less to translate
The Figma library and the coded library in Vortex represent the same decisions rather than two interpretations waiting to be reconciled. Through Figma’s MCP integration the agent reads that file directly instead of working from a description of it, so it could connect the design back to the system it came from. It still needed direction and review. There was just far less ambiguity about what to build.
The handoff didn’t get faster. It stopped existing as a separate phase. Collaboration didn’t disappear; it changed shape. Instead of asking an engineer to interpret and implement the whole design, I could carry my decisions further into production and use engineering review where specialist judgment mattered most.
AI Bonnie: the feature that setup made possible
A chat window is the first thing anyone pictures when they hear AI, which makes it easy to add and hard to justify. What a visitor actually needs from me is me, in the room, answering questions — and I’m not in the room. I have a full-time job; this gets built on weekends. What they meet instead is a set of pages and a contact form with empty fields, which asks them to read everything first and then explain themselves from scratch.
So I built the conversation. Ask a question, get an answer in my voice, with tappable follow-ups. When someone signals project intent the panel switches to a contact form already filled in from what they’ve said, and the inquiry reaches me with the conversation attached. A form gives me a name. A transcript tells me what they need.
Built with the Vercel AI SDK and OpenAI, it took longer than everything else combined, most of it on tone of voice and on the edge cases — personal questions, attempts to talk it out of its instructions, and what a visitor sees when it fails. A feature with this many rules only stays correct on top of a system that enforces rules. Six weeks earlier it wouldn’t have held.
The fundamentals didn’t move. The radius of ownership did.
This project taught me that AI could build from decisions I had already made, but it couldn’t make those decisions for me. It could follow a component rule, run a test, and flag a structural mistake. It couldn’t tell me whether the site felt distinctive, whether an interaction had enough care, or whether the whole thing was worth shipping.
The skill I’m taking from this project isn’t prompting. It is knowing what good looks like well enough to specify what can be specified, recognize what has drifted, and stop an approach before it consumes a weekend. It is also knowing where my judgment ends and where specialist engineering review needs to begin.
I used to design the product and ask someone else to build it. Now I can own much more of what happens between the idea and production, while bringing engineering expertise into the places where it has the most leverage.
It was also fun. Genuinely, stay-up-too-late fun, in a way design work hadn’t been for a while. Something you drew on Saturday running in a browser on Sunday doesn’t get old.
The site is the artifact. What I’m keeping is a new way of working: taste made explicit where it can be, enforced where it should be, and still exercised by a person where no rulebook is enough.
I design and build polished websites with AI-assisted workflows that let small teams move from idea to production without losing craft along the way. Starting one from scratch?