design-prototype SKILL.md skillA
design-prototype from huiliyi37/tianshu-harness is an agent skill: a SKILL.md folder an AI agent loads when a task calls for it.
mdr add huiliyi37/tianshu-harness/design-prototype@git:20260720.5237f6cPins git:20260720.5237f6c in mdr.lock. Pin the fingerprint instead.
- Audit grade
- A, 17 of 17 checks passed
- Kind
- SKILL.md skill
- Repository
- huiliyi37/tianshu-harness
- Path
plugins/design/skills/design-prototype/SKILL.md- Versions recorded
- 1
- Latest version
- git:20260720.5237f6c, committed Jul 20, 2026
- Size
- 2,718 bytes
- Repository stars
- 1,254
- License
- Apache-2.0
Frontend UI prototype workflow — clarify intent, explore directions, preview across viewports, diff against references, deliver with screenshot evidence.
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
# Design Prototype（前端设计原型）
对标 Codex Product Design 插件的方法论，适配天枢交付纪律。
## 工作流
### 1. 意图澄清（单问约束）
开始动手前，若以下任一项不明，**只问一个最关键的问题**：
- 目标用户与核心动作（注册？购买？浏览？）
- 品牌调性（极简 / 企业 / playful / 暗色）
- 有无参考（竞品截图、Figma 链接描述、色板）
不要一次抛多个选择题。
### 2. 探索 2–3 个视觉方向
每个方向输出**单文件 HTML 原型**：
- 内联 CSS（无构建步骤，即开即预览）
- 语义化 HTML + 基础可访问性（label、alt、focus 可见）
- 真实文案占位（不用 lorem 堆砌——用场景化假数据）
- 移动端优先，desktop 用 media query 扩展
文件命名：`prototype-{direction}.html`（如 `prototype-minimal.html`）
### 3. 多视口自检（必做）
每个方向完成后：
1. `ui_preview` — mobile / tablet / desktop 三视口截图
2. `ui_responsive_audit` — 抓横向溢出、过小点击区、过小字号
有问题先修 HTML，再进入下一步。不要带着 overflow 交付。
### 4. 参考对齐（有 mockup 时）
用户提供参考图或竞品截图时：
1. `ui_palette` — 从参考图提取色板，写入 CSS variables
2. 实现后 `ui_diff` — 与参考/mockup 像素对比，目标 mismatch < 5%
3. mismatch > 5% 必须迭代，不能口头说「差不多」
### 5. 交付纪律（复现即证明）
交付设计任务时**必须附带**：
- 至少一组三视口 `ui_preview` 截图路径
- `ui_responsive_audit` 结果（零 high 级 issue，或明确列出已知遗留）
- 若有参考：最新 `ui_diff` mismatch 百分比
口头描述「已经 responsive 了」不算交付。
## 工具速查
| 工具 | 何时用 |
|------|--------|
| `ui_preview` | HTML/URL → 多视口 PNG |
| `ui_diff` | 实现 vs 参考 mockup |
| `ui_palette` | 参考图 → CSS/Tailwind tokens |
| `ui_responsive_audit` | 布局问题清单 + 截图 |
## 反模式
…Read the whole file at its exact version.
How to install
mdr add huiliyi37/tianshu-harness/design-prototype@sha256:39894b6a1db69b8cThe line at the top of this page pins the label git:20260720.5237f6c, 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_ljrievmwptyizg3g)
4 badge image fetches in 30 days. What the badge shows.
Versions
The registry has recorded 1 version of this file, committed on Jul 20, 2026.
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 (2718 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
huiliyi37/tianshu-harness · 1,254 stars · license Apache-2.0 · pushed 2026-10-31 · branch main
API
GET https://markdownregistry.com/api/v1/artifacts/art_ljrievmwptyizg3g GET https://markdownregistry.com/api/v1/resolve?ref=huiliyi37/tianshu-harness/design-prototype GET https://markdownregistry.com/api/v1/blob/39894b6a1db69b8ce41ddb6c3e334f4af412ef11cc666c90699dfd0bf4d86bc4
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.
More from huiliyi37/tianshu-harness
Every file in huiliyi37/tianshu-harness