该技能用于指导创建具有辨识度、生产级质量的前端界面，目标是避免通用的“AI slop”审美，并在实现真实可运行代码的同时，对美学细节和创意选择保持高度关注。
用途
当用户提出构建 Web 组件、页面、应用或界面时使用。用户通常会提供前端需求，也可能包含关于用途、受众或技术约束的背景信息。
主要能力
技能覆盖从设计构思到代码实现的完整流程，强调以下几点：
- 设计思考：在编码前理解上下文，并确定一个明确、大胆的审美方向。包括：
- 目的：这个界面解决什么问题？谁使用它？
- 基调：选择一个极端方向，例如极度极简、极繁混沌、复古未来、有机/自然、奢华/精致、玩趣/玩具感、编辑/杂志风、粗野主义/原始、装饰艺术/几何、柔和/粉彩、工业/实用等。
- 约束：技术要求，如框架、性能、无障碍。
- 差异化：什么让它令人难忘？
- 关键点：选择清晰的概念方向并精确执行；大胆的极繁与精致的极简都可以，重点是有意图，而不是强度。
- 实现代码：实现可运行的代码，例如 HTML/CSS/JS、React、Vue 等，要求达到生产级、可用、视觉上引人注目且令人难忘、整体统一并具有明确审美观点、每个细节都经过精心打磨。
使用方式
用户提供前端要求后，技能会引导先完成设计思考，再据此实现真实可运行代码。资料未提供具体安装命令、调用配置或集成步骤。
前端美学指南
技能给出了具体的美学执行建议：
- 排版：选择美观、独特、有趣的字体。避免 Arial、Inter 等通用字体，选择能提升前端美感的独特字体；将独特的展示字体与精致的正文字体搭配。
- 色彩与主题：坚持统一的审美。使用 CSS 变量保持一致性。主色搭配锐利点缀色，优于怯懦且均匀分布的调色板。
- 动效：使用动画实现效果和微交互。对于 HTML 优先使用纯 CSS 方案；React 中可用时使用 Motion 库。聚焦高影响时刻：一次精心编排的页面加载，配合错落的动画延迟，比分散的微交互更令人愉悦。使用滚动触发和悬停状态制造惊喜。
- 空间构成：采用不寻常的布局，如非对称、重叠、对角流动、打破网格的元素，以及大量留白或受控的密集感。
- 背景与视觉细节：营造氛围和深度，而不是默认使用纯色。添加符合整体审美的情境效果和纹理，如渐变网格、噪点纹理、几何图案、分层透明、戏剧性阴影、装饰边框、自定义光标、颗粒叠加等。
技能明确要求不要使用通用的 AI 生成审美，例如过度使用的字体家族（Inter、Roboto、Arial、系统字体）、陈词滥调配色（尤其是白底紫色渐变）、可预测的布局与组件模式，以及缺乏上下文特定特征的模板化设计。同时强调创造性诠释，做出真正为上下文设计的选择，不同设计不应相同，应在浅色与深色主题、不同字体、不同审美之间变化，不要在不同生成中收敛到常见选择（例如 Space Grotesk）。
适用场景
适用于用户请求构建 Web 组件、页面或应用界面的情况，尤其适合希望获得具有鲜明审美观点、非模板化、达到生产级质量的前端实现时。
限制
资料未提供该技能的具体安装命令、收费方式、价格、支持平台、运行环境或效果保证。资料中未提供的内容不在本介绍中补充。