figma-design-brief
Write a structured design brief for a Figma design task from a product requirement or feature request. Use when asked to write a design brief, create a design spec for Figma, turn a PRD into design requirements, or brief a designer on what to build in Figma. Produces a brief with goals, scope, user flows, components needed, constraints, and success criteria.
npx skills add mohitagw15856/pm-claude-skills --skill figma-design-brief --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Figma Design Brief Skill Converts a product requirement or feature request into a structured design brief — everything a designer needs to open Figma and start building confidently. ## Required Inputs - **Feature or requirement** (paste PRD snippet, ticket, or describe the feature) - **User goal** (what is the user trying to accomplish?) - **Platform** (iOS / Android / Web / Responsive / All) - **Existing components available** (optional) - **Timeline** (when does design need to be ready?) ## Output Structure ### 1. Brief Header Feature, PM, Designer, Platform, Design due, Dev handoff dates. ### 2. What We Are Designing and Why - **The goal:** [One sentence — user problem being solved] - **Context:** [2-3 sentences. Why now? What triggers this?] - **Success looks like:** [Specific observable outcome] ### 3. User Flows to Design **Flow N: [Flow name]** - Entry point: [Where user starts] - Steps: [Numbered key steps] - Exit point: [Where flow ends] - Edge cases: [empty state, error state, loading state] ### 4. Screens Required | Screen | New / Update | Notes | |---|---|---| | [Screen] | New | [Key requirement] | ### 5. Components Needed | Component | In library? | Action | |---|---
- Required Inputs
- Output Structure
- 1. Brief Header
- 2. What We Are Designing and Why
- 3. User Flows to Design
- 4. Screens Required
- 5. Components Needed
- 6. Constraints and Requirements
- 7. Open Questions
- Quality Checks
- Anti-Patterns
- Example Trigger Phrases
What does the figma-design-brief skill do?
Write a structured design brief for a Figma design task from a product requirement or feature request. Use when asked to write a design brief, create a design spec for Figma, turn a PRD into design requirements, or brief a designer on what to build in Figma. Produces a brief with goals, scope, user flows, components needed, constraints, and success criteria.
How do I install it?
Run `npx skills add mohitagw15856/pm-claude-skills --skill figma-design-brief --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From mohitagw15856/pm-claude-skills, a repository with 1,255 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.