natdexterra

natdexterra / generate-design-system

Public

MCP skill for generating complete design systems in Figma: tokens, variables, components with variants and auto layout

agent-skills claude-code design-system figma figma-mcp
17
1
100% credibility
Found Apr 02, 2026 at 17 stars -- GitGems finds repos before they trend. Get early access to the next one.
Sign Up Free
AI Analysis
JavaScript
AI Summary

A collection of instructions and scripts that guide AI chat tools to automatically create organized design systems in Figma, complete with colors, styles, components, and quality checks.

How It Works

1
💡 Discover the Helper

You learn about a smart skill that lets your AI buddy build a full set of design building blocks in Figma just by chatting.

2
🛠️ Add to Your AI Chat

You simply copy the skill into your favorite AI coding chat tool, like Claude or Cursor, to make it available.

3
💬 Kick It Off

In the chat, you type a friendly command like 'generate-design-system' and describe your brand's colors, fonts, and what you need.

4
Pick Your Path
🆕
Start Fresh

Share basic brand details like main colors and fonts to create everything new.

📂
Match Your App

Point to your app's style files so it copies your exact looks into Figma.

🔄
Improve Existing

Give a Figma file link to audit issues and add missing pieces.

5
🔍 Review the Plan

Your AI checks your info or file, spots any problems, and outlines the steps ahead, waiting for your thumbs up.

6
🏗️ Build Foundations

It sets up colors, sizes, text looks, and organizes pages into clear sections like foundations and components.

7
🎨 Create Components

The magic happens as it crafts buttons, cards, and more with every size, state, and mode, all neatly labeled.

8
✅ Quality Check

Finally, it runs a full review to confirm everything works smoothly in light and dark themes.

🎉 Perfect System Ready

You end up with a complete, professional design system in Figma that your team can use to build consistent apps.

Sign up to see the full architecture

7 more

Sign Up Free

Star Growth

See how this repo grew from 17 to 17 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 generate-design-system?

This JavaScript MCP skill lets AI agents like Claude Code, Cursor, or Codex generate a complete design system in Figma using AI—tokens, variables, text styles, components with variants, auto layout, and Light/Dark modes. You invoke it with a slash command like `/generate-design-system` and a prompt, such as "Build a fintech design system from our Tailwind config," and it handles discovery from codebases or websites, structured file organization, and QA audits. Developers get a production-ready Figma file fast, bridging design-to-code with proper variable scoping and code syntax.

Why is it gaining traction?

It stands out by generating design systems quickly in Figma from scratch, existing files, or code like React/Tailwind, with phased pauses for review and a built-in validation script checking scopes, bindings, and composability. Unlike manual builds or basic Figma plugins, it enforces best practices like 3-tier tokens and full state variants upfront, plus framework mappings for seamless handoff. The MCP integration with tools like GitHub Copilot in VSCode or IntelliJ hooks devs already using AI agents.

Who should use this?

Frontend devs syncing Tailwind or shadcn/ui libraries to Figma, product designers prototyping design systems quickly without token boilerplate, or small teams building from brand specs or websites. Ideal for those with Figma MCP server setup, tired of half-baked systems missing Dark mode or states.

Verdict

Try it for rapid prototyping if you're in the Claude/Cursor ecosystem—docs are solid and it's battle-tested on real systems—but low 17 stars and 1.0% credibility score mean it's early; fork and test thoroughly before production. Solid hook for AI generate system design workflows.

(198 words)

Sign up to read the full AI review Sign Up Free

Similar repos coming soon.