用途：该技能用于指导创建独特、生产级的前端界面，避免千篇一律的“AI slop”审美，并以真实可运行的代码实现，注重美学细节与创意选择。用户提供前端需求，例如组件、页面、应用或界面，并可附带用途、受众或技术约束等背景。
主要能力：在编码前先进行设计思考，明确目的、语气、约束与差异化，并选定一个大胆的美学方向。随后实现可运行代码（HTML/CSS/JS、React），要求生产级、功能可用、视觉醒目、风格统一且细节精致。美学指南覆盖排版、色彩与主题、动效、空间构图、背景与视觉细节。排版强调易读字体与合适的字号、字距；色彩使用 CSS 变量保持一致性，主色配锐利点缀；动效用于效果与微交互，HTML 优先 Tailwind 动画方案，React 可用 Motion 库，重视页面加载的错落揭示、滚动触发与悬停状态；空间构图鼓励非对称、重叠、对角流动、打破网格、大量留白或受控密度；背景与视觉细节鼓励渐变网格、噪点纹理、几何图案、分层透明、戏剧性阴影、装饰边框、自定义光标与颗粒叠加。
使用方式：用户提出前端构建需求后，技能先理解上下文并确定美学方向，再产出可运行代码。资料中给出的示例约束为 tailwindcss 与 Nextjs，目标为 SSG（静态站点生成）。
适用场景：构建 Web 组件、页面、应用或界面，尤其适合需要鲜明设计观点、避免通用模板化外观的项目。
限制：资料未提供安装命令、收费、价格、平台支持范围或具体效果数据；示例中的字体、配色与动效建议属于该技能内的指导，并非强制或已验证的通用结论。应避免使用过度常见的字体、陈词滥调配色（如白底紫色渐变）、可预测布局与缺乏语境特征的模板化设计。