메뉴
将任意主题转化为高质量蓝图风格信息图（PNG）。模板驱动 + AI 结构化，5 主题 × 4 布局 × 2 字体 = 40 种视觉变体。当用户说"生成信息图""做一张图""infographic""blueprint""一页总结"时触发。
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.
High-performance web crawler that converts web pages to clean Markdown.
Knowledge Base RAG - retrieve and answer questions from indexed knowledge (blog translations, skills docs, project docs, memory archives). Use when user asks questions that might be answered by accumulated knowledge, wants to search across the knowledge base, or asks "我们知识库里有什么关于X的". Also use for ingesting new content into the knowledge base.
Reference documentation for AI agent capabilities including browser automation, web crawling with crawl4ai, and Codex development. Use when you need guidance on using browser automation, crawl4ai for web scraping, or Codex CLI for code generation.
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.
Auto-discover, index, and inject coding standards from any codebase. Use when user asks to "discover standards", "extract conventions", "document patterns", or "shape a spec" for a project.
| name | blueprint-infographic |
| description | 将任意主题转化为高质量蓝图风格信息图（PNG）。模板驱动 + AI 结构化，5 主题 × 4 布局 × 2 字体 = 40 种视觉变体。当用户说"生成信息图""做一张图""infographic""blueprint""一页总结"时触发。 |
| description_zh | 蓝图风格信息图生成：5 主题 x 4 布局 x 2 字体 = 40 种变体。一句话生成高质量 PNG 信息图。 |
将任意主题转化为高质量蓝图风格信息图（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
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）
--layout)| 布局 | 标题区 | 网格 | 适合 |
|---|---|---|---|
banner | 彩色大横幅 | 对称 2-3 列 | 正式报告、公众号头图 |
dense | 纯文字内联标题 | 强制 3 列 + 标尺框 | 技术文档、数据密集 |
hero | 极简标题 | 首模块全宽 + 下方网格 | 核心概念突出 |
mosaic | 薄横幅 | CSS Grid Areas 不对称 | 多维度分析、视觉层次丰富 |
--theme)| 主题 | 主色 | 适合 |
|---|---|---|
ocean | #0F4C81 深蓝 | 商业战略、严肃分析 |
forest | #2D6A4F 深绿 | 成长路径、长期主义 |
sunset | #C65D07 橙棕 | 创业行动、变革转型 |
slate | #475569 石灰 | 技术系统、中性分析 |
blueprint | #3FA882 薄荷绿 | 经典蓝图、品牌一致 |
--font)| 字体 | 中文 | 英文/等宽 | 适合 |
|---|---|---|---|
default | Noto Sans SC | IBM Plex Mono | 正式、专业 |
handwritten | 小赖字体 (Xiaolai) | Caveat | 小红书、社交媒体、亲和力 |
CLI 参数 > JSON 数据字段 > 自动选择（AI 根据内容情感选主题/布局，无指定时 fallback 到 ocean/banner）
| 类型 | 用途 | 推荐 span |
|---|---|---|
matrix | 2×2 四象限分类 | — |
timeline | 时间线/阶段演进 | — |
breakdown | 分层结构/深度分解 | tall |
loop | 闭环系统/飞轮 | — |
warning | 风险/反模式警示 | wide |
stats | 3 个关键指标数据 | — |
progress | 多维度评分/进度 | wide |
comparison | 两方案对比 | — |
pyramid | 优先级金字塔 | — |
chart | 柱状/折线趋势图 | — |
flowchart | 步骤流程 | — |
checklist | 执行检查清单 | — |
{
"title": "主标题",
"subtitle": "副标题 — 一句话核心判断",
"theme": "ocean", // 可选，覆盖自动选择
"layout": "hero", // 可选，覆盖自动选择
"fontStyle": "handwritten", // 可选
"modules": [
{
"slot": "A-01",
"type": "matrix",
"title": "模块标题",
"span": "tall|wide", // 可选
"content": { ... } // 类型特定，见 schema.json
}
]
}
claude-sonnet-4-5 via Antigravity (http://127.0.0.1:8045/v1)prompts/structuring.mddata→content 重映射、缺失 title、span 清理# 博客翻译完成后，用文章标题生成配图
node scripts/generate.mjs "文章标题" \
--theme ocean --font default \
--output /path/to/blog-cover.png
在 cron agentTurn prompt 中：
用 blueprint-infographic skill 为这篇文章生成信息图：
node scripts/generate.mjs "主题"
node scripts/generate.mjs "主题" \
--output ~/.openclaw/media/outgoing/general/infographic.png
/opt/homebrew/lib/node_modules/playwright）~/Library/Fonts/XiaolaiSC-Regular.ttf，handwritten 模式需要）所有设计决策集中在 design-tokens.json，遵循 Design OS 原则：设计决策和实现分离。
{
"base": { ... }, // 共享中性底色（暖米纸背景、灰度色阶）
"themes": { ... }, // 5 种配色主题（ocean/forest/sunset/slate/blueprint）
"fonts": { ... }, // 2 种字体配置（default/handwritten）
"layouts": { ... }, // 4 种布局架构（banner/dense/hero/mosaic）
"constants": { ... }, // 全局常量（黑/白/红/边框色）
"sizes": { ... } // 画布尺寸（default 1200×1600 / xhs 1080×1440）
}
扩展方式：新增主题/布局/字体只需编辑 JSON，不需改渲染器代码。渲染器启动时自动加载 design-tokens.json 并解析继承关系（"extends": "base" 的主题自动合并共享底色）。
#E4DED2 网格纸质感 + 噪点纹理