该技能面向前端界面构建，强调先做设计判断，再落实为可运行代码，适用于需要摆脱模板化外观、追求独特视觉表达的网页或组件开发。
用途：当用户要求构建 Web 组件、页面或应用界面时，用它确定设计方向并实现生产级结果。输入通常包括要构建的组件、页面、应用或界面，以及用途、受众和技术约束等背景信息。
主要能力：
- 设计思考：先理解上下文，并确定一个明确、大胆的美学方向，从目的、语气、约束和差异化四个方面梳理，强调有意为之而非单纯堆叠效果。
- 代码实现：输出可运行的前端代码（HTML/CSS/JS、React），要求功能可用、视觉醒目、风格统一、细节精炼。
- 视觉准则：字体上注重可读性与字号、字距的现代感；配色上用 CSS 变量保持一致，采用主导色加锐利点缀，避免怯懦的平均配色；动效上重视高冲击时刻，如整页加载的分批错峰揭示、滚动触发与悬停反馈，HTML 优先 Tailwind 动画方案，React 在可用时使用 Motion 库；构图上允许不对称、重叠、对角流线与打破网格的布局，并善用留白或受控密度；背景与细节上使用渐变网格、噪点纹理、几何图案、分层透明、戏剧化阴影、装饰边框、自定义光标与颗粒叠加等营造层次。
- 审美边界：明确避免过度使用的字体、陈词滥调配色（尤其白底紫色渐变）、可预测的布局与组件模式，以及缺乏语境特征的模板化设计；并提醒不要在不同生成中反复收敛到同一套常见选择。
使用方式：资料未提供具体安装命令或调用步骤，暂未提供。可确认的是，使用时应先给出前端需求与约束，再让技能完成从设计方向到实现代码的过程；实现复杂度需与美学目标匹配，极繁设计需要更丰富的动画与效果代码，极简设计则需要克制、精确与对间距、字体和细节的细致处理。
适用场景：需要构建具有独特设计语言、生产可用且注重可访问性与易用性的 Web 组件、页面或应用；资料中的示例为社区足球俱乐部网站，要求能高效触达有用信息，采用极简干净与玻璃拟态风格，技术栈为 Tailwind CSS 与 Next.js 静态站点生成。
限制：资料未说明收费、价格、平台支持范围或效果保证，暂未提供；该技能主要提供设计指导与代码实现方法，实际产出质量仍取决于输入需求与实现过程。