一键导入
ux-brief
Create a design brief from a problem statement, PRD, or feature idea. Produces a grounded brief tied to your product context, design system, and research.
用 Codex 或 Claude 帮你安装 复制这段 Prompt,粘贴到 Codex、Claude 或其他助手里,让它检查 Skill 页面并帮你完成安装。
菜单
Create a design brief from a problem statement, PRD, or feature idea. Produces a grounded brief tied to your product context, design system, and research.
用 Codex 或 Claude 帮你安装 复制这段 Prompt,粘贴到 Codex、Claude 或其他助手里,让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | ux-brief |
| description | Create a design brief from a problem statement, PRD, or feature idea. Produces a grounded brief tied to your product context, design system, and research. |
| version | 1 |
| user-invocable | true |
/ux-brief - UX Brief CreationTurn a problem statement, feature idea, or PM request into a structured design brief.
/ux-brief → Guided questions to build a brief from scratch
/ux-brief [describe the problem] → Skip questions you've already answered
/ux-brief [paste a PRD or feature spec] → I'll extract brief-worthy context from it
Output: Brief saved to outputs/briefs/[feature-name]-brief.md
Template: Based on templates/ux-brief-template.md
Time: 10–20 minutes for the first draft
Before drafting, check:
| Source | Files/Folders | What to extract |
|---|---|---|
| Product context | context-library/product-context-template.md | Users, platforms, business goals, design constraints |
| Research | context-library/research/ | Existing evidence for the problem, user quotes |
| Design system | context-library/design-system/principles.md | Principles that apply to this problem |
| Past decisions | context-library/decisions/ | Decisions that constrain the solution space |
| Related specs | context-library/design-specs/ | Prior work on adjacent problems |
| Storybook | context-library/design-system/storybook.md | Components that likely apply |
| Figma MCP (if connected) | Current design files | Existing flows or explorations for this area |
When starting from scratch, ask these in sequence. Don't ask all at once — start with 1–2, then follow up.
Round 1 (required):
Round 2 (scoping): 3. "What does success look like? How would you know it worked?" 4. "What's in and out of scope for this version?"
Round 3 (constraints): 5. "Any platform, timeline, component, or engineering constraints?" 6. "Who are the key stakeholders and what do they need?"
A complete brief includes:
Lead with the user's problem, not the solution. A brief that says "add a filter" is a solution, not a problem. A brief that says "operations managers lose 20 minutes a day hunting through unfiltered event logs" is a problem.
Be specific. Quote research. Use real numbers. "47% of sessions end without completing step 3" is better than "users struggle with the flow."
Scope aggressively. An explicit "out of scope" section prevents scope creep during design and review. Name things you've decided NOT to do.
Constraints upfront. If it must use existing Storybook components, say so in the brief. If it's mobile-only, say so. Engineers and reviewers shouldn't discover constraints in the spec.
Before writing the output file, verify:
After generating the brief, scan for:
# UX Brief: Exception Alert Filtering
Author: [designer]
Date: 2026-03-31
Status: Draft
## Problem
Operations managers reviewing daily exception reports spend an average of 18 minutes
searching through unfiltered event logs to find the items they need to act on.
User: Fleet ops manager at mid-market logistics company
Situation: Morning review of overnight exception reports (happens daily, first 30 min of day)
Pain: No filtering means scrolling through 200+ events to find the 8-12 that need action today
Evidence: Usability study 2025-11 (3/5 participants mentioned filtering unprompted);
support tickets: 14 in Q4 related to "can't find my items"
## Hypothesis
If we add rule-based filtering to the exception log, ops managers will spend under
5 minutes reviewing their daily exceptions because they can surface only their
priority queue without manual scanning.
...
Build or critique narratives using Storyteller Tactics (Pip Decks). Use when pitching ideas, structuring presentations, framing research share-outs, selling design decisions, motivating teams, or sharpening any story-shaped argument.
Ideate and critique data visualizations using Edward Tufte's principles. Use when designing charts, improving dashboards, checking graphical integrity, reducing chartjunk, or planning small multiples and high-density displays.
Heuristic and WCAG 2.1 AA accessibility review of UX specs, Figma flows, or described interactions. Tied to your design system's accessibility standards.
Review color usage in a design for semantic consistency, token adherence, and accessibility. Works from attached images, specs, or Figma files.
Connect MCPs for real-time tool integration — Figma (primary), Storybook, research tools, and project management
Review microcopy, labels, error messages, and content hierarchy in a design or spec. Grounded in your writing styles, design principles, and component UX guidance.