MCP servers and skills: search, filter by where they run, and compare.
Wire any AI coding agent to Figma: probe/repair the Dev Mode MCP server across 8 agent harnesses, parse share links, call Figma MCP tools from plain bash, and pixel-diff designs against the build.
SkillMITFew starsNo key
Use the Figma MCP server to fetch design context, screenshots, variables, and assets from Figma, and to translate Figma nodes into production code. Trigger when a task involves Figma URLs, node IDs, d
OfficialSkillLink only★ 28k in collection
Use this skill alongside figma-use when the task involves translating an application page, view, or multi-section layout into Figma. Triggers: 'write to Figma', 'create in Figma from code', 'push page
OfficialSkillLink only★ 28k in collection
A collection of open source plugins, widgets, agent skills, and developer resources for Figma products that have been shared on GitHub.
OfficialSkillMIT★ 855No key
Create a new blank Figma file. Use when the user wants to create a new Figma design or FigJam file, or when you need a new file before calling use_figma. Handles plan resolution via whoami if needed.
OfficialSkillLink only★ 28k in collection
Translates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions "implement design", "generate code", "imple
OfficialSkillLink only★ 28k in collection
**MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `use_figma` tool call. NEVER call `use_figma` directly without loading this skill first. Skipping it causes common, hard-to-debug f
OfficialSkillLink only★ 28k in collection
Open-source agent skills for the native Figma MCP server — design tokens, components, accessibility, Slides, and FigJam.
SkillMIT★ 20No key
Connects Figma design components to code components using Code Connect mapping tools. Use when user says "code connect", "connect this component to code", "map this component", "link component to code
OfficialSkillLink only★ 28k in collection
Build or update a professional-grade design system in Figma from a codebase. Use when the user wants to create variables/tokens, build component libraries, set up theming (light/dark modes), document
OfficialSkillLink only★ 28k in collection
Generates custom design system rules for the user's codebase. Use when user says "create design system rules", "generate rules for my project", "set up design rules", "customize design system guidelin
OfficialSkillLink only★ 28k in collection
One Figma capture, six runnable outputs - HTML / Unity / Godot / Unreal / Cocos + a semantic UI-DSL, compiled from one pixel-faithful IR with declared interactions.
SkillMIT★ 10No key
Claude Code skills for automated design-to-code workflows.
in the skill textclaude-code-design-skills/figma-to-code ~/.claude-code/skills/ # Windows xcopy claude-code-design-skills\figma-to-code %USERPROFILE%\.claude-code\skills\figma-to-code\ /E /I ``` 3. Configure
SkillMIT★ 40No key
Catalogue francophone de skills portables pour Claude Code, Codex, Cursor, le Figma Agent et Figma Make, fondé sur le standard Agent Skills.
SkillApache-2.0★ 12No key
The last mile of the academic figure toolchain — a Claude Code skill that draws editable, paper-exact vector figures directly in Figma via MCP. 学术绘图工具链的最后一公里
SkillLink only★ 5
Design, implement, review, or refactor native macOS 27 Golden Gate interfaces in SwiftUI or AppKit. Use when a Mac app must match Apple''s current macOS 27 UI kit and restrained Liquid Glass language:
in the skill textcontext, a screenshot, and relevant variables for the smallest target node. Use `figma:figma-use`, `figma:figma-design-to-code`, or `figma:figma-swiftui` as appropriate
OfficialSkillMIT★ 40k in collectionNo key
Agent-first CLI for Figma: read designs, resolve design tokens, render screenshots, and export assets from the shell
SkillMIT★ 1Few starsNo key
SEED Design System
in the skill text엔진 - rootage — 토큰 빌드 엔진 (core·cli) - qvism — 스타일 레시피 엔진 (core·cli) - figma-extractor — Figma 변수 추출 - postcss-engaged · postcss-responsive — PostCSS 플러그인 **Documentation** - @seed
SkillApache-2.0★ 1.2kNo key
Claude Design DESIGN.md prompts by aesthetic family, remix recipes, skills, video teardowns, X signal, honest community takes.
in the skill textteardowns, and launch-week community signal. Claude Design shipped **April 17, 2026**. Figma closed **−4.26%** the same day. YouTube split between "RIP frontend developers" and "another
SkillMIT★ 1.1kNo key
Automate Electron desktop apps (VS Code, Slack, Discord, Figma, Notion, Spotify, etc.) using agent-browser via Chrome DevTools Protocol. Use when the user needs to interact with an Electron app, autom
OfficialSkillApache-2.0★ 44k in collectionNo key
Browser automation CLI for AI agents. Use when the user needs to interact with websites, including navigating pages, filling forms, clicking buttons, taking screenshots, extracting data, testing web a
in the skill textquality. Also use for automating Electron desktop apps (VS Code, Slack, Discord, Figma, Notion, Spotify), checking Slack unreads, sending Slack messages, searching Slack conversations, running browser
OfficialSkillApache-2.0★ 44k in collectionNo key
Claude skill that analyzes images, websites, and Figma files and generates a structured design.md with token system, component inventory, and reconstruction notes.
SkillMIT★ 218No key
7,400+ brand SVG icons for developers. Tree-shakeable, typed, open source. npm i thesvg
in the skill textlibraries focus on UI icons. Brand logos are scattered across press kits, Figma files, and random GitHub repos. **theSVG** is the single source for SVG icons
SkillMIT★ 2.8kNo key
Cross-runtime skills for Claude Code, Codex, and multi-agent workflows.
in the skill textmajiayu000/spellbook --skill frontend-design --skill app-ui-design --skill ui-design-system --skill figma-to-react ``` Use `npx skills add majiayu000/spellbook --list` to inspect the catalog
SkillMIT★ 287No key
Beautiful, consistent, pixel-perfect icons for every framework. 60,000+ icons (6,000+ free) for React, Vue, Svelte, Angular, React Native, Flutter and more.
in the skill textdevelopers.  **Browse icons →** · **Documentation →** · **Figma →** ## Why Hugeicons Every icon is hand-crafted for consistency, clarity, and balance, so your interface looks
SkillMIT★ 1.2kNo key
Official Sleek agent skill for creating and editing mobile app designs through the REST API. Includes account setup, screenshots and screen HTML.
SkillMIT★ 586No key
Spotkit — a Claude Code skill that turns a feature description into minimal, abstract SVG product illustrations that all belong to one design system.
in the skill textteams-1`) or their masks and filters cross-apply. ## Using these in Figma Copy the contents of any file in `examples/flat/light/` and paste onto a Figma
SkillMIT★ 84No key
A Claude AI skill that converts any design into production-ready WordPress Elementor templates
in the skill textPNG, JPG, WebP of a webpage or UI | Competitor page, inspiration screenshot | | 🎨 **Figma Export** | Figma design or component export | Client's Figma file | | 💻 **HTML / CSS
SkillMIT★ 43No key
Collection of Claude Code plugins for enhanced development workflows.
in the skill textnotifications, log analysis, and Xcode project editing. ## Available Skills ### design-compare Compare Figma designs against implementation screenshots with interactive HTML comparison reports. design-compare - Exports Figma
SkillMIT★ 40No key
Expert UX design and product management skills for AI assistants, built from the Uxcel learning library.
in the skill textrules an AI can actually apply. These skills work with Claude, Cowork, Figma Make, and any tool that loads skill files. **Who it is for
SkillMIT★ 31No key
A reusable Agent Skill for designing, reviewing, and implementing UI/UX with Google Material Design 3, Material You, M3 Expressive, accessibility, adaptive layouts, and semantic design tokens.
in the skill textagents - Product design workflows - Design-system generation - Material 3 UI reviews - Accessibility reviews - Figma-oriented design specifications - Android and Jetpack Compose planning - Web interfaces inspired
SkillMIT★ 147No key
frontend-craft is a universal frontend plugin that brings the same opinionated engineering standards to all 15 AI coding assistants.
in the skill textfrontend standards.  Node TypeScript React Vue Figma **🌐 Language / 语言 / 語言 / 言語 / 언어** **English** · 简体中文 · 繁體中文 · 日本語 · 한국어 Runtime compatibility and
SkillMIT★ 22No key
A visual interface for building software with Claude Code/Codex.
in the skill textOpenSSF Scorecard ](  ## Stop prompting. Start pointing. Visual Stack adds a Figma-like feedback layer to AI coding agents. Create a new screen
SkillMIT★ 11No key
🖼️ AI agent skill for Claude Code & Codex — turns raw app screenshots into store-ready App Store & Google Play marketing images: device frames (iPhone·iPad·Galaxy·Fold·Flip), app-matched backgrounds,
in the skill textEnglish** · 한국어 --- Making App Store and Google Play screenshots by hand — opening Figma, hunting for device mockups, double-checking pixel sizes — gets old fast. This skill
SkillMIT★ 89No key
The world's most intelligent frontend design skill for Claude Code: 18 libraries, 24 styles, 86 lint rules, WCAG science built-in.
SkillLink only★ 4Few stars
AI video editor for talking-head reels: 7 styles, face-safe captions, motion scenes, reverse-engineer any reference edit. A Claude Code / agent skill on HyperFrames.
in the skill textwith a loading bar stuck at 97%, a Photos memory). A red Figma selection box strikes out the words you reject. **Vector explainer** · *"make an animated
SkillMIT★ 69No key
Model-agnostic AI poster grid inspector: detect a poster's layout grid system with a vision model, view it overlaid, and export SVG guides / CSS Grid / Tailwind code. Ships as an installable agent ski
in the skill textbaseline, diagonal, golden ratio, rule of thirds, keylines, element boxes) — importable into **Figma / Illustrator**. - **CSS Grid** and **Tailwind** scaffold code — copy-paste to start building
SkillMIT★ 12No key
Claude Design: AI UI/UX architect. Screenshot to React, Figma components, Tailwind CSS generator. Prototyping agent, design systems, wireframe renderer. SVG icon creator, dark mode toggle, responsive
SkillMIT★ 84No key
Agent Skill for production-quality SVG character animation — morph state machines, idle motion, SwiftUI export
in the skill textExamples ### Critters A multi-character morph demo with source artwork available on Figma Community . - States: `examples/critters.states.js` ### Snowman A five-state character used to test path normalization
SkillMIT★ 27No key
Hexed is a Claude skill that extracts structured color systems from images and builds a complete design system.
in the skill textLight and dark UI themes - Exports to CSS variables, Tailwind config, or Figma tokens ## Installation ### For Claude Users Install Hexed from the Claude Skills marketplace
SkillMIT★ 3Few starsNo key
Pixel-faithful UI cloning skill for Claude Code, Cursor, Codex CLI, ChatGPT, and Copilot. Anti-hallucination contract + adversarial verification. Built on the SKILL.md open standard.
SkillLink only★ 15
Generate and integrate a polished semantic Home icon motion for React, Vue, Web Components, and video.
in the skill textcleanly back to rest.   or too long (every Figma iteration documented). This skill gives Claude the structure, tone, and storytelling conventions that
SkillMIT★ 25No key
Production Claude Code skills for n8n from a Verified Creator's 100+ workflows
in the skill texttypes, proper expressions, checkpoint tables, error branches, and retry logic. Not a Figma mockup of a workflow. A workflow. --- ## What's in the box | Skill | What
SkillMIT★ 32No key
A Claude skill that audits designs against 19 professional design rules.
SkillLink only★ 85
A community Claude Skill for Flutter mobile app development, Clean Architecture, Firebase, REST APIs, Laravel APIs, UI building, debugging, and publishing.
in the skill textapp architecture planning - Feature-first Clean Architecture - Flutter UI from screenshots, requirements, or Figma-style descriptions - REST API integration - Laravel API integration - Firebase Auth, Firestore, FCM
SkillMIT★ 3Few starsNo key
小红书封面生成与样图排版库扩充的 Codex / Claude Skill
in the skill text小红书封面生成，给我一段可以直接跑图的 prompt。 主题是：AI 写作效率提升。 ``` 想直接出图： ```text 小红书封面生成，直接帮我生成一张封面图。 主题是：再见了 Figma。 风格要有冲击力，标题要短。 ``` 想用样图扩充排版库： ```text 小红书封面拆解，拆解这张封面的排版方法： 1. 标题区、主体区、装饰元素分别怎么安排？ 2. 这种排版适合什么类型的选题
SkillMIT★ 12No key
Pixel-exact UI from design references, plus design audits and roasts. An agent skill for Claude Code, Codex and more.
in the skill textdesign references.** Give your coding agent a screenshot, a Dribbble shot, a Figma export, or a `design.md`, and get the *same* padding, borders, type, table style
SkillMITFew starsNo key
Who stands behind it
Who stands behind it
