---

name: frontend-design description: 'Tạo giao diện frontend đẹp, chất lượng production-grade. Sử dụng khi user yêu cầu build web components, pages, landing pages, dashboards, React components, HTML/CSS layouts, hoặc styling/beautify UI. Tránh AI slop aesthetics.'

Frontend Design Skill

Skill này hướng dẫn tạo giao diện frontend độc đáo, production-grade, tránh "AI slop" aesthetics. Implement code thực với attention to aesthetic details.

Khi Nào Sử Dụng

• Build web components, pages, applications
• Tạo landing pages, dashboards
• React/Vue/Angular components
• HTML/CSS layouts
• Styling/beautifying web UI
• Tạo artifacts đẹp

Design Thinking

Trước khi code, hiểu context và commit BOLD aesthetic direction:

CRITICAL: Chọn conceptual direction rõ ràng và execute với precision.

Frontend Aesthetics Guidelines

Typography

• Chọn fonts đẹp, unique, interesting
• TRÁNH: Arial, Inter, Roboto, system fonts
• Pair distinctive display font với refined body font
• Unexpected, characterful font choices

Color & Theme

• Commit vào cohesive aesthetic
• Sử dụng CSS variables cho consistency
• Dominant colors với sharp accents > timid palettes
• TRÁNH: Purple gradients trên white backgrounds

Motion & Animation

• Animations cho effects và micro-interactions
• Ưu tiên CSS-only solutions
• Focus high-impact moments: page load với staggered reveals
• Scroll-triggering và hover states surprising

Spatial Composition

• Unexpected layouts
• Asymmetry, overlap, diagonal flow
• Grid-breaking elements
• Generous negative space HOẶC controlled density

Backgrounds & Visual Details

• Tạo atmosphere và depth
• Sử dụng: gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, grain overlays
• TRÁNH: solid colors đơn điệu

❌ TRÁNH (AI Slop)

Copy- Overused font families (Inter, Roboto, Arial)
- Purple gradients on white backgrounds
- Excessive centered layouts
- Uniform rounded corners
- Cookie-cutter design
- Generic component patterns

✅ LÀM (Distinctive Design)

Copy- Characterful, unexpected fonts
- Bold color commitments
- Asymmetric, dynamic layouts
- Context-specific character
- Intentional design choices
- Memorable visual identity

Implementation Output

Implement working code:

• Production-grade và functional
• Visually striking và memorable
• Cohesive với clear aesthetic point-of-view
• Meticulously refined in every detail

Quick Reference

---

Remember: Interpret creatively, make unexpected choices. No design should be the same. Vary between light/dark themes, different fonts, different aesthetics. NEVER converge on common choices.