Specific Prompting for UI Work

The Split

Claude Sonnet crushes complex algorithms. Refactors thousand-line codebases. Writes flawless TypeScript with edge cases you didn't consider.

Then you ask it to "make this button look better."

Twelve iterations later, it's still off-center with Comic Sans vibes.

Logic Is Easier To Corner

You: "Refactor this auth flow with edge case handling"
Claude: *produces perfect implementation in 10 seconds*
You: "Holy shit."

Terminator genius level. Sees patterns instantly. Handles complexity humans miss.

The reason is simple: logic is exact, right or wrong is provable, tests pass or fail, no aesthetic judgment needed. AI crushes technical precision.

Interfaces Need More Than Taste Words

You: "Make this look better"
Claude: *moves padding 2px, changes color to #F5F5F5*
You: "No, like... good"
Claude: *adds drop shadow, border radius 4px*
You: "..."

Not the AI's fault. Your prompt is shit.

UI goes wrong for obvious reasons: "Better" is meaningless. "Good" is subjective. "Modern" could mean anything. "Clean" describes nothing.

Vague prompts = vague results.

What Changes

The weak technical prompt — "Implement JWT refresh token flow with Redis caching, handle token expiration, add rate limiting per IP" — is actually specific and testable. AI crushes it.

The weak UI prompt — "Make this modern and clean" — is meaningless and untestable. AI guesses.

The working UI prompt: "Mobile-first flexbox, 16px base padding, typography scale 1.25, monospace headers, brutalist spacing, high contrast blacks/whites, no gradients, sharp corners." Exact. AI crushes it.

What Specificity Actually Looks Like

"Make the header look professional" produces whatever the model decides professional means today. "Header: 100vh height, centered flex column, H1 72px bold, monospace font, 24px margin-bottom, black text on white, no decoration" produces what you want.

"This feels off, fix it" produces guesswork. "Increase line-height to 1.6, reduce letter-spacing to -0.02em, align-items center not flex-start" produces results.

"Make it look like Stripe's site" produces a vague approximation. "Stripe style: sans-serif 16px base, 1.5 line-height, 48px vertical rhythm, subtle gray borders #E6E6E6, 8px border-radius, ample white space" extracts the specifics and gets you there.

Mobile First Means Saying The Layout Out Loud

"Make it responsive" doesn't work.

"Mobile first: 100% width, stack vertical, 16px padding, 1 column. Tablet: 2 column grid at 768px. Desktop: max-width 1200px, 3 columns at 1024px" — exact breakpoints, exact behavior, AI executes perfectly.

Typography Is Usually Where The Prompt Starts Lying

"Better fonts" gets you nothing. "System font stack: -apple-system, BlinkMacSystemFont, Segoe UI. Headers: 700 weight, 1.2 line-height, -0.02em tracking. Body: 400 weight, 1.6 line-height, 16px base" gets you what you're picturing.

Claude knows fonts. You need to know what you want.

Color Is Where Vague Taste Goes To Die

"Use nicer colors" fails. "Brutalist palette: Pure black #000000 text, pure white #FFFFFF background, accent red #FF0000 for CTAs, gray #808080 for disabled states. No gradients. No opacity. Hard edges." — exact hex codes, exact usage, no aesthetic interpretation needed.

Spacing Has To Become Math

"Add some space" produces AI guesswork. "Vertical rhythm 8px base: headings 32px margin-bottom, paragraphs 16px, sections 64px. Horizontal padding 16px mobile, 24px tablet, 32px desktop" — a mathematical spacing system AI follows perfectly.

A Better Workflow

You: "Build landing page, mobile-first"
Claude: *creates something*
You: "Specific prompting time..."

You: "Mobile: 100% width, 16px padding, stack vertical
Typography: System fonts, 48px H1, 24px H2, 16px body, 1.6 line-height
Colors: Black text, white bg, red CTAs (#FF0000)
Spacing: 8px base rhythm, 64px section gaps
Layout: Centered flex column, max-width 1200px desktop
Components: Sharp corners, no shadows, 2px borders"

Claude: *executes flawlessly*

Real Example: Neon Leviathan

Game was brilliant. Mechanics perfect. Story engaging. UI looked like shit. Buttons hard to see.

The vague prompts were "make it cyberpunk with neon effects" and "give it a futuristic gaming aesthetic." Here's what that produced:

/* "NEON BRUTALISM - Arcade Game Aesthetic" */
--gold-sun: #d4a917;              /* Primary neon - WRONG COLOR */
--ocean-black: #0a1628;           /* Blue-tinted - WRONG */

.choice-button {
  min-height: 120px;              /* TOO TALL */
  padding: 28px 32px;             /* WASTEFUL */
  border: 6px solid var(--gold-sun);  /* GARISH GOLD */
  box-shadow: 8px 8px 0;          /* BRUTAL */
  color: var(--gold-bright);      /* HARD TO READ */
}

.narrative-line {
  font-size: clamp(1.5rem, 3vw, 2rem);  /* 24-32px TOO BIG */
  font-weight: 700;
  text-shadow: 2px 2px 0;
}

.narrative-line:first-of-type::first-letter {
  font-size: 5em;                 /* DECORATIVE WASTE */
  color: var(--gold-bright);
}

Arcade game aesthetic — AI guessed the wrong reference. Gold everywhere (game is called "Neon Leviathan," should be cyan). Only 6-9 lines of story visible. Garish, unreadable, wrong mood.

The specific prompt:

"Foundation: MDRN.app clean brutalist
- True black #000000 background (not blue-tinted)
- Clean Inter typography for body text
- Minimal 1-2px borders (not thick brutal borders)
- White #FFFEF0 text for maximum readability

Identity: Neon Leviathan = bioluminescent creature in deep ocean
- Strategic cyan #00ffff accent on interactive elements ONLY
- Deep abyss darkness, not arcade brightness
- Subtle glow like deep sea creature, not everywhere neon
- Professional serious tone, NOT arcade game energy

Priorities:
- Narrative text is hero - need 10+ lines visible on iPhone
- Font size 18px for mobile reading (not 24-32px)
- Reduce padding to 20px (not 32px)
- Remove decoration (no drop caps, no stripes, no effects)
- Efficient UI chrome, maximum content space"

What that actually got:

/* Clean MDRN + Bioluminescent Identity */
--abyss-black: #000000;           /* TRUE BLACK */
--cyan-glow: #00ffff;             /* CORRECT neon color */
--ocean-panel: #1a1a1a;           /* Minimal depth */
--ivory: #FFFEF0;                 /* Readable text */

.choice-button {
  min-height: 80px;               /* COMPACT */
  padding: 20px 24px;             /* EFFICIENT */
  border: 2px solid var(--cyan-glow);  /* CLEAN, VISIBLE */
  background: var(--ocean-panel);
  color: var(--ivory);            /* READABLE */
  transition: all 200ms ease-out;
}

.choice-button:hover {
  border-color: var(--cyan-bright);
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);  /* SUBTLE GLOW */
  transform: translateY(-2px);
}

.narrative-line {
  font-family: 'Inter', sans-serif;  /* CLEAN */
  font-size: 18px;                /* READABLE */
  font-weight: 400;               /* NORMAL */
  line-height: 1.6;
  color: var(--ivory);
}

/* NO drop cap - content is hero */

10-12 lines of story visible (about 150px more space). Cyan on black at 8.9:1 contrast ratio (AAA). Professional, matches "Neon Leviathan" title. Readable, efficient, correct mood.

"Make it cyberpunk" got garish arcade aesthetic. "MDRN foundation + Neon Leviathan identity (bioluminescent cyan #00ffff on true black #000000)" built exactly what was needed. The title literally told you the visual style: Neon (cyan glow) Leviathan (deep ocean darkness). Vague prompting missed it. Specific prompting nailed it.

Why Nerds Read on Laptops

Mobile-first is correct. But complex UI work needs desktop screen space.

Mobile: touch targets, scroll behavior, thumb zones. Desktop: grid systems, multi-column, hover states, complex layouts.

Prompt for mobile. Build on laptop. Test on device.

AI needs both contexts specified: "Mobile: single column, large touch targets 48px minimum. Desktop: 3 column grid, hover states on links, sticky nav."

The Brutal Truth

Claude is terminator genius at logic. UI requires human aesthetic translated to exact specifications.

Know what "good" means in exact terms. Translate aesthetic to technical specs. Prompt with precision. That's your job. Asking AI to "make it look good" and iterating 47 times is not.

Replace vague with exact. "Modern" becomes an exact font stack, spacing system, and color palette. "Better" becomes exact CSS properties to change. "Responsive" becomes breakpoints with exact pixel values.

Think in systems: typography scale instead of random sizes, spacing rhythm instead of arbitrary padding, color palette instead of aesthetic vibes.

Backend logic, frontend specificity. Master the prompting and UI becomes as easy as backend. Or keep saying "make it look better" and iterate forever.

GhostInThePrompt.com // Technical literacy is the ultimate armor.