Case Study

I'm a Non-Technical Founder. Here's How I Fixed My AI-Built App's Generic Look.

M
Maurits Dierick
·February 20, 2026·7 min read

I'm a Non-Technical Founder. Here's How I Fixed My AI-Built App's Generic Look.

Three weeks. That's how long Nicolas and I spent building our MVP with Claude Code. We went from zero to functional product in 21 days. Landing page, user authentication, database, payment processing—all through vibe coding.

The users came. We got sign-ups. And then someone sent us feedback that stung: "Cool product, but the UI looks like a template."

They weren't wrong. The app looked professional. It was functional. But it didn't look ours. Every page was identical. Same font, same blue accent, same card styling, same everything. It looked like we'd bought a design template and slapped our logo on it.

I'm a non-technical founder. I can't code. I don't know CSS. I've never used Figma. But I knew we needed to fix the generic look before users dismissed us for looking cheap.

So I spent an afternoon with Nicolas and fixed it. No designer. No new tools. Just intentional choices.

Here's what we did.

The Moment I Realized Every Page Looked Different

Wait, let me back up. The first thing I noticed wasn't that every page looked the same. It was that every page looked different from every other page in ways that made no sense.

Page 1: Blue accent, Inter font, big rounded corners. Page 2: The blue was a different shade. Slightly. Hard to tell. Page 3: The spacing felt tighter. The font weight was heavier. Page 4: Back to the first spacing, but a different shadow depth.

It was like Claude Code was making new design decisions for every page because it had no memory of what it decided on the previous page.

Users weren't dumb. They could feel the inconsistency. It read as sloppy. Not "this is a fresh startup." Sloppy. "These founders didn't know what they were doing."

Nicolas explained the problem: Claude was defaulting to its training data on every generation. Without an explicit design system to reference, it picked the highest-probability values each time. Same general direction (professional, clean, blue accent), but slightly different every time.

The fix, he said, would take an afternoon.

What I Tried That Didn't Work

My first instinct was to hire a designer. I figured, "We need professional design. Let's get a professional."

I emailed three designers. Prices came back at $3,000-$8,000 for a design system. Timeline was 4-6 weeks.

We didn't have 4-6 weeks. We had Friday afternoon.

My second instinct was to look for a design template. Something pre-built we could drop in and customize. But Nicolas pointed out the irony: "That's exactly what users already think we're using."

The real fix, Nicolas explained, wasn't hiring a designer or buying a template. It was giving Claude Code a specific system to follow.

He walked me through something called "design tokens" and "constraint files." I expected complex technical setup. Instead, he showed me something simpler.

What Actually Fixed It (Step by Step)

Step 1: Pick a Visual Direction (10 Minutes)

This was the part I could actually do myself. Nicolas set up a visual configurator—just checkboxes and sliders. No design vocabulary. No Figma. No crypto-bro complexity.

The questions were straightforward:

These weren't questions about design. These were questions about personality. "Does your product feel corporate or approachable?" "Does it feel precise or friendly?"

I had opinions about these things. I'd been thinking about the product's vibe for three weeks. I just didn't know how to translate that into design decisions.

Ten minutes of sliders and checkboxes. Done.

Step 2: Install the Design System (5 Minutes)

Nicolas hit a button, and the configurator generated a folder. Inside: CSS files with color definitions, typography settings, spacing scales. A few new component files with pre-styled buttons, cards, inputs. And a file called CLAUDE.md.

He dropped all of it into the project folder. Added the CLAUDE.md to the Claude Code context. That was it.

Five minutes. No installation process. No configuration I needed to understand. Just copy-paste.

Step 3: Rebuild the Inconsistent Pages (2 Hours)

This was the only part that required Nicolas's technical work. But even this was fast.

He went through the app and identified the pages that felt most inconsistent (pages 3, 5, and 7). Then he asked Claude Code to rebuild them with a specific instruction:

"Rebuild this page following the design system in CLAUDE.md. Reference the colors, spacing, typography, and shadow values from the system. Do not deviate."

Claude regenerated the pages. This time, they matched page 1. Same accent blue. Same font. Same spacing. Same shadows.

The entire process took 2 hours because some pages had complex functionality that needed testing. But the design work was instant. Claude just... respected the system.

Before and After

Before: Every page looked slightly different. Users noticed inconsistency. After: Every page looks cohesive. The app now feels intentional.

The difference wasn't subtle. On the first call with a potential customer after the redesign, they said: "This looks so much more polished. I almost didn't recognize it as the same product."

That's what a consistent design system does. It doesn't make you look like a professional design agency. It makes you look like people who know what they're doing.

The 11 Design Choices I Made (And My Reasoning)

For founders reading this who want to understand what we actually decided: here's what I picked and why.

Font: Plus Jakarta Sans instead of Inter. I wanted something that felt modern but serious. Plus Jakarta feels a step more intentional than the default system font everyone uses.

Primary color: #2563EB (a different blue). The default Indigo-500 that every AI app uses felt generic. This slightly deeper blue felt more like "us."

Border radius: Slightly sharp (0.375rem instead of 0.5rem). I wanted the product to feel precise, not soft. Sharp corners convey authority.

Spacing: Loose. I picked more whitespace between elements. It felt more premium, less cramped.

Shadows: Medium depth. Not too bold (which feels heavy), not too subtle (which feels flat). Medium shadows gave depth without weight.

Secondary color: A muted gray-blue. Something that felt complementary without screaming.

Background color: Off-white instead of pure white. It reduces eye strain and feels warmer.

Text weight: Slightly bolder than default. I wanted headlines to feel strong.

Input styling: Subtle borders instead of filled backgrounds. Looks cleaner on the page.

Card styling: One unified shadow depth instead of varied shadows. Consistency matters more than variation.

Focus states: Bright outline instead of soft focus ring. Accessibility without sacrificing precision.

These 11 decisions took me 10 minutes to make through a visual interface. No design knowledge. Just "does this feel right?"

Frequently Asked Questions

Q: Do I need a designer to make my AI-built app look professional?

A: No. A design system generator translates visual preferences into technical values. You choose between options like "rounded or sharp corners" and "warm or cool colors" through a visual interface, and the tool produces the design tokens, components, and AI rules file. No design vocabulary or Figma skills needed. The 11 decisions take about 10 minutes.

Q: How long does it take to fix a generic-looking MVP?

A: About 2-3 hours total. 10 minutes to configure visual preferences, 5 minutes to install the design system, and 2 hours to regenerate the most inconsistent pages with the AI now following the new constraints. The AI does the heavy lifting; you just point it at the pages that need updating and the SKILL.md handles consistency.

Q: What design choices should a non-technical founder make first?

A: Start with three high-impact decisions: font (swap Inter for something distinctive), accent color (pick your brand color or any non-default blue), and border radius (sharp for enterprise, rounded for consumer). These three changes alone shift perception from "template" to "intentional." Then refine the remaining 8 decisions when you have time.

Q: Can I change my design system after I pick one?

A: Yes, but with some friction. You'd need to regenerate your pages with the new system. That's why spending 10 minutes on the initial choices is worth it. Get the direction right from the start, and you avoid regeneration work later. But if you pick a font and hate it, you can change it. No permanent commitment.

Q: What if I don't have a technical co-founder to do the installation?

A: The installation part (Step 2) is copy-paste. But if you're truly non-technical, you might need a developer to do the regeneration work in Step 3. However, a junior developer can handle it in a few hours. It's not complex work; it's just following instructions and running generations. Budget 2-4 hours of developer time if you need to outsource that part.

Q: Does this work for any AI coding tool?

A: The constraint file approach works for Claude Code, Cursor, and Copilot. Any AI tool that reads context files respects CLAUDE.md or .cursorrules. The design tokens approach is universal—it's just CSS variables. So yes, this works for any setup.

Q: What if I want something more custom later?

A: Start with a design system generator to get consistency fast. Later, if you want deeper customization (custom illustrations, more complex layouts, brand-specific components), hire a designer. You'll have a foundation to work from, and they'll have clear systems to extend rather than starting from scratch.

The thing I learned: you don't need a designer to stop looking generic. You need intentional choices and a system that enforces those choices consistently.

We spent an afternoon fixing what three weeks of AI code-generation had created. 10 minutes picking visual direction, 5 minutes installing the system, 2 hours regenerating pages. That's it.

Users immediately noticed. The product looks like it was designed, not templated. And that shifted how people perceived the entire company. It's not magic. It's just consistency.

If you're a non-technical founder with an AI-built MVP that feels generic, this is your afternoon too. Pick a visual direction through a simple interface. Install the design system. Let Claude fix the inconsistencies.

You'll be amazed how much 15 minutes of intentional choices changes perception.

#founders#mvp#vibe-coding#design-system#non-technical
All articles

More articles

Design

MCP Servers for Design: How AI Coding Tools Are Getting a Taste Layer

April 5, 2026·7 min read
Case Study

The Design Gap Between $0/mo and $49/mo SaaS (It's 11 CSS Values)

April 2, 2026·7 min read
Case Study

Agency Workflow: From Client Brief to Branded Prototype with AI Coding

March 29, 2026·7 min read