LayoutLab: I built a mockup generator that made design 7× faster
What the designer sees in the generator's mockup is what goes into development: it renders the real production components.
Records Marine contracted me to design and build the tool end-to-end, solo.
That covered the product thinking, the system, the architecture and the code. LayoutLab closes the oldest gap in product design, the one between the mockup and the shipped code: instead of drawing screens that approximate the product, it generates live pages on the real theme.
Next.jsChakra UIPlaywrightClaude Code
Mockups that used to take a week to draw are ready in hours. The business iterates cheaply when requirements change.
Improved the design process: fewer handoff errors, faster development, less mockup drift.
Designed and built the tool alone in 2 months: the product, the design system, the architecture and the code.
What it is about
Design iteration shrank from one week to a couple of hours: tested on 263 screens across 15 tasks
I made a mockup a real thing: each screen is a live Next.js page that imports the actual product components from the read-only production source and renders them on the real theme.
The business needed mockups fast and cheap iteration as requirements changed, and waiting a week for hand-drawn screens was the bottleneck. AI-generated mockups had their own trap: they looked fine until a developer rebuilt them in code and got something else. Now fidelity is not an act of care but a property of construction, and iteration runs by prompt instead of redrawing.
A pipeline, not a prompt
The mockup generator never grades its own work. That is why it lets no errors through.
I made generation a strict, controlled process with two designer checks across the whole cycle.
Left to itself, the model optimizes whatever proxy it can see, meaning «renders 200» or «typecheck green», and quietly builds from imagination. A brief normalizes to a README as the single source of truth, passes a coverage check and a human Flow gate; each screen then runs Plan, Build, Verify, independent Critique and 14 deterministic gates, and ends at a decisive human Visual gate.
The agent sees the design
The agent finds and fixes bugs in its own mockups before the designer sees them. All automated
I made the AI see the design: it screenshots its own live render, screenshots the real product for an element-by-element comparison, and reads real links instead of guessing.
One screen needed six rounds of human fixes, and every fix mapped to a source file the agent had never opened.
What I learned
Design fidelity is determined first of all by the architecture, not carefulness or the skills of the generation model.
The moment a mockup imports the real components, resemblance happens by construction, and AI scales your discipline or your sloppiness.
Most of LayoutLab's value is in what I took away from the model: the ability to self-certify, to build ungrounded, to look at the result last. Taste that stays in your head does not survive a tired afternoon; taste compiled into a gate does.