一份旅程。
不同的表达。
布局决定看什么，交互决定怎么读，主题决定呈现的色调。Journey 把这三件事分开，你可以重新组合。
模板是怎么做出来的？
- 从旅程数据出发
告诉 agent 读哪份 .journey/*.md、给谁看、希望对方做什么。已有字段决定内容，缺失信息保留为空。
- 组合布局与交互
agent 读取 rendering 模板的结构，再结合 interaction 模板的行为和 wireframe 参考，生成独立 HTML。模板可以按用途扩展。
- 用 theme 命令统一配色
生成的组件使用语义颜色 token。theme 命令安装颜色体系，再用预设替换基础色，整张图自动派生。
选一种表达，拿走提示词。
下面生成可交给 agent 的提示词与可在终端执行的命令。它不会在浏览器中运行 agent。
03 / 选择主题
Maya · 等待消息
主题样张 / 摘录自同一份求职案例
| 行为 | 情绪 | 机会 |
|---|---|---|
| 等待申请结果 | −2 · 焦虑与失望 | 展示审核进度与预计时间 |
发送给 agent
Claude Code 使用 /journey 调用；Codex 可用 $journey 指定这个 skill。其余内容用自然语言描述。
生成 HTML 后，执行换肤命令
将 map.html 换成实际输出文件名。命令会修改这个 HTML 的主题区域。
做成团队自己的 template。
下载参考模板，放进项目的 templates/。定义布局、字段映射和交互，再让 agent 从这个模板生成下一张地图。
使用 journey skill，把 templates/storyboard.html 改成我们的评审模板： 每一步显示行为、想法、触点、情绪、痛点与机会； 保留来源检查和键盘操作，所有颜色使用 Journey 语义 token。 删除示例数据，留下字段映射说明，保存为 templates/team-review.html。 随后读取 .journey/job-application.md，基于它生成 review.html。 不要编造原始地图里没有的信息。
官网的传统「用户旅程图」也是定制布局：阶段为列、体验维度为行。它不是 skill 自带的某个同名预设；可以用相同的方法要求 agent 生成。
Skill 内置的布局参考。
这些文件是 skill 的真实参考模板，包含占位或演示内容；下载后由 agent 替换为你的旅程数据。
卡片图
逐步阅读，按里程碑组织信息。
下载 card-grid.html ↓时间轴
沿时间顺序查看事件与等待。
下载 timeline.html ↓服务蓝图 / 泳道图
对照用户行为、前台、后台与支持层。
下载 swimlane.html ↓情绪曲线
观察情绪起伏与关键时刻。
下载 emotion-curve.html ↓故事板
逐格呈现场景、动作、想法和时间。
下载 storyboard.html ↓流程图
查看分支、循环与不同结局。
下载 flow-graph.html ↓时长比例图
让时长与等待按实际数量呈现。
下载 time-to-scale.html ↓覆盖矩阵
检查字段密度、缺失与来源。
下载 coverage-xray.html ↓来源：公开 skill 仓库快照 f30cc0b。查看布局与交互组合规范 ↗
哪些是命令，哪些是对话？
journey.sh theme 是确定性命令：安装 token、应用预设、设置基础色。生成布局和制作模板属于 Express 模式，由 agent 完成；目前没有 journey.sh render 或 template create 命令。
# 在 skill 目录下运行；map.html 指向你的输出文件 bash scripts/journey.sh theme map.html --init bash scripts/journey.sh theme map.html --preset paper bash scripts/journey.sh theme map.html --primary '#bac4ae' --surface '#090a0a' --text '#e7e8e2' bash scripts/journey.sh theme map.html --clear
Graphite 是这个新版官网新增的主题文件，下载并安装后才能使用 --preset graphite；其余四套预设来自当前 skill。