Can I convert Figma styles to Tailwind configurations?

Yes, the skill includes a specific workflow to extract design tokens and convert them into a valid Tailwind CSS configuration object.

Do I need an API key for Rube MCP?

No, you simply add the Rube MCP endpoint to your configuration and complete the OAuth connection via the provided link when prompted by the skill.

Does this skill work with FigJam?

No, this skill currently only supports Figma Design files. FigJam boards and Figma Slides are not supported and will return 400 errors.

How do I handle dash-formatted node IDs from Figma URLs?

The skill provides a discovery tool to parse URLs, automatically converting dash-formatted IDs (e.g., 1-541) into the colon format (e.g., 1:541) required by the Figma API.

Are the rendered image URLs permanent?

No, rendered images are hosted on temporary URLs that typically remain valid for approximately 30 days.

Figma Automation & Design Systems

Name: Figma Automation & Design Systems
Author: JantonioFC

byJantonioFC

•

Herramientas de Diseño

Automates Figma design workflows, allowing developers to extract assets, design tokens, and file data directly through Claude.

This skill integrates Claude with the Figma API via Rube MCP, enabling seamless automation of design-related tasks. It allows developers to programmatically extract design tokens, render and download image assets, manage file comments, and convert Figma styles into development-ready Tailwind configurations. By bridging the gap between design and code, this skill streamlines UI implementation, asset management, and cross-team collaboration within a unified AI-driven environment, ensuring developers always have the most up-to-date design context without leaving their terminal.

Características Principales

01Parse design files to retrieve component data and file hierarchies

02Render and export Figma nodes into PNG, SVG, JPG, or PDF formats

03Discover team projects and styles to maintain design system consistency

042 GitHub stars

05Extract design tokens and convert them to Tailwind CSS configurations

06Automate comment management and version history tracking

Casos de Uso

01Syncing design tokens directly from Figma into a frontend codebase

02Automating feedback loops by posting and retrieving comments on specific design nodes

03Bulk exporting UI assets and icons for production-ready development

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add jantoniofc/skillsbank figma-automation

For use in Claude.ai and ChatGPT

Características Principales

01Parse design files to retrieve component data and file hierarchies

02Render and export Figma nodes into PNG, SVG, JPG, or PDF formats

03Discover team projects and styles to maintain design system consistency

042 GitHub stars

05Extract design tokens and convert them to Tailwind CSS configurations

06Automate comment management and version history tracking

Casos de Uso

01Syncing design tokens directly from Figma into a frontend codebase

02Automating feedback loops by posting and retrieving comments on specific design nodes

03Bulk exporting UI assets and icons for production-ready development

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add jantoniofc/skillsbank figma-automation

For use in Claude.ai and ChatGPT