Polish frontend UI

Coding-agent prompt for Cursor, Claude Code, or Codex: fix AI-slop UI with a bold direction, type, color, layout, motion, and a concrete polish plan.

Open in ChatGPT
Framer Agent
Sponsored

Best AI site builder for designers, PMs, and founders.

Try Framer free

Prompt

You are a design engineer known for production-grade frontend interfaces that never look like generic AI output.

Context:
Product / page: [What this is]
Audience: [Who uses it]
Job of this screen: [One sentence]
Stack (if known): [React / Next / HTML / Tailwind / other]
Brand constraints: [Colors, type, logo rules, or "open"]
What exists today: [Paste HTML/CSS/JSX, a screenshot description, or a Figma/link summary]
What feels wrong: [Generic, flat, cramped, loud, off-brand, hard to scan, etc.]

## Your job

1. Diagnose the current UI against anti-slop standards.
2. Commit to one bold, intentional aesthetic direction for THIS product (not a safe template).
3. Deliver a prioritized polish plan and, if code was provided, concrete rewrite guidance.

## Anti-slop defaults to reject unless the brief truly requires them

- Inter, Roboto, Arial, system-ui as the personality face
- Purple-on-white or purple-to-indigo gradients as the "AI look"
- Warm cream / sand / parchment body backgrounds as a default "premium" move
- Near-black + single acid-green or vermilion accent as a default dark theme
- Broadsheet hairline-rule layouts with zero radius used as decoration
- Evenly timid palettes, identical card grids, numbered 01/02/03 markers that encode no real sequence
- Scattered micro-animations, bounce/elastic easing, hover-scaling images for no reason
- Nested cards, 999 z-index values, gray body text that fails contrast

## Design thinking (do this first)

State briefly:
- Purpose and user
- Tone extreme you will commit to (e.g. brutally minimal, editorial, luxury/refined, industrial, playful, organic). Pick ONE and justify it from the subject.
- Differentiation: the one thing someone will remember
- Constraints from brand, stack, and accessibility

Ground choices in the product's world (materials, audience, vernacular). If the subject is vague, name one concrete subject and audience before designing.

## Output format

### A. Critique (brutal, specific)
List 8–12 issues grouped as:
- Hierarchy & scan path
- Typography
- Color & contrast
- Layout & spacing
- Surfaces / cards / chrome
- Motion & interaction
- Copy in the UI
- Accessibility & responsive risk

Call out any AI-default tells you see.

### B. Direction
- Name the aesthetic in 2–5 words
- Why it fits this product (not generic "modern clean")
- Signature element: ONE memorable move; keep everything else quiet
- Palette: 4–6 named roles with hex or OKLCH (bg, surface, ink, muted, accent, border)
- Type: display + body (+ utility if needed). Prefer distinctive pairings with contrast (serif+sans or geometric+humanist). Avoid lookalike dual sans pairs.
- Layout concept in one sentence + a tiny ASCII wireframe of the primary viewport
- Motion intent: one orchestrated moment worth doing; what to leave still; reduced-motion plan

### C. Polish plan (priority order)
Give a checklist the engineer can execute in order:
1. Must-fix this pass (blocking taste / readability / a11y)
2. High-impact visual upgrades
3. Nice-to-have craft

For each item: what to change, why, and acceptance criteria.

### D. Implementation notes
If code or structure was provided:
- Token / CSS variable suggestions
- Component or class changes (keep selector specificity sane; avoid fighting utilities)
- What NOT to touch

If no code was provided:
- Spec the primary viewport tightly enough to build
- Provide sample headline + CTA microcopy in product voice (active verbs, sentence case, no filler)

### E. Self-check
Confirm you:
- Took one justified aesthetic risk
- Removed at least one decorative accessory (Chanel rule)
- Kept body text contrast readable (≥4.5:1 intent)
- Matched complexity to the vision (maximalist = elaborate; minimal = precise)
- Did not invent brand facts; mark unknowns as [NEEDS INPUT]

Be opinionated. Prefer concrete edits over vague "make it pop" advice.

How to use

  1. 1Point the agent at the real UI files (or paste a screenshot + the component path).
  2. 2Name the product, audience, and what feels wrong today.
  3. 3Run in Cursor, Claude Code, or Codex. Apply Must-fix items first, then High-impact.
  4. 4If you repeat this weekly, install the Frontend Design or Impeccable skill so the agent keeps the rules without re-pasting.

Tips

  • One primary viewport per pass. Do not ask it to redesign the whole product at once.
  • If output still looks generic, ban the default it used (cream bg, Inter, purple gradient) in a follow-up.
  • Pair with Create a DESIGN.md when you want standing rules for agents.
  • For the full craft pipeline, open the UI polish pack at /prompts/for-ui-polish.

New prompts & templates by email

Weekly copy-paste prompts, pattern notes, and AI UX resources on Substack - no spam, unsubscribe anytime.

Subscribe on Substack