| name | frontend-design |
| description | Create distinctive, production-grade frontend interfaces with high design quality. Focuses on premium aesthetics and avoiding "AI slop". |
FORGE Frontend Design Skill
Use this skill when tasked with building web components, pages, artifacts, or applications. Your goal is to create distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics.
Design Principles
- Commit to BOLD Aesthetics: Pick a clear conceptual direction (e.g., minimal, maximalist, retro-futuristic, etc.) and execute it with precision.
- Memorable & Polished: What is the one thing someone will remember? Ensure meticulous refinement in every detail.
- Technical Excellence: Framework compatibility, performance, and accessibility are baseline requirements.
Guidelines
- Typography: Pair a distinctive display font with a refined body font. Avoid Inter, Roboto, and Arial.
- Color & Theme: Use CSS variables for a cohesive theme. Choose accents that pop.
- Motion: Orchestrate high-impact animations. Use CSS transitions or library-specific motion (e.g., Framer Motion for React).
- Composition: Break the grid. Use asymmetry, negative space, and overlapping elements for depth.
- Background Content: Use meshes, noise, geometric patterns, or layered transparencies to create atmosphere.
What to Avoid
- Purple gradients on white backgrounds.
-系統 default font stacks.
- Predictive layouts and cookie-cutter component patterns.
MATCH implementation complexity to the aesthetic vision. Elegance comes from executing the vision well.
