web-design-analyzer
分析网页截图，提取设计系统（Design System）并生成结构化数据和可用的 AI Coding Prompt。适用于 UI/UX 设计师和前端工程师需要从现有网页设计中提取设计规范、配色方案、排版系统和组件风格的场景。
npx skills add anbeime/skill --skill web-design-analyzer --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Web Design Analyzer ## 任务目标 - 本 Skill 用于：从网页截图中自动提取设计系统（Design System），包括色彩、排版、组件风格等核心要素 - 能力包含： - 自动识别网页视觉风格（Vibe & Style） - 提取精确的色彩系统（Hex Code + Tailwind 类名） - 分析排版系统（字体类型、字重、行高） - 识别组件特征（圆角、阴影、边框） - 生成结构化 JSON 数据和可直接使用的 Coding Prompt - 导出为路演视频品牌风格配置（与 ppt-roadshow-generator 协同） - 触发条件：用户上传网页截图并要求分析其设计，或需要将网页设计风格应用于路演视频 ## 前置准备 - 依赖说明：scripts 脚本所需的依赖包及版本 ``` Pillow>=10.0.0 ``` - 非标准文件/文件夹准备：无 ## 操作步骤 - 标准流程： 1. **接收图片** - 用户上传网页截图（支持 PNG、JPG、JPEG 等常见格式） - 智能体确认图片文件路径 2. **调用分析脚本** - 智能体调用 `scripts/analyze_design.py --image <图片文件路径>` 执行分析 - 脚本将自动调用 OpenAI GPT-4 Vision API 处理图片 - 脚本返回结构化的分析结果 3. **展示结果** - 智能体展示 JSON 格式的设计系统数据 - 智能体展示生成的 Coding Prompt - 智能体提供进一步操作建议（如：使用生成的 Prompt 创建 Landing Page） - 可选分支： - 当用户希望使用 Gemini API：提示当前版本仅支持 OpenAI，未来可能扩展 - 当 API 调用失败：提供错误信息和可能的解决方案（如检查 API Key、图片格式等） ## 资源索引 - 必要脚本： - 见 [scripts/analyze_design.py](scripts/analyze_design.py)（用途与参数：接收图片路径，调用 OpenAI Vision API，返回设计系统分析结果） - 见 [scripts/convert_to_roadshow_style.py](scripts/convert_to_roadshow_style.py)（用途与参数：将设计系统转换为路演视频品牌风格，输入 `--input` 指定 JSON 路径，`--output` 指定输出路径） - 领域参考： - 见 [references/api-spec.md](references/api-spec.md)（何时读取：需要了解 API 调用细节或调试时） - 见 [references/roadshow-export-guide.
- 任务目标
- 前置准备
- 操作步骤
- 资源索引
- 注意事项
- 使用示例
- 示例 1：分析网页截图
- 示例 2：生成 Coding Prompt 后创建组件
- 示例 3：导出为路演视频风格
python scripts/analyze_design.py --image ./uploads/landing-page.png
What does the web-design-analyzer skill do?
分析网页截图，提取设计系统（Design System）并生成结构化数据和可用的 AI Coding Prompt。适用于 UI/UX 设计师和前端工程师需要从现有网页设计中提取设计规范、配色方案、排版系统和组件风格的场景。
How do I install it?
Run `npx skills add anbeime/skill --skill web-design-analyzer --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From anbeime/skill, a repository with 4,714 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.