用途：在构建或设计用户界面、分析 Dribbble、Mobbin、Behance 等灵感站的设计、生成设计图并评估审美质量、实现视觉层级、排版与配色、添加微交互和动画、编写设计文档与风格指南，以及需要可访问性和设计系统指导时使用。
主要能力：采用四阶段框架。BEAUTIFUL 阶段研究现有设计、识别模式、提取原则，并强调 AI 缺乏审美感，标准需来自高质量示例与市场口味。RIGHT 阶段关注功能可用性，参考设计系统、组件架构与 WCAG 可访问性标准。SATISFYING 阶段加入微交互，建议时长 150-300ms，进入用 ease-out、退出用 ease-in，并注意顺序延迟。PEAK 阶段通过视差、粒子系统、主题一致性等讲故事，但需克制。
使用方式：提供两个工作流。工作流一是捕获并分析灵感：浏览灵感站，用 chrome-devtools 技能截取全屏截图，用 ai-multimodal 分析设计风格、布局与网格、排版层级（尽量预测 Google Fonts 字体名称与字号，而非默认 Inter 或 Poppins）、带十六进制色值的配色、视觉层级、组件模式、微交互、可访问性及 1-10 审美评分，然后用模板记录到项目设计指南。工作流二是生成并迭代设计图：定义含风格、颜色、排版、受众与动画规格的提示词，用 ai-multimodal 及 Gemini API 生成设计图并评估，若低于 7/10 或未达专业标准，则找出弱点、优化提示词、重生成，或用 media-processing 技能调整尺寸、裁剪、滤镜与构图，直至达标，并记录最终设计决策。
设计文档：使用 assets/design-guideline-template.md 记录配色模式与心理学、排版系统与层级、布局与间距、组件样式、可访问性、设计亮点与理由，保存到 ./docs/design-guideline.md。使用 assets/design-story-template.md 记录叙事元素与主题、情感旅程、用户旅程与峰值时刻、设计决策理由，保存到 ./docs/design-story.md。
相关技能：ai-multimodal 用于分析文档、截图和视频，生成与编辑设计图并评估审美；chrome-devtools 用于截取灵感站全屏屏、页面导航、元素交互与读取控制台及网络请求；media-processing 用 FFmpeg 处理视频、ImageMagick 处理图像；ui-styling 用 shadcn/ui 组件与 Tailwind CSS 实现设计；web-frameworks 用 Next.js 的 App Router、Server Components 及 SSR/SSG 构建。
关键原则：审美标准来自人类而非 AI，应研究高质量示例；基于分析迭代，不要满足于首次输出；平衡美观、功能与可访问性；记录决策以保持开发一致性；在设计中使用渐进式披露，逐步展现复杂度；始终客观评估审美质量，评分至少 7/10。
限制：未提供收费、价格、平台要求或具体安装命令。部分流程依赖外部技能与 Gemini API，相关配置暂未提供。