[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-92512":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":9,"language":9,"languages":9,"totalLinesOfCode":9,"stars":10,"forks":11,"watchers":12,"openIssues":13,"contributorsCount":13,"subscribersCount":13,"size":13,"stars1d":13,"stars7d":13,"stars30d":14,"stars90d":13,"forks30d":13,"starsTrendScore":13,"compositeScore":15,"rankGlobal":9,"rankLanguage":9,"license":9,"archived":16,"fork":16,"defaultBranch":17,"hasWiki":16,"hasPages":16,"topics":18,"createdAt":9,"pushedAt":9,"updatedAt":31,"readmeContent":32,"aiSummary":33,"trendingCount":13,"starSnapshotCount":13,"syncStatus":34,"lastSyncTime":35,"discoverSource":36},92512,"guizang-material-illustration","op7418\u002Fguizang-material-illustration","op7418","归藏的材质插画 skill：生成带字解释图、图表美化和参考辅助配图。",null,615,63,172,0,344,56.42,false,"main",[19,20,21,22,23,24,25,26,27,28,29,30],"agent","chart-visualization","chinese","claude-code","codex","data-visualization","explainer","illustration","image-generation","material-illustration","skill","social-media","2026-07-22 04:02:06","# 歸藏的材质插画 skill\n\n![GitHub stars](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fstars\u002Fop7418\u002Fguizang-material-illustration?style=flat-square)\n![Skill](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FSkill-Agent-111111?style=flat-square)\n![Material Illustration](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FMaterial-Illustration-002FA7?style=flat-square)\n![Charts](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FChart-Beautify-FF6B35?style=flat-square)\n![Codex](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FCodex-Supported-222222?style=flat-square)\n![Claude Code](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FClaude%20Code-Supported-6B5B95?style=flat-square)\n\n一个适配 Claude Code \u002F Codex 等 Agent 环境的配图 Skill，用来把文章、笔记、图表截图、产品概念、工作汇报、教学材料和人文观点，生成**带中文标签的歸藏材质插画**。\n\n\u003Cimg width=\"1600\" height=\"900\" alt=\"歸藏的材质插画 skill 顶部封面\" src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002Ffc24c36d-197e-4689-abe8-feb0471ac4e5\" \u002F>\n\n它解决的是「中间那张图」的问题：社交卡片、PPT、文章和文档里经常需要一张能把意思讲清楚的中心配图，而不是一张漂亮但看不懂的装饰图。\n\n这个 Skill 专注做三件事：\n\n- **解释图**：把抽象概念、流程、机制、系统关系画成带标签的图。\n- **图表美化**：从截图或原始数据里抽取语义，重新生成更适合传播的材质化图表。\n- **参考辅助出图**：遇到冷门概念、品牌、模型、科学装置、历史物件时，先查参考信息和参考图，再统一转成歸藏材质风格。\n\n> 这是 [guizang-social-card-skill](https:\u002F\u002Fgithub.com\u002Fop7418\u002Fguizang-social-card-skill) 的配套项目。Social Card Skill 负责整张卡片的标题、正文、主题色和尺寸；这个 Skill 负责卡片里的中心插画。\n\n## 30 秒开始\n\n```bash\nnpx skills add https:\u002F\u002Fgithub.com\u002Fop7418\u002Fguizang-material-illustration --skill guizang-material-illustration\n```\n\n也可以直接把这段话发给有 shell 权限的 AI Agent：\n\n```text\n帮我安装 guizang-material-illustration。请把 https:\u002F\u002Fgithub.com\u002Fop7418\u002Fguizang-material-illustration 克隆到 ~\u002F.claude\u002Fskills\u002Fguizang-material-illustration，安装完成后检查 SKILL.md、assets\u002F、references\u002F 是否存在。\n```\n\n已经安装过的话，用这段话更新：\n\n```text\n帮我更新 guizang-material-illustration。请进入 ~\u002F.claude\u002Fskills\u002Fguizang-material-illustration 执行 git pull，然后告诉我当前最新 commit。\n```\n\n安装后直接对 Agent 说：\n\n```text\n用歸藏的材质插画 skill，帮我把这段产品说明做成一张带中文标签的机制图。\n```\n\n也可以试这些请求：\n\n```text\n把这篇文章挑 3 个核心概念，各生成一张带字配图。\n帮我把这张柱状图重新画成歸藏材质风格，数据和坐标不要改。\n这段讲 PKCE 的说明太抽象了，先查一下参考信息，再做一张流程图。\n给这篇小学科学课文做一张杠杆原理图，图里标出支点、用力点、阻力点和力臂。\n把这个周报整理成一张项目状态配图，包含进展、风险、决策、下周。\n先生成中心配图，再交给社交媒体卡片 Skill 排成 3:4 小红书卡片。\n```\n\n## 效果\n\n- **图内可以有字**：解释图需要短标签、箭头、图例和数据标注时，直接生成在图片里，不把图片降级成无字装饰。\n- **材质化 3D 图解**：克制的 Swiss editorial 构图、柔和 3D 材质、清楚的空间关系和少量高亮色。\n- **图表语义重画**：输入是糟糕截图时，只保留图表类型、标题、数据、坐标、单位、误差线和结论，不复刻原图排版。\n- **参考搜索辅助**：模型 Logo、技术术语、历史文化物件、科学装置、管理框架等内容，先补事实和视觉线索，再统一风格。\n- **教育与人文都能接**：小学科学、中学物理、生物化学机制、历史路线、文学意象、社会学概念都可以做成解释图。\n- **适配外层排版**：生成的图片可以放进小红书 3:4 卡片、公众号封面、PPT、文档、知识库和文章配图。\n- **主题色可扩展**：默认 IKB 蓝，也支持柠檬黄、柠檬绿、安全橙、石墨黑等主题方向。\n- **QA 优先**：交付前检查中文标签、数据、裁切、参考准确性和社交卡片尺寸下的可读性。\n\n## 适合 \u002F 不适合\n\n**合适**：文章配图 \u002F 知识解释图 \u002F 产品机制图 \u002F 工作汇报配图 \u002F 数据图表美化 \u002F 教学材料配图 \u002F 人文观点配图 \u002F 社交卡片中心图 \u002F PPT 中心插画 \u002F 冷门概念视觉解释\n\n**不合适**：完整小红书卡片排版（用 Social Card Skill）\u002F 完整 PPT 结构设计（用 PPT Skill）\u002F 真实摄影修图 \u002F 人像写真 \u002F 长文海报排版 \u002F 需要严格出版级数据制图的科研图\n\n## 常见使用场景\n\n| 任务 | 推荐方式 |\n|------|---------|\n| 长文章 → 配图 | 先拆出 1-4 个核心概念，每个概念生成一张解释图 |\n| 产品 \u002F 技术说明 | 先查参考信息，再做流程图、层级图、系统关系图 |\n| 图表截图美化 | 抽取数据和坐标语义，重新生成材质化图表 |\n| 工作汇报 | 用进展、风险、决策、下一步做四象限或流程配图 |\n| 内容生产 | 把选题、素材、草稿、发布、复盘画成工作流 |\n| 教育解释 | 明确部件、方向、关系和短标签，避免只画氛围 |\n| 人文观点 | 用意象 + 结构 + 少量标签，不伪造真实历史现场 |\n| 社交卡片联动 | 先生成中心图，再让 Social Card Skill 负责标题和版式 |\n\n## 支持类型\n\n| 类型 | 适合内容 |\n|------|---------|\n| 概念拆解图 | 一个概念由哪些部分组成 |\n| 流程图解 | 输入、步骤、判断、输出 |\n| 循环机制图 | 增长循环、反馈回路、迭代飞轮 |\n| 对比图 | 前后对比、两条路径、两种策略 |\n| 层级 \u002F 架构图 | 系统、依赖、组织、模块关系 |\n| 场景解释图 | 办公室、课堂、实验台、城市、历史路线 |\n| 科学机制图 | 力、电、磁、生态、生物结构、化学反应 |\n| 人文意象图 | 诗歌、历史、哲学、社会学隐喻 |\n| 材质化图表 | 柱状图、折线图、甘特图、桑基图、热力图、漏斗图、累计流图 |\n| 参考辅助图 | 品牌、模型、专业术语、管理框架、科学装置 |\n\n## 图表美化怎么做\n\n输入可以是一张图表截图，也可以是一组数据。Agent 会先抽取：\n\n- 图表类型\n- 标题和结论\n- 横轴、纵轴、单位和刻度\n- 类别顺序\n- 数值、百分比、误差线\n- 需要强调的最高值、最低值、瓶颈或异常点\n\n然后重新生成一张更适合传播的图：图表可以更小，旁边可以加入小场景、图标、解释标签和视觉重点。目标不是「给原截图换皮」，而是让读者更快看懂。\n\n## 参考搜索怎么用\n\n参考搜索不是找画风，也不是复制外部图片。\n\n它只解决三个问题：\n\n1. 这个东西是什么。\n2. 哪些结构、部件、流程或图标不能画错。\n3. 观众靠什么稳定视觉线索一眼识别它。\n\n例如 PKCE、Andon、Zettelkasten、Kirkpatrick、Panopticon、某个模型 Logo、某个科学装置或历史物件，都适合先查参考信息，再进入统一的歸藏材质插画风格。\n\n## 安装\n\n### 方式一：一行命令安装\n\n```bash\nnpx skills add https:\u002F\u002Fgithub.com\u002Fop7418\u002Fguizang-material-illustration --skill guizang-material-illustration\n```\n\n### 方式二：把下面这段话直接发给 AI\n\n> 帮我安装 `guizang-material-illustration` 这个 Claude Code \u002F Codex skill。请按下面步骤做：\n>\n> 1. 确保 `~\u002F.claude\u002Fskills\u002F` 目录存在，不存在就创建\n> 2. 执行 `git clone https:\u002F\u002Fgithub.com\u002Fop7418\u002Fguizang-material-illustration.git ~\u002F.claude\u002Fskills\u002Fguizang-material-illustration`\n> 3. 验证：`ls ~\u002F.claude\u002Fskills\u002Fguizang-material-illustration\u002F` 应该看到 `SKILL.md`、`assets\u002F`、`references\u002F` 三项\n> 4. 告诉我装好了，之后我说「做一张带字配图」「图表美化」「生成材质插画」之类的话就会触发这个 skill\n\n### 方式三：手动命令行\n\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002Fop7418\u002Fguizang-material-illustration.git ~\u002F.claude\u002Fskills\u002Fguizang-material-illustration\n```\n\n## 触发方式\n\n装好后，可以这样说：\n\n- 「帮我生成一张配图」\n- 「做一张带字解释图」\n- 「把这个概念画成图解插画」\n- 「把这张图表美化一下」\n- 「给这段工作汇报做一张材质风配图」\n- 「这个概念比较冷门，先搜参考信息再生成图」\n- 「给这篇小学科学课文做一张解释图」\n- 「做一张能放进小红书卡片里的中心图」\n\n## 使用流程\n\nSkill 本身会按下面的方式工作：\n\n1. **理解材料**：读文章、截图、数据或说明，找出真正需要被画出来的关系。\n2. **内部判断类型**：不让用户硬选模式，自动判断是流程图、机制图、图表、人文场景还是教育解释图。\n3. **必要时查参考**：冷门概念、具体品牌、科学装置、历史物件先补参考信息。\n4. **压缩文案**：把每张图压成一句说明和 3-5 个短标签。\n5. **写生成提示词**：明确标签、数据、比例、安全区、视觉风格和参考线索。\n6. **生成图片**：调用 GPT-Image \u002F imagegen 或当前 Agent 可用的图像生成能力。\n7. **检查并重生**：中文标签、数据、裁切、图例、参考线索错了，优先重新生成。\n8. **交付资产**：保存图片路径和提示词，方便放进社交卡片、PPT 或文档。\n\n详细执行规则见 [`SKILL.md`](.\u002FSKILL.md)。视觉风格、图表、参考搜索和 QA 规则在 `references\u002F*.md` 里。\n\n## 目录结构\n\n```text\nguizang-material-illustration\u002F\n├── SKILL.md                         # Skill 主文件：触发条件、工作流、交付规则\n├── README.md                        # 本文件\n├── HANDOFF.md                       # 交接文档：事实、结构、测试案例、验证方式\n├── PRODUCT.md                       # 产品文档：定位、场景、边界、roadmap\n├── agents\u002F\n│   └── openai.yaml                  # Codex \u002F OpenAI Skill 展示配置\n├── assets\u002F\n│   └── prompt-template.md           # 可复用图像提示词模板\n└── references\u002F\n    ├── visual-style.md              # 歸藏材质插画风格、比例、安全区、主题色\n    ├── prompt-patterns.md           # 循环、流程、Hub、对比、层级等提示结构\n    ├── chart-beautify.md            # 图表语义抽取、数据优先重画、图标参考\n    ├── use-cases-and-routing.md     # 支持场景与内部路由\n    ├── reference-gathering.md       # 生僻概念 \u002F 品牌 \u002F 科学装置参考规则\n    └── qa-checklist.md              # 图内文字、数据、裁切、参考准确性检查\n```\n\n## 核心设计原则\n\n1. **图要讲人话**：图内标签短、具体、能指向对象，不用抽象名词堆砌。\n2. **图内可以有字**：解释图不是纯装饰，必要标签应该直接生成在图里。\n3. **数据不能编**：图表类先保证数值、坐标和单位正确，再谈风格。\n4. **参考只补事实**：查参考是为了画对，不是为了抄风格。\n5. **不让用户选内部模式**：Agent 自己判断类型，只有关键信息缺失时才问。\n6. **中心图和外层排版分工**：这个 Skill 生成配图，社交卡片 \u002F PPT Skill 负责整页排版。\n7. **小图也要读得清**：最终会进社交卡片时，标签和主体必须能在缩放后看懂。\n\n## 和 Social Card Skill 怎么配合\n\n推荐链路：\n\n1. 用 `guizang-material-illustration` 先生成中心图。\n2. 检查图内标签、数据和裁切。\n3. 把图片交给 `guizang-social-card-skill`。\n4. Social Card Skill 负责 3:4 \u002F 1:1 \u002F 21:9 的标题、正文、主题色和导出。\n\n如果一张卡片的重点是这张图，外层卡片要给图片足够大的区域；不要把中心图缩得太小，否则图内标签会读不清。\n\n## Roadmap\n\n- 整理一组可浏览案例 gallery，覆盖工作、教育、人文、图表四类。\n- 扩展图表类型：雷达图、矩阵图、泳道图、时间轴、组织结构图、地图型数据。\n- 补参考搜索记录模板：查了什么、提取了什么、哪些线索不采用。\n- 增加和 Social Card Skill 联动的最小 recipe。\n- 补更多中文图内标签的稳定提示模板。\n\n## FAQ\n\n**这个 Skill 会直接排完整小红书卡片吗？**  \n不会。它只生成中心配图。整张卡片的标题、正文、主题色和平台尺寸交给 Social Card Skill。\n\n**图里真的可以有中文字吗？**  \n可以，而且这是这个 Skill 的核心。只要图片承担解释任务，短中文标签、箭头说明、数据标注就应该在图里。\n\n**如果中文字生成错了怎么办？**  \n优先缩短标签并重新生成，不建议靠 HTML 往图上贴一堆字补救。\n\n**能不能只给数据，不给原图？**  \n可以。只要提供图表类型、类别、数值、单位和想强调的结论，就能生成材质化图表。\n\n**能不能查参考图？**  \n可以。冷门概念、具体模型、品牌、科学装置、历史文化物件都适合先查参考。参考只用于理解事实和视觉线索。\n\n**支持英文图吗？**  \n支持，但默认优先中文图内标签，因为这个项目主要服务中文内容生产。\n\n## 贡献\n\n欢迎开 Issue 或 PR。比较有价值的改动包括：\n\n- 补充新的图表类型和提示模板。\n- 补充教育、人文、工作场景案例。\n- 改进 `references\u002Freference-gathering.md` 的参考搜索边界。\n- 改进 `references\u002Fqa-checklist.md` 的图内文字和数据检查规则。\n- 给 `assets\u002Fprompt-template.md` 增加更稳定的中文标签写法。\n\n测试和 demo 请放在 `local-tests\u002F` 下，不要把一次性输出放进 Skill 根目录。\n","归藏材质插画是一个面向AI Agent（如Claude Code、Codex）的配图技能，专注于生成带中文标签、具材质感的解释性插画。核心功能包括：抽象概念的带字解释图生成、原始图表语义提取与材质化重绘、冷门术语\u002F物件的参考检索+风格统一出图。采用克制的Swiss式构图、柔和3D材质与清晰空间关系，支持主题色扩展与社交卡片尺寸适配。适用于知识类文章配图、产品机制说明、教学材料可视化、工作汇报图解及人文观点具象化等需‘讲清逻辑’而非单纯装饰的场景。",2,"2026-07-09 02:30:12","CREATED_QUERY"]