The Exact Prompts That Took Our UI From Generic to Distinctive — A Real Design Journey With Claude Code

xeve's UI was not designed in Figma. It was designed through conversation — 48 Claude Code sessions, hundreds of prompts, and a design that changed direction three times before we found what worked. This is the unedited story of how those prompts evolved, what went wrong, and the framework that emerged.

Attempt 1: "Make It Look Cool" (The Generic Phase)

The first design prompt was vague:

"I want the ui/ux to look very cool, something like gyroscope
but more enterprise and modern, this should be like OS for your
life or something i.e web dashboard"

Claude Code produced exactly what you would expect from a vague prompt — a dark dashboard with Inter font, rounded cards, blue-gray borders, and gradient accents. It looked like every other SaaS dashboard. Functional, forgettable.

When that did not feel right, I pushed harder:

"continue, take inspiration from gyrosco.pe app the web
dashboard looks super cool"

Claude Code added glassmorphism effects, backdrop-blur, and gradient text (emerald-to-cyan). It spawned an agent that built an entire Three.js particle background — 2000 emerald particles in a rotating sphere with bloom effects. It looked like a tech demo, not a product.

Lesson: "Make it look cool" is not a design direction. It is an invitation for the AI to add visual complexity. More effects does not equal better design. The AI will keep adding layers until you tell it to stop.

Attempt 2: "Awwwards Quality" (The Overreach)

Next, I tried to reference quality instead of a specific style:

"see some / get some inspiration from awwwards website"

Claude Code studied Awwwards-winning sites and added scroll animations, parallax effects, and more visual complexity. But it still did not have a cohesive identity. When I followed up with:

"still doesn't look like awwwards winning website"

The AI added more effects. More animations. More gradients. It was chasing "impressive" without understanding that Awwwards winners are distinctive because of restraint, not excess.

I then tried referencing a specific designer:

"colors etc can be a lot better i feel, i want johnny ive
level details, see what he did with the latest ferrari design"

This was closer — it pushed toward minimalism and precision. But "Johnny Ive level" is still too abstract for an AI to act on consistently. Every new page would interpret "Ive-like" differently.

Lesson: Quality references ("Awwwards", "Johnny Ive") do not work because they describe an outcome, not a system. The AI cannot generate consistency from "make it premium." It needs rules it can follow mechanically on every component.

Attempt 3: The Breakthrough — "Teenage Engineering"

The turning point was one prompt:

"I want the whole website to look like a teenage engineering
product with the colors and everything and font"

This worked because Teenage Engineering is not a quality level — it is a specific, recognizable design system. The AI knows what TE products look like: monochrome surfaces, one accent color (orange), industrial typography, sharp corners, visible labels, engineering-grade simplicity.

Claude Code immediately:

• Switched the font to Space Mono (monospace everywhere)
• Set the accent to #ff4f00 (TE orange)
• Changed the background to #0f0e12 (near-black)
• Removed all rounded corners
• Added uppercase labels with letter-spacing
• Added numbered sections (01, 02, 03...)

One prompt created a cohesive identity that three sessions of "make it cool" never achieved.

Lesson: Name a specific physical product or brand, not a quality level. "Teenage Engineering" gives the AI a concrete visual language. "Premium" gives it nothing to work with.

The Correction Phase: Fixing What the AI Got Wrong

The TE direction was right, but the execution needed constant correction. Here are the actual follow-up prompts and what they fixed:

Contrast Crisis

The most persistent problem was text contrast. The AI kept using colors that were technically "on brand" but unreadable:

"ok this is more i like it but some fonts / text is very small"

"will we be able to show album art ? also text is muted very
bad color"

"change this font color to white or little brighter, anywhere
this color is used across the app make this larger and bold
even here all the small text make it little brighter, its
hardly visible"

"font text color changes still not done"

The AI used #888, #666, even #555 for text on a #0f0e12 background — all failing WCAG AA contrast requirements. I had to tell it four times to fix text colors before adding a permanent rule to CLAUDE.md:

Contrast: NEVER use text colors below #ccc on dark bg or
above #6b6960 on light bg

We eventually ran a full contrast audit that found and fixed 47 violations across 6 files. The fix was a single commit — but the problem had been accumulating across weeks of sessions.

Lesson: AI is bad at contrast. It will use aesthetically "matching" colors that are functionally unreadable. Add an explicit minimum contrast rule to your design file and audit regularly. Do not assume the AI will maintain readability on its own.

Chart Font Inconsistency

"can we change the font inside these charts? i want it to be
consistent across the app"

Recharts uses its own default font (sans-serif) unless you explicitly override it. The AI applied monospace to all text in the app except charts, creating a jarring inconsistency. The fix was a global CSS override:

.recharts-text,
.recharts-cartesian-axis-tick-value,
.recharts-legend-item-text {
  font-family: 'JetBrains Mono', monospace !important;
}

Lesson: Third-party component libraries (Recharts, date pickers, select menus) have their own default styles. The AI will style your custom components correctly but forget about library components. Audit every third-party component for design system compliance.

Color Monotony

"try to use the colors different for each, get some ideas
from the colors the teenage engineering products use, now
there is only one color"

The AI made everything orange. Every chart, every accent, every highlight — all #ff4f00. TE products actually use one accent color but have distinct category colors for data visualization. We defined a fixed category palette:

Development: #ff4f00 (accent orange)
Productivity: #4e9bcd
Communication: #e8d44d
Browsing: #9b8ec4
Entertainment: #e07850
Design: #7ec8e3

The accent color stays orange. Data visualization gets its own palette. The rule became: one brand color, multiple data colors.

Cross-Platform Consistency

When we built the iOS app, the design drifted immediately:

"can you make font bold and full white"

"do the same for everywhere so that its better or try a
different font it might be the font also which is the issue
since its not sharp enough"

SwiftUI uses SF Pro by default, which looks softer than JetBrains Mono on the web. The fix was specifying SF Mono for iOS and enforcing the same color tokens across platforms. This led to adding platform-specific font rules to CLAUDE.md:

Font: Monospace everywhere — JetBrains Mono (web),
SF Mono (macOS/iOS), Cascadia Mono (Windows)

The Light Mode Challenge

When we added light mode, the prompt was carefully specific:

"Can we work on a light mode? use these images as inspiration
for color create a plan"

I attached photos of Teenage Engineering products — the warm gray keyboard, the linen-colored speaker. The AI understood immediately that this was not a clinical white theme but a warm, industrial light mode. The resulting palette used #f5f4f0 (warm linen) instead of #ffffff (pure white), with every color having a yellow-brown undertone.

Lesson: For major visual changes, provide visual references alongside text prompts. A photo of a TE keyboard communicates "warm industrial linen" more precisely than any text description.

What Finally Made It Stick: The CLAUDE.md Design System

After weeks of corrections, we crystallized everything into a persistent design file. Here is the actual structure:

1. Reference (one line):

Design Language — Industrial Minimalist

2. Exact color tokens (table with hex values):

| page      | #0f0e12 | Page background |
| surface   | #151517 | Card/panel bg   |
| accent    | #ff4f00 | THE orange      |

3. Hard constraints (what NEVER to do):

- No rounded corners beyond 2px
- No text below #ccc contrast
- No new brand colors
- No emojis

4. Component patterns (how pages compose):

1. Date header + page title
2. StatCard grid (2-4 metrics)
3. Numbered sections (01, 02, 03)
4. Charts inside .card containers

5. CSS classes (encoded decisions):

.card, .metric, .te-index, .section-label,
.te-btn, .te-btn-primary

6. Avoid list (learned from mistakes):

Don't use rounded-lg
Don't introduce new colors
Don't hardcode hex in charts
Don't forget tabular-nums

This file is read by Claude Code at the start of every session. Every new page, every new component, every fix starts with these rules in context. The result: 24+ dashboard pages that all look like they were designed by the same person, even though they were built across 48 separate AI sessions.

The Prompts That Did Not Work

• "Make it look cool" — produced generic effects (gradients, particles, glassmorphism)
• "Get inspiration from Awwwards" — added complexity without identity
• "Johnny Ive level details" — too abstract, interpreted differently each session
• "Fix the colors" — too vague, the AI changed random colors without understanding the system
• "Make the font better" — the AI tried 3 different fonts instead of committing to one

The Prompts That Worked

• "I want the whole website to look like a teenage engineering product" — instant cohesion
• "NEVER use text colors below #ccc" — permanent contrast fix
• "Monospace everywhere, no exceptions" — typography consistency
• "No rounded corners beyond 2px" — eliminated generic card styling
• "One accent color only. #ff4f00. Never introduce new brand colors." — color discipline
• Attaching product photos for light mode — precise visual reference for warmth

How to Apply This to Any AI Tool

This works with Claude Code, Cursor, GitHub Copilot, and OpenAI Codex. The framework:

1. Start with a physical reference — not "premium" or "modern" but "Dieter Rams" or "Bloomberg Terminal" or "Muji"
2. Write constraints that eliminate defaults — every "never" removes a generic option
3. Define exact hex tokens — the AI will be inconsistent without exact values
4. Show composition patterns — how components fit together on a page
5. Encode decisions in CSS classes — the AI uses your classes instead of raw Tailwind
6. Build an avoid list from corrections — every mistake becomes a rule
7. Put it all in the file the AI reads first — CLAUDE.md, .cursorrules, or system prompt

The design you get from AI is the design you constrain it to produce. Leave the constraints vague and you get generic. Make them specific and you get something only your product could look like.