Building a whole design system & front-end in AI

We took HUNTA, a Norwegian hunting-terrain marketplace, from a rough brand idea to a live, deployed identity and a working product front-end using AI.

In a pre-AI world, we're talking a month of meetings and handoffs. We did it in a handful of sessions, mostly by talking to Claude.

Here's the thing nobody tells you about redesigns. The bottleneck is never the talent. It's the gaps between people.

A brand designer makes a kit. A product designer turns it into screens. A developer rebuilds those screens in code. Someone puts it online. Every handoff loses a little intent, costs a little time, and adds another "we'll fix that later."

We just ran the whole relay as one fast loop. The talent didn't change. The friction did.

It Starts With the Basics in Figma.

We didn't open a code editor. We opened Figma.

Just the fundamentals: a logo (a red HÚNTA wordmark with the dot lifted above the U), a blaze-yellow accent, an earthy paper-and-ink palette, a set of stamps and badges, and a field-guide illustration style.

You don't need to be a Figma wizard for this. Figma's job here is to be the single source of truth for design decisions. A logo, a few named colours, a type pairing, a couple of components. That's enough to start.
Claude designed it. We made the calls.

Then we pointed Claude at the Figma file and asked it to turn the kit into a real, structured design system. Not a mood board. A working styleguide: logo and lockups, colour with usage rules, a type scale, the stamp system, and a UI component kit.

Claude didn't just transcribe. It made design calls and defended them. Paper and earthy tones carry the system. Red and yellow are accents, reserved for emphasis.

When something was off, we said so in plain Norwegian-flavoured English. "Too much brown." "The swatches don't read as colours." "Make the testimonials feel like field notes."

It listened, and it shipped the change.

Direction stayed human. Execution got instant. That's the trade.

Then It Built the Real Thing, Not a Picture of It

A styleguide is useless if it's just pretty. So ours wasn't a screenshot of a website. It was the website.

A React app, real components, design tokens, and a front-page example we called FELTKART. Real maps recoloured to the brand. Live listings. Field-guide species cards. Polaroid-style testimonials that look taped into a notebook. A season almanac.

Claude Code wrote it, ran it, screenshotted its own work, found bugs, and fixed them.

One example tells the whole story. Someone reported that the colours "didn't show up," but only in Safari.

Claude traced it to a modern CSS function the pale swatches relied on, one that Safari was choking on, and swapped every instance for an identical static value. Same look everywhere. No fragile dependency.

That's not "AI made a webpage." That's debugging a cross-browser bug and shipping the fix.

Everything Lives in GitHub. Live in 30 Seconds.

Every change ran the same loop. Edit, build, check it in the actual browser, commit to GitHub, deploy to Vercel, live in about half a minute.

Because it's in GitHub, there's a clean history of every decision and nothing is trapped on one laptop. Because it deploys to Vercel, there's always a real URL to react to. Not a mockup. The actual thing, on a phone, in Safari, in front of whoever needs to see it.

The Loop Is the Whole Point

This is the part that matters, and it isn't "AI can design" or "AI can code."

It's that the distance between an idea and a live result collapsed to minutes.

In one stretch of work we moved a logo detail across every lockup and stamp, turned a flat stats band blaze-yellow for impact, rebuilt plain thumbnails into proper species cards, redesigned the testimonials as notebook pages, added a tab component, built a dark mode, then tuned that dark mode from "too brown" to a clean warm charcoal.

Every one of those was seen live and adjusted before we moved on.

Feedback didn't go into a backlog. It went into the product.

What This Actually Changes

If you're redesigning a service, the old blockers were coordination and cost. You needed a brand person, a product designer, a developer, and the calendar to pass work between them. Most redesigns don't die from bad ideas. They die in that gap, because every iteration is expensive.

Collapse the relay into one loop and the maths changes.

One person with taste can go end to end. You direct, Claude designs and builds, you stay editor-in-chief of quality. Iteration becomes nearly free, so you make more design decisions, not fewer, and the work gets better. Design, code, and the live site are the same thing, versioned in GitHub, so there's no "design versus dev" drift. And you judge the real product in the real browser, not a flattering comp.

This doesn't replace designers or developers. It removes the tax on collaboration that kept good redesigns rare.

The bottleneck moves from production to judgment. Which is exactly where it belongs.

Want to Try It?

1. Sketch the basics in Figma. Logo, named colours, a type pairing, a few components.
2. Have Claude turn it into a real design system in code, with rules, not just a comp.
3. Build the actual thing with Claude Code. A component kit and one real page, running locally.
4. Put it in GitHub and deploy to Vercel, so every change is versioned and live.
5. Then just have the conversation. "More impact here." "Too brown." "Make it feel like a field note." Watch it land on a real URL, in minutes.

We rebuilt a service's entire identity and a working front-end this way. The tools did the production. We kept the taste.

That's the trade worth making.