DEV Community

StackOps Labs
StackOps Labs

Posted on

How to Stop Claude Code, Cursor, and v0 From Generating Generic 'AI Slop' UIs: Deterministic Design System Token Specs

#webdev #css #ai #javascript

Every engineering team building with Claude Code, Cursor, or v0 eventually hits the same visual wall: unless you constrain the model at the token level, every generated interface converges on the same generic template. You get rounded-xl cards, bg-slate-900 surfaces, text-slate-500 body copy, arbitrary padding steps, and an unprompted purple-to-indigo gradient in the hero section.

Prompting for "vibes" (for example, asking the agent to "make it look like Linear or Stripe") fails because LLMs do not reason in visual aesthetics; they predict high-probability CSS utility classes from their training corpus. Similarly, passing screenshots fails because vision encoders approximate hex values and cannot infer sub-pixel letter-spacing or hairline border alpha channels from rasterized pixels.

To eliminate generic AI UI output permanently, you have to replace qualitative style prompts with deterministic CSS custom property specifications and explicit negative constraints inside your repository's CLAUDE.md or .cursorrules file.

1. The Anatomy of a Deterministic Design Token Spec (Sample Archetype: Linear Precision Dark)

Instead of allowing the coding agent to pick arbitrary Tailwind color scales, define a strict 3-tier surface hierarchy, hairline border opacity, negative heading tracking, and hard negative rules at the top of CLAUDE.md:

# UI Design System Constraint Spec: Archetype 01 (Linear Precision Dark)

## Hard Negative Constraints (STRICT)
1. NEVER use `rounded-xl`, `rounded-2xl`, or `rounded-3xl`. Maximum border-radius for cards and modals is `6px` (`rounded-md`); buttons and inputs use `4px` (`rounded`).
2. NEVER use purple, indigo, or violet gradients (`from-indigo-*`, `via-purple-*`).
3. NEVER use default Tailwind `slate-*` or `gray-*` utility classes directly on components. Bind all backgrounds, borders, and text exclusively to the CSS custom properties below.
4. NEVER use heavy drop shadows (`shadow-lg`, `shadow-xl`) to separate cards. Separate surfaces strictly via `1px solid var(--border-hairline)` and luminance steps.

## Deterministic CSS Custom Properties
Enter fullscreen mode Exit fullscreen mode


css
:root {
/* 3-Tier Luminance Surface Hierarchy */
--bg-canvas: #08090A;
--bg-surface-1: #0F1012;
--bg-surface-2: #16181D;
--bg-surface-hover: #1C1F26;

/* Hairline Borders */
--border-hairline: rgba(255, 255, 255, 0.07);
--border-focus: rgba(94, 106, 210, 0.65);

/* Typography & Tracking */
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--font-mono: 'JetBrains Mono', monospace;
--tracking-display: -0.032em;
--tracking-heading: -0.024em;
--tracking-body: -0.011em;

/* Text Hierarchy */
--text-primary: #F7F8F8;
--text-secondary: #8A8F98;
--text-muted: #575C66;

/* Accent */
--accent-primary: #5E6AD2;
--accent-primary-hover: #6E7AE2;
}


## Data Density & Alignment Rules
- All numeric columns, financial metrics, latency readouts, and timestamps MUST apply `font-variant-numeric: tabular-nums`.
- Section headers must pair a `13px` uppercase monospace label (`letter-spacing: 0.06em`, `color: var(--text-muted)`) with a tight `24px` semi-bold heading (`letter-spacing: var(--tracking-heading)`).
Enter fullscreen mode Exit fullscreen mode


javascript

When Claude Code or Cursor reads this specification prior to component generation, it stops guessing utility classes and emits clean, consistent, high-density interfaces on the first pass.

2. Injecting Reusable System Prompts & Variables Directly Into Web AI Chats (Manifest V3 DOM Snippet)

When iterating on UI specs or architecture prompts inside browser-based LLM interfaces (ChatGPT, Claude, Gemini, or Perplexity), manually copying and replacing placeholders across dozens of prompts introduces friction.

In a Manifest V3 Chrome Extension, you can interpolate {{variable}} placeholders locally and inject the compiled specification directly into contenteditable or <textarea> chat inputs using native input event dispatching:

// Manifest V3 Content Script: Deterministic {{Variable}} Prompt Injector for ChatGPT / Claude / Gemini
function injectCompiledPromptIntoActiveChat(templateString, variablesMap) {
  const compiled = templateString.replace(/\{\{\s*([a-zA-Z0-9_]+)\s*\}\}/g, (_, key) => {
    return Object.prototype.hasOwnProperty.call(variablesMap, key) ? variablesMap[key] : `{{${key}}}`;
  });

  const target = document.querySelector('#prompt-textarea, div[contenteditable="true"], textarea');
  if (!target) throw new Error('Active chat input element not found on page.');

  target.focus();
  if (target.tagName === 'TEXTAREA') {
    const nativeSetter = Object.getOwnPropertyDescriptor(window.HTMLTextAreaElement.prototype, 'value').set;
    nativeSetter.call(target, compiled);
    target.dispatchEvent(new Event('input', { bubbles: true }));
  } else {
    // ProseMirror / Lexical contenteditable editors (Claude, ChatGPT, Gemini)
    document.execCommand('selectAll', false, null);
    document.execCommand('insertText', false, compiled);
    target.dispatchEvent(new InputEvent('input', { bubbles: true, inputType: 'insertText', data: compiled }));
  }
}
Enter fullscreen mode Exit fullscreen mode

Get the Complete Production Design System Packs & Manifest V3 Chrome Extensions

Instead of building token specifications, DOM extractors, and prompt vaults from scratch, you can grab our complete, unminified production bundles and Manifest V3 Chrome Extensions below (use code STACKOPS20 on Payhip for 20% off):

  1. Anti-AI-Slop UI Design Systems Pack: 12 .cursorrules & CLAUDE.md Themes + Live HTML Switcher ($24)
    Includes all 12 complete B2B SaaS design system specifications (Linear Precision Dark, Stripe Editorial Light, Vercel Geist Monochrome, Raycast Glassmorphic Command, Bloomberg Terminal High-Density Data, Supabase Emerald Developer, Notion Warm Editorial, Retool Dense Internal Tool, PostHog Neo-Brutalist Engineering, Mercury Fintech Swiss Precision, Cron Spatial Grid, and Tailwind Catalyst Clean), plus an interactive single-file HTML live theme previewer.

  2. PromptDock: AI Prompt Vault, {{Variable}} Injector, Token Counter & Chat-to-Markdown Chrome Extension ($19)
    100% local-first Manifest V3 Chrome Extension + full unminified source code for ChatGPT, Claude, Gemini, and Perplexity. Inject {{variable}} templates in one click, estimate API token costs across GPT-4o/Claude/DeepSeek, and export entire chat threads to clean Markdown (.md) or JSON.

  3. StealThisUI: Website Design System, Color Palette, Typography & Cursor/Claude Code Prompt Chrome Extension ($19)
    Extract live window.getComputedStyle() colors, typography scales, radii, and shadows from any reference site and compile a ready-to-paste CLAUDE.md / .cursorrules prompt in one click.

  4. StackRay: B2B Lead, Tech-Stack, Email & Live DNS/MX X-Ray Chrome Extension ($24)
    Detect 22+ B2B SaaS tech signatures, harvest on-page contact emails, query live MX/SPF email gateways via Cloudflare 1.1.1.1 DNS-over-HTTPS, and export leads to CSV.

  5. CiteCheck: Technical SEO, Schema.org JSON-LD & AI Search (/llms.txt + GPTBot) Auditor Chrome Extension ($19)
    Audit on-page SEO hierarchy, Schema.org @graph JSON-LD nodes, and live /llms.txt + robots.txt AI crawler rules in one click.

  6. All-Access Flagship Engineering, Security & FinOps Vault ($49 — $790+ Combined Value)
    Get instant access to our flagship multi-product engineering, FinOps, security, and B2B growth vault:

Top comments (0)