← ClaudeAtlas

no-ai-design-clicheslisted

Avoid the default visual choices that make a web UI look AI-generated, and make intentional ones instead. Use this WHENEVER you build or style a web page, component, landing page, or app screen with CSS or a UI framework. The purple-to-blue diagonal gradient, glassmorphism cards everywhere, a centered hero with an emoji and two gradient buttons, neon glow on dark, and default system-font-only type are the look that signals "a model designed this". Replace each default with a deliberate choice about type, color, spacing, and layout that fits the actual product.
TheArmagan/skills · ★ 1 · Web & Frontend · score 64
Install: claude install-skill TheArmagan/skills
# No AI design cliches There is a house style that generated UIs fall into: a violet-to-indigo gradient background, frosted glass cards, a dead-centered hero with a big emoji, two pill buttons (one filled gradient, one outline), and everything floating in generous symmetric padding. None of it is broken, but together it reads as a default, the visual equivalent of lorem ipsum. The fix is not a different cliche; it is making each choice on purpose. The rule: for type, color, and layout, pick something because it fits this product, not because it is the safe generated default. ## The tells, and what to do instead - **Purple/indigo gradient on everything.** The `#7c3aed -> #4f46e5` diagonal is the signature. Choose a palette from the product's actual brand or content. Flat color, or a restrained gradient, beats the default violet. - **Glassmorphism by default.** `backdrop-filter: blur` frosted cards stacked everywhere. Use real surfaces and borders; reserve blur for when there is a reason (an overlay over content). - **Emoji as hero art and feature icons.** A giant rocket in the hero, emoji bullets in the feature grid. Use real iconography and real imagery (see `prefer-icons`). - **Everything centered.** Centered hero, centered feature cards, centered CTA. Centering everything removes hierarchy. Use a left-aligned, asymmetric layout where it earns attention. - **System-font-only with no type scale.** Default `font-family` and three near-equal sizes. Choose