web-design-extractor SKILL.md skillA
web-design-extractor from mingdui/ai-product-skills is an agent skill: a SKILL.md folder an AI agent loads when a task calls for it.
mdr add mingdui/ai-product-skills/web-design-extractor@git:20261013.447718fPins git:20261013.447718f in mdr.lock. Pin the fingerprint instead.
- Audit grade
- A, 17 of 17 checks passed
- Kind
- SKILL.md skill
- Repository
- mingdui/ai-product-skills
- Path
skills/web-design-extractor/SKILL.md- Versions recorded
- 5
- Latest version
- git:20261013.447718f, committed Oct 13, 2026
- First version recorded
- Oct 13, 2026
- Size
- 8,006 bytes
- Repository stars
- 12
- License
- a license file GitHub does not identify
从公开网站或已获授权的网站 URL、一个或多个网页截图中提取有证据支撑、可直接用于实现的 `design.md`。适用于需要为复刻、设计系统文档或 UI 实现简报逆向分析网站的视觉系统、布局、组件、响应式行为、内容层级或交互状态的场景。.
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
# 网站设计提取器
基于可见证据制作忠实的设计规格。必须区分已观察的事实与视觉推断；不得声称掌握输入资料未能证明的源 CSS、行为或资源。
## 选择证据路径
**先探环境，再选路线——按能用的最强的来，别一上来就退源码。**
```text
① 用户项目里已有 playwright → 用它（代码最少，也不让人白装一个浏览器）
② 机器上有 Chrome / Edge → 用 scripts/browser-extract.mjs（零依赖，Node ≥ 22）
③ 都没有 → 退源码路线，并强制标注「转录边界」
```
具体怎么做、产物怎么读、有哪些坑，见 [references/browser-route.md](references/browser-route.md)。
**两条路线是叠加关系，不是二选一**：源码给「这个站定义了哪些令牌、叫什么名字」，
浏览器给「哪些真的在用、用成了什么样」。能同时走就走两条。
按输入形态选：
- **仅 URL（有浏览器）**：跑 `scripts/browser-extract.mjs`，拿计算样式、四档视口实测和截图。
这样拿到的值是 `[OBSERVED: URL]`，可以直接当复刻约束用。
- **仅 URL（没有浏览器）**：退源码路线，见下面的降级路径。这样拿到的值是 `[INFERRED]`。
- **仅截图**：按原始尺寸分析图片。测量值、布局规则和未展示状态均应视为推断，除非图片能够直接证明。
- **URL 加截图**：以用户说明视口下的截图为视觉事实基准。使用 URL 验证结构和计算样式；发现差异时明确标注，不可静默合并。
- **多张截图**：将其作为不同视口或状态样本进行对比。只有样本显示断点变化时，才能认定布局具备响应式行为。
- **没有浏览器控制能力时（降级路径）**：只能拿到服务端返回的 HTML 和其中写明的 CSS，
拿不到渲染后的计算样式、断点行为和截图。**这时不能假装走了上面几条路径**，必须：
1. 在 `design.md` 开头写一节「**证据边界**」，逐项列清**有什么**（HTML 结构、声明的 CSS 变量、
内联样式、字面写死的值）和**没有什么**（计算样式、断点行为、截图、字体文件、交互态）。
注意：**这一节两种路线都要填**，正常运行时也要写清「本次覆盖了什么 / 没覆盖什么」，
无缺口就写「无」——浏览器路线一样会只覆盖首屏、不采交互态；
2. 字面写出来的令牌值记 `[OBSERVED: URL]`；**「哪个令牌用在哪个元素上」一律记 `[INFERRED]`**——
…Read the whole file at its exact version.
How to install
mdr add mingdui/ai-product-skills/web-design-extractor@sha256:2cec589d10f6d961The line at the top of this page pins the label git:20261013.447718f, 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_spyvuzu6lrnirpui)
0 badge image fetches in 30 days. What the badge shows.
Versions
The registry has recorded 5 versions of this file, all committed on Oct 13, 2026.
| version | committed | commit | size | audit | |
|---|---|---|---|---|---|
| git:20261013.447718f latest | 2026-10-13 | 447718f | 8,006 B | A | view · diff |
| git:20261013.3d17e09 | 2026-10-13 | 3d17e09 | 7,468 B | A | view · diff |
| git:20261013.7601543 | 2026-10-13 | 7601543 | 6,583 B | A | view · diff |
| git:20261013.be4849d | 2026-10-13 | be4849d | 6,258 B | A | view · diff |
| git:20261013.60e8978 | 2026-10-13 | 60e8978 | 5,189 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 (8006 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
mingdui/ai-product-skills · 12 stars · license a license file GitHub does not identify · pushed 2026-11-05 · branch main
API
GET https://markdownregistry.com/api/v1/artifacts/art_spyvuzu6lrnirpui GET https://markdownregistry.com/api/v1/resolve?ref=mingdui/ai-product-skills/web-design-extractor GET https://markdownregistry.com/api/v1/blob/2cec589d10f6d961a355e371c2c97f02666423d99099bb5f4cf017e74e4dea0d
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.