skills.rest
dadafinger
dadafingerCOMMUNITY
Explore all skills by this author →
GitHub

planning-figma

Creates new three-section Figma frames from product spec HTML or markdown documents.

Updated May 10, 2026
Search Tags:#design system#figma#product planning#wireframe#mockup generation#spec document#frame creation
One-click install
npx skills add https://github.com/dadafinger/dadafinger-skills --skill planning-figma-dadafinger
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: planning-figma
Source: https://github.com/dadafinger/dadafinger-skills/tree/main/planning-figma
Command: npx skills add https://github.com/dadafinger/dadafinger-skills --skill planning-figma-dadafinger

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Turning a finished product spec (HTML or markdown) into a properly structured Figma frame is slow and error-prone when done by hand, especially when the frame must follow a strict three-part layout (header, wireframe mockup, Description column) and reuse official design system components instead of hand-drawn shapes. ## Core Features & Use Cases - New Figma frame generation: Builds a complete three-section frame (header row with Screen ID/Title/Author/Version, mockup body, Description column) from a spec HTML or markdown file. - Design system component reuse: Imports or clones components from the CCDS v1.1 component library via importComponentByKeyAsync, forbidding hand-drawn frames and text. - Four-way consistency validation: Verifies that markdown section numbers, HTML area numbers, Figma Description sections, and wireframe gutter markers all match one-to-one. - Use Case: After finalizing a spec markdown and its rendered HTML for a new report screen, run this Skill to generate a new Figma frame with the header, a mockup assembled from cloned DS components, and a Description column whose section numbers match the wireframe markers. ## Quick Start Take the finished spec HTML for the aggregation report screen and create a new three-section Figma frame from it using the CCDS components.

Frequently Asked Questions about planning-figma

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

FAQPage Schema
How do I convert a product spec document into a Figma frame?▼

Provide the finished spec HTML or markdown file, then the workflow runs a connection precheck, loads the figma-use guide, looks up clone source nodes in the node-registry, and generates a new three-section frame with header, mockup, and Description column.

How do I use design system components in Figma instead of drawing shapes manually?▼

Import or clone components from the CCDS v1.1 Components file using importComponentByKeyAsync or instance cloning. Hand-drawing frames and text with createFrame or createText is forbidden; cloning existing screens or DS instances is the required approach.

Can this workflow modify an existing Figma frame?▼

No, it is strictly for new frame creation in an empty area. Overwriting or deleting existing nodes is prohibited; incremental edits to existing frames are handled by the separate figma-change-flow workflow.

What happens if the Figma connection or OAuth token fails?▼

A connection precheck runs before any Figma write operation. If OAuth is expired or the connection is unstable, the workflow stops at the HTML/markdown stage and preserves the application plan instead of failing mid-write.

Why must Description section numbers match wireframe markers in Figma?▼

Matching numbers enforce four-way consistency: markdown headings, HTML area numbers, Figma Description sections, and mockup gutter markers must align one-to-one. A mismatch signals missing content and triggers a stop-and-check instead of silent divergence.

Related Skills

Explore More Product & Management Skills→
musingfoxmusingfox
2

doc-render

Render Markdown documents as formatted HTML pages with syntax highlighting, diagrams, and math.

Community
Advanced
CodeGeneration-2020CodeGeneration-2020
1

cgs.figma.link

Link Figma frames to the Screens section in spec.md.

Community
Advanced
kzytateishikzytateishi
5

figma-to-page

Translate Figma designs into frontend components with Playwright QA checks.

Community
Advanced
fen-zxfen-zx

lowfi-prototype-generator

Generates low-fidelity prototype specification documents from page specs and ASCII layouts.

Community
Intermediate