Use this skill to design and implement bold, production-ready frontends when the request involves UI. Combine it with repository UI/UX requirements (docs/ui/requirements.md) and existing design systems.
Design Thinking
Before coding, lock in a clear, memorable direction:
- Purpose: What problem does the interface solve? Who uses it?
- Tone: Commit to a strong aesthetic (e.g., brutalist/raw, retro-futuristic, editorial/magazine, luxury/refined, playful/toy-like, industrial/utilitarian). Choose one and execute it precisely.
- Constraints: Framework, performance, accessibility, build tooling.
- Differentiation: What makes this unforgettable? Aim for a single standout idea.
Then build working code (HTML/CSS/JS, React, templ, etc.) that is:
- Production-grade and functional
- Visually striking with a cohesive point of view
- Meticulous in spacing, motion, and detail
Frontend Aesthetics Guidelines
- Typography: Pick characterful, non-default fonts; pair a distinctive display font with a refined body font. Avoid Arial/Inter/Roboto/system defaults.
- Color & Theme: Define a strong palette with CSS variables; prefer decisive dominance + accents over timid mixes.
- Motion: Use meaningful animations (page load, staggered reveals, purposeful hover states). Prefer CSS; keep motion aligned to the chosen aesthetic.
- Spatial Composition: Consider asymmetry, overlap, generous negative space or intentional density. Avoid cookie-cutter layouts.
- Background & Details: Build atmosphere with gradients, meshes, textures, layered transparencies, dramatic shadows, decorative borders, custom cursors, or grain overlays—matching the aesthetic.
Avoid generic AI-looking designs (purple-on-white defaults, predictable layouts, overused fonts, interchangeable components). Each UI should feel intentionally crafted for its context. Match implementation effort to the chosen style: maximalism demands rich effects; minimalism demands precise restraint.
1---2name: frontend-design-83description: Create distinctive, production-grade frontend interfaces with high design quality. Use this skill for UI tasks that build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.4license: Complete terms in LICENSE.txt5---6
7Use this skill to design and implement bold, production-ready frontends when the request involves UI. Combine it with repository UI/UX requirements (`docs/ui/requirements.md`) and existing design systems.
8
9## Design Thinking
10
11Before coding, lock in a clear, memorable direction:
12- **Purpose**: What problem does the interface solve? Who uses it?
13- **Tone**: Commit to a strong aesthetic (e.g., brutalist/raw, retro-futuristic, editorial/magazine, luxury/refined, playful/toy-like, industrial/utilitarian). Choose one and execute it precisely.
14- **Constraints**: Framework, performance, accessibility, build tooling.
15- **Differentiation**: What makes this unforgettable? Aim for a single standout idea.
16
17Then build working code (HTML/CSS/JS, React, templ, etc.) that is:
18- Production-grade and functional
19- Visually striking with a cohesive point of view
20- Meticulous in spacing, motion, and detail
21
22## Frontend Aesthetics Guidelines
23
24- **Typography**: Pick characterful, non-default fonts; pair a distinctive display font with a refined body font. Avoid Arial/Inter/Roboto/system defaults.
25- **Color & Theme**: Define a strong palette with CSS variables; prefer decisive dominance + accents over timid mixes.
26- **Motion**: Use meaningful animations (page load, staggered reveals, purposeful hover states). Prefer CSS; keep motion aligned to the chosen aesthetic.
27- **Spatial Composition**: Consider asymmetry, overlap, generous negative space or intentional density. Avoid cookie-cutter layouts.
28- **Background & Details**: Build atmosphere with gradients, meshes, textures, layered transparencies, dramatic shadows, decorative borders, custom cursors, or grain overlays—matching the aesthetic.
29
30Avoid generic AI-looking designs (purple-on-white defaults, predictable layouts, overused fonts, interchangeable components). Each UI should feel intentionally crafted for its context. Match implementation effort to the chosen style: maximalism demands rich effects; minimalism demands precise restraint.
majiayu000