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 yike-gunshi/forge-skills --skill forge-design-labgit clone --depth 1 https://github.com/yike-gunshi/forge-skillsWrote 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/yike-gunshi/forge-skills/forge-design-lab)<a href="https://agentmods.dev/skills/yike-gunshi/forge-skills/forge-design-lab"><img src="https://agentmods.dev/badge/skills/yike-gunshi/forge-skills/forge-design-lab/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/yike-gunshi/forge-skills/forge-design-lab"><img src="https://agentmods.dev/badge/skills/yike-gunshi/forge-skills/forge-design-lab.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.00273 | $0.05491 |
| Opus 5.5 | $0.00109 | $0.02196 |
| Sonnet 5.5 | $0.00055 | $0.01098 |
| Haiku 4.5 | $0.00027 | $0.00549 |
Grade A, and why
forge-design-lab 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 5d 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 — 168 lines — stays where its author put it; the contents beside it link to each section on GitHub.
forge-design-lab — 在真比例骨架上定设计
交付一个页面包（骨架 HTML + <page>.tokens.json + 由它生成的 .js 与前端 .tokens.css），并跑完一轮闭环：适配 → 线框确认 → 骨架 → 七层审查 → 保存 → 交接。实现时看到的值和用户在骨架上看到的是同一份文件。
定位与边界
像一个把设计稿钉在墙上的美术指导：把「这一屏到底放得下几张、这一行到底多少个字、这个间距到底是 8 还是 12」讲透。手段是一个占满窗口、按真实 token 与真实像素渲染的骨架，右侧面板从顶往下七层逐节点提问；用户看不顺眼当场改值、当场变、点保存直写仓库。
核心立场：设计阶段用户要的是「看一眼就能判断」，判断完直接进实现。所以每个决策落成一个 token，token 只存在一处（tokens.json），骨架 <link> 的和前端 import 的是同一份生成的 css，组件 CSS 只写 var()。DESIGN.md 里的 token 表是从 json 生成的副产品，不是决策的载体。Image 2 生图画出来的比例不可信：v32.0 的「7fr:3fr、完整卡」看文字很合理，实机一屏只放得下 1.9 张，这就是文字掩盖比例的代价。
一次只处理一个模块（DESIGN.md 的一个模块号，或 feature-spec 的一个页面/组件）。
边界之外的交出去：DESIGN.md 散文规格、评分、AI 模板痕迹检测交 forge-design；把设计变成组件代码交 forge-eng / forge-design-impl（codex）；气质与风格方向的效果图交 Image 2（visual-decision-layer）；实现后的截图对比交 forge-qa；站点级 token（brand 色、字体族、字号阶梯）的修改交全站设计审查，本 skill 只读并可标「提议改动」；「要不要这个页面」交 forge-brainstorm / forge-prd。
按需读取
| 文件 | 什么时候读 |
|---|---|
references/spec-schema.md |
S2 写 tokens.json 之前；S4 读用户保存的 json 遇到不认识的字段时 |
references/seven-layers.md |
S3 给节点补判断题之前；S4 对「拿不准」出 A/B/C 之前 |
references/engine-hooks.md |
S3 写页面包 HTML（data-id、hooks、状态切换）之前 |
references/pitfalls.md |
S3 写组件 CSS 之前；verify 报错、页面空白或列表不渲染时 |
references/example-ai-search.md |
第一次在一个新项目用本 skill，想对照一个完整范例时 |
references/system-pack.md |
建或刷新零件库、读用户在零件库的保存、写选材清单之前 |
意图分流
| 意图 | 信号 | 应答 |
|---|---|---|
| 强 | 点名了模块/页面/组件，动作是看、改、审、存、交接之一；或 forge-design 第三步转交 | 走全流程；页面包已存在就从对应步骤续跑，不重建 |
| 弱 | 只说「看看设计」「效果对不对」，没点名对象 | 列出项目里已有的页面包（docs/assets/visuals/*/）让选；没有就问模块号，不猜 |
| 潜在 | 在 forge-design / forge-prd 讨论里出现「比例」「一屏几张」「行长」「挤」「留白」 | 反问一句「要不要开工作台按真实尺寸看」，不自动开 |
| 交接 | 「保存好了」「按调整后的来」「在 download 里」 | 直接进 S4：读 json → 重建校验 → 差异表 → 回反馈 |
| 零件库 | 「零件库」「设计模板」「设计 token 总表」「全站颜色/字体/按钮」「这个要不要定制」 | 走 S0；用户在零件库保存后读回执 |
工具
脚本都在本 skill 的 scripts/，用 python3 / node 直接跑；{lab} 指本 skill 目录（~/.claude/skills/forge-design-lab）。
| 脚本 | 什么时候 | 用法 | 失败降级 |
|---|---|---|---|
serve.py |
每个仓库一次，之后常驻 | python3 {lab}/scripts/serve.py <repo> [--status|--stop] |
端口默认 4577，占用则递增；只绑 127.0.0.1 |
adapt_tokens.py |
S1，每个新页面包一次 | python3 {lab}/scripts/adapt_tokens.py <repo> --page <slug> [--prefix xx] [--init-spec] |
没有 :root 变量就读 tailwind theme；两者都没有则列候选让用户指认 |
merge_saved.py |
S4 拿到用户保存/下载的 json 后，先于 build | python3 {lab}/scripts/merge_saved.py <repo> <保存的 json> [--apply] |
默认只报告；页面过期时退出码 2，报告里列出用户没见过的节点 |
build_tokens.py |
S2/S3 写完 json 后；S4 合并后校验重建 | python3 {lab}/scripts/build_tokens.py <repo> <tokens.json> [--check] |
校验不过就修 json，不手改生成的 js/css |
scaffold_pack.py |
S2，线框确认后建骨架壳 | python3 {lab}/scripts/scaffold_pack.py <repo> <tokens.json> [--adapt <adapt.json>] [--sample <json>] |
同时把引擎母本同步到 docs/assets/visuals/_workbench/ |
verify_pack.mjs |
S3 交付前；S4 每次重建后 | node {lab}/scripts/verify_pack.mjs <html> --repo <repo> [--shots <dir>] [--strict-literals] [--json <out>] |
没有 Playwright 就只跑 build_tokens.py --check，让用户人工开页面报控制台 |
extract_system.py |
S0，抽现状（对账用）；产品样式改过后刷新 | python3 {lab}/scripts/extract_system.py <repo> --product-css |
worktree 没有 node_modules 就软链主仓库的 |
build_template.js |
改了 json 的 template 段之后 | node {lab}/scripts/build_template.js <repo> [--check] |
与页面同一个生成器（assets/system/template-css.js），不手改 template.css |
compare_impl.mjs |
实现完成后（forge-qa 视觉维度调用）；用户问「实现和设计稿对不对得上」 | node {lab}/scripts/compare_impl.mjs <骨架 html> [--app URL] [--json out] [--shots dir] |
读 tokens.json 的 implCheck；没配就写「未配置」，不当通过 |
check_system.py |
forge-review / forge-qa 收尾；用户问「有没有越界」 | python3 {lab}/scripts/check_system.py <repo> [--base origin/main] [--all] |
默认只查新增行；--all 看遗留规模，不作门禁 |
render_design_table.py |
S5 | python3 {lab}/scripts/render_design_table.py <repo> <tokens.json> --design docs/DESIGN.md --heading "## 模块 28" |
DESIGN.md 里找不到模块标题就只打印区块，提示先走 forge-design |
What ships with it
25 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
- assets/page-pack-template.html 2.7 KB
- assets/system/system.css 18 KB
- assets/system/system.html 1.6 KB
- assets/system/system.js 23 KB runs code
- assets/system/template-css.js 4.6 KB runs code
- assets/workbench/workbench.css 14 KB
- assets/workbench/workbench.js 47 KB runs code
- README.md 2.4 KB
- references/engine-hooks.md 8.1 KB
- references/example-ai-search.md 3.8 KB
- references/pitfalls.md 10 KB
- references/seven-layers.md 6.2 KB
- references/spec-schema.md 11 KB
- references/system-pack.md 4.6 KB
- scripts/adapt_tokens.py 21 KB runs code
- scripts/build_template.js 1.0 KB runs code
- scripts/build_tokens.py 9.3 KB runs code
- scripts/check_system.py 11 KB runs code
- scripts/compare_impl.mjs 6.4 KB runs code
- scripts/extract_system.py 30 KB runs code
- scripts/merge_saved.py 7.5 KB runs code
- scripts/render_design_table.py 6.1 KB runs code
- scripts/scaffold_pack.py 8.8 KB runs code
- scripts/serve.py 24 KB runs code
- scripts/verify_pack.mjs 21 KB runs code
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.
- 5d ago Changed · +1 lines · +71 tokens per session 5e9f50da9fd7
- 6d ago First seen · 167 lines · 202 tokens per session scan A b85e308d9d2a
forge-design-lab is a skill published in the GitHub repository yike-gunshi/forge-skills (13 stars, last pushed 2d ago), licensed MIT. It adds 273 tokens to every session and 5,491 once invoked, about $0.0011 per session on Opus 5.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-10-11.
Other skills, from other repositories
theme-factory
Create new AiderDesk UI themes by defining SCSS color variables, registering theme types, and adding i18n display names. Use when adding a theme, creating a color scheme, customizing appearance, or implementing dark mode and light mode variants.
design-to-code
Mockup-to-component pipeline using Google Stitch, 21st.dev, and Storybook MCP. Accepts a screenshot, a description, or a URL and produces production-ready React components, checking existing Storybook components before generating anything new. Use when implementing UI from a mockup or screenshot. To call the MCP tool…
design-context-extract
Extract design DNA from app screenshots, live URLs, or screen recordings using Google Stitch — color palettes, typography, spacing tokens, component patterns, and motion specs as design-tokens.json or Tailwind config. Use when the user points to a screenshot, URL, or video and asks to extract or audit the design…
multi-surface-render
Multi-surface rendering with json-render — one JSON spec produces React web, Next.js, React Native, Ink terminal UIs, PDFs, emails, Remotion videos, OG images, and 3D scenes. Covers renderer target selection, registry mapping, and platform APIs (renderToBuffer, renderToStream, renderToFile). Use when generating output…
ai-ui-generation
AI-assisted UI generation patterns for json-render, v0.app, Google Stitch, Bolt Cloud, and Cursor workflows. Covers prompt engineering for component and full-stack app generation, review checklists for AI-generated code, design token injection, refactoring for design system conformance, and CI gates for quality…
design-import
Scaffolds React components from a Claude Design handoff bundle and stops at files on disk: no stories, no tests, no pull request. Use when handed a claude.ai/design URL or a local bundle file; when that same scaffold should carry on through test generation, browser verification and an opened PR, run /ork:design-ship…