This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.
The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.
Differentiation: What makes this UNFORGETTABLE? What's the one thing someone will remember?
CRITICAL: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.
Implement working code (HTML/CSS/JS, React, Vue, etc.) that is:
Production-grade and functional
Visually striking and memorable
Cohesive with a clear aesthetic point-of-view
Meticulously refined in every detail
实现可运行的代码（HTML/CSS/JS、React、Vue等），需满足：
达到生产级别且功能完整
视觉冲击力强且令人难忘
风格统一，具有明确的美学视角
每一个细节都经过精心打磨
Frontend Aesthetics Guidelines
前端美学指南
Typography
排版
Choose fonts that are beautiful, unique, and interesting
Avoid generic fonts like Arial and Inter
Use distinctive choices that elevate the frontend's aesthetics
Pair a distinctive display font with a refined body font
NEVER converge on common choices (Space Grotesk, Inter, Roboto, system fonts)
选择美观、独特且有趣的字体
避免使用Arial、Inter等通用字体
使用独特的字体选择提升前端美学
将独特的标题字体与精致的正文字体搭配使用
绝对不要选择常见字体（如Space Grotesk、Inter、Roboto、系统字体）
Color & Theme
色彩与主题
Commit to a cohesive aesthetic
Use CSS variables for consistency
Dominant colors with sharp accents outperform timid, evenly-distributed palettes
Vary between light and dark themes across different components
保持风格统一
使用CSS变量确保一致性
主色调搭配鲜明强调色的效果，优于平淡、均匀分布的调色板
在不同组件中切换亮色与暗色主题
Motion & Animation
动效与动画
Use animations for effects and micro-interactions
Prioritize CSS-only solutions for HTML
Use Motion library for React when available
Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay)
Use scroll-triggering and hover states that surprise
使用动画实现特效与微交互
对于HTML优先选择纯CSS解决方案
如有条件，在React中使用Motion库
聚焦高影响力场景：一个精心编排的页面加载动画，配合分步显示效果（animation-delay）
使用滚动触发和令人惊喜的悬停状态
Spatial Composition
空间布局
Unexpected layouts
Asymmetry
Overlap
Diagonal flow
Grid-breaking elements
Generous negative space OR controlled density
出人意料的布局
不对称设计
元素重叠
斜向视觉流
打破网格的元素
充足的留白或受控的密度
Backgrounds & Visual Details
背景与视觉细节
Create atmosphere and depth rather than defaulting to solid colors. Add contextual effects and textures that match the overall aesthetic:
Gradient meshes
Noise textures
Geometric patterns
Layered transparencies
Dramatic shadows
Decorative borders
Custom cursors
Grain overlays
营造氛围与深度，而非默认使用纯色。添加符合整体美学的背景效果与纹理：
渐变网格
噪点纹理
几何图案
分层透明度
戏剧性阴影
装饰性边框
自定义光标
颗粒叠加层
What to AVOID
需避免的内容
NEVER use generic AI-generated aesthetics:
Overused font families (Inter, Roboto, Arial, system fonts, Space Grotesk)
Cliched color schemes (particularly purple gradients on white backgrounds)
Predictable layouts and component patterns
Cookie-cutter design that lacks context-specific character
绝对不要使用通用AI生成的美学风格：
过度使用的字体家族（Inter、Roboto、Arial、系统字体、Space Grotesk）
陈词滥调的配色方案（尤其是白色背景搭配紫色渐变）
可预测的布局与组件模式
缺乏场景特色的千篇一律的设计
Design Variation
设计多样性
No design should be the same
Vary between light and dark themes
Use different fonts for different projects
Apply different aesthetics to different components
Interpret creatively and make unexpected choices that feel genuinely designed for the context
每次设计都应独一无二
在亮色与暗色主题之间切换
为不同项目使用不同字体
为不同组件应用不同美学风格
创造性地解读需求，做出符合场景的意外设计选择
Implementation Complexity
实现复杂度
Match implementation complexity to the aesthetic vision:
Maximalist designs: Need elaborate code with extensive animations and effects
Minimalist designs: Need restraint, precision, and careful attention to spacing, typography, and subtle details
Elegance comes from executing the vision well
根据美学愿景匹配实现复杂度：
极繁主义设计：需要复杂的代码，包含大量动画与特效
极简主义设计：需要克制、精准，注重间距、排版与细节处理
优雅源于对设计愿景的完美执行
Remember
谨记
Don't hold back. Show what can truly be created when thinking outside the box and committing fully to a distinctive vision. Create extraordinary, creative work that is genuinely distinctive and memorable.