用途
frontend-design 是一个用于创建独特、具备生产级质量的前端界面的技能，核心目标是避免常见的、缺乏个性的「AI slop」审美。它适用于用户要求构建 Web 组件、页面、应用或界面等前端任务的场景。
主要能力
该技能覆盖以下方面：
- 根据需求实现真正可运行的代码，并高度关注审美细节与创造性选择。
- 处理截图、图片或设计参考类输入，提取其中的设计规范并据此实现。
- 从零开始进行原创设计，先经历「设计思考」过程，再进入编码。
- 提供前端审美指南，覆盖字体、配色与主题、动效、空间构图、背景与视觉细节、视觉素材等维度。
- 通过 ai-multimodal 技能生成与设计美学一致的视觉素材，并通过 media-processing 技能去除生成素材的背景（如需要）。
使用方式
输入类型与工作流
当用户提供截图、图片或设计参考时，必须遵循以下流程（MANDATORY）：
- 使用 ./references/design-extraction-overview.md 提取设计规范：用 ai-multimodal 技能分析截图/图片；提取颜色（十六进制代码）、排版（字体、字号、字重）、间距尺度、布局模式、视觉层级；将结果记录到项目的 docs/design-guidelines/extracted-design.md；综合分析提示见 ./references/extraction-prompts.md。
- 按提取出的规范实现代码：使用提取得到的精确颜色；匹配排版规格（字体、字号、字重、行高）；复刻布局结构与间距体系；保持视觉层级与组件模式；保留审美方向与氛围。
- 使用 ./references/visual-analysis-overview.md 验证质量：将实现与原始截图对比；检查颜色准确性、间距一致性、排版匹配度；确保所有设计元素均被保留。
重要：不要跳过提取直接进入实现。必须先提取设计规范，再编码。
当从零构建（未提供截图）时，遵循下述「设计思考」流程来创建原创设计。
设计思考（Design Thinking）
编码之前，先理解上下文并确定一个大胆的审美方向：
- 用途（Purpose）：这个界面解决什么问题？谁在使用它？
- 基调（Tone）：选择一个极端方向，例如极简、极繁混乱、复古未来主义、有机/自然、奢华/精致、趣味/玩具感、编辑/杂志风、粗野主义/原始、装饰艺术/几何、柔和/粉彩、工业/实用主义等。可从中获取灵感，但最终要设计与该审美方向一致的作品。
- 约束（Constraints）：技术要求（框架、性能、无障碍）。
- 差异化（Differentiation）：是什么让这个设计令人难忘？别人会记住的那一件事是什么？
关键：选择一个清晰的概念方向并精确执行。大胆的极繁主义与精致的极简主义都可以，关键在于有意为之（intentionality），而非强度。
随后实现可运行的代码（HTML/CSS/JS、React、Vue 等），要求：生产级且功能可用；视觉突出且令人难忘；具有统一清晰的审美观点；每个细节都经过精心打磨。
前端审美指南
重点关注：
- 字体（Typography）：选择美观、独特、有趣的字体。避免 Arial、Inter 等通用字体，改用能提升前端美感的独特选择，例如有特点、出人意料的字体搭配。将独特的展示字体与精致的正文字体搭配使用。
- 配色与主题（Color & Theme）：坚持统一的审美。使用 CSS 变量保证一致性。主导色配以鲜明点缀色，比怯懦而平均分布的调色板效果更好。
- 动效（Motion）：用动画实现效果与微交互。HTML 优先使用纯 CSS 方案。React 可用时使用 Motion 库（使用 anime.js 做动画：./references/animejs.md）。聚焦高冲击力时刻：一次精心编排的页面加载配合错落展现（animation-delay），比零散的微交互更能带来愉悦感。使用滚动触发和令人惊喜的悬停状态。
- 空间构图（Spatial Composition）：出人意料的布局、非对称、重叠、对角线流向、打破网格的元素、大量留白或受控的密集。
- 背景与视觉细节：营造氛围与景深，而非默认使用纯色。添加与整体审美匹配的情境化效果与纹理。可运用渐变网格、噪点纹理、几何图案、分层透明、夸张阴影、装饰边框、自定义光标、颗粒叠加等创意形式。
- 视觉素材（Visual Assets）：使用 ai-multimodal 技能生成素材，必要时使用 media-processing 技能去除生成素材的背景。
处理视觉素材
快速开始：./references/ai-multimodal-overview.md
生成新的视觉素材：当需要生成与设计审美匹配的主视觉图、背景、纹理或装饰元素时，使用 ai-multimodal 技能，以确保生成的素材与设计思考和审美指南一致，而非产出通用图像。
分析提供的截图/图片/设计：当用户提供截图、照片或设计参考需要分析或复刻时，先使用 ./references/design-extraction-overview.md 提取设计规范，再进行实现。对截图类输入这是强制性要求（见上文「输入类型与工作流」）。
工作流文件：
- ./references/asset-generation.md — 生成与设计一致的视觉素材
- ./references/visual-analysis-overview.md — 分析与验证素材质量（模块化）
- ./references/design-extraction-overview.md — 从灵感中提取规范（模块化）
- ./references/technical-overview.md — 优化与最佳实践（模块化）
每个总览文件都引用更详细的子模块，以实现渐进式披露。
限制与禁止事项
绝不要使用通用的 AI 生成审美，包括：过度使用的字体族（Inter、Roboto、Arial、系统字体）、陈词滥调的配色方案（尤其是白底上的紫色渐变）、可预测的布局与组件模式，以及缺乏上下文特色、千篇一律的设计。
创造性地诠释，做出出人意料、真正为该场景而设计的选择。不应该有相同的设计。在浅色与深色主题、不同字体、不同审美之间变化。绝不要在多次生成中趋同于常见选择（例如 Space Grotesk）。
重要：让实现复杂度与审美愿景相匹配。极繁主义设计需要详尽的代码、大量动画与效果。极简或精致的设计需要克制、精准，并细致关注间距、排版与微妙细节。优雅来自对愿景的良好执行。