Lab · Design automation with AI

Show AI a reference, not a long prompt.

Vibecoding is how I team up with AI to go from a reference to working code. Four flows, four sources of truth, and every result below is a single prompt with no iterations or fine-tuning.

The recipe

The skill isn't writing a 100-word prompt. It's knowing what to show the AI.

01A reference
An image from Dribbble, a design system, a live product's code, or a Figma file.
+
02A brief
A design-brief.md: what to build, what goes in it, the dos and don'ts.
→
03One prompt
The AI reads both and writes working HTML or Vue in one go.

Four flows, four results

Each card opens the live result. Hover to pick one up.

Internet reference

NomadNest 95

Give AI: A Windows 95 look from Dribbble and Pinterest, extracted into a design.md, plus the brief.
Best for: One-off designs and getting inspired.

Open result ↗HTML

Design system reference

NomadNest

Give AI: Airbnb's design system file from getdesign.md, plus the same brief. No extraction needed.
Best for: Staying consistent with an established system.

Open result ↗HTML

Live product code

Share checkout link

Give AI: Code from a live product. The AI learns its patterns, then builds a new Vue modal that belongs, pushed to a feature branch for developers.
Best for: New features that match an existing product.

Open result ↗Vue

Figma reference

Swipe onboarding

Give AI: A Figma file, read directly through the Talk to Figma MCP. The AI turns it into an interactive screen.
Best for: Designs already made in Figma.

Open result ↗HTML

Next: a full rebrand, designed only in code

My biggest test of this way of working is happening right now, at my current company.

Coming soon · FLIKIn progress

Rebranding a product without opening Figma a design tool.

I'm leading a full rebrand of FLIK, a checkout and payments platform, and designing every part of it in code with Claude Code. No mockups to hand off: each decision is made in the real product.

A new brand foundationStarting from colour, the base everything else is built on.
A landing page from scratchThe first thing merchants see, rebuilt end to end.
The merchant dashboard, rebuiltStarting from the existing spec, then broadened and improved.
One design system for every developerShared by the merchant-facing product and the internal dashboard, so both are built from the same components.

Why it matters: when the design system lives in code, developers reuse the exact components I design. There's no gap between the design and what ships.

Ask me about it ↗

One good reference is worth more than a hundred words of prompt. The skill is knowing what to show.

Use it yourself

The templates and the full write-up are on GitHub.

The methodologyVIBECODING.md · all four flows, step by step Design system templatedesign2.md · colour, type, spacing, components Design brief templatedesignbrief.md · overview, flows, users, goals