- Product: Wanderix / 艺游未境
- Domain: 视觉创作
- Maintained by: 503496348-ops product matrix
- Delivery posture: one-click setup, doctor diagnostics, smoke test, convergence gate, and clean-clone verification are part of the maintenance standard.
./install.sh
python3 scripts/doctor.py
python3 scripts/smoke.py
python3 scripts/product_convergence_gate.py --json
python3 -m pytest tests/ -qbash install.sh
python3 scripts/doctor.py
python3 scripts/smoke.pybash install.sh：自动执行 setup + smoke，适合第一次使用。python3 scripts/doctor.py：检查环境、入口文件和产品门禁，失败时给出修复建议。python3 scripts/smoke.py：执行产品收敛门禁和轻量核心冒烟验证。
视觉创作全链路引擎 — 从一句话描述到设计级视觉产出，覆盖海报、幻灯片、原型、动画、视频、AI生图、手账涂鸦。
设计哲学驱动 × 96种模板/风格/版式 × 质量门禁体系
| 能力域 | 来源 | 输出格式 | 核心优势 |
|---|---|---|---|
| 🖼️ 海报 / 宣传画 | Canvas Design | .png / .pdf |
设计哲学驱动，博物馆品质定位 |
| 📊 演示幻灯片 | Canvas Design | HTML deck → PDF / PPTX | 34套Bold Templates + 22种瑞士版式 |
| 🧩 原生可编辑PPTX | Canvas Design | .pptx |
960×540pt物理画布 + 原生shape/text/image |
| 🎤 演讲者模式 | Canvas Design | HTML presenter view | 当前页/下一页/逐字稿/计时器，按 S 打开 |
| 🧵 图片型社交Deck | Canvas Design | .png / .jpg / PDF |
小红书/公众号/课程卡片，一页一图 |
| 📥 多源资料摄取 | Canvas Design | source-brief.md |
URL/MD/TXT/HTML → 结构化 brief |
| 📱 交互原型 | Canvas Design | iOS / Android mockup | ios_frame.jsx + 平铺多台可操作 |
| 🎬 Motion动画 | Canvas Design | .mp4 / .gif |
render-video.js 25fps + 60fps + SFX/BGM |
| 🎙️ 解说视频 | Canvas Design | .mp4 |
解说稿 → TTS → 配音驱动动画 |
| 🤖 AI生图 | GPT Image 2 API | .png |
批量生成 + 风格控制 |
| 📓 PLOC手账涂鸦 | Wanderix Pipeline | .png |
旅行/风景照片 + ins风手绘装饰 |
| 👤 肖像身份锚定 | Wanderix Portrait | 跨次一致性肖像 | portrait_prompt.py 多视角锚定 |
git clone https://github.com/503496348-ops/canvas-design.git ~/.hermes/skills/canvas-designcd ~/.hermes/skills/canvas-design
npm run setup
npm test如果你更喜欢复制一条 shell 命令，也可以用：
bash install.sh && npm testnpm run setup 会自动完成三件事：
- 安装 Node.js 依赖。
- 安装 Playwright Chromium 浏览器。
- 运行
npm run doctor做中文环境诊断。
如果失败，直接运行：
npm run doctor它会告诉你缺 Node、npm、Python、浏览器，还是仓库文件不完整。
直接对 AI 说：
帮我做一个关于 [主题] 的幻灯片，大概 [N] 页
AI 会自动执行：
- 问你 5-10 个问题 — 受众、风格、输出格式偏好
- 做 2 页示例 — 封面 + 内容页，发给你确认方向
- 你确认后 — 批量推剩下 N-2 页
- 逐页截图验证 — Playwright 检查字体加载、布局正确
- 导出交付 — PDF / PPTX / 部署链接
# 一键安装/诊断/验收
npm run setup
npm run doctor
npm test
# 导出 PDF
bash scripts/export-pdf.sh ./my-deck.html ./output.pdf
# 导出 PPTX（多文件 slide deck → 原生可编辑 PPTX）
node scripts/export_deck_pptx.mjs --slides ./slides --out ./output.pptx
# 资料摄取：URL/Markdown/HTML/TXT → source-brief.md
python3 scripts/source_intake.py --input ./article.md --out ./source-brief.md
# 瑞士版式验证
node scripts/validate-swiss-deck.mjs index.html
# 一键部署到 Vercel
bash scripts/deploy.sh
# Motion 视频渲染
node scripts/render-video.js ./scene.json ./output.mp4
# AI 生图
python3 scripts/gpt_image_api.py "赛博朋克风格的城市海报"在飞书群聊或私聊中 @ 你的 AI 助手，直接说：
帮我做一个关于Q2业务复盘的PPT，10页左右，深色风格
AI 会在飞书内完成设计 → 截图确认 → 导出 PDF → 直接发送文件到飞书聊天窗口。
支持的飞书触发词：海报 宣传画 艺术品 幻灯片 PPT deck 演示 可编辑PPTX 客户要改 讲稿 逐字稿 计时器 小红书图文 知识卡片 原型 动画 视频 做个好看的 推荐风格 选个风格
每套模板在 assets/bold-template-pack/templates/ 下有完整的 design.md + preview.md。
| 模板名 | 风格关键词 |
|---|---|
8-bit-orbit |
像素风 · 复古游戏 |
biennale-yellow |
双年展 · 明黄海报 |
block-frame |
方块框架 · 粗线条 |
blue-professional |
商务蓝 · 稳重专业 |
bold-poster |
大胆海报 · 高冲击力 |
broadside |
横幅大字 · 信息密集 |
capsule |
胶囊形状 · 圆润柔和 |
cartesian |
笛卡尔网格 · 理性精确 |
cobalt-grid |
钴蓝网格 · 科技感 |
coral |
珊瑚色 · 温暖活力 |
creative-mode |
创意模式 · 实验性排版 |
daisy-days |
雏菊 · 清新自然 |
editorial-forest |
森系编辑 · 自然主义 |
editorial-tri-tone |
三色调编辑 · 杂志感 |
emerald-editorial |
翡翠绿编辑 · 高端质感 |
grove |
林地 · 有机纹理 |
long-table |
长桌 · 信息列表排版 |
mat |
垫子质感 · 低调克制 |
monochrome |
单色极简 · 黑白对比 |
neo-grid-bold |
新网格 · 粗体现代 |
peoples-platform |
民众平台 · 社会议题 |
pin-and-paper |
图钉纸张 · 手工拼贴 |
pink-script |
粉色手写 · 柔美文艺 |
playful |
活泼童趣 · 色彩丰富 |
raw-grid |
原始网格 · 粗糙真实 |
retro-windows |
复古窗口 · Win95美学 |
retro-zine |
复古杂志 · 拼贴风 |
sakura-chroma |
樱花色相 · 日系柔和 |
scatterbrain |
散点思维 · 自由发散 |
signal |
信号 · 高对比现代 |
soft-editorial |
柔和编辑 · 留白优雅 |
stencil-tablet |
模板板 · 工业风 |
studio |
工作室 · 专业简洁 |
vellum |
羊皮纸 · 古典质感 |
📖 完整设计规范：
assets/bold-template-pack/templates/<name>/design.md
编号 S01 ~ S22，定义在 references/layouts-swiss.md。每个版式严格锁定在 <section data-layout="Sxx"> 上。
| 版式编号 | 用途 | 核心骨架 |
|---|---|---|
| S01 | 封面/标题页 | 大标题居中 + 副标题 |
| S02 | 双栏内容 | 左文右图 / 左图右文 |
| S03 | 三栏网格 | 信息并列展示 |
| S04 | 引言/金句 | 大字引用 + 署名 |
| S05 | 时间线 | 水平/垂直时间轴 |
| S06 | 数据表格 | 结构化数据展示 |
| S07 | 图表页 | 数据可视化 |
| S08 | 地图/空间 | Swiss Map Component |
| S09 | 列表页 | 有序/无序清单 |
| S10 | 对比页 | A vs B 双栏对比 |
| S11 | 流程图 | 步骤/决策流程 |
| S12 | 团队/人物 | 头像 + 简介网格 |
| S13 | 价格表 | 定价方案对比 |
| S14 | FAQ页 | 问答折叠 |
| S15 | 图片矩阵 | 多图网格排列 |
| S16 | 小报拼贴 | 杂志式图片排版 |
| S17 | 全屏图片 | 单张大图铺满 |
| S18 | 分屏 | 50/50 或 30/70 分割 |
| S19 | 侧边栏 | 左侧导航 + 右侧内容 |
| S20 | 卡片流 | 自适应卡片网格 |
| S21 | 时间轴+内容 | 左侧时间线 + 右侧详情 |
| S22 | Image Hero | 单张大图 + 叠加文字 |
⚠️ 重要约束：一份 deck 只能选一套版式系统（Bold 或 Swiss），不能混用。
定义在 references/design-styles.md，分两大类：
| 分类 | 数量 | 说明 |
|---|---|---|
| 网页风格库 | 20 种 | 适合 Web 页面、交互原型、在线 deck |
| PPT风格库 | 20 种 | 适合传统幻灯片、正式演示、PDF 输出 |
每种风格标注：还原度等级、视觉温度（暖/冷/中性）、HTML/CSS 实现要点。
📖 完整列表：
references/design-styles.md
canvas-design/
├── SKILL.md # AI 内部执行规范（开发者必读）
├── README.md # 本文件
│
├── references/ # 设计规范文档库（54项）
│ ├── QUICKSTART.md # 快速上手指南
│ ├── design-styles.md # 40种风格库
│ ├── layouts.md # 10种基础布局骨架
│ ├── layouts-swiss.md # 22种瑞士版式
│ ├── STYLE_PRESETS.md # 12种预设风格配色方案
│ ├── themes.md # 主题系统
│ ├── themes-swiss.md # 瑞士版式主题
│ ├── animations.md # 动画规范
│ ├── animation-patterns.md # 动画模式库
│ ├── animation-best-practices.md # 动画最佳实践
│ ├── brand-asset-protocol.md # 品牌资产5步协议
│ ├── components.md # UI组件库
│ ├── checklist.md # 质量门禁清单（40项）
│ ├── verification.md # 验证规范
│ ├── content-guidelines.md # 内容规范
│ ├── cinematic-patterns.md # 电影化模式
│ ├── slide-decks.md # 幻灯片制作指南
│ ├── image-prompts.md # AI生图提示词
│ ├── sfx-library.md # 音效库
│ ├── video-export.md # 视频导出规范
│ ├── ppt-skills-fusion.md # PPT Skills 融合增强路线
│ ├── editable-pptx.md # 原生可编辑 PPTX 硬约束
│ ├── presenter-mode.md # 演讲者模式/逐字稿/计时器
│ ├── image-deck-mode.md # 图片型社交 Deck
│ ├── source-intake-adapter.md # 多源资料摄取入口
│ ├── wanderix-ploc-template.json # PLOC手账模板
│ ├── wanderix-templates-registry.json # 模板注册表
│ └── ... # 更多专业文档
│
├── assets/ # 模板与静态资源
│ ├── template.html # 核心 HTML 模板（CSS系统）
│ ├── template-swiss.html # 瑞士版式 HTML 模板
│ ├── bold-template-pack/ # 34套 Bold Templates
│ │ ├── selection-index.json # 模板选择索引
│ │ └── templates/
│ │ ├── 8-bit-orbit/ # 每个模板含 design.md + preview.md
│ │ ├── bold-poster/
│ │ ├── studio/
│ │ └── ... # 共34个模板目录
│ ├── showcases/ # 展示案例
│ ├── director-notes-samples/ # 导演笔记示例
│ ├── presenter-runtime.js # 演讲者窗口运行时
│ ├── animations.jsx # After Effects 动画脚本
│ └── viewport-base.css # 幻灯片基础样式
│
└── scripts/ # 工具脚本（29项）
├── export-pdf.sh # PDF 导出
├── export_deck_pdf.mjs # Deck → PDF（Node.js）
├── export_deck_pptx.mjs # Deck → PPTX
├── html2pptx.js # HTML → PPTX 转换
├── extract-pptx.py # PPTX 提取 + 风格重设计
├── source_intake.py # 多源资料 → source-brief.md
├── deploy.sh # Vercel 一键部署
├── render-video.js # Motion 视频渲染（25fps/60fps）
├── render-video-seek.js # 视频渲染（带定位）
├── render-narration.sh # 解说视频渲染
├── validate-swiss-deck.mjs # 瑞士版式验证器
├── gpt_image_api.py # GPT Image API 封装
├── batch_generator.py # 批量图片生成
├── wanderix_pipeline_engine.py # Wanderix 流水线引擎
├── portrait_prompt.py # 肖像提示词生成
├── tts-doubao.mjs # 豆包 TTS 语音合成
├── gen_deck_thumbs.mjs # Deck 缩略图生成
└── ... # 更多工具脚本
本仓库是 Canvas Design 的统一产品化版本。2026-06-30 完成 PPT 生产链路增强，新增四个确定增量：
| 增强模块 | 产品化能力 | 状态 |
|---|---|---|
| 原生可编辑 PPTX | 物理画布约束、HTML 硬规则、逐元素转 PowerPoint 原生对象 | ✅ 已落地 |
| 演讲者模式 | 当前页/下一页/逐字稿/计时器/双窗口同步 | ✅ 已落地 |
| 图片型社交 Deck | 小红书/公众号/课程卡片，一页一图，prompt 留痕 | ✅ 已落地 |
| 多源资料摄取 | URL/MD/TXT/HTML → source-brief.md，其它资料走前置文档/转写工具 |
✅ 已落地 |
| 旧有审美体系 | 34套 Bold Templates、22种瑞士版式、40种风格库、质量门禁 | ✅ 已内化 |
融合验证：不保留外部竞品品牌作为运行依赖；AGPL 来源只吸收模式，不复制代码。新增能力入口见 references/ppt-skills-fusion.md.
融合验证：不保留外部竞品品牌作为运行依赖；AGPL 来源只吸收模式，不复制代码。新增能力入口见 references/ppt-skills-fusion.md。
A: 确保 HTML 中引入了 Google Fonts CDN 链接，且 Playwright 截图验证时网络畅通。本地离线环境需预装字体。
A: 不能。 一份 deck 只能选择一套版式系统。类名同名但语义不同（例如 h-hero 在 Bold 是衬线，在 Swiss 是无衬线极细 200）。
A: Swiss 版式中，中文方块字视觉面积比英文更重，需按长度降级：
- 1行 ≤ 8个汉字：
min(6.4vw, 11.2vh) - 2行，每行 ≤ 8个汉字：
min(5.8vw, 10.2vh)
A: 从第一行就按 PPTX 约束写 HTML，不要先写"纯视觉自由版"再转换。PPTX 不支持 CSS Grid 高级特性，需用 flexbox 兼容方案。
A: 多文件架构 — 每页独立 HTML + deck_index.html 聚合。单文件架构 CSS 全局污染风险高，超过 10 页几乎必出样式冲突。
A: 复制 references/wanderix-env.example 或 references/gpt-image-env.example 为 .env，填入 API Key：
cp references/wanderix-env.example .env
# 编辑 .env 填入 GRSAPI_KEY=your-real-keyA: ≥5 页的 deck 必须先做 2 页 showcase（封面 + 内容页）让用户确认 grammar，再批量推。跳过 = 方向全错 = 全部返工。这是实战踩坑总结的铁律。
A: 需要 VLM（视觉语言模型）支持。提供旅行/风景照片后，Wanderix Pipeline 会自动叠加 ins 风白色手绘线条 + 繁体大字标注，输出 3:4 比例的手账风格图片。
A: 运行自动化验证器：
node scripts/validate-swiss-deck.mjs index.html详见 LICENSE.txt
一句话开始创作 → 对 AI 说："帮我做一个关于 [主题] 的 [海报/PPT/原型/动画]" ✨
元素碰撞-AtomCollide-AI 智能体实验室 是一个专注于AI领域的开源组织，汇聚了众多优秀学习者。
找工作：更省力，也更精准
- 一线大厂内推通道（字节、阿里、腾讯等）
- 全链路求职赋能包（面试题库、简历优化、晋升指导）
- 线下技术沙龙 & 人脉网络
学AI测试：真正落地，拒绝空谈
- 从0到1实战落地体系（Skills、MCP、RAG、AI IDE等）
- 独家自研资料与工具矩阵
- 前沿技术同步与提效方案
| 社群 | 链接 |
|---|---|
| AI探索交流1区 | 加入 |
| AI探索交流2区 | 加入 |
| AI探索交流3区 | 加入 |
| AI探索交流4区 | 加入 |
| AI探索交流5区 | 加入 |
| AI探索交流6区 | 加入 |
| AI探索交流7区 | 加入 |
| AI探索交流8区 | 加入 |
| AI探索交流9区 | 加入 |
| AI探索交流10区 | 加入 |
| AI探索交流-网文作家 | 加入 |
| AI探索交流群-音乐达人 | 加入 |
| AI探索交流群-微笑驿站 | 加入 |
AtomCollide-智械工坊团队出品
元素碰撞 · AtomCollide-AI 智能体实验室：面向学习者、创作者与自动化实践者，持续沉淀可复用的 AI Agent 产品、工作流与工程经验。使命：for the learner。
请选择 1 个常用社群加入，内容全域同步，无需重复加入。
| 知识库 | 链接 |
|---|---|
| 踩坑合集 | 进入 |
| 商业化案例库 | 进入 |
| 科普专栏 | 进入 |
| Open Build | 进入 |
| LLM / Agent / 研究报告 | 进入 |
| Skill 封装合集 | 进入 |
| 社区治理运营 | 进入 |
| 社群 | 链接 |
|---|---|
| AI 探索交流 1 区 | 加入 |
| AI 探索交流 2 区 | 加入 |
| AI 探索交流 3 区 | 加入 |
| AI 探索交流 4 区 | 加入 |
| AI 探索交流 5 区 | 加入 |
| AI 探索交流 6 区 | 加入 |
| AI 探索交流 7 区 | 加入 |
| AI 探索交流 8 区 | 加入 |
| AI 探索交流 9 区 | 加入 |
| AI 探索交流 10 区 | 加入 |
| AI 探索交流 — 网文作家 | 加入 |
| AI 探索交流群 — 音乐达人 | 加入 |
| AI 探索交流群 — 微笑驿站 | 加入 |
AtomCollide-智械工坊团队出品。更多产品见：AtomCollide Product Matrix。
- 新增
scripts/product_convergence_gate.py：从远端干净 clone 后可运行python3 scripts/product_convergence_gate.py --json，检查 SKILL/README、入口文件、smoke 目标、测试与外部融合引用是否自洽。 - 新增
tests/test_product_convergence_gate.py：确保门禁在产品仓库中真实可执行，避免后续增强只停留在孤岛模块。