name: frontend-design description: 创建独特、生产级的前端界面，具有高设计质量。当用户要求构建Web组件、页面或应用程序，或提供截图/图像/设计以供复制或汲取灵感时使用此技能。对于截图输入，首先使用ai-multimodal分析提取设计指南，然后根据这些指南实现代码。生成创意、精致的代码，避免通用的AI美学。 license: 完整条款在LICENSE.txt中
该技能指导创建独特、生产级的前端界面，避免通用的“AI垃圾”美学。实现真实可用的代码，特别关注美学细节和创意选择。
用户提供前端需求：要构建的组件、页面、应用程序或接口。他们可能包括关于目的、受众或技术约束的上下文。
输入类型与工作流
当用户提供截图/图像/设计参考时
截图/图像/设计输入的强制工作流：
-
提取设计指南 使用
./references/design-extraction-overview.md：- 使用ai-multimodal技能分析截图/图像
- 提取：颜色（十六进制代码）、排版（字体、大小、粗细）、间距比例、布局模式、视觉层次
- 在项目
docs/design-guidelines/extracted-design.md中记录发现 - 参见
./references/extraction-prompts.md以获取全面分析提示
-
实现代码 遵循提取的指南：
- 使用提取的确切颜色（十六进制代码）
- 匹配排版规范（字体、大小、粗细、行高）
- 复制布局结构和间距系统
- 保持视觉层次和组件模式
- 保留美学方向和氛围
-
验证质量 使用
./references/visual-analysis-overview.md：- 将实现与原始截图进行比较
- 检查颜色准确性、间距一致性、排版匹配
- 确保所有设计元素得以保留
重要：不要跳过实现。首先提取设计指南，然后编码。
当从零开始构建时（未提供截图）
遵循以下“设计思维”过程创建原创设计。
设计思维
在编码之前，理解上下文并承诺采用大胆的美学方向：
- 目的：这个界面解决什么问题？谁使用它？
- 基调：选择极端方向：极度极简、最大主义混乱、复古未来主义、有机/自然、奢华/精致、玩乐/玩具般、编辑/杂志、粗野主义/原始、装饰艺术/几何、柔和/粉彩、工业/实用主义等。有许多风格可供选择。使用这些作为灵感，但设计一个符合美学方向的。
- 约束：技术要求（框架、性能、可访问性）。
- 差异化：什么让它令人难忘？人们会记住的一件事是什么？
关键：选择清晰的概念方向并以精确执行。大胆的最大主义和精致的极简主义都有效——关键是意图性，而非强度。
然后实现工作代码（HTML/CSS/JS、React、Vue等），这些代码是：
- 生产级和功能性的
- 视觉上引人注目和令人难忘的
- 与清晰的美学观点协调一致
- 在每个细节上都精心打磨
前端美学指南
专注于：
- 排版：选择美丽、独特且有趣的字体。避免通用字体如Arial和Inter；而是选择提升前端美学的独特选择；意想不到、有个性的字体选择。将独特的显示字体与精致的正文字体配对。
- 颜色与主题：承诺采用协调的美学。使用CSS变量保持一致性。主导颜色与鲜明点缀优于胆小、均匀分布的调色板。
- 动效：使用动画实现效果和微交互。优先使用纯CSS解决方案处理HTML。当可用时使用Motion库处理React（使用
anime.js进行动画：./references/animejs.md）。专注于高影响力时刻：一个精心编排的页面加载，带有交错揭示（animation-delay），比分散的微交互创造更多喜悦。使用滚动触发和悬停状态以带来惊喜。 - 空间构成：意想不到的布局。不对称。重叠。对角线流。打破网格的元素。慷慨的负空间或受控的密度。
- 背景与视觉细节：创造氛围和深度，而非默认使用纯色。添加与整体美学匹配的上下文效果和纹理。应用创意形式，如渐变网格、噪声纹理、几何图案、分层透明度、戏剧性阴影、装饰边框、自定义光标和颗粒覆盖。
- 视觉资产：使用
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）。
重要：将实现复杂度与美学愿景匹配。最大主义设计需要复杂的代码，带有广泛的动画和效果。极简主义或精致设计需要克制、精确，并仔细关注间距、排版和细微细节。优雅来自于良好执行愿景。
记住：Claude能够进行非凡的创意工作。不要退缩，展示当跳出框框思考并完全致力于独特愿景时可以真正创造的内容。