De-AI-ify UI / UI Design De-AI-fication

UI Design De-AI-fication (De-AI UI)

Interfaces built by vibe-coding often look cheap—they fail in the details. — @bruc3van

This Skill compiles the public tips from 8 Chinese-speaking designers on X about "what gives away an AI-generated UI and how to prompt for a fix" into executable and checkable rules. Each rule is followed by an [Author] citation. Full source abstracts and links are in references/sources.md. Items marked [Common Practice] are supplementary common sense added to connect the rules and do not imply endorsement by any source author.

When to use

• Building or modifying any UI with an AI agent: landing pages, dashboards, admin panels, settings pages, component libraries, design tokens.
• The user says it "looks AI-generated / cheap / sloppy / generic", or asks for something "more refined / polished / premium".
• Pre-delivery review (a review pass).

Core principles

1. Subtraction over addition. AI's most common failure isn't "what's missing", but "what's too much": excessive explanatory text, dividers, icons, labels, shadows, colors, and animations. Question every element: "Does this really need to be here?" [ZaynHao] [dingyi] [yanliudreamer]
2. The interface steps back; content shines. Use only black, white, and gray for the interface chrome; reserve color for photos and content. [ianneo_ai]
3. Consistency comes from a system, not from feel. Use a complete token system for colors (Radix Colors), a 4px grid for spacing/radii, a small set of font sizes, and reuse existing components and design systems. [ZaynHao] [Kubai087] [yanliudreamer]
4. Details must be "geometrically correct". Nested radii must be concentric, optical alignment applied, border weights uniform. [Kubai087] [ZaynHao] [dingyi]
5. Define first, then build; see the whole, then fix piece by piece. First, write down who it's for, what problem it solves, and what feeling it should evoke; produce a complete version, list issues, prioritize, and change only one thing per iteration. [Xian0063]
6. Design different modes separately; don't transform automatically. Apple added a separate layer for the Clear mode of the Preview icon because a direct conversion from the default mode "looks dirty". The same applies to dark/night/transparent modes. [remixdesigner] [ianneo_ai]

Checkable hard rules

Radii and borders (see references/radius-and-borders.md)

• Nested radii: inner radius = outer radius − padding (r = R − p). Share the same center; work from outside in: dialog/card → panel, input, button → chip, tag. Example: dialog 32, padding 16 → inner 16; panel of 16 with padding 8 chip → chip of 8. [Kubai087]
• Boxes at the same level share the same radius; minimum 4px; pills/circles remain fully round. [Kubai087]
• Padding, gap, and radius all fall on the 4px grid; if a radius token exists, update the token, don't hardcode the value. [Kubai087]
• Continuous radii (superellipse) as progressive enhancement: keep border-radius, then add corner-shape with @supports (corner-shape: superellipse(1.25)). Pill/circle: set corner-shape: round. Works in Chrome/Edge 139+, falls back gracefully to regular radii in Safari/Firefox. [Kubai087]
• Lines and borders should be 0.5px, and uniform across the entire site ("using 1px where 0.5px is correct" is a slop hallmark). [ZaynHao] [dingyi] — Note: ZaynHao clarifies this is a personal optimization and doesn't account for low-DPI or older devices; provide fallbacks when compatibility is needed (see reference file).
• Don't add random radii and shadows; ban the colored vertical stripe on the left of cards. Where radii/shadows are needed, values must match the functional context. [ZaynHao] [dingyi]
• Don't pile on excessive detail: dividers, multiple shadow layers, semi-transparent overlays, containers with borders, cards within cards. [dingyi] [Xian0063]

Color (see references/color.md)

• Interface chrome (buttons, cards, inputs) uses only black, white, and gray by default. Reserve color for photos, illustrations, data, and other content. [ianneo_ai]
• Replace all colors with Radix UI Colors, and use them according to their 12-step scale's defined purpose. [ZaynHao] (Each step corresponds to a background / component / border / solid / text use; see Radix docs. [Common Practice])
• Pick 3–5 distinctive colors for your product's palette (you can sample them from websites or apps you like, e.g. his app background #f6f4f0). [ZaynHao]
• Avoid: purple/blue-purple gradients, gradient buttons, colored icons, one card one color, individually colored characters. [dingyi] [Xian0063] [ianneo_ai]

Typography (see references/typography-cjk.md)

• No more than 4 font sizes, ideally 3; minimum 12px. Use weight, color, and spacing to create hierarchy instead of adding more sizes. [ZaynHao] [dingyi]
• The hero title shouldn't be absurdly large; avoid all-caps subtitles, eyebrow labels above titles, section numbers, and code-style breadcrumbs. [dingyi] [Xian0063]
• Avoid the three most overused fonts: Instrument Serif, Space Grotesk, Bricolage Grotesque; don't overuse monospace and italics. [dingyi]
• Chinese font-family: place Western fonts first, then Chinese, support major operating systems, and end with sans-serif as fallback. Write Chinese font names in English; wrap names with spaces in double quotes. Ready-made stacks are in the reference file. [ricouii]
• Don't center-align everything by default. [Xian0063]

Copy and content (see references/copy-and-content.md)

• Don't use the middle dot "·" as a separator. Remove it if present. [ZaynHao] [dingyi]
• Don't add redundant explanatory text; no emojis in the body copy, and don't place emoji icons above titles. [ZaynHao] [dingyi] [Xian0063]
• Copy should match the target audience: be understandable without being overly colloquial, length should fit the functional scenario, and don't invent new words. [ZaynHao] [dingyi]
• Don't fabricate data or social proof (e.g. "10,000+ happy customers"), and don't force a subscription box at the bottom. [Xian0063, paraphrasing Hallmark's checklist]
• Charts shouldn't be "over-detailed"; having tags/badges everywhere is also a slop hallmark. [dingyi]

Motion and interaction (see references/motion-and-interaction.md)

• Minimize transition animations. When necessary, use ease-out, about 250ms as a baseline. Keep scroll animations few and restrained. [ZaynHao] [dingyi]
• Entry animations should use ease-out, not ease-in; dropdown menus should grow from the trigger button, starting from a 0.96 scale, not 0; buttons should scale down to 0.97 on press; toasts stack without crowding content; truncate long names; abbreviate large numbers. [Xian0063, paraphrasing Emil Kowalski's Skills]
• Reduce interactions that require the user to pause and decide. When absolutely necessary, place them where the user would naturally be making a choice, and re-prioritize the information. [ZaynHao]
• The dropdown caret icon on dropdown buttons needs special attention—dingyi considers this the "most severe" and most often overlooked detail on the list. [dingyi]

Components, resources, and icons (see references/libraries-and-skills.md, references/icons-and-detail.md)

• Prefer reusing existing component libraries / design systems and tokens from the project; don't reinvent the wheel. Reference proven UX patterns from mature products. [yanliudreamer] [Kubai087]
• All icons in a single UI set should come from the same style system—uniform line weight, corner radius, proportion, and visual weight (e.g., Remix Icon). [yanliudreamer] [Kubai087]
• Process assets for dark / night / Clear modes separately; don't apply a filter directly to the default mode assets. [remixdesigner] [ianneo_ai]

Workflow

1. Before coding

• Write down: who it's for, what problem it solves, and what feeling it should evoke. If you can't articulate it, ask the user. No design output at this stage. [Xian0063]
• Read the project's existing component library and design tokens (colors / radii / spacing / font sizes). If they exist, base your work on them; if not, create a minimal set first (see examples/tokens.css).
• Define visual rules: 3–5 brand colors + Radix grayscale, ≤4 font sizes, 4px grid, radius levels, 0.5px borders, Chinese font stack. [ZaynHao] [Kubai087] [ricouii]

2. While coding

• For every element you add, first ask "Can I omit it?": explanatory text, dividers, icons, badges, shadows, colors. [yanliudreamer] [ZaynHao]
• Produce a complete page overview first; don't polish locally. [Xian0063] [yanliudreamer]
• For complex visual directions, generate 3–4 alternatives at once to avoid "prototype gravity" (optimizing along just the path already in code because you've invested too much). [yanliudreamer]

3. Review pass

• Go through each item in references/slop-checklist.md. Record which items are hit.
• Sort by severity. Change only one thing per iteration, confirm it, then move to the next. [Xian0063]
• When changing radii, output a element: old -> new change log as requested by Kubai087.
• Take screenshots at 3 different widths (Taste Skill's method, as paraphrased from [Xian0063]), and check the dark mode.
• Frame feedback in terms of "goal" rather than "pixels": mark issues on screenshots and describe the desired effect; let the AI compute the specific values. [Xian0063]

Copy-paste prompts for AI

Full versions (including Kubai087's original English prompt and ZaynHao's 10 prompts) are in references/prompts.md. Here's the most commonly used combined version:

Please redo this interface following the "De-AI-ify UI" rules. Only modify the page/component I specify. If the project already has tokens or a component library, update those tokens and reuse components; don't hardcode values:
1. Interface chrome uses only black, white, and gray; reserve color for photos and content. Replace all colors with Radix UI Colors and use them according to their 12-step scale purposes. Avoid purple gradients, gradient buttons, colored icons, and colored vertical stripes on the left of cards.
2. Use at most 4 font sizes (preferably 3), minimum 12px. Use weight, color, and spacing for hierarchy instead of adding sizes. Avoid all-caps subtitles, eyebrow labels above titles, and oversized hero text.
3. Nested radii must follow: inner radius = outer radius − padding. Same level, same radius; minimum 4px; pills/circles remain fully round. Padding/gap/radius all on the 4px grid. Use @supports to add corner-shape: superellipse(1.25) as progressive enhancement.
4. Uniform 0.5px lines and borders. Remove unnecessary dividers, multiple shadow layers, semi-transparent overlays, containers with borders, and cards within cards.
5. Remove middle dot "·" separators, redundant explanatory text, and body emojis. Copy must match the target audience—no overly colloquial language or invented words.
6. Minimize animations. When necessary, use ease-out at about 250ms.
7. Use the Chinese font-family stack: Western fonts first, then Chinese, ending with sans-serif as fallback.
After completion, list what you changed (element: old -> new) and which slop characteristics have been eliminated.

Single line version (from [ianneo_ai]): Interface uses only black, white, and gray; reserve color for photos and content.

References

File	Content
references/sources.md	Original post links and key summaries from 8 designers + @bruc3van
references/slop-checklist.md	AI slop self-audit checklist (checkable item by item)
references/radius-and-borders.md	Radius formula, superellipse, 0.5px borders and fallbacks
references/color.md	Grayscale + Radix Colors usage
references/typography-cjk.md	Font size hierarchy, slop fonts, Chinese font-family
references/copy-and-content.md	Copy and content rules
references/motion-and-interaction.md	Animation parameters and interaction details (cascading menus, drag-and-drop sorting, skeuomorphic buttons)
references/icons-and-detail.md	Icon consistency, multi-mode assets
references/libraries-and-skills.md	Recommended resource libraries and 5 additional AI design Skills
references/prompts.md	All copy-paste prompts
examples/	Before/after CSS and minimal tokens