Menü
Use when building web components, pages, or visually distinctive interfaces where design quality matters as much as code quality.
Use when designing REST or GraphQL endpoints, defining request/response schemas, or establishing API versioning and authentication conventions.
Use when writing end-to-end tests with Playwright, setting up Page Object Model, or configuring E2E test CI/CD with artifact management.
Use when writing Go code, structuring packages, handling errors, managing concurrency, writing tests, or building deployable Go applications.
Use when reviewing contracts or legal documents for Chinese law risks. 中国法律风险审查专家，识别高危条款并提供修改建议。
Use when design document needs user review - auto-opens browser to render MD content
Use when writing Python code, setting up tests with pytest, or configuring Python application deployment.
| name | frontend-design |
| description | Use when building web components, pages, or visually distinctive interfaces where design quality matters as much as code quality. |
| metadata | {"author":"skills-team"} |
Use when the task is "make it look designed," not just "make it work."
For: landing pages, dashboards, app shells, components, visual systems, design systems.
Core principle: Pick a direction and commit to it. Safe-average UI is usually worse than a strong, coherent aesthetic with a few bold choices.
Settle before coding:
Directions: brutal minimal, editorial, industrial, luxury, playful, geometric, retro-futurist, soft organic, maximalist
Do not mix directions. Choose one and execute cleanly.
Define:
Use CSS variables/token system for coherence.
Prefer:
Avoid defaulting to symmetrical card grid unless clearly right.
Use animation to reveal hierarchy, stage information, reinforce user action, create memorable moments.
One well-directed load sequence > twenty random hover effects.
| Element | Guideline |
|---|---|
| Typography | Fonts with character, distinctive display + readable body |
| Color | One dominant field + selective accents (avoid generic purple gradients) |
| Background | Atmosphere: gradients, meshes, textures, subtle noise |
| Layout | Break grid when composition benefits, use diagonals/offsets |
See references/design-audit.md for 10-dimension scoring rubric.
// Composition over inheritance
function Card({ children, variant = 'default' }) {
return <div className={`card card-${variant}`}>{children}</div>
}
// Custom hooks
function useToggle(initialValue = false): [boolean, () => void] {
const [value, setValue] = useState(initialValue)
return [value, useCallback(() => setValue(v => !v), [])]
}
See references/react-patterns.md for compound components, performance, accessibility.
| Mode | Purpose | Output |
|---|---|---|
| Generate | Create cohesive design system | DESIGN.md, design-tokens.json, design-preview.html |
| Visual Audit | Score UI across 10 dimensions | Score + fixes with file:line |
| AI Slop Detection | Identify generic patterns | Flag: gradients, purple-blue, glass morphism |
See references/design-audit.md for full rubric.
Before delivering: