Skip to main content
affpapa.org
RU EN
skill CX Codex

experience-map — Claude Code skill: map a service ecosystem

The skill maps every touchpoint, channel and relationship across a service. Useful when the experience spans more than one product.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add Owl-Listener/designer-skills --skill experience-map -a claude-code
Open on GitHub

What experience-map does

experience-map lays out user experience at the systems level. Phases run along the horizontal axis, from awareness through regular and advanced use to advocacy or departure. Vertical layers cover user actions, touchpoints, channels, emotions, pain points and opportunities.

A separate layer handles ecosystem relationships: how touchpoints connect, where data moves between channels, and where a human hands work over to automation. The author advises mapping the current state before the future one, and including physical touchpoints alongside digital ones — skip that and the offline half of the service disappears from the picture.

For a single persona's linear path, use journey-map from design-research. Backstage operations belong in service-blueprint. Reach for this one when several products share one experience and the links between them matter more than the order of steps.

What it helps with

  • see every touchpoint of a service on one diagram
  • spot gaps between digital and physical channels
  • align teams on one picture of the experience
  • trace data flow between channels and automated handoffs
  • capture the current state before designing a new one

Example prompts for the agent

  • map the experience for our service: web, app, support and offline locations
  • build an experience map by phase from awareness to departure, mark pain points and opportunities
  • where does data break between our channels? lay it out with experience-map

How to install experience-map

1Skills CLI (Vercel)

npx skills add Owl-Listener/designer-skills --skill experience-map -a claude-code

2Manually: put the files in place

~/.claude/skills/experience-map/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/experience-map/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about experience-map

How do I install experience-map in Claude?

Run npx skills add Owl-Listener/designer-skills --skill experience-map -a claude-code. The skill lands in ~/.claude/skills/experience-map/SKILL.md.

What does experience-map do?

It builds a map of the user experience ecosystem: phases, touchpoints, channels, emotions, pain points and opportunities, plus the relationships between touchpoints.

How is experience-map different from journey-map?

journey-map covers one persona's linear journey, while experience-map takes the whole ecosystem when the experience spans multiple products. Backstage operations go to service-blueprint.

Source text

SKILL.md · MIT 
---
name: experience-map
description: Map the full ecosystem of touchpoints, channels, and relationships across a service. Use when the experience spans more than one product. For one persona's linear journey use `journey-map` (design-research); for backstage operations use `service-blueprint`.
---
# Experience Map
You are an expert in mapping complex, multi-channel user experiences at a systems level.
## What You Do
You create experience maps showing the entire ecosystem of user interactions across touchpoints, channels, and time.
## Structure
### Horizontal Axis: Phases
Awareness, evaluation, onboarding, regular use, advanced use, advocacy/departure.
### Vertical Layers
- **User Actions** — what the user does, key decisions
- **Touchpoints** — website, app, email, support, community
- **Channels** — desktop, mobile, in-person, automated vs human
- **Emotions** — confidence, frustrations, delight
- **Pain Points** — friction, confusion, information gaps
- **Opportunities** — improvements, new touchpoints
### Ecosystem Relationships
How touchpoints connect, data flow between channels, human-automated handoffs.
## When to Use
New products, omnichannel evaluation, ecosystem gap analysis, cross-team alignment.
## Best Practices
- Map current state before future state
- Include digital and physical touchpoints
- Involve cross-org stakeholders
- Validate with research, not assumptions

© Owl-Listener · MIT · Owl-Listener/designer-skills

Similar skills

Everything for Design →
principle-experience-first backnotprop A principle skill that shifts priority toward the user when product, UX, or feature-scope tradeoffs come up. Useful when deciding what to cut. CX Codex +1 5,100installs designing-user-experience osmontero A skill for designing how an interface behaves: flows, forms, empty, loading and error states. Useful when the UI looks done but falls apart on real data. CX Codex +1 458installs uncodixfy cyxzdev Teaches the agent to skip the default Codex aesthetic: soft gradients, floating panels, decorative copy. Use it when generated frontend looks too much like a template. CX Codex +1 5,600installs design-archivist curiositech Crawls 500–1000 real sites and turns them into a database of palettes, type, grids and interactions. Useful when you need evidence, not inspiration. CX Codex +1 321installs awesome-design-md wearescientist Picks a matching DESIGN.md style from a bundled library and applies it to frontend work: layout, color, type, spacing. CX Codex +1 666installs apply-aesthetic plugin87 Picks a visual direction — an archetype or a named design system — and resolves it into your project's tokens. Useful when you want a specific look, not whatever the agent improvises. CX Codex +1 529installs

From the same set111

documentation-template Generates reusable documentation scaffolds for design system components, patterns, and foundations. Use it when setting a shared documentation standard across your team. CX Codex +1 2,100installs naming-convention Sets one naming scheme for components, tokens and layers so names stop drifting between files. CX Codex +1 2,100installs empathy-map Builds an empathy map for one user or segment across four quadrants, so the team shares the same picture of the user. CX Codex +1 2,100installs handoff-spec Generates developer handoff specifications covering measurements, interaction states, responsive breakpoints, and edge cases before engineering starts. CX Codex +1 2,100installs jobs-to-be-done A Claude Code skill that runs a Jobs-to-Be-Done pass: splits a task into functional, emotional and social parts, then returns a map with design implications. CX Codex +1 2,100installs user-persona This skill builds 2-4 research-grounded personas from interview transcripts, surveys, or analytics. It helps teams align design decisions with observed user behavior. CX Codex +1 2,100installs gesture-patterns Designs touch and pointer gestures such as swipes, dragging and long presses. Use it when an interface relies on gestural input. CX Codex +1 2,100installs feedback-patterns Gives the agent a method for designing how a system answers a user action: toasts, progress, badges, notifications. Useful when the interface goes silent after a click. CX Codex +1 2,100installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor