Skills
.Work. You
Rest

design-prototype

Community

Turn Figma designs into ready React prototypes.

Software Engineering#automation#react#figma#storybook#ui-library#design-prototype
Authorvinhnxv
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: design-prototype
Download link: https://github.com/vinhnxv/rune/archive/main.zip#design-prototype

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.