Inspiration source:impeccable ⭐ 3k
A professional frontend design language specification that frees AI-generated UI from the "cookie-cutter template feel".
Why is this skill needed?
LLMs learn from the same generic templates, and without guidance they produce the same predictable mistakes:
- Inter font + purple gradient
- Cards inside cards inside cards
- Gray text on colored backgrounds
- Bounce/elastic animations (look dated)
This skill uses design specifications and an anti-pattern checklist to actively guide AI toward producing professional designs.
Design specifications (core principles)
Typography
- ✅ Choose fonts with personality: Geist, Instrument Serif, DM Sans, Sora
- ✅ Establish a typographic scale system (modular scale: 1.25 or 1.333)
- ❌ Forbidden: Arial, Inter (too generic), system-ui (lacks personality)
- ❌ Forbidden: more than 2 font families on the same page
Color & Contrast
- ✅ Use the OKLCH color space to define colors (perceptually uniform)
- ✅ Neutral colors always have a tint (warm gray / cool gray, not pure gray)
- ✅ Dark mode: use #0f0f0f for backgrounds, not pure black #000000
- ❌ Forbidden: gray text on colored backgrounds
- ❌ Forbidden: pure black/pure gray (always have a slight tint)
Spatial Design
- ✅ Establish a 4px or 8px base spacing system
- ✅ Use whitespace to create a sense of breathing room; do not cram elements together
- ✅ Content width limits: 65ch for body text, 1280px for wide containers
- ❌ Forbidden: arbitrary padding numbers (13px, 22px)
Motion Design
- ✅ Use cubic-bezier(0.16, 1, 0.3, 1) for easing (fast in, slow out)
- ✅ Micro-interaction duration: 100-200ms; page transitions: 300-500ms
- ✅ Respect prefers-reduced-motion
- ❌ Forbidden: bounce/elastic easing (looks cheap)
- ❌ Forbidden: animations longer than 600ms (too slow)
Interaction Design
- ✅ Focus states must be clearly visible (do not remove outline)
- ✅ Loading states: skeleton is better than spinner
- ✅ Error messages: specific + actionable ("Email format is incorrect" vs "Invalid input")
- ❌ Forbidden: disabled states with no explanation of the reason
UX Writing
- ✅ Button text: start with a verb ("Save changes" not "Confirm")
- ✅ Empty states: explain the reason + provide the next action
- ✅ Error prompts: plain language, no technical jargon
- ❌ Forbidden: "Please wait..." (state what is happening)
Command list
Use these commands in any UI/frontend-related conversation:
| Command | Function |
|---|---|
/audit [组件名] |
Check accessibility, performance, and responsive issues |
/critique [组件名] |
UX design review: hierarchy, clarity |
/polish [组件名] |
Final polish before release |
/distill [组件名] |
Simplify, remove excess elements |
/colorize [组件名] |
Introduce strategic color |
/animate [组件名] |
Add meaningful motion |
/bolder [组件名] |
Make bland designs bolder |
/quieter [组件名] |
Calm down overly loud designs |
/delight [组件名] |
Add details that bring a knowing smile |
/normalize [组件名] |
Align with design system guidelines |
/harden [组件名] |
Add error handling, edge cases, internationalization |
Execution Rules
When the user makes a design-related request:
- Automatically apply design guidelines: When generating or modifying UI code, proactively follow the above guidelines
- When receiving commands：
/audit: Check and list 3-5 specific issues (with line numbers/component names)/polish: Output the complete modified code + explain what was changed- Other commands: First explain what changes will be made, then output the modified code
- Proactively flag anti-patterns: When anti-patterns are found in the user's code, briefly point them out
- Prioritize code: Design suggestions must translate into concrete CSS/code, not remain at the conceptual level
Example
The user says: "Help me write a login form"
Output characteristics after automatically applying the guidelines:
- Font uses Geist or DM Sans (not Arial/Inter)
- Input focus state uses 2px solid oklch(0.6 0.2 250) (tinted blue)
- Button text: "Log in" instead of "Confirm"
- Error message: "Email format is incorrect, please check before and after the @ symbol" instead of "Input error"
- Loading state uses skeleton, not spinner
- spacing uses multiples of 8px (8/16/24/32px)