design-narrative
April 1, 2026 · View on GitHub
A Claude Code skill that writes the design rationale behind a Figma file.
Most handoff docs describe what was built. This one argues why it was the right call — and where the feeling was designed in deliberately.
What it does
Reads a Figma file and writes a structured four-part narrative: the context, the insight that shaped the direction, the design decisions made, and where the emotional quality was deliberately placed.
The output is a markdown document ready to paste into Confluence, Notion, a PR description, or a client presentation.
The four parts:
| Part | What it covers |
|---|---|
| Context | The problem, the user, the moment — why this needed to exist |
| Insight | The single observation that made the solution obvious |
| Design response | The decisions made, what was rejected, what tradeoffs were accepted |
| Delight intention | Where the feeling was designed in, and what it's meant to make people feel |
Setup
- Install Claude Code
- Connect the Figma MCP server
- Add this skill to your Claude config:
{ "skills": ["path/to/design-narrative-figma/SKILL.md"] }
Usage
/design-narrative
Then provide your Figma file URL. Claude reads the design and writes the narrative — no prompting needed beyond the link.
You can also scope it:
"Write a design narrative for the onboarding flow in this file: [URL]"
Example output
# Design Narrative — Onboarding Redesign
## Context
New users were dropping off before completing setup — not because the product was
hard to use, but because the first five minutes felt like form-filling, not
arrival. The redesign treats onboarding as a first impression, not a gate.
## Insight
Users who saw value in the first session retained at 3× the rate of those who
didn't. The insight wasn't "simplify the form" — it was "get to value faster."
## Design response
We cut four setup steps and moved them to an opt-in post-activation flow.
The progress indicator was removed entirely — replacing it with a single
"you're almost there" moment that appears only once, at the right time.
## Delight intention
The completion screen uses the user's name and the specific action they just
completed — not a generic "you're all set." Small, but it signals: we were
paying attention.
MCP tools used
get_design_context get_metadata get_screenshot
By Marie Spreitzer · MIT License