How do I install the Figma Design Brief skill?

Run npx skillmds@latest add majiayu000/figma-design-brief in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Figma Design Brief safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Figma Design Brief?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Figma Design Brief free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Figma Design Brief?

majiayu000 (@majiayu000) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Figma Design Brief by majiayu000 — Agent Skill

Name: Figma Design Brief
Rating: 4.2 (5 reviews)
Author: majiayu000

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.

majiayu000 Updated Sep 9, 2026 567 repo stars

File contents

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
[Component]	Yes/No/Needs variant	Use/Create/Extend

6. Constraints and Requirements

Must haves: [Non-negotiable constraints]
Must avoid: [Design patterns to not use]
Accessibility: [WCAG level, touch target sizes]

7. Open Questions

[Question — with owner]

Quality Checks

Goal is outcome-focused (not "design the feature")
All flows include edge cases
Components table identifies create vs reuse
Constraints include accessibility requirements
Open questions have owners

Example Trigger Phrases

"Write a design brief for [feature]"
"Turn this PRD into a Figma design brief"
"Brief the designer on what to build for [requirement]"
"Create a design spec for [feature] for Figma"
"What does the designer need to know to design [feature]?"

---name: figma-design-briefdescription: 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.--- # 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 | |---|---|---| | [Component] | Yes/No/Needs variant | Use/Create/Extend | ### 6. Constraints and Requirements - Must haves: [Non-negotiable constraints] - Must avoid: [Design patterns to not use] - Accessibility: [WCAG level, touch target sizes] ### 7. Open Questions - [ ] [Question — with owner] ## Quality Checks - [ ] Goal is outcome-focused (not "design the feature") - [ ] All flows include edge cases - [ ] Components table identifies create vs reuse - [ ] Constraints include accessibility requirements - [ ] Open questions have owners ## Example Trigger Phrases - "Write a design brief for [feature]" - "Turn this PRD into a Figma design brief" - "Brief the designer on what to build for [requirement]" - "Create a design spec for [feature] for Figma" - "What does the designer need to know to design [feature]?"

Frequently asked questions