Design Brief

Generate design briefs with JSON for Figma/Make and Markdown summaries.

Updated Feb 11, 2026
One-click install
npx skills add https://github.com/mjrtl/agentic_product_manager --skill design-brief-mjrtl
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: Design Brief
Source: https://github.com/mjrtl/agentic_product_manager/tree/main/skills/design-brief
Command: npx skills add https://github.com/mjrtl/agentic_product_manager --skill design-brief-mjrtl

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the creation of design briefs, ensuring consistency and providing machine-readable outputs for tools like Figma and Make, alongside human-readable summaries.

Core Features & Use Cases

  • Dual Output: Generates both JSON (for tools) and Markdown (for stakeholders).
  • Design System Integration: References and maps existing design system components and tokens.
  • Use Case: When kicking off a new feature design, use this Skill to generate a comprehensive brief that aligns product, design, and engineering, complete with specific design tokens and component references.

Quick Start

Use the Design Brief skill to generate a brief for the new user profile page feature.

Frequently Asked Questions about Design Brief

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

FAQPage Schema
How do I generate a design brief that works with Figma and Make?

Generate a design brief using this tool to produce machine-readable JSON for Figma and Make, alongside a human-readable Markdown summary for stakeholders. It maps existing design tokens and components directly into the brief for immediate tool integration.

What is a machine-readable design brief and why do I need JSON?

A machine-readable design brief uses JSON to structure design objectives, constraints, and tokens so tools like Figma and Make can automatically parse them. This format ensures channel consistency and accessibility gates without manual data entry.

How do I align product, design, and engineering when kicking off a new feature?

Align teams by generating a comprehensive design brief that defines objectives, constraints, deadlines, and stakeholders. The brief references specific design system components and tokens, ensuring engineering and design work from identical specifications.

Can I use my existing design system tokens and components in a new brief?

Yes, the brief generation integrates directly with your project's design system. It references and maps your existing design tokens and components into the documentation, ensuring the new feature adheres to established visual and functional standards.

Does this design documentation tool output Markdown for stakeholders?

Yes, the tool provides dual output, generating both machine-readable JSON for design tools and stakeholder-friendly Markdown summaries. The Markdown format clearly communicates objectives, deadlines, and constraints to non-technical team members.

What is the best way to document design constraints and accessibility gates?

Document constraints and accessibility gates by defining them within the generated design brief. The system integrates these requirements directly into the JSON and Markdown outputs, enforcing channel consistency and accessibility standards across the workflow.