frontend-design

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.