design-brief-to-figma

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.