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 MuduiClaw/ClawKing --skill blueprint-infographicgit clone --depth 1 https://github.com/MuduiClaw/ClawKingWrote 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/muduiclaw/clawking/blueprint-infographic)<a href="https://agentmods.dev/skills/muduiclaw/clawking/blueprint-infographic"><img src="https://agentmods.dev/badge/skills/muduiclaw/clawking/blueprint-infographic/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/muduiclaw/clawking/blueprint-infographic"><img src="https://agentmods.dev/badge/skills/muduiclaw/clawking/blueprint-infographic.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.00081 | $0.02382 |
| Opus 5 | $0.00041 | $0.01191 |
| Sonnet 5 | $0.00016 | $0.00476 |
| Haiku 4.5 | $0.00008 | $0.00238 |
Grade A, and why
blueprint-infographic 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 11d 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 — 213 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Blueprint Infographic Generator
将任意主题转化为高质量蓝图风格信息图（PNG）。模板驱动 + AI 结构化，40 种视觉变体。
快速使用
一键生成（推荐）
cd "$(dirname "$0")/.." # or the skill directory
node scripts/generate.mjs "AI时代的个人品牌建设" --output output/result.png
指定布局 + 主题 + 字体
node scripts/generate.mjs "主题" \
--layout hero \
--theme forest \
--font handwritten \
--output output/result.png
手动 JSON 渲染（精细控制）
node scripts/render-v2.mjs input.json \
--layout dense \
--theme ocean \
--font handwritten \
--output output/result.png \
--html # 同时保存 HTML 用于调试
三层架构
主题文本 → [AI 结构化] → JSON → [模板渲染] → HTML/CSS → [Playwright] → PNG
generate.mjs render-v2.mjs headless Chromium
解耦设计：每层可独立使用。可以手写 JSON 跳过 AI，也可以用 AI 生成 JSON 后手动调整再渲染。
文件结构
skills/blueprint-infographic/
├── SKILL.md ← 你在这里
├── design-tokens.json ← Design OS 设计令牌（主题/字体/布局/常量）
├── .gitignore ← 排除 output/*.png, fonts/*.ttf
├── schema.json ← JSON 数据合约（12 种模块类型）
├── scripts/
│ ├── generate.mjs ← 端到端管线（主题 → PNG）
│ └── render-v2.mjs ← 渲染器（JSON → PNG，~1700 行）
├── prompts/
│ └── structuring.md ← AI 结构化 system prompt
├── fonts/
│ ├── XiaolaiSC-Regular.ttf ← 小赖手写字体（21MB, SIL OFL, git-ignored）
│ └── Caveat.ttf ← 英文手写字体（git-ignored）
├── demo/ ← 测试 JSON 数据
│ ├── test-action.json ← 7 模块标准测试
│ ├── test-brand.json ← 7 模块品牌主题测试
│ ├── test-pm-career.json ← 7 模块产品经理测试
│ ├── test-5mod.json ← 5 模块紧凑测试
│ └── test-9mod.json ← 9 模块密集测试
└── output/ ← 渲染结果（git-ignored）
视觉变体系统（4 × 5 × 2 = 40 种）
4 种布局架构 (--layout)
| 布局 | 标题区 | 网格 | 适合 |
|---|---|---|---|
banner |
彩色大横幅 | 对称 2-3 列 | 正式报告、公众号头图 |
dense |
纯文字内联标题 | 强制 3 列 + 标尺框 | 技术文档、数据密集 |
hero |
极简标题 | 首模块全宽 + 下方网格 | 核心概念突出 |
mosaic |
薄横幅 | CSS Grid Areas 不对称 | 多维度分析、视觉层次丰富 |
5 种配色主题 (--theme)
| 主题 | 主色 | 适合 |
|---|---|---|
ocean |
#0F4C81 深蓝 |
商业战略、严肃分析 |
forest |
#2D6A4F 深绿 |
成长路径、长期主义 |
sunset |
#C65D07 橙棕 |
创业行动、变革转型 |
slate |
#475569 石灰 |
技术系统、中性分析 |
blueprint |
#3FA882 薄荷绿 |
经典蓝图、品牌一致 |
What ships with it
13 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.
- .gitignore 95 B
- demo/test-5mod.json 3.4 KB
- demo/test-9mod.json 5.4 KB
- demo/test-action.json 5.2 KB
- demo/test-brand.json 5.6 KB
- demo/test-pm-career.json 6.1 KB
- design-tokens.json 5.6 KB
- fonts/Caveat.ttf 394 KB
- fonts/XiaolaiSC-Regular.ttf 21700 KB
- prompts/structuring.md 8.2 KB
- schema.json 4.4 KB
- scripts/generate.mjs 6.4 KB runs code
- scripts/render-v2.mjs 70 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.
- 11d ago First seen · 213 lines · 81 tokens per session scan A e995d39f42e0
blueprint-infographic is a skill published in the GitHub repository MuduiClaw/ClawKing (11 stars, last pushed 4mo ago), licensed MIT. It adds 81 tokens to every session and 2,382 once invoked, about $0.0004 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
html-ppt-zhangzara-retro-zine
A neighborhood zine on the disappearing corner shops — portraits, voices, and what a block loses when they close. Built as a decision-grade story deck for community, local readers.
html-ppt-zhangzara-studio
A photography studio's portfolio-and-rate deck — the signature work, the process, and the packages that win the brief. Built as a decision-grade design craft deck for prospective clients.
motion-frames
A single-frame motion-design composition with looping CSS animations — rotating type ring, animated globe, ticking timer, parallax labels. Renders as a hero video poster you can hand straight to HyperFrames or any keyframe-based exporter. Use when the brief asks for "motion design", "animated hero", "loop", "video…
webgl-halftone-drift
A self-contained WebGL2 hero: a flowing field screened through a rotated halftone dot grid into a duotone print aesthetic; move the cursor to bend the drift.
webgl-holographic-foil
A self-contained WebGL2 hero: thin-film interference over a crushed-foil surface whose palette shifts with the viewing angle; move the cursor to tilt the film.
motion-graphics
A short, design-led motion graphic where motion is the message — kinetic typography, stat count-up, chart/data-viz hit, logo sting / brand lockup, lower-third / callout / social overlay, animated map (highlight regions, connect places, zoom to a location), animated tweet / news-article / headline, webpage / UI…