用途
frontend-design 是一套面向 Web 前端界面设计的“精英级”标准与协议集合，目标是在实现高保真、可上线的界面代码时，兼顾美学细节与用户体验。其设计哲学是：尽量减少用户的认知负荷，让交互变得直觉化；每一个设计决策都应尊重人类心理、行为模式与认知局限。设计者承担复杂性，用户则体验到简单。核心原则是“好的设计是隐形的”——用户应能顺利完成目标而不必注意到设计本身，设计应显得毫不费力、自然，契合人类自然的思考与行为方式。
主要能力与核心协议
技能包含若干核心协议与标准：
- 反 AI 美学强制要求（关键）：不得使用给人“AI 生成”印象的通用美学，包括被过度使用的字体族（Inter、Roboto、Arial、系统字体）、陈词滥调的色彩方案（尤其是白底紫色渐变）、可预测的布局以及重复的组件模式。
- 绝对禁止项：严格禁止“赛博朋克”美学，除非在特定语境中被明确要求，否则不得使用霓虹光效、矩阵雨、故障效果或“高科技”暗色模式。技能认为这类陈词滥调是懒惰 AI 生成的标志。
- 特别要避免缺乏语境特征的模板化设计。该技能旨在创造独特、原创、达到生产级别的前端，通过对美学细节与创意决策的格外关注来实现功能性的高保真代码。
使用方式
技能强调：详细规则存放在独立的参考文件中，在开始任何设计工作之前，必须使用 Read 工具将这些文件加载到上下文中，不要假设已知其内容。涉及的参考文件包括：
- frontend_reference.md：包含技术标准、美学签名与创意协议。
- animation_reference.md：包含 2025 动效标准、基于物理的动画规则与微交互。
- css_art_reference.md：用于视觉对象。当被要求用代码“绘制”或“创建”复杂物品（剑、Logo、图标）时使用，定义几何构图与 LCH 材质。
- security-protocols.md：包含关键的前端安全规则。
核心动画原则
动效强制要求：动画必须基于物理（弹簧）、连续（无瞬移）且有意义（叙事性）。具体包括：连续性——状态变化必须形变过渡而非硬切（View Transitions）；重量感——物体必须让人感觉有质量（使用弹簧动画）；焦点——动画引导注意力而非分散注意力；叙事——每个动作都讲述元素从何而来、去往何处的故事。完整框架参见 animation_reference.md 中的 12 条原则。
相关与必需技能
执行前端任务时，技能要求整合以下互补技能以保证架构完整性：
- brainstorming：强制前置。在任何设计工作之前，用它来追问用户的模糊指令，并明确 frontend_reference.md 中定义的“剧本/叙事”。
- clean-code：强制。确保组件模块化、更清晰的 hooks/状态逻辑与安全合规，防止“意大利面式 UI 代码”。
- tdd-mastery：强制。“铁律”同样适用于组件，用于视觉回归测试与编码 UI 前的逻辑验证。
- optimization-mastery：用于性能审计（Lighthouse、Core Web Vitals）、减小打包体积与优化重渲染。
- backend-design：在定义 API 数据形态、错误处理状态以及确保跨网络边界的类型安全时参考。
- planning-mastery：用于将复杂 UI 实现拆解为“原子级”交付物（原子 -> 分子 -> 有机体）。
自动化脚本
技能提供一个用于审计实现的脚本：scripts/js/ux-audit.js。运行它可对 UI 进行启发式分析，检查一致性、可访问性（对比度/间距）以及对设计令牌的合规性。使用方式：node scripts/js/ux-audit.js。
适用场景与限制
该技能适用于需要独特、原创、生产级前端界面的设计任务，尤其强调美学细节、动效物理感与 UX 心理学。限制方面：技能本身为设计标准与协议集合，具体实现依赖所引用的参考文件与配套技能；关于收费、价格、平台支持范围等信息，资料中暂未提供。