run-figma-designs

Community

Instantly preview Figma exports as a local React app.

Authoradamway
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill enables users to quickly visualize Figma Make exported prototypes directly in a browser, eliminating manual scaffolding steps.

Core Features & Use Cases

  • Automatic scaffolding: Adds missing configuration files such as index.html, main.tsx, and necessary scripts for Figma exports.
  • Dependency installation: Installs required dependencies like React, React DOM, TailwindCSS, and Vite based on project requirements.
  • Development server startup: Launches a background Vite dev server and provides the accessible URL for immediate preview.
  • Use Case: A designer exports a Figma prototype, and the developer scaffolds and views it in the browser with a single command, streamlining review and testing.

Quick Start

Execute the skill targeting your Figma export folder to scaffold and run the prototype in a local dev server.

Dependency Matrix

Required Modules

reactreact-domvitetailwindcss@vitejs/plugin-react

Components

scriptsreferences

💻 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: run-figma-designs
Download link: https://github.com/adamway/thoughts-cli/archive/main.zip#run-figma-designs

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.