Menu
前端设计秘典（Impeccable 融合版：排版/OKLCH 配色/空间/动效/交互/响应式/UX 文案 + 4 种 style 变体）。
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
CCG Skills - Quality gates, documentation generator, and multi-agent orchestration. Auto-installed by CCG workflow system.
变更校验关卡。分析代码变更，检测文档同步状态，评估变更影响范围。当用户提到变更检查、文档同步、代码审查、提交前检查、diff分析时使用。在设计级变更、重构完成时自动触发。
模块完整性校验关卡。扫描目录结构、检测缺失文档、验证代码与文档同步。当用户提到模块校验、文档检查、结构完整性、README检查、DESIGN检查时使用。在新建模块完成时自动触发。
代码质量校验关卡。检测复杂度、重复代码、命名规范、函数长度等质量指标。当用户提到代码质量、复杂度检查、代码异味、重构建议、lint检查、代码规范时使用。在复杂模块、重构完成时自动触发。
安全校验关卡。自动扫描代码安全漏洞，检测危险模式，确保安全决策有文档记录。当用户提到安全扫描、漏洞检测、安全审计、代码安全、OWASP、注入检测、敏感信息泄露时使用。在新建模块、安全相关变更、攻防任务、重构完成时自动触发。
从近期开发会话中萃取可复用的模式 / 决策 / 教训。当用户提到提取教训 / 复盘 / lessons learned / 知识沉淀 / 经验萃取 / 提炼模式时使用。会扫 .context/ 决策日志 + git log 提交语义。
| name | frontend-design |
| description | 前端设计秘典（Impeccable 融合版：排版/OKLCH 配色/空间/动效/交互/响应式/UX 文案 + 4 种 style 变体）。 |
| license | Apache 2.0 (Impeccable) + MIT (custom extensions) |
| user-invocable | false |
| disable-model-invocation | false |
| context | fork |
| paths | *.tsx,*.jsx,*.vue,*.svelte,*.css,*.scss |
This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. It fuses Impeccable design philosophy with extended knowledge on state management, engineering, and design style systems.
Design skills produce generic output without project context. You MUST have confirmed design context before doing any design work.
Required context — every design skill needs at minimum:
Gathering order:
.impeccable.md from the project root. If it exists and contains the required context, proceed./teach-impeccable NOW before doing anything else. Do NOT skip this step. Do NOT attempt to infer context from the codebase instead.Commit to a BOLD aesthetic direction:
CRITICAL: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work — the key is intentionality, not intensity.
Consult typography reference for scales, pairing, and loading strategies.
Choose fonts that are beautiful, unique, and interesting. Pair a distinctive display font with a refined body font.
DO: Use a modular type scale with fluid sizing (clamp) for display text; fixed rem scales for app UIs DO: Vary font weights and sizes to create clear visual hierarchy DON'T: Use overused fonts — Inter, Roboto, Arial, Open Sans, system defaults DON'T: Use monospace typography as lazy shorthand for "technical/developer" vibes DON'T: Put large icons with rounded corners above every heading — they rarely add value
Consult color reference for OKLCH, palettes, and dark mode.
Commit to a cohesive palette. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
DO: Use OKLCH (not HSL) for perceptually uniform, maintainable palettes DO: Tint your neutrals toward your brand hue — even a subtle hint creates subconscious cohesion DON'T: Use gray text on colored backgrounds — use a shade of the background color instead DON'T: Use pure black (#000) or pure white (#fff) — always tint DON'T: Use the AI color palette: cyan-on-dark, purple-to-blue gradients, neon accents on dark backgrounds DON'T: Use gradient text for "impact" — it's decorative rather than meaningful DON'T: Default to dark mode with glowing accents
Consult spatial reference for grids, rhythm, and container queries.
DO: Create visual rhythm through varied spacing — tight groupings, generous separations DO: Use fluid spacing with clamp() that breathes on larger screens DO: Use asymmetry and unexpected compositions; break the grid intentionally DON'T: Wrap everything in cards — not everything needs a container DON'T: Nest cards inside cards — flatten the hierarchy DON'T: Use identical card grids — same-sized cards with icon + heading + text, repeated endlessly DON'T: Center everything — left-aligned text with asymmetric layouts feels more designed DON'T: Use the same spacing everywhere — without rhythm, layouts feel monotonous
DO: Use intentional, purposeful decorative elements that reinforce brand DON'T: Use glassmorphism everywhere — blur effects used decoratively rather than purposefully DON'T: Use rounded elements with thick colored border on one side — a lazy accent DON'T: Use sparklines as decoration — tiny charts that convey nothing meaningful DON'T: Use rounded rectangles with generic drop shadows — safe, forgettable DON'T: Use modals unless there's truly no better alternative
Consult motion reference for timing, easing, and reduced motion.
DO: Use motion to convey state changes — entrances, exits, feedback DO: Use exponential easing (ease-out-quart/quint/expo) for natural deceleration DO: For height animations, use grid-template-rows transitions DON'T: Animate layout properties (width, height, padding, margin) — use transform and opacity only DON'T: Use bounce or elastic easing — they feel dated and tacky
Consult interaction reference for forms, focus, and loading patterns.
DO: Use progressive disclosure — start simple, reveal sophistication through interaction DO: Design empty states that teach the interface, not just say "nothing here" DO: Make every interactive surface feel intentional and responsive DON'T: Repeat the same information — redundant headers, intros that restate the heading DON'T: Make every button primary — hierarchy matters
Consult responsive reference for mobile-first, fluid design, and container queries.
DO: Use container queries (@container) for component-level responsiveness DO: Adapt the interface for different contexts — don't just shrink it DON'T: Hide critical functionality on mobile — adapt, don't amputate
Consult ux-writing reference for labels, errors, and empty states.
DO: Make every word earn its place DON'T: Repeat information users can already see
Critical quality check: If you showed this interface to someone and said "AI made this," would they believe you immediately? If yes, that's the problem.
A distinctive interface should make someone ask "how was this made?" not "which AI made this?"
Review the DON'T guidelines above — they are the fingerprints of AI-generated work from 2024-2025.
Deep-dive reference documents for each design dimension:
| Reference | Covers |
|---|---|
| typography | Type systems, font pairing, modular scales, OpenType, web font loading |
| color-and-contrast | OKLCH, tinted neutrals, dark mode, accessibility, 60-30-10 |
| spatial-design | 4pt spacing, grids, visual hierarchy, container queries, optical adjustments |
| motion-design | 100/300/500 rule, easing curves, stagger, reduced motion, perceived performance |
| interaction-design | 8 states, focus rings, Popover API, CSS Anchor, modals, keyboard nav |
| responsive-design | Content-driven breakpoints, pointer/hover queries, safe areas, srcset |
| ux-writing | Button labels, error formulas, empty states, voice vs tone, i18n |
| Topic | Document | Covers |
|---|---|---|
| UI Aesthetics | ui-aesthetics.md | HSL color tokens, 8px grid CSS snippets, shadow scales, dark mode CSS |
| Component Patterns | component-patterns.md | CSS Grid/Flexbox layouts, responsive nav, glass card, Framer Motion |
| UX Principles | ux-principles.md | Nielsen 10 heuristics, WCAG, ARIA, keyboard, loading patterns |
| State Management | state-management.md | Redux/Zustand/Jotai/Recoil/Context — decision tree + code templates |
| Frontend Engineering | engineering.md | Web Vitals, code splitting, virtual scroll, Vitest/Playwright, Vite/Webpack |
Specific style variant specs with CSS tokens and component patterns:
| Style | Document | Aesthetic |
|---|---|---|
| Claymorphism | claymorphism/SKILL.md | Soft clay, large radii, dual inner shadows, offset outer shadows |
| Glassmorphism | glassmorphism/SKILL.md | Frosted glass, backdrop-filter, translucency, blur layers |
| Neubrutalism | neubrutalism/SKILL.md | Thick borders, offset solid shadows, high saturation, minimal radius |
| Liquid Glass | liquid-glass/SKILL.md | Apple-style translucent depth, spring animations, ambient response |
All commands are in ~/.claude/skills/ccg/impeccable/. Each invokes this skill's guidelines first.
| Command | What it does |
|---|---|
/audit | Technical quality checks (a11y, performance, responsive, theming, anti-patterns) — scored 0-20 |
/critique | UX design review with Nielsen heuristics scoring (0-40), persona testing, cognitive load |
/teach-impeccable | One-time setup: gather design context, save to .impeccable.md |
| Command | What it does |
|---|---|
/normalize | Align with design system standards |
/polish | Final pass before shipping — 20-item checklist |
/distill | Strip to essence, remove unnecessary complexity |
/clarify | Improve unclear UX copy, error messages, labels |
/optimize | Performance improvements (CWV, bundle, rendering) |
/harden | Error handling, i18n, text overflow, edge cases |
| Command | What it does |
|---|---|
/animate | Add purposeful motion and micro-interactions |
/colorize | Introduce strategic color to monochromatic designs |
/bolder | Amplify boring designs with distinctive impact |
/quieter | Tone down overly bold designs to refined sophistication |
/delight | Add moments of joy, personality, and surprise |
| Command | What it does |
|---|---|
/extract | Pull into reusable components and design tokens |
/adapt | Adapt for different devices and contexts |
/onboard | Design onboarding flows and empty states |
/typeset | Fix font choices, hierarchy, sizing, readability |
/arrange | Fix layout, spacing, visual rhythm |
/overdrive | Technically extraordinary effects (shaders, springs, scroll-driven) |
/audit /normalize /polish blog # Full workflow: audit -> fix -> polish
/critique /harden checkout # UX review + add error handling
/audit # Find issues first
/normalize # Then fix inconsistencies
/polish # Final cleanup
Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details.
Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices across generations.
/audit, /critique)/adapt)/animate, /delight)/optimize)/polish)/clarify)/harden)/typeset)/arrange)