buildwithclaude

Inspiration Analyzer 是一款专为设计师和前端开发者设计的技能，旨在从现有网站中提取可执行的设计见解。通过整合浏览器自动化工具，此技能可访问目标网址、执行全页面与滚动截图，并检查计算后的 CSS 样式，以解构复杂的网页设计。它通过将原始网页数据转化为结构化且适合开发人员使用的报告，填补了视觉灵感与技术实现之间的鸿沟。

• 自动化浏览器导航与窗口截图，收集包括首屏区域、滚动内容及交互悬停状态在内的视觉状态。

• 智能提取设计代码，包括精确的色彩组合（主色、辅色、强调色、背景色）、排版规格（字体、粗细、字级、行高）以及网格布局结构。

• 识别重复出现的 UI 模式，如按钮样式、卡片组件、图标系统及排版间距逻辑。

• 生成结构化报告，将视觉发现转化为清晰的重点总结、具体的技术建议以及「应避免的坑」，以确保设计一致性。

• 内建回退机制，当浏览器工具受限时，引导用户手动提供截图与相关信息，保持工作流程的连续性。

• 移动端响应式分析，验证布局如何适应较小的视窗并标记媒体查询的断点。

• 用户应提供作为当前项目设计灵感的特定网址。

• 此技能需要存取 MCP 浏览器工具（tabs_context_mcp, navigate, computer）才能在自动化模式下运行。

• 输出为 Markdown 格式的报告，非常适合复制到设计文档、情绪板或项目需求规格中。

• 分析多个网站时，工具会自动总结共同主题，并提供不同设计风格之间的比较见解。

• 最佳实践包括检查网页原始码中的颜色变量，并观察间距一致性，以确保准确提取底层设计系统。