skills/design-brief/SKILL.md
Create strategic design briefs that empower designers. Use when asked to write a design brief, product brief, feature brief for a new product, flow, or a feature. Triggers include "create a design brief", "brief for [feature]", or "design spec".
npx skillsauth add altshiftstudio/skills design-briefInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
Follow this workflow to create a strategic Design Brief that empowers designers to do their best work. This document moves beyond "requirements gathering" to define the core problems, the emotional goals, and the creative constraints.
Create a file briefs/[name]-brief.md in the project root. Create the briefs/ directory if it doesn't exist.
Writing Guidelines (unless instructed otherwise):
Articulate the core issue using this formula:
"I am [customer]. I am trying to [outcome/job]. But [problem/barrier] because [root cause] which makes me feel [emotion]."
Fill in all brackets with specifics. The emotion is crucial — it grounds the design in empathy.
Define what success looks like. Pair every goal with a measurable success criterion.
| Goal | Success Criteria | |------|------------------| | [What we want to achieve] | [How we'll measure it] |
Example: | Goal | Success Criteria | |------|------------------| | Reduce time to find order status | < 5 minutes per lookup | | Increase user confidence | NPS score > 40 |
What are we explicitly NOT building? Protect scope by listing features or approaches that are out of bounds.
Who: Describe the target persona with context (e.g., "The Overworked Workshop Manager who juggles 50+ orders daily").
Job Stories: Use this format:
"When [situation], I want to [motivation], so that [outcome]."
Describe the user flows as short stories. Focus on:
Output as a multi-level list. Avoid describing specific UI elements — focus on intent and emotion.
Consider non-ideal states the design must handle:
List anything that needs clarification from stakeholders before design can proceed.
tools
Design and manipulate Pencil (.pen) files using MCP tools. Use this skill when (1) creating UI screens, dashboards, or layouts in .pen format, (2) reading or modifying existing .pen designs, (3) working with design system components, (4) generating code from .pen files, or (5) understanding PEN file structure, tokens, or schema.
development
Create, edit, and manipulate Obsidian Canvas (.canvas) files. Use this skill when the user wants to visualize concepts, build flowcharts, or organize information spatially using the JSON Canvas format.
documentation
Generates non-obvious ideas using Verbalized Sampling (VS-CoT). Use when the user needs to brainstorm novel solutions, avoid stereotypical patterns, or write creatively.
testing
Create a durable handoff file that captures important conversation state for agent continuity. Use when the context window is getting full, when switching agents/sessions, when handing off work, or when asked to summarize progress without losing decisions, constraints, risks, and pending tasks.