Skip to main content
skill CX Codex

service-blueprint — Claude Code skill: install guide

Maps how a service is delivered to users and behind the scenes. Use it to trace gaps between visible interactions, operations, and supporting systems.

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

What service-blueprint does

This skill creates a service blueprint with five swim lanes: physical evidence, user actions, frontstage actions, backstage actions, and support processes. It also marks the lines between user interaction, visibility, and internal interaction.

Start with one scenario, then draw on journey research, stakeholder interviews, process documentation, and analytics. The skill maps each user action to visible work, hidden work, and the infrastructure behind it. It then looks for disconnected lanes, delays, errors, and broken handoffs.

The map exposes cases where a visible promise cannot be delivered by backstage work or relies on several support dependencies. Keep the scope narrow: a map of an entire product becomes vague, so choosing a specific user path first matters. For the customer-visible layer alone, use experience-map.

What it helps with

  • map service delivery across visible and hidden work
  • find gaps between customer-facing promises and operations
  • trace dependencies on infrastructure and third-party services
  • coordinate teams around one service scenario
  • plan a service redesign or migration

Example prompts for the agent

  • “Create a service blueprint for a first-time user completing onboarding.”
  • “Map order processing into user actions, frontstage work, backstage work, and support processes.”
  • “Review this service flow for gaps between frontstage actions and backstage processes.”

How to install service-blueprint

1Skills CLI (Vercel)

npx skills add Owl-Listener/designer-skills --skill service-blueprint -a claude-code

2Manually: put the files in place

~/.claude/skills/service-blueprint/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/service-blueprint/

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

Questions about service-blueprint

How do I install service-blueprint in Claude Code?

Run npx skills add Owl-Listener/designer-skills --skill service-blueprint -a claude-code twice, then use ~/.claude/skills/service-blueprint/SKILL.md.

What does service-blueprint do?

It maps the full delivery system behind a service, from user actions and visible interactions to backstage processes and support systems. The resulting blueprint helps reveal operational gaps and dependencies.

How is service-blueprint different from a journey map?

A journey map focuses on the user experience and emotional journey. A service blueprint includes users, employees, systems, and operational dependencies; use experience-map for the customer-visible layer alone.

Source text

SKILL.md · MIT
---
name: service-blueprint
description: Map service delivery across frontstage actions, backstage processes, and supporting systems. Use when staff and operations are part of the experience. For the customer-visible layer only, use `experience-map`.
---
# Service Blueprint
You are an expert in service design and systems-level experience mapping.
## What You Do
You create service blueprints that reveal how a service is delivered across all channels and actors — giving teams a shared view of the full system, not just the user-facing touchpoints.
## What a Service Blueprint Shows
A blueprint maps five horizontal swim lanes:
1. **Physical evidence**: what the user sees, touches, or receives at each step (screens, emails, receipts, packaging, spaces)
2. **User actions**: what the user does — drawn from journey map research
3. **Frontstage actions**: what employees or systems do that the user can see or experience directly (customer support replies, onboarding calls, chat responses)
4. **Backstage actions**: what employees or systems do that the user cannot see (order processing, fraud checks, fulfillment)
5. **Support processes**: the infrastructure that enables frontstage and backstage (databases, third-party services, internal tools, policies)
**Line of interaction**: separates user actions from frontstage
**Line of visibility**: separates frontstage (visible to user) from backstage (invisible)
**Line of internal interaction**: separates backstage from support processes
## When to Use a Service Blueprint
- Designing a new end-to-end service
- Diagnosing where a service is failing (look for gaps between swim lanes)
- Coordinating a multi-team product that spans multiple channels (web, app, email, phone, physical)
- Planning a major service redesign or migration
- Onboarding new team members to the full scope of a product
## Blueprint vs Journey Map
| | Journey Map | Service Blueprint |
|---|---|---|
| Focus | User experience | Entire delivery system |
| Actors | User | User + employees + systems |
| Purpose | Understand emotional journey | Reveal operational gaps and dependencies |
| When | Research and ideation | System design and coordination |
Use journey maps to understand the experience; use blueprints to design and fix the system delivering it.
## Process
1. **Define scope**: choose a specific scenario (e.g. "first-time user completes onboarding") — don't try to blueprint the entire product at once
2. **Gather inputs**: user journey research, stakeholder interviews, process documentation, analytics
3. **Draft user actions**: adapt from journey map
4. **Map frontstage**: for each user action, what does the system or team do visibly?
5. **Map backstage**: what happens behind the scenes to enable each frontstage action?
6. **Map support**: what infrastructure, tools, or third-party services support backstage actions?
7. **Add physical evidence**: what artifacts does the user receive or interact with?
8. **Identify failure points**: where do swim lanes disconnect? Where do delays, errors, or handoffs break down?
9. **Validate**: review with operations, engineering, and support teams — they often spot missing backstage steps
## Reading the Blueprint
- **Gaps between lanes**: where frontstage promises something backstage can't deliver
- **High-density backstage clusters**: complexity that may be ripe for automation or simplification
- **Multiple support dependencies for a single frontstage action**: fragility — single points of failure
- **Long horizontal stretches without user touchpoints**: the user is waiting; is this communicated?
## Best Practices
- Blueprint existing state first, future state second — don't skip the as-is
- Co-create with operational teams, not just design — they know the backstage
- Keep scope narrow; a focused blueprint of one scenario is more useful than a sprawling map of everything
- Use the blueprint as a coordination artifact in cross-functional planning, not just as a research output
- Revisit blueprints when services change — they become misleading faster than journey maps

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

Similar skills

Everything for Design →

From the same set109

form-design Designs forms end to end, covering field order, grouping, validation, and accessibility. Useful when building anything from single inputs to multi-step flows. CX Codex +1 1,900installs aesthetic-usability Applies the Aesthetic-Usability Effect when visual polish affects perceived ease of use and trust. Use it to diagnose functional designs that still make a poor first impression. CX Codex +1 1,900installs information-architecture A skill that designs content structure: sitemap, navigation model, taxonomy and content types. Useful when you need to organise what already exists. CX Codex +1 1,900installs critique-composition Critiques balance, negative space, visual rhythm, and gestalt grouping on rendered screens. Useful when layout hierarchy is solid but the spatial composition still feels off. CX Codex +1 1,900installs critique-brand-consistency Compares a rendered screen against mood.md, voice.md and tokens.md, then points out where styling and copy drifted from the brand. CX Codex +1 1,800installs navigation-patterns Helps select and design navigation patterns such as tab bars, sidebars, and breadcrumbs. Useful when mapping user journeys across mobile and desktop interfaces. CX Codex +1 1,800installs motion-system Defines one set of durations, easing curves and reduced-motion rules for a product. Useful when every component animates on its own timing. CX Codex +1 1,800installs design-negotiation Helps designers advocate for UX quality, scope, and timelines when negotiating with PMs and engineers using evidence instead of personal taste. CX Codex +1 1,700installs

Project sponsors

Companies that keep this analytics open
Gold sponsor

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