AI coding 项目的生图、配图、图示与视觉资产资料库。
这个仓库存放 kt-aicoding 相关项目可复用的图片生成资料：README 配图、SVG 图示、CLI 动图、logo / banner 方向稿、本地 AI 生图、云端 AI 生图、免费额度和许可证注意事项。
| 目标 | 首选方案 | 为什么 |
|---|---|---|
| README 架构图 / 流程图 | SVG assets + 本地导出脚本 | 免费、可提交、GitHub 渲染稳定、可版本管理 |
| README banner / OG 图 | Satori + resvg-js + Sharp | 代码化生成，适合统一 kt-aicoding 风格 |
| 复杂 HTML/CSS 视觉稿 | Playwright screenshot | 接近真实浏览器渲染 |
| CLI 使用演示 | VHS | 终端 demo 可录成 GIF / MP4，脚本可复现 |
| 手绘风概念图 | Excalidraw | 免费开源，适合解释抽象流程 |
| 工程图 | draw.io / D2 / Graphviz / PlantUML | 源文件可维护，建议预渲染成 SVG |
| 本地 AI 生图 | ComfyUI / Diffusers | 工具免费，适合方向稿和批量实验 |
| 云端 AI 生图 | OpenAI / Gemini / FLUX / Ideogram | 质量高、API 友好，但多数按量计费 |
| 类型 | 含义 | 例子 | 注意 |
|---|---|---|---|
| 真免费本地 | 离线运行，不依赖云额度 | SVG、Playwright、VHS、ComfyUI、Diffusers、macOS sips |
AI 模型权重许可另算 |
| 免费开源库 | 可作为脚本或项目依赖 | Satori、resvg-js、Sharp、html-to-image | 注意 GPL / AGPL / MPL 边界 |
| 免费计划 | 云服务给试用额度 | Napkin、Figma Starter、Canva、Ideogram、Krea | 免费图可能公开、带品牌或不可商用 |
| 付费 API | 按张、token 或 credit 计费 | OpenAI Images、Gemini image、BFL FLUX、Ideogram API | 适合自动化，需要预算 |
| 条件免费 | 个人 / 小团队免费，超出收费 | Remotion | 公司规模和使用方式要先看许可证 |
每个 kt-aicoding 项目可以使用这个结构：
assets/
readme/
overview.svg
config-flow.svg
source/
overview.drawio
architecture.d2
docs/
image-notes.md
scripts/
export-svg.sh
tmp/
readme-images/
规则：
- README 优先引用
assets/readme/*.svg。 - PNG / WebP 用于社交平台、封面、外部发布，不默认提交。
- 可编辑源文件放
assets/source/或docs/diagrams/。 - AI 生图必须记录模型、许可证、prompt、seed、日期。
- 免费 AI 输出只能作为方向稿；logo / 商业宣传图需要人工复核、矢量整理和商标检索。
| 项目类型 | 推荐资产 | 直接采用 |
|---|---|---|
| CLI / statusline / switcher | README SVG 流程图、VHS 终端 demo、短命令截图 | assets/readme/*.svg + demo.tape |
| Codex / Claude Code skill | 目录结构图、触发场景图、安装一行命令卡片 | SVG 或 Satori 生成 banner |
| MCP server | tool surface 图、请求流图、配置示例图 | D2 / draw.io 源文件 + 预导出 SVG |
| Registry / docs repo | 分类地图、仓库矩阵、资料来源表 | 手写 SVG + Markdown 表格 |
| Logo / banner 方向稿 | AI draft + 人工矢量重绘 | 记录 prompt、模型、许可证和日期 |
最小落地方式：
mkdir -p assets/readme assets/source docs scripts tmp/readme-images
cp /path/to/images/scripts/export-svg.sh scripts/export-svg.sh然后在 README 中引用：
把 SVG 批量导出为 PNG 预览：
scripts/export-svg.sh assets/examples tmp/examples脚本会按顺序寻找这些渲染器：
rsvg-convert -> resvg -> magick -> convert -> sips
macOS 默认一般可用 sips，不需要额外安装。
P0：
- SVG assets
scripts/export-svg.sh- Playwright screenshot
- VHS
P1：
- Satori + resvg-js + Sharp
- Excalidraw / draw.io
- D2 / Graphviz / PlantUML
P2：
- ComfyUI + 合规模型
- Diffusers pipeline
- OpenAI / Gemini / FLUX / Ideogram API
“免费生成”不等于“可以商用”，更不等于“可以注册商标”。生图相关授权至少要拆成四件事检查：
- 工具许可证
- 模型权重许可证
- 输出图片使用权
- 第三方素材、人物、品牌、字体、商标风险