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 superduke/ganvil --skill design-restoregit clone --depth 1 https://github.com/superduke/ganvilWrote 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/superduke/ganvil/design-restore)<a href="https://agentmods.dev/skills/superduke/ganvil/design-restore"><img src="https://agentmods.dev/badge/skills/superduke/ganvil/design-restore/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/superduke/ganvil/design-restore"><img src="https://agentmods.dev/badge/skills/superduke/ganvil/design-restore.svg" alt="Reviewed on agentmods" width="80" height="20"></a>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.00100 | $0.03536 |
| Opus 5 | $0.00050 | $0.01768 |
| Sonnet 5 | $0.00020 | $0.00707 |
| Haiku 4.5 | $0.00010 | $0.00354 |
Grade A, and why
design-restore 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 8d 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.
How it starts
The opening of the file, as written. The whole thing — 150 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Design-Restore — 后台管理系统还原设计标准
本 skill 定义 restore 模式的设计验收标准。它替代 frontend-design，用于"按效果图忠实还原后台管理系统"的场景。
核心哲学：还原优先，而非原创优先
frontend-design 奖励"独特、大胆、反模板"（Originality），适用于自由生成。restore 模式恰恰相反——目标是忠实还原既定效果图。因此：
- Originality → Fidelity（还原度/吻合度）：评的是"与效果图像不像"，不是"独不独特"。
- 组件库规范使用不是 AI slop：效果图本就是 Ant Design 风企业后台（密集表格、筛选区、抽屉、Tab、彩色状态标签、迷你进度条）。规范使用 Ant Design 是"忠实还原"的加分项，不是扣分项。
- 禁止 pivot：与效果图的差异 = 缺陷。任何时候不得整体重设计视觉层，只允许 refine 向效果图/契约靠拢。
- 一致性来自 design tokens：所有颜色/字号/间距/圆角只从 design tokens（ui-lib theme token）注入，禁止局部硬编码。
三层裁定模型（冲突时怎么判）
当效果图、spec、生图提示词之间不一致时，按三层裁定：
| 层 | 规则 | 优先级 |
|---|---|---|
| L1 硬覆盖层 | spec 强制约定（如 CGCS2000、数据截止时间标注、RBAC、AES-256/SHA-256）→ 无条件覆盖效果图 | 最高，一票否决，不计入权重 |
| L2 软权重层 | image_weight vs spec_weight（和=1，默认 0.8/0.2）。图与 spec 非强制描述冲突时按权重裁定 |
中 |
| L3 图基底 | 效果图为默认实现基准 | 基底 |
PNG 是布局/组件/字段的最终权威：与 MD 冲突时 PNG 优先（复杂布局页 MD 可能漏面板/漏字段）。
还原契约结构（restore-planner 产出，6 区块）
# 还原契约 — <界面名> (<编号>)
## 0. 元信息（效果图路径 / spec关联 / 还原占比 / 优先级 / 界面类型）
## 1. 页面定位（一句话功能意图）
## 2. 三源校验注记（MD↔PNG↔生图提示词 一致性 + AI图可行性过滤 + PNG增量/纠错）
## 3. L1 强制约定（spec 硬覆盖项，一票否决）
## 4. 区域划分 + 宽度比/栅格（分区树）+ 响应式与弹性（按"响应式总纲"逐区写明）
## 4A. 图片类内容占位符清单（按"占位符规则"单独列出，不实现图像内容）
## 5. 组件清单（类型 + props + 状态/颜色规则）
## 6. 字段/列/表单清单 + 样例数据（复用 MD/PNG 真实数据）
## 7. 交互（点击/弹窗/抽屉/Tab/跳转/CRUD 闭环）
## 8. 验收 checklist（套 6 阶段闭环 + Fidelity 6 维自查）
图片类内容占位符规则（A1 必做，用户裁定 2026-07-22）
效果图中的大面积图片、banner、图片展示、复杂 icon、装饰性插图（电力场景大图/全景照片/卫星地图/列表缩略图/U盘插图等）：
- A1 逆向分析时就必须单独识别、单独列出（写入契约 §4A 占位符清单），不混入组件清单。
- 一律不实现图像内容——不程序生成、不 canvas 合成、不 SVG 简化描绘、不找近似素材。实现了也没用（demo 观众知道是样例），浪费 token 和时间。
- 实现层统一用
ImagePlaceholder图片占位符组件（灰底 + 居中图标 + 内容标注文字，如"全景图 360° 占位"），尺寸/比例按效果图占位。 - 组件与交互仍还原：占位的是"图像内容"，不是组件本身。例：全景查看器仍用 Pannellum（L1 强制）+ 极简占位图，拖拽/缩放/全屏/切换交互完整；列表缩略图位仍按效果图尺寸排版。
- Fidelity 评分：占位符内容不计入视觉语言/组件维度扣分（裁定豁免项）；但占位符的尺寸、位置、比例与效果图不符仍扣分。
响应式总纲（用户裁定 2026-07-22）
效果图是固定画布，真实浏览器尺寸可变。契约 §4 必须含响应式与弹性约定：
- 最小宽度 = 效果图画布宽度（本项目 1672px）：视口小于此宽度 → 页面保持最小宽度，出横向滚动条，不挤压变形。
- width 100% 占满：视口大于最小宽度 → 内容弹性拉伸占满页面宽度。
- 栏高弹性：不用固定像素栏高把内容折出可视区；可视区内弹性填充，溢出出纵向滚动。
- 文字溢出规则：长文本省略号或换行，禁止互叠。
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.
- 8d ago First seen · 150 lines · 100 tokens per session scan A 7202eacc8eaa
design-restore is a skill published in the GitHub repository superduke/ganvil (3 stars, last pushed 1mo ago), licensed MIT. It adds 100 tokens to every session and 3,536 once invoked, about $0.0005 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-31.
Other skills, from other repositories
scroll-craft
Build premium scroll-driven landing pages for service, product, food, and drink brands. Plan the visitor journey, page grammar, emotional peak, and bespoke signature move. Create dimensional heroes with independent visual planes, restrained motion, and separate mobile composition. Use supplied photos and footage or…
design-system-reference
Style guides and implementation rules for frontend design. Works with design-discovery agent which handles context gathering and VS-based style recommendations. Contains detailed style guides, anti-patterns, and implementation checklists.
maintaining-dev-playground
Keeps the Dev Playground current with the application. Use when editing UI components in apps/client/src/ — assesses playground candidacy, checks existing playground coverage, and guides adding or updating showcases. Also use when directly editing files in apps/client/src/dev/, building new widgets or features, or…
designing-frontend
Guides design thinking and decision-making using the Calm Tech design language. Use when planning UI, reviewing designs, or making design decisions. For implementation details, see styling-with-tailwind-shadcn.
colors
Color systems for web interfaces — OKLCH conversion and palette generation, contrast measurement (APCA/WCAG), gamut and P3 fallbacks, theming, one meaning per color. INVOKE PROACTIVELY when converting color values, building or extending a palette or token set, checking or reporting contrast, or theming light and dark…
design-system
Use when a ticket needs a systematic token + component foundation for a frontend — the three-layer token architecture (primitive → semantic → component), component specs with full state coverage, or a recommendation for which design system a product should have. Invoke for "set up design tokens", "define the component…