skills.rest
PMDevSolutions
PMDevSolutionsOFFICIAL
Explore all skills by this author →
WebsiteGitHub

design-brief-to-figma

Convert design briefs into Figma files via HTML mockups and the Figma MCP.

7|1|Updated Mar 11, 2026
Search Tags:#figma#design-to-code#build-pipeline#design-brief#html-mockup#automated-design#figma-capture
One-click install
npx skills add https://github.com/PMDevSolutions/Aurelius --skill design-brief-to-figma
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-brief-to-figma
Source: https://github.com/PMDevSolutions/Aurelius/tree/main/.claude/skills/design-brief-to-figma
Command: npx skills add https://github.com/PMDevSolutions/Aurelius --skill design-brief-to-figma

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill eliminates the tedious manual work of creating Figma files from design briefs, which disrupts automated design-to-code pipelines and slows down app development.

Core Features & Use Cases

  • Automated HTML Mockup Rendering: Converts each page from the design brief into a high-fidelity, self-contained HTML mockup with exact design values and real content.
  • Pixel-Perfect Figma Capture: Automatically creates a new Figma file, hosts mockups on a local static server, and captures each page into Figma with perfect fidelity using the Figma MCP.
  • End-to-End Pipeline Integration: Seamlessly feeds the generated Figma file into the standard /build-from-figma pipeline for full automated app building.
  • Use Case: If you have a design brief for a customer dashboard app, use this Skill to generate a ready-to-use Figma file in minutes, so you can run the full 10-phase build pipeline without any manual design work.

Quick Start

Use the design-brief-to-figma skill to convert your existing design-brief.json and build-spec.json into a ready-to-use Figma file for the build pipeline.

Frequently Asked Questions about design-brief-to-figma

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

FAQPage Schema
How do I convert a design brief into a Figma file automatically?▼

To convert a design brief into a Figma file, the system renders the brief's pages as static HTML mockups, hosts them locally, and captures them into a new Figma file using the Figma MCP. This eliminates manual file creation and enables seamless design-to-code workflows.

What is the process for generating HTML mockups from a design brief?▼

Generating HTML mockups from a design brief involves converting each defined page into a self-contained HTML file with exact design values and real content. These mockups are hosted on a local static server to facilitate pixel-perfect Figma capture.

Do I need a build-spec.json file to create a Figma file from a design brief?▼

Yes, you need both a validated design-brief.json and a build-spec.json file to create a Figma file from a design brief. The process updates the build spec with Figma node IDs to ensure proper integration into the downstream build pipeline.

How does automated Figma capture work for app development pipelines?▼

Automated Figma capture works by hosting high-fidelity HTML mockups on a local static server and capturing each page directly into Figma via the Figma MCP. This process generates a new Figma file with node IDs integrated into your build spec for automated app building.

Can I use a generated Figma file for a full automated app build pipeline?▼

Yes, you can use the generated Figma file for a full automated app build pipeline. The file is created with exact node IDs mapped in your build spec, allowing it to seamlessly feed into the standard build-from-figma pipeline without requiring manual design work.

What are the limitations of using HTML mockups for Figma file generation?▼

Using HTML mockups for Figma file generation requires a local static server and relies on the Figma MCP for capture. This approach is limited to conversational app development scenarios where validated design-brief and build-spec JSON files already exist.

Related Skills

Explore More Design & Creative Skills→
PMDevSolutionsPMDevSolutions
7

tdd-from-figma

Generate failing test files from Figma design specifications.

Official
Advanced
PMDevSolutionsPMDevSolutions
7

figma-intake

Extract Figma file structure, design tokens, and component inventories into build-spec.json.

Official
Advanced
gitdukgitduk

implement-design

Convert Figma design data into production-ready UI components.

Community
Advanced
skeeper75skeeper75

moai-design-tools

Fetch Figma design context and export Pencil designs to React/Tailwind code.

Community
Advanced