skills.rest
pmlaowangba-lab
pmlaowangba-labCOMMUNITY
Explore all skills by this author →
𝕏@laowangbabababaGitHub

product-prototype-figma

Translate YAML UI specifications into Figma frames.

75|15|Updated Jul 9, 2026
Search Tags:#figma#yaml#product design#interactive design#ui prototyping
One-click install
npx skills add https://github.com/pmlaowangba-lab/laowangba-pmprototype-skill --skill product-prototype-figma
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: product-prototype-figma
Source: https://github.com/pmlaowangba-lab/laowangba-pmprototype-skill/tree/main
Command: npx skills add https://github.com/pmlaowangba-lab/laowangba-pmprototype-skill --skill product-prototype-figma

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires figma-api, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill automates the creation of B/C UI prototypes in Figma by translating structured YAML specifications into interactive Figma frames.

Core Features & Use Cases

  • YAML Spec Based Prototyping: Translate YAML formatted specifications into Figma frames.
  • B/C Design Support: Generate prototypes for both backend and consumer-facing UIs.
  • Visual Consistency: Ensure visual consistency with predefined design tokens and layouts.
  • Use Case: Use this Skill to create a high-fidelity UI prototype for a mobile app based on a YAML specification file.

Quick Start

Use the product-prototype-figma skill to generate a Figma prototype for the 'member-system.yaml' file.

Frequently Asked Questions about product-prototype-figma

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

FAQPage Schema
How do I generate Figma frames from YAML specifications?▼

Generating Figma frames from YAML specifications requires a tool that parses structured YAML layout data and translates it into interactive B/C UI prototypes. This approach automates the creation of high-fidelity designs via the Figma API.

Can I use YAML to automate UI prototyping in Figma for both backend and consumer apps?▼

Yes, you can use YAML to automate UI prototyping in Figma for both backend and consumer-facing applications. Structured YAML specifications ensure visual consistency with predefined design tokens across B/C interfaces.

Do I need Figma API access to create interactive prototypes from YAML files?▼

Yes, Figma API access is required to create interactive prototypes from YAML files. The prototyping workflow depends on the Figma API to translate structured YAML schemas into actual Figma frames and UI elements.

What is the best way to maintain visual consistency when creating Figma UI prototypes?▼

The best way to maintain visual consistency in Figma UI prototypes is by translating structured YAML specifications that include predefined design tokens and layouts. This enforces uniform styling across all generated frames.

How do I create a high-fidelity mobile app prototype using a YAML schema?▼

To create a high-fidelity mobile app prototype using a YAML schema, define your UI elements in a YAML specification file and use a translation tool to generate the corresponding Figma frames. This streamlines the B/C design workflow.

Related Skills

Explore More Design & Creative Skills→
speqqaispeqqai

figma-implement-design

Translate Figma design artifacts into production-ready React UI code.

Official
Advanced
bacchus-labsbacchus-labs
4

figma-design-workflow

Generate Figma mockups from wrangler specifications with design system integration.

Official
Advanced
manutejmanutej
61

figma-design

Automate Figma design workflows for plugin development and design-system management.

Community
Advanced
yairbedermanyairbederman

figma-to-code

Translate Figma designs into React and Vue UI components with token-driven styling.

Community
Advanced