design-spec-prototyper SKILL.md skillA
design-spec-prototyper 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/design-spec-prototyper@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/design-spec-prototyper/SKILL.md- Versions recorded
- 5
- Latest version
- git:20261013.447718f, committed Oct 13, 2026
- First version recorded
- Oct 13, 2026
- Size
- 13,343 bytes
- Repository stars
- 12
- License
- a license file GitHub does not identify
将 `design.md` / `DESIGN.md` 等有证据支撑的设计规格，**配合设计稿图片或截图**，转为高保真、无障碍且响应式的 UI 原型。规格提供品牌令牌、组件规则与字体（持续沉淀的产品事实），图片提供本次页面的实际构图，两者同时参考。适用于用 HTML/Tailwind、React、Next.js、Vue 或其他前端技术栈设计并实现原型的场景；在线独立原型默认可使用 Google Fonts；仅在规格缺少 UX 或实现指导时结合你自己已装的设计类 skill。.
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
# 设计规格原型生成器
构建可直接进入实现阶段的原型。**两类输入要同时参考**：设计规格给品牌令牌与规则，设计稿图片给本次页面的实际构图。规格中已观察到的值，比通用设计建议拥有更高证据优先级。
## 输入与默认值
1. 找齐两类输入，未指定时都在当前项目中搜索：
| 输入 | 给什么 | 缺了怎么办 |
|---|---|---|
| `design.md` / `DESIGN.md` | 品牌令牌、组件规则、字体、证据边界——**持续沉淀的产品事实** | 只有图没有规格 → 先走 `web-design-extractor` 把图变成规格 |
| 设计稿图片 / 截图 | 本次页面的实际构图：分区、元素顺序、层级、间距节奏 | 只有规格没有图 → 走「规格内的构图证据」（见下），并在交付说明里写明证据来源与限度 |
| 参考图（**不属于本页**，例如竞品页截图） | 视觉语言参考：配色倾向、质感、动效风格 | **不能当构图依据**——见下 |
两者都没有时，要求用户提供。
**只有规格没有图时，构图证据由规格自己承担，但要说清是哪一种：**
- 规格里的分区顺序如果本来就是从**页面 DOM 顺序或接口数据顺序**提取的，那它是
`[OBSERVED]` 级别的构图证据，可以直接照着排列分区。走 `web-design-extractor` 的
URL 路线（而不是截图路线）时，通常就是这个情况。
- 如果规格里的顺序只是**写规格的人总结出来的**，那它是 `[INFERRED]`，照做可以，
但交付说明里必须点出来。
- 两种情况都**拿不到**的：各分区的视觉比重（谁更抢眼）、间距节奏的具体数值、
断点行为。这些一律标未知，不要靠「常见做法」补一个上去。
区别在于**能不能往上追到来源**。追得到就照着做，追不到就标未知——不要为了页面好看而假装知道。
**图不是本页的时候——这是最容易做错的一步。**
手上有一堆截图，但它们是**参考站 / 竞品页**的（`web-design-extractor` 的输入），
不是本页的设计稿。这种情况下构图证据**回退到 `prd.md`**：
| | 以谁为准 |
| --- | --- |
| 分区顺序、元素顺序、层级 | **只以 `prd.md` 第 5 节的用户流程为准** |
| 配色倾向、质感、动效风格 | 可以参考图，但**页面结构一律不得照搬** |
交付说明里**必须写明构图来源**（PRD 第 5 节 / 设计稿 / 规格）。
…Read the whole file at its exact version.
How to install
mdr add mingdui/ai-product-skills/design-spec-prototyper@sha256:8d08a2b27ab5a7e3The 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_pqjsyf2itpdo3qhi)
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 | 13,343 B | A | view · diff |
| git:20261013.7601543 | 2026-10-13 | 7601543 | 11,152 B | A | view · diff |
| git:20261013.be4849d | 2026-10-13 | be4849d | 10,958 B | A | view · diff |
| git:20261013.4d20990 | 2026-10-13 | 4d20990 | 10,031 B | A | view · diff |
| git:20261013.fcc2ed5 | 2026-10-13 | fcc2ed5 | 10,120 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 (13343 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_pqjsyf2itpdo3qhi GET https://markdownregistry.com/api/v1/resolve?ref=mingdui/ai-product-skills/design-spec-prototyper GET https://markdownregistry.com/api/v1/blob/8d08a2b27ab5a7e31e14952b0a57efd59a13593dcd49d5345b39481ec9feafe5
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.