MCPInstall

service-blueprint

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.

Installs
1.8K
Last 24h
+24
Trending rank
#5032
Security
Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/owl-listener/designer-skills --skill service-blueprint
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads service-blueprint automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

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 MapService Blueprint
FocusUser experienceEntire delivery system
ActorsUserUser + employees + systems
PurposeUnderstand emotional journeyReveal operational gaps and dependencies
WhenResearch and ideationSystem 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

FAQ

What does the service-blueprint skill do?

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.

How do I install service-blueprint?

Run npx skills add https://github.com/owl-listener/designer-skills --skill service-blueprint in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/service-blueprint/ (personal) or .claude/skills/service-blueprint/ (project).

Which AI agents can use service-blueprint?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is service-blueprint safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains service-blueprint?

It is published by owl-listener in owl-listener/designer-skills. It has 1,784 recorded installs.

More from owl-listener/designer-skills

View all →

presentation-deck

owl-listener/designer-skills

Structure a design presentation for a specific audience and decision. Use when presenting internally. For a portfolio narrative use case-study; for the written argument use design-rationale.

Docs & Writing3.1K installs

typography-scale

owl-listener/designer-skills

Create a modular type scale with size, weight, and line-height relationships. Use when establishing typographic structure. For line length only use readable-measure; for judging type on an existing screen use critique-typography (visual-critique).

Frontend & Design2.6K installs

illustration-style

owl-listener/designer-skills

Define an illustration style guide — visual language, colour usage, and application rules. Use when commissioning or standardising illustration. For icons, use icon-system (design-systems).

Media & Creative2.6K installs

visual-hierarchy

owl-listener/designer-skills

Establish hierarchy through size, weight, colour, spacing, and position so the eye lands in the intended order. Use when composing new work. For judging an existing screen, use critique-visual-hierarchy (visual-critique).

Frontend & Design2.5K installs

color-system

owl-listener/designer-skills

Build a product colour system — tonal scales, semantic roles, and contrast compliance. Use when defining or rebuilding colour from scratch. For dark-mode adaptation use dark-mode-design; for chart palettes use data-visualization; for multi-brand token architecture use theming-system (design-systems).

Frontend & Design2.5K installs

dark-mode-design

owl-listener/designer-skills

Adapt an existing palette to dark mode — surface elevation, contrast rebalancing, and desaturation rules. Use when you already have a light palette to translate. For building the base palette first, use color-system.

Frontend & Design2.5K installs

Popular frontend & design skills

View category →

setup-matt-pocock-skills

mattpocock/skills

Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.

Frontend & Design1.1M installs

frontend-design

anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

OfficialFrontend & Design1M installs

hyperframes-animation

heygen-com/hyperframes

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

prototype

mattpocock/skills

Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.

Frontend & Design999.2K installs

hyperframes-core

heygen-com/hyperframes

The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.

Frontend & Design930.5K installs

vercel-react-best-practices

vercel-labs/agent-skills

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

OfficialFrontend & Design843.1K installs