web-design-analyzer SKILL.md skillA
web-design-analyzer from anbeime/skill is an agent skill: a SKILL.md folder an AI agent loads when a task calls for it.
mdr add anbeime/skill/web-design-analyzer@git:20260826.61098a7Pins git:20260826.61098a7 in mdr.lock. Pin the fingerprint instead.
- Audit grade
- A, 17 of 17 checks passed
- Kind
- SKILL.md skill
- Repository
- anbeime/skill
- Path
skills/web-design-analyzer/web-design-analyzer/SKILL.md- Versions recorded
- 2
- Latest version
- git:20260826.61098a7, committed Aug 26, 2026
- First version recorded
- Feb 14, 2026
- Size
- 4,841 bytes
- Repository stars
- 9,288
- License
- none declared
网页与数字界面设计师和网页开发工程师在需要逆向分析网页截图时，使用本技能一键提取配色、排版及组件特征，自动生成结构化 Design System 数据与 AI Coding Prompt，让设计还原与前端开发更高效。.
Collected from public GitHub. Every version is saved exactly as it was and never changes. Install it at an exact version with the mdr tool, and every file is checked before it reaches your agent. The main file is checked against the SHA-256 fingerprint recorded here, and the others against the fingerprints GitHub keeps for its source commit. The automatic checks below grade the latest version, and the same checks always give the same file the same grade.
What the file says
# 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` 指定输出路径）
- 领域参考：
…Read the whole file at its exact version.
How to install
mdr add anbeime/skill/web-design-analyzer@sha256:ab55a959a86c7dd7The line at the top of this page pins the label git:20260826.61098a7, which is what most people want. This one pins the sha256 fingerprint of the contents instead, so it survives a label being moved. Either way the exact version is written to mdr.lock, and mdr install downloads and checks those contents again, so it installs them exactly or stops with an error.
[](https://markdownregistry.com/a/art_bam2k2ibfex3uvpw)
6 badge image fetches in 30 days. What the badge shows.
Versions
The registry has recorded 2 versions of this file, between Feb 14, 2026 and Aug 26, 2026, about one every 193 days.
| version | committed | commit | size | audit | |
|---|---|---|---|---|---|
| git:20260826.61098a7 latest | 2026-08-26 | 61098a7 | 4,841 B | A | view · diff |
| git:20260214.8a1442a | 2026-02-14 | 8a1442a | 4,843 B | A | view |
Audit of the latest version
- pass: Frontmatter block present
- pass: Frontmatter declares a name
- pass: Frontmatter declares a description
- pass: Size between 200 bytes and 200 KB (4841 bytes)
- pass: No zero-width or bidi control characters
- pass: No instruction hidden inside an HTML comment
- pass: No link to an exfiltration or paste host
- pass: No credential-shaped string
- pass: No instruction to send local credentials anywhere
- pass: No text hidden with inline styles
- pass: No prompt-injection phrasing
- pass: No curl or wget piped into a shell
- pass: No recursive delete of root, home or parent
- pass: No instruction to read or print local credentials
- pass: No base64 blob over 200 characters
- pass: No link to a raw IP address
- pass: No script tag
Source
anbeime/skill · 9,288 stars · license none declared · pushed 2026-11-07 · branch main
API
GET https://markdownregistry.com/api/v1/artifacts/art_bam2k2ibfex3uvpw GET https://markdownregistry.com/api/v1/resolve?ref=anbeime/skill/web-design-analyzer GET https://markdownregistry.com/api/v1/blob/ab55a959a86c7dd78bed21884282c8c000dc75f0ceaf040072bd4c91f567a0f3
Your AI assistant does the legwork. You hear about the deals worth your word. Hand yours the standing instructions at modelranch.com and it joins the network that reads files like this one.
Guides: the SKILL.md format and its required fields · what to check before you install a skill · how to pin a skill to an exact version · where to find agent skills · keeping a team on the same skills · which agent file does what.