一项Claude代码技能，可以扫描任何代码库并生成自包含的HTML服务设计旅程图——无需手动绘制图表。

输出是一个 NN/g 合并的 客户旅程地图 + 服务蓝图，一个浏览器兼容的 HTML 文件。打开它，注释，分享。没有服务器，没有构建步骤，没有浏览器以外的依赖。

---

它的作用

指向代码库。技能会读取你的路由、组件、API调用、邮件模板和错误状态，然后像服务设计师一样思考：参与者是谁，他们的目标是什么，他们在每个时刻做什么、感受什么？

每个推断值都会被标记为[Assumption]，这样你就能知道哪些需要与真实用户验证。Frontstage、Backstage和Support行直接来源于代码——命名组件、真实API调用、实际服务。

---

安装

Claude Code — 通过插件市场

稍后更新为/plugin marketplace update。

插件技能按插件名称命名，所以插件安装会被调用为/journey-mapper:journey-mapper。当你请求旅程地图时，Claude也会自动识别。

克劳德代码 — 手动

Journey Mapper

A Claude Code skill that scans any codebase and generates a self-contained HTML service-design journey map — no manual diagram work required.

The output is an NN/g combined customer journey map + service blueprint in a single browser-ready HTML file. Open it, annotate it, share it. No server, no build step, no dependencies beyond a browser.

---

What it does

Point it at a codebase. The skill reads your routes, components, API calls, email templates, and error states, then thinks like a service designer: who are the actors, what are their goals, what do they do and feel at each moment?

Every inferred value is flagged [Assumption] so you know what needs validating with real users. The Frontstage, Backstage, and Support rows are sourced directly from the code — named components, real API calls, actual services.

---

Install

Claude Code — via plugin marketplace

/plugin marketplace add joeyvansommeren/journey-mapper
/plugin install journey-mapper@journey-mapper

Update later with /plugin marketplace update.

Plugin skills are namespaced by plugin name, so a plugin install is invoked as /journey-mapper:journey-mapper. Claude also picks it up automatically when you ask for a journey map.

Claude Code — manual

git clone https://github.com/joeyvansommeren/journey-mapper
cp -r journey-mapper/skills/journey-mapper ~/.claude/skills/journey-mapper

A manual install is invoked as plain /journey-mapper. For a single project, copy it to .claude/skills/journey-mapper in that repo instead.

---

Other agents — Codex, Cursor, OpenCode, Gemini CLI, GitHub Copilot, Windsurf

These tools all read Agent Skills folders natively, and all of them look in the shared .agents/skills location. One copy covers every one of them:

git clone https://github.com/joeyvansommeren/journey-mapper
mkdir -p ~/.agents/skills
cp -r journey-mapper/skills/journey-mapper ~/.agents/skills/journey-mapper

For a single project, copy it to .agents/skills/journey-mapper in that repo instead. Keep REFERENCE.md and TEMPLATE.html next to SKILL.md — the skill refers to them by relative path.

Every tool also triggers the skill on its own when you ask for a journey map or service blueprint.

---

Continue.dev

Continue reads skill folders from its own directory rather than .agents/skills:

mkdir -p ~/.continue/skills