메뉴
Prevents generic AI-generated designs by guiding typography, color, motion, and background choices. Use when creating frontend designs, landing pages, dashboards, or any UI/UX work. Helps avoid the "AI slop" aesthetic.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| name | frontend-aesthetics |
| description | Prevents generic AI-generated designs by guiding typography, color, motion, and background choices. Use when creating frontend designs, landing pages, dashboards, or any UI/UX work. Helps avoid the "AI slop" aesthetic. |
Based on Anthropic's formula for improving frontend design through steerability.
LLMs converge toward generic, "on distribution" outputs. In frontend design, this creates what users call the "AI slop" aesthetic - Inter fonts, purple gradients on white backgrounds, and minimal animations.
Make creative, distinctive frontends that surprise and delight. Focus on these four dimensions:
Choose fonts that are beautiful, unique, and interesting.
Never use: Inter, Roboto, Open Sans, Lato, Arial, default system fonts
Good choices:
Pairing principle: High contrast = interesting. Display + monospace, serif + geometric sans, variable font across weights.
Use extremes: 100/200 weight vs 800/900, not 400 vs 600. Size jumps of 3x+, not 1.5x.
Pick one distinctive font, use it decisively. Load from Google Fonts.
Commit to a cohesive aesthetic. Use CSS variables for consistency.
Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
Draw inspiration from:
Avoid: Purple gradients on white backgrounds (the ultimate AI slop indicator)
Use animations for effects and micro-interactions.
Create atmosphere and depth rather than defaulting to solid colors.
CRITICAL: Tailwind v4 has breaking changes. Follow these rules:
space-x-*, space-y-* (removed in v4)gap-* with flex/grid containers instead// WRONG (Tailwind v3 only)
<div className="flex space-x-4">
// CORRECT (Tailwind v4 compatible)
<div className="flex gap-4">
tailwind.config.ts@config "../tailwind.config.ts" to your CSS file if using a config/* app/globals.css */
@import "tailwindcss";
@config "../tailwind.config.ts";
* { margin: 0 } resets - they break mx-auto, my-* utilities"type": "module" to avoid Node.js ESM warningsspace-x-* and space-y-* utilities (use gap-* instead)Interpret creatively and make unexpected choices that feel genuinely designed for the context. Vary between light and dark themes, different fonts, different aesthetics.
You still tend to converge on common choices across generations. Avoid this: it is critical that you think outside the box!
Instead of the default "tech purple":