The design toolkit: 26 prompts to make your vibe-coded app stop looking AI-made

The one-shot prompt

Claude! I don't want my vibe-coded app to look AI-made, so please go through this screen and fix it in this order:
spacing, colour, icons, copy, type, layout, details, visuals, motion. Keep every feature, section and piece of real
data. Follow every rule below, then list what you changed.

Then paste the 26 rules.

Colour and surfaces

1. Remove the purple gradients. Replace purple-to-blue or violet-to-pink gradients on backgrounds, cards, buttons and the active nav item with one neutral surface.
2. Kill every glow and coloured shadow. Remove colored glows, drop-shadow on emoji and glowing pills. Get depth from surface steps and hairline borders, with small neutral shadows on light themes.
3. No gradient text in headings. Headings, numbers and the logo use solid text colour.
7. Build every grey from one neutral ramp. Background, raised surfaces, borders and text all come from one ramp, with three text roles only: primary, secondary and muted.
8. Use one accent colour, and use it rarely. It marks the primary action, the selection or the one number that matters. Everything else stays neutral.
21. No rainbow bars: one highlight colour per chart. Bars sit in neutral steps; only the thing that matters (this month, the tracked line) gets the accent.
23. Delete the floating blobs and glossy orbs. Remove blurred blobs, orbs, nebulas, glowing grids and radial colour washes behind content.
26. Check your accent passes 4.5:1 contrast. Text on the accent (and accent used as text) must reach at least 4.5:1 against its background (WCAG 2 AA for normal text). If it doesn't, darken the accent or use dark text.

Type and copy

10. Write labels in sentence case, not shouty capitals. NAVIGATION and PAID THIS MONTH with wide tracking become Navigation and Paid this month.
11. Use regular weights, not extra-bold headings. Headings at 800-900 drop to 400-500. Hierarchy comes from size and colour, with 600 at most for rare emphasis.
12. Show every number in one format. If one figure is $48,210, the next isn't $124,860.40 or 07. Use tabular-nums so columns line up.
13. No exclamation marks in the interface. Saved successfully!! 🎉 becomes Saved.
14. Replace "Welcome back" with the page's real title. Welcome back, Sam! 👋 becomes the page or period, like October 2026.
15. Say what each change compares to. +12%!! becomes +12% vs last month.
16. Cut hype words like supercharge and seamless. Also unlock, magic, revolutionize, game-changing and "AI-powered" on everything. Say what the product actually does, for whom. Remove claims you can't check (10x faster, Loved by 10,000+ teams) unless they're real.
17. Shorten placeholders, and turn shortcuts into keycaps. Search anything... becomes Search; a glowing ⌘K pill becomes two small keycaps.
9. Drop the New and Pro badges. Remove PRO, New ✨ and Beta 🚀 badges unless the product truly needs one, and then make it quiet text.
4. Swap every emoji for one icon set. Emoji in nav, labels and status become line icons from one set (lucide if the project has none) at one size (16-18 px) and one stroke (1.5), in the text colour.

Spacing and layout

5. Put all spacing on a four-pixel grid. Every margin, padding, gap and fixed height is a multiple of 4. Replace one-off values like mt-[13px] or h-[31px].
6. Give equal cards equal padding. Sibling cards share one padding; rows in a list share one height and one gap. Space inside a group is smaller than space between groups.
18. Make inner corners fit the outer ones. Inner radius = outer radius minus the padding between them (never below 4).
19. Don't make everything a pill. Radius by size: controls 8-10, cards 12-16, panels 14-20.
20. Give one chart the spotlight. One main chart is clearly the biggest thing on the screen; anything else that shows data is smaller and a different kind (a ranked list with thin bars, a short table).
22. Vary the card widths. A row of identical equal-width cards reads as a template. Try three compact stats above one wide chart, or a wide chart next to a narrow list.
24. Stop things pulsing and bouncing. Remove animate-pulse and animate-ping on things that aren't live, breathing glows, floating elements, bouncy springs and hover:scale on cards. Keep quick colour changes on hover and a small fade-in on load.
25. Show the real product, not a stock illustration. A hero shows a preview of the actual app with plausible data instead of abstract shapes or a glossy 3D blob.

The shortcut: let the unslop skill do it

In Claude Code:

git clone https://github.com/heydamir/unslop
mkdir -p ~/.claude/skills && cp -r unslop/skills/unslop ~/.claude/skills/

Then type /unslop this dashboard (or your landing page). It audits the screen, shows you a direction, waits for your OK, then applies all the passes. Add and make the story video for a 10-second before-and-after clip (needs Playwright and ffmpeg). My run on its example dashboard took about 14 minutes.

One check after any AI redesign: look at the numbers. New charts and sample cards are often filled with made-up data. Swap in your real data before you ship.

Credit: many rules adapted from unslop's references/signs.md by Damir Sokolovsky (@heydamir), CC BY 4.0. The 4.5:1 figure is WCAG 2's AA contrast minimum for normal text. This guide isn't affiliated with him or with Anthropic.