by @anthropic
A design-forward skill for creating production-grade frontend interfaces. Emphasizes bold aesthetic direction, distinctive typography, cohesive color themes, motion design, and spatial composition. Generates self-contained HTML/CSS/JS that avoids generic AI aesthetics in favor of intentional, memorable design.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill for web components, pages, artifacts, posters, or applications — websites, landing pages, dashboards, React components, HTML/CSS layouts, or styling/beautifying any web UI.
Generates creative, polished code and UI design that avoids generic AI aesthetics.
Before coding, understand the context and commit to a BOLD aesthetic direction:
CRITICAL: Choose a clear conceptual direction and execute with precision. Bold maximalism and refined minimalism both work — the key is intentionality.
Choose beautiful, unique, interesting fonts. NEVER use generic fonts like Arial, Inter, Roboto. Opt for distinctive choices that elevate the design. Pair a distinctive display font with a refined body font.
Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Focus on high-impact moments: one well-orchestrated page load with staggered reveals creates more delight than scattered micro-interactions.
Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
Create atmosphere and depth rather than defaulting t...
