Does this skill require an existing Figma design system?

Yes, it requires a design system to be established first to ensure consistent visual language, tokens, and component usage across all generated feature files.

What type of information does it extract from specifications?

It parses structural elements like pages and screens, specific UI components, multi-step user flows, interaction triggers, and data display requirements like tables or charts.

Can it update existing Figma files or only create new ones?

The skill can iterate on existing mockups based on new feedback or start fresh, depending on the current approval status found in the specification metadata.

What are the technical prerequisites for using this skill?

You must have the Figma MCP server configured, a Figma personal access token in your environment, and an existing Wrangler specification containing UI requirements.

How does it track design approvals?

It stores the approval status and associated Figma file URLs within Wrangler's issue metadata, creating a synchronized audit trail between design and development.

Figma Design Workflow

Name: Figma Design Workflow
Author: bacchus-labs

bybacchus-labs

•

デザインツール

Generates production-ready Figma mockups from text specifications using a hierarchical design system architecture.

The Figma Design Workflow skill automates the transition from project specifications to visual design by parsing UI requirements and generating structured Figma frames. It bridges the gap between functional requirements and implementation, creating a master design system alongside feature-specific files. By extracting pages, components, and user flows directly from Wrangler specifications, it establishes a visual source of truth, tracks approval status in metadata, and provides a clear verification baseline for frontend developers.

主な機能

01Automated parsing of UI requirements from Wrangler specifications

02Hierarchical Figma file generation including master design systems and child feature files

03Automated generation of user flow annotations and interaction documentation

043 GitHub stars

05Metadata-based approval tracking to sync design status with issue trackers

06Intelligent component mapping using existing design system tokens and variants

ユースケース

01Generating high-fidelity UI mockups directly from functional requirement documents

02Synchronizing design approval status between Figma and project management tools

03Visualizing complex user flows and page interactions before implementation begins

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add bacchus-labs/wrangler figma-design-workflow

For use in Claude.ai and ChatGPT

Download Skill