figma-design-brief

Convert product requirements into structured Figma-ready design briefs.

1|Updated May 22, 2026
One-click install
npx skills add https://github.com/spontus-reach/spontus --skill figma-design-brief
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: figma-design-brief
Source: https://github.com/spontus-reach/spontus/tree/main/.agents/skills/figma-design-brief
Command: npx skills add https://github.com/spontus-reach/spontus --skill figma-design-brief

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It reduces the time and ambiguity between a product requirement and what a designer actually needs to build in Figma, ensuring teams align on goals, scope, flows, components, constraints, and measurable success criteria.

Core Features & Use Cases

  • Structured design brief generation: Converts a feature request or PRD snippet into a clear brief with design due dates, goals, context, and success criteria.
  • User flow and screen planning: Produces user flows with steps, entry/exit points, and edge cases, plus a screens table covering new vs update work.
  • Implementation-ready design guidance: Specifies components needed (reuse vs create/extend), constraints (including accessibility guidance), and open questions with owners.

Quick Start

Ask the skill to create a Figma design brief for the feature using your PRD snippet, target platform, and the desired design timeline.

Frequently Asked Questions about figma-design-brief

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I turn a PRD into a Figma design brief?

To turn a PRD into a Figma design brief, provide your product requirements, target platform, and timeline to generate a structured document with goals, user flows, screens, and success criteria.

What is included in a design brief for product handoff?

A design brief for product handoff includes design due dates, user goals, user flows with edge cases, a screens table for new or updated work, component reuse guidance, accessibility constraints, and open questions.

Can I generate UI component guidance for iOS, Android, and Web from a feature request?

Yes, you can generate UI component guidance for iOS, Android, and Web by translating feature requests into design specs that specify whether to reuse, create, or extend components for your chosen platform.

Does a Figma design brief cover accessibility constraints and edge cases?

Yes, a Figma design brief covers accessibility constraints and edge cases by integrating accessibility guidance into the design constraints and mapping edge cases within the generated user flow steps.

What is the best way to document UX flows and open questions for designers?

The best way to document UX flows and open questions is to structure them in a designer-ready brief that defines flow entry and exit points, assigns owners to open questions, and clarifies measurable success criteria.

Do I need existing UI components to create a design spec for responsive experiences?

No, existing UI components are optional inputs for creating a design spec for responsive experiences; the brief can specify whether to reuse available components or create new ones based on your current design system.