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

okestro-planning-figma

Creates new three-section Figma frames from CONTRABASS planning HTML or spec markdown files.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Converting finished planning documents (HTML or spec markdown) into Figma design frames is a repetitive manual task. This Skill automates the creation of a new three-section Figma frame (header, body mockup, Description) from a completed CONTRABASS planning document. ## Core Features & Use Cases - New Figma Frame Generation: Converts a finished planning HTML or spec md into a Figma frame structured as header, body mockup, and Description sections. - Guided Workflow: Runs a fixed sequence of connection precheck, figma-use loading, node-registry lookup, and three-section creation. - Use Case: After finalizing a spec md for a new console screen, ask the agent to render it in Figma, and it produces a fresh three-section frame ready for design review. ## Quick Start Convert my finished spec markdown file into a new Figma frame with header, body mockup, and Description sections.

Frequently Asked Questions about okestro-planning-figma

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

FAQPage Schema
How do I convert a spec markdown file into a Figma frame?▼

Provide the finished spec md or planning HTML and request a new Figma frame. The workflow runs a connection precheck, loads figma-use, looks up the node registry, then creates the three-section frame with header, body mockup, and Description.

What Figma frame structure does the planning workflow create?▼

It creates a three-section frame consisting of a header, a body mockup, and a Description section. This structure mirrors the CONTRABASS planning document layout for design review.

Can I edit an existing Figma node with this workflow?▼

No, this workflow only creates new Figma frames. Incremental modifications to existing Figma nodes are handled by the separate figma-change-flow skill.

Does the Figma generation workflow run standalone?▼

Yes, it can run independently when triggered by requests like creating a new Figma frame from HTML or spec md. Overall orchestration across the planning pipeline is handled by the okestro-planning-flow skill.

Why does the Figma frame creation fail at the start?▼

The workflow begins with a connection precheck to Figma, so failures usually come from a broken Figma connection or missing node-registry entries. Verify the connection and registry before retrying.

Related Skills

Explore More Design & Creative Skills→
pxlcrtivpxlcrtiv

writing-fragments

Collect writing fragments and append them to a markdown document.

Community
Basic
89jobrien89jobrien

edit-figma-design

Create and update Figma designs from natural-language descriptions via MCP.

Community
Intermediate
BEE-CODEDBEE-CODED
1

review

Analyzes code against specifications, standards, security, and TDD requirements.

Official
Advanced
dthompson-jtidthompson-jti

audit-performance

Audits web application performance bottlenecks including bundle size, render, network, and memory.

Community
Intermediate