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