design-brief
Design Brief Workflow
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.
1. Context & Setup
- Alignment: Consider all relevant details about the product or project you have access to.
- Visual Baseline: If a Figma link is provided and Figma MCP is set up, analyze it before writing.
- The Core Tension: Before writing, identify the central conflict. Why is this hard? (e.g., "We need to show complex data without overwhelming the user.")
2. Create the Design Brief
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):
- Use spare, direct, and powerful writing style.
- Keep sentences under 15 words without losing impact.
- Cut adjectives and adverbs unless removing them changes the meaning.
- Tone: Professional, inspiring, precise. Write as a Senior Product Partner.
More from neversight/skills_feed
ai-image-generation
|
7react-best-practices
Provides React patterns for hooks, effects, refs, and component design. Covers escape hatches, anti-patterns, and correct effect usage. Must use when reading or writing React components (.tsx, .jsx files with React imports).
7ui-designer
Use when user needs visual UI design, interface creation, component systems, design systems, interaction patterns, or accessibility-focused user interfaces.
7python-env
Fast Python environment management with uv (10-100x faster than pip). Triggers on: uv, venv, pip, pyproject, python environment, install package, dependencies.
7typescript-best-practices
Provides TypeScript patterns for type-first development, making illegal states unrepresentable, exhaustive handling, and runtime validation. Must use when reading or writing TypeScript/JavaScript files.
6ai-marketing-videos
|
6