skills.rest
vinhnxv
vinhnxvCOMMUNITY
Explore all skills by this author →
𝕏@vinhnxvGitHub

design-prototype

Convert Figma designs into React prototypes with Storybook stories.

6|3|Updated Feb 11, 2026
Search Tags:#automation#react#figma#storybook#ui-library#design-prototype
One-click install
npx skills add https://github.com/vinhnxv/rune --skill design-prototype
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-prototype
Source: https://github.com/vinhnxv/rune/tree/main/plugins/rune/skills/design-prototype
Command: npx skills add https://github.com/vinhnxv/rune --skill design-prototype

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Designers and developers struggle to translate Figma designs into interactive React components and Storybook documentation quickly. This skill automates that handoff by generating per-component prototypes and stories from Figma URLs, enabling faster validation of design intent and UI consistency.

Core Features & Use Cases

  • Generate React prototypes from Figma frames and components.
  • Create Storybook stories automatically for each prototype.
  • Produce a full-page composition when multiple components are combined, preserving layout intent.
  • Integrate with design tokens and design-system adapters to align with library components.

Quick Start

Provide a Figma URL (and optional text description) to generate prototypes and Storybook stories for your design.

Frequently Asked Questions about design-prototype

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

FAQPage Schema
How do I convert Figma designs into React prototypes?▼

You can convert Figma designs into React prototypes by providing a Figma URL to generate per-component prototypes and a full-page layout composition.

Can I automatically generate Storybook stories from my Figma frames?▼

Yes, you can automatically generate Storybook stories from Figma frames to validate design intent and document UI component consistency quickly.

What do I need to turn my Figma UI library into a React design-to-code pipeline?▼

You need a Figma URL or text description and a compatible design context to generate per-component prototypes and Storybook stories for your UI library.

Does this approach work with design tokens and full-page compositions?▼

Yes, it integrates with design tokens and design-system adapters to align with library components while preserving layout intent for full-page compositions.

What is the best way to automate the Figma to React handoff for my UI components?▼

Automating the Figma to React handoff involves generating per-component prototypes and Storybook stories directly from Figma URLs to enable faster validation.

Related Skills

Explore More Software Engineering Skills→
easingthemeseasingthemes
6

dx-figma-extract

Extract design context, tokens, and screenshots from a Figma URL.

Community
Advanced
oakossoakoss
1

storybook

Create Storybook stories and interaction tests for React components.

Official
Intermediate
engrateengrate
1

engrate-components

Integrate Engrate React components with design tokens and Tailwind CSS v4.

Official
Intermediate
nroze22nroze22
1

figma-to-code

Convert Figma designs into React/TypeScript components with Tailwind CSS and Storybook stories.

Community
Advanced