用途：指导创建独特、生产级的前端界面，避免常见的“AI 味”审美，输出可运行的真实代码，并注重美学细节与创意选择。用户可提供组件、页面、应用或界面需求，以及用途、受众或技术约束等背景。
主要能力：
- 截图/图片/设计参考输入：强制先提取设计规范，再实现代码。使用 ai-multimodal 技能分析图片，提取颜色（十六进制）、字体（字体、字号、字重）、间距尺度、布局模式与视觉层级，记录到 docs/design-guidelines/extracted-design.md；随后按提取结果实现，并对照原图验证颜色、间距、字体与设计元素。
- 从零构建：先进行设计思考，明确用途、基调（极简、复古未来、奢华、编辑杂志、粗野主义等）、技术约束与差异化，再实现 HTML/CSS/JS、React、Vue 等可运行代码。
- 前端美学指南：字体选择独特且非通用（避免 Arial、Inter 等），使用 CSS 变量保持色彩主题一致，用动画与微交互制造高冲击时刻，采用非对称、重叠、破格布局，并通过渐变网格、噪点纹理、几何图案、层叠透明、戏剧阴影等营造氛围。
- 视觉资产：可用 ai-multimodal 技能生成与设计一致的素材，必要时用 media-processing 技能去除背景。
使用方式：按输入类型选择工作流。有截图时必须先提取设计规范再编码，不可跳过。从零构建时先完成设计思考再实现。参考文件包括 ./references/design-extraction-overview.md、./references/extraction-prompts.md、./references/visual-analysis-overview.md、./references/ai-multimodal-overview.md、./references/asset-generation.md、./references/technical-overview.md、./references/animejs.md。
适用场景：需要高设计质量、有明确美学方向的 Web 组件、页面或应用开发；需要从设计稿或截图还原界面；需要生成与设计风格匹配的视觉素材。
限制：资料未提供具体收费、价格、平台支持范围或性能指标。实现复杂度需与美学愿景匹配，极简设计需克制，极繁设计需丰富动画与效果。避免通用字体、俗套配色（如白底紫色渐变）和千篇一律的布局。