southleft

southleft / figma-console-mcp-skills

Public

The most powerful Figma Console MCP capabilities, repackaged as Markdown skills for the native Figma MCP server — design tokens, variables, component analysis, WCAG lint, a11y audits, version history, FigJam & Slides.

accessibility ai-tools claude design-systems design-tokens
18
1
89% credibility
Found Jun 01, 2026 at 18 stars -- GitGems finds repos before they trend. Get early access to the next one.
Sign Up Free
AI Analysis
JavaScript
AI Summary

This is a collection of 22 ready-to-use playbooks (called 'skills') that help AI assistants work with Figma design files. The skills handle common design-system tasks: exporting design tokens (colors, spacing) into code-ready formats like CSS or Tailwind; analyzing and organizing component variants; checking designs for accessibility issues like color contrast and focus indicators; reading and writing design annotations; and managing version history and comments. Most skills work automatically once you connect Figma to your AI tool, while four specialized skills (version history and comments) need a personal access token. The project is designed for designers and developers who want AI assistants to automate repetitive Figma tasks like token export, accessibility audits, and component documentation.

How It Works

1
🎨 You open your Figma design file

You work in Figma every day creating buttons, colors, and layouts for your product.

2
🤖 You ask your AI assistant for help

Instead of manually exporting everything, you type a simple request like 'export my design colors to CSS' or 'check if my button is accessible'.

3
✨ Your AI loads a ready-made playbook

The assistant picks up a skill that knows exactly how to work with Figma—reading your colors, components, and design system details.

4
What do you want to do?
🎨
Export & Sync

Turn your Figma colors and spacing into code-ready formats like CSS, Tailwind, or JSON

♿
Check Accessibility

Let the AI scan your designs for color contrast, focus states, and WCAG compliance

📦
Manage Components

Organize variants, add properties, or generate documentation for your design system

📝
Track Changes

See version history, compare changes, or read/post comments on your designs

5
⚡ The AI works its magic

Your assistant runs the skill, reading your Figma file and performing the task—whether that's extracting colors, checking accessibility, or organizing components.

6
📋 You get your results

The AI presents everything in a clear format—CSS code you can copy, an accessibility report with suggestions, or organized component documentation.

🎉 Your design work is synced and verified

Your Figma designs are now ready for developers, your components are organized, and your work meets accessibility standards—all without manual exporting or checking.

Sign up to see the full architecture

5 more

Sign Up Free

Star Growth

See how this repo grew from 18 to 18 stars Sign Up Free
Repurpose This Repo

Repurpose is a Pro feature

Generate ready-to-use prompts for X threads, LinkedIn posts, blog posts, YouTube scripts, and more -- with full repo context baked in.

Unlock Repurpose
AI-Generated Review

What is figma-console-mcp-skills?

A collection of 22 ready-to-use automation skills that extend the native Figma MCP server, letting AI coding assistants handle real design-systems work. Think tokens, variables, components, accessibility checks, version history, and FigJam content - all exposed as natural-language workflows. The package includes JavaScript and shell scripts that plug directly into tools like Claude Code, Cursor, and Gemini CLI without requiring the separate Figma Console MCP.

Why is it gaining traction?

The standout advantage is portability - these skills follow an open Markdown format that works across multiple AI agents, so teams aren't locked into a single vendor. Everything runs through Figma's Plugin API, meaning token exports and component analysis work on any Figma plan rather than demanding Enterprise access. The collection covers the full design-systems lifecycle: export tokens to CSS or Tailwind, audit for WCAG compliance, generate component documentation, compare designs against code implementations, and manage FigJam sticky notes.

Who should use this?

Design system maintainers managing large token libraries will find the export/import and batch-update workflows most valuable. Frontend developers bridging Figma and code will appreciate the design-parity checking. Accessibility specialists doing component audits will benefit from the automated WCAG checks with color-blind simulation.

Verdict

This is a practical toolkit for teams already using AI coding assistants with Figma, but its 18-star count indicates it remains early-stage. The credibility score of 0.8999999761581421% is low - use caution and test thoroughly before relying on it for critical workflows. MIT licensed.

Sign up to read the full AI review Sign Up Free

Similar repos coming soon.