From mocks to shipped

Here is a session I am proud of. I designed and built the launch site for Omaru, our product, by directing an agent through the whole thing, from the first mock to a pixel-perfect, production-ready frontend. I owned both sides, the design and the code, and the agent did the building. Here is how it went.

Start by stealing from the product

The site had to feel consistent with the app, so the first thing I did was point the agent at the product’s design system and internalise its tokens, components, and how they are used. From that, the site inherited the product’s visual language and established a foundation for the landing page. Consistency was solved from the outset.

Nine mocks, then three

Then the design work began. I had the agent generate nine full concepts as working pages, so I could scroll and experience how each of them felt to a user. That feel is the whole reason to build them live, you catch things scrolling a real page that a Figma design cannot show you. I narrowed them down, then my cofounder and I made the final call together to combine three of the concepts for the landing page. Combining different but coherent concepts usually gives a design its own character.

Mocks into a pixel-perfect frontend

The conceptual work is the part that matters most. It sets the precedent everything after has to live up to. From there it becomes a different kind of work, less invention, more precision, holding the build to that standard detail by detail. It is also the part that took the most time. I directed the agent from the start to build the scene with the components we already have in the product, then spent the rest of the time getting it to actually adhere to that.

This is where you see the agent is still lacking. It has improved enormously since the early days of Sonnet 3.5, but it still cannot handle every detail in one go. One of the windows it used was the wrong one. The taskbar tabs were wrong. The agent-work panel was streaming code that did not match the trace beside it. There is still real work in directing the agent.

The last twenty percent

The concept was a single day, sunrise to two in the morning. The day passing symbolises the progress a user makes with the product, and I show it by animating the background from day to night as you scroll. Motion like this is where a lot of that detail work goes, and it has to be exact. The agent gets to eighty percent quickly, but the last twenty needs attention and care. At which point in the scroll should the background crossfade? Which element animates first, and what is the stagger between each? This is where a real understanding of motion, easing, and timing steers the agent, and having the language for it is essential.

The part I love

As a designer, there is nothing like watching the designs in my head become real. That feeling is what pushed me to learn engineering, so I could bring more of them to life myself. And that loop, imagine something, build it, watch it run, then want to build the next thing, has only been supercharged by AI. It means I get to make more of what is in my head real, and that is the whole reason I do any of this. Honestly, what a time to be building.