← ClaudeAtlas

design-brieflisted

Use when a feature, page, or product idea needs its user problem, experience direction, constraints, and scope captured before implementation.
DanielNoamTuby/claude-skills · ★ 0 · AI & Automation · score 62
Install: claude install-skill DanielNoamTuby/claude-skills
# Design Brief Create a shared design intent document for a feature or page. This is a design brief, not an implementation work order. ## Process 1. Ask what is being built, who it is for, and what constraints or ideas already exist. 2. Explore the project: tokens, themes, components, layouts, routes, fonts, dependencies, and existing pages. Extend its vocabulary rather than replacing it. 3. Interview until these decisions are clear: - primary user and job to be done; - success criteria; - emotional tone and anti-references; - device, accessibility, performance, and brand constraints; - real versus placeholder content; - important interaction and failure states. 4. Save the result as `DESIGN_BRIEF.md` in a short, lowercase, hyphenated feature folder such as `.design/settings-page/`. ## Template ```markdown # Design Brief: [Feature/Page Name] ## Problem [The user's friction, not the technical or business problem.] ## Solution [The experience that resolves it.] ## Experience Principles 1. [Principle] — [what it means in practice] 2. [Principle] — [what it means in practice] 3. [Principle] — [what it means in practice] ## Aesthetic Direction - **Philosophy**: [named philosophy or described vibe] - **Tone**: [emotional register] - **Reference points**: [what it should feel like] - **Anti-references**: [what it must not feel like] ## Existing Patterns - Typography: [current conventions] - Colors: [current tokens] - Spacing: [current scale] -