Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add huiliyi37/Tianshu-harness --skill design-prototypegit clone --depth 1 https://github.com/huiliyi37/Tianshu-harnessWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/huiliyi37/tianshu-harness/design-prototype)<a href="https://agentmods.dev/skills/huiliyi37/tianshu-harness/design-prototype"><img src="https://agentmods.dev/badge/skills/huiliyi37/tianshu-harness/design-prototype/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/huiliyi37/tianshu-harness/design-prototype"><img src="https://agentmods.dev/badge/skills/huiliyi37/tianshu-harness/design-prototype.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector pass
What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00028 | $0.00775 |
| Opus 5 | $0.00014 | $0.00387 |
| Sonnet 5 | $0.00006 | $0.00155 |
| Haiku 4.5 | $0.00003 | $0.00077 |
Grade A, and why
design-prototype scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 12d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
What it actually 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. 多视口自检（必做）
每个方向完成后：
ui_preview— mobile / tablet / desktop 三视口截图ui_responsive_audit— 抓横向溢出、过小点击区、过小字号
有问题先修 HTML，再进入下一步。不要带着 overflow 交付。
4. 参考对齐（有 mockup 时）
用户提供参考图或竞品截图时：
ui_palette— 从参考图提取色板，写入 CSS variables- 实现后
ui_diff— 与参考/mockup 像素对比，目标 mismatch < 5% - mismatch > 5% 必须迭代，不能口头说「差不多」
5. 交付纪律（复现即证明）
交付设计任务时必须附带：
- 至少一组三视口
ui_preview截图路径 ui_responsive_audit结果（零 high 级 issue，或明确列出已知遗留）- 若有参考：最新
ui_diffmismatch 百分比
口头描述「已经 responsive 了」不算交付。
工具速查
| 工具 | 何时用 |
|---|---|
ui_preview |
HTML/URL → 多视口 PNG |
ui_diff |
实现 vs 参考 mockup |
ui_palette |
参考图 → CSS/Tailwind tokens |
ui_responsive_audit |
布局问题清单 + 截图 |
反模式
- 不要跳过 preview 直接改 CSS 猜效果
- 不要用
<table>做整页布局（2020 年代前的 hack） - 不要在未装
tianshu-design插件时会话里调用上述工具——先/plugin install或让用户安装 - Chrome 未安装时工具会返回明确错误；提示用户安装 Chrome 或设置
CHROME_PATH
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 12d ago First seen · 76 lines · 28 tokens per session scan A 39894b6a1db6
design-prototype is a skill published in the GitHub repository huiliyi37/Tianshu-harness (665 stars, last pushed yesterday), licensed Apache-2.0. It adds 28 tokens to every session and 775 once invoked, about $0.0001 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
frontend-design
Produce intentional, responsive, accessible UI work and perform visual QA instead of generic component assembly.
frontend-design
A design and coding guide for building distinctive web interfaces, including pages, dashboards, landing pages, and reusable components.
frontend-design-saas
S-tier SaaS dashboard and product UI reference. Use this skill when building application shells, data tables, settings panels, billing pages, dashboards, auth flows, admin tools, or any internal/customer-facing SaaS product UI. Inspired by Stripe, Linear, Vercel, Airbnb, Notion. Covers neutral-led design tokens…
ui-features
Implementing UI/UX features in sidecar including modals (internal/modal library), keyboard shortcuts, mouse support, scrolling, pill/tab rendering, and pane resizing. Use when implementing UI features, handling user input, adding keyboard shortcuts, building modals, or working on UX improvements.
drag-pane
Drag-and-drop pane resizing implementation for two-pane plugin layouts. Covers mouse event handling via the internal/mouse package, hit region registration, drag delta calculation, width clamping, state persistence, and pane layout management. Use when working on pane resizing, drag interactions, layout management, or…
write-zot-themes
Help the user create, install, or package zot themes, including theme-only extensions.