Skip to main content
skill CX Codex

develop-design-rationale — Claude Code skill: setup and usage

Captures the reasoning behind UX choices, evaluated alternatives, and accepted trade-offs. Useful before design reviews and stakeholder alignments.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓
npx skills add product-on-purpose/pm-skills --skill develop-design-rationale -a claude-code
Open on GitHub

What develop-design-rationale does

This skill structures the documentation of design decisions. It preserves institutional context: why a specific interface option was selected, what constraints guided the team, and what trade-offs were accepted. Output follows the structure from references/TEMPLATE.md, covering context, evaluation criteria, reversibility, and follow-up metrics.

The workflow follows seven clear steps. The agent begins by summarizing the decision in one sentence. It then outlines the background and at least two or three real alternatives. Next, it grades options against defined criteria and justifies why the winning approach was chosen.

For low-stakes, easily reversible UI tweaks, drafting a full rationale creates unnecessary overhead. Technical and architectural decisions also belong elsewhere — the author specifies develop-adr for technology selection instead.

What it helps with

  • document the reasoning behind major UX decisions
  • compare two or three interface alternatives fairly
  • record accepted trade-offs and reversibility status
  • retain design context to onboard incoming team members

Example prompts for the agent

  • Document the design rationale for replacing the accordion filter with a slide-over panel
  • Run develop-design-rationale to justify our new navigation pattern before the stakeholder review

How to install develop-design-rationale

1Skills CLI (Vercel)

npx skills add product-on-purpose/pm-skills --skill develop-design-rationale -a claude-code

2Manually: put the files in place

~/.claude/skills/develop-design-rationale/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/develop-design-rationale/

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

Questions about develop-design-rationale

How to install develop-design-rationale in Claude Code?

Run npx skills add product-on-purpose/pm-skills --skill develop-design-rationale -a claude-code. The tool adds the skill directly to your Claude Code environment.

What does develop-design-rationale do?

It creates a structured design rationale document based on references/TEMPLATE.md. The document captures context, alternatives considered, decision reasoning, and follow-up metrics.

When should you avoid this skill?

Do not use it for architecture or technology choices, where develop-adr is required instead. It is also unsuitable for trivial, easily reversible tweaks where recording notes in a ticket is sufficient.

Source text

SKILL.md · Apache-2.0
---
name: develop-design-rationale
description: Documents the reasoning behind design decisions including alternatives considered, trade-offs evaluated, and principles applied. Use when making significant UX decisions, aligning with stakeholders on design direction, or preserving design context for future reference.
license: Apache-2.0
metadata:
  phase: develop
  version: "2.1.0"
  updated: 2026-06-10
  category: specification
  frameworks: [triple-diamond, lean-startup, design-thinking]
  author: product-on-purpose
---
<!-- PM-Skills | https://github.com/product-on-purpose/pm-skills | Apache 2.0 -->
# Design Rationale

A design rationale document captures the "why" behind design decisions.the context, constraints, alternatives considered, and reasoning that led to a particular solution. While designs themselves show what was built, rationale documents preserve institutional knowledge about why it was built that way.

## When to Use

- When making significant UX decisions that affect user experience
- Before design reviews to prepare stakeholder discussions
- When multiple valid approaches exist and the choice needs justification
- To onboard new team members to existing design decisions
- When revisiting past decisions to understand original reasoning
- During design system evolution to document pattern choices

## When NOT to Use

- The decision is architectural or a technology selection -> use `develop-adr` (Nygard format)
- You need stakeholder alignment on the overall solution direction -> use `develop-solution-brief`
- You are documenting exploration findings rather than a decision -> use `develop-spike-summary`
- The decision is trivially reversible and low-stakes: a rationale document adds ceremony; record the reasoning in the PR or ticket instead

## Instructions

When asked to document design rationale, follow these steps:

1. **State the Decision**
   Begin with a clear, one-sentence summary of what design decision was made. This becomes the title and reference point for the document.

2. **Describe the Context**
   Explain the situation that prompted this decision. What problem were you solving? What constraints existed? What user needs informed the direction? Include relevant research findings.

3. **List Options Considered**
   Document at least 2-3 alternatives that were evaluated. For each option, describe what it would look like and its key characteristics. Be fair to all options.avoid strawmen.

4. **Define Evaluation Criteria**
   Specify how options were assessed: usability heuristics, technical feasibility, brand alignment, user research findings, business requirements, or design principles.

5. **Explain the Reasoning**
   Walk through why the chosen option best meets the criteria. Be explicit about trade-offs.what you gained and what you sacrificed. Acknowledge where the decision is reversible vs. irreversible.

6. **Document Trade-offs Accepted**
   Every design decision involves trade-offs. Name what you gave up and why it was acceptable. This honesty helps future teams understand constraints.

7. **Note Follow-up Considerations**
   Capture anything that needs attention later: metrics to watch, conditions that might warrant revisiting the decision, or related decisions to make.

## Output Format

Use the template in `references/TEMPLATE.md` to structure the output. A complete rationale fills every template section: Decision Summary; Context; Options Considered; Evaluation; Decision Rationale; Trade-offs Accepted; Reversibility; Follow-up Considerations; Supporting Materials; and Decision History.

## Quality Checklist

Before finalizing, verify:

- [ ] Decision is clearly stated in one sentence
- [ ] Context explains the "why now" and constraints
- [ ] Multiple alternatives are documented fairly
- [ ] Evaluation criteria are explicit
- [ ] Reasoning addresses why chosen option beats alternatives
- [ ] Trade-offs are honestly acknowledged
- [ ] A reader who inherits this design can reconstruct why the chosen option won without asking anyone

## Examples

See `references/EXAMPLE.md` for a completed example.

© product-on-purpose · Apache-2.0 · product-on-purpose/pm-skills

Similar skills

Everything for Design →

From the same set68

measure-dashboard-requirements Defines dashboard requirements by focusing on business questions, metric formulas, filters, and data sources. Useful when requesting reporting from analytics teams. CX Codex +1 756installs measure-experiment-design Produces an experiment design doc with variants, metrics, sample size and duration. Useful once the hypothesis is written and the test has not started yet. CX Codex +1 754installs deliver-release-notes Turns a changelog into release notes people actually read: what shipped, what got better, what got fixed. CX Codex +1 751installs foundation-persona Builds a product or marketing persona from one canonical template, with confidence levels, assumptions and open questions spelled out. Useful before a PRD or a launch. CX Codex +1 745installs measure-instrumentation-spec This skill spells out which analytics events to track, when they fire and what properties they carry. Useful before engineering starts on a feature. CX Codex +1 744installs measure-experiment-results Turns a finished experiment or A/B test into a readout with statistics, segment analysis and a ship, iterate or kill recommendation. CX Codex +1 742installs iterate-retrospective Facilitates and documents team retrospectives after sprints or milestones, capturing what worked, what failed, and who owns each follow-up action. CX Codex +1 741installs utility-mermaid-diagrams Guides product managers in building valid Mermaid diagrams across 15 supported formats for PRDs and technical specs. CX Codex +1 736installs

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