MCP servers and skills: search, filter by where they run, and compare.
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
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
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
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
Helping the Agents Compose the Things
in the skill textcompose-preview-review`, `compose-preview-ci`, `compose-preview-design-board`, `compose-design-catalog`, `figma-catalog-import`, `design-parity-review`) are opt-in: add another `--skill `; the
SkillApache-2.0★ 118No 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
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
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 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
Fine-tune any UI component with an AI coding assistant through a design-tool-style control panel.
in the skill textcontrol categories** — typography, spacing, size, layout, radius, position/offset, shadow, frosted glass, color. - **Figma/PS interactions** — type-able number boxes, drag-to-scrub, linked corner radii, icon-based
SkillMIT★ 3Few starsNo key
热门Skills中文cn学习版+教程，提供7000+Skills，集成claude skills (18w+Star) | ui-ux-pro-max-skill (13w+Star)等10余个热门Skill项目
in the skill textweb-game/ │ │ │ └── SKILL_CN.md # Web 游戏开发 │ │ ├── doc/ │ │ │ └── SKILL_CN.md # DOCX 文档处理 │ │ ├── figma/ │ │ │ └── SKILL_CN.md # Figma 设计工具 │ │ ├── figma-implement-design/ │ │ │ └── SKILL_CN.md # Figma 设计实现 │ │ ├── gh-address-comments/ │ │ │ └── SKILL_CN.md # GitHub 评论处理
SkillMIT★ 307No key
Run Claude Design locally as an Agent Skill — Cursor, Claude Code & more. Produce polished UI mockups, prototypes, decks & wireframes as self-contained HTML, without claude.ai/design. Best with Opus o
in the skill textdesign system · Design system preview · Design Components (`.dc.html`) · Make tweakable | | **Import sources** | Figma `.fig` (offline decode) · GitHub repo · Existing HTML/CSS | | **Export & handoff** | Standalone HTML · PDF · PPTX
SkillMIT★ 4.4kNo key
Creates the Tamagui brand system for an Expo/React Native Power Apps mobile app, including design-system.md, tokens.ts, and an HTML gallery.
in the skill textlogo`, `--from-url`, `--design-spec`, `--from-canvas-app`, `--from-code-app`, `--from-figma`, `--stylesheet`, `--power-pages-mode` - Optional: `--refresh ` — palette | typography | components | density | negatives | motion - Optional
OfficialSkillMIT★ 1.0k in collectionNo key
Tutorials, Guides and Agent Skills Directories
in the skill textAPI - openai/spreadsheet - Create, edit, analyze, and visualize spreadsheets - openai/figma - Use the Figma MCP server to fetch design context - openai/figma-implement-design - Translate Figma designs into production-ready code
SkillMIT★ 6.3kNo key
Mobile AI Skills, Agents and workflow to help you build mobile apps and games faster. A collection of AI skills, agents, prompts, and workflows for Android, iOS, Flutter, React Native, Unity, and Unre
in the skill textregression test → deploy | | `app-launch` | Release build → SENTINEL → PERF → LAUNCHPAD → SCRIBE → /release-prep → store | | `figma-to-code` | Figma MCP setup → spec harvest → native implementation → visual and behavior
SkillMIT★ 30No key
High-value AI skills repository for Codex, Claude Code, OpenClaw, agents, prompts, and automation workflows. 高价值的 AI 技能库，涵盖 Codex、Claude Code、OpenClaw、代理、提示和自动化工作流程。
in the skill text与相关集成能力。 - `develop-web-game`：用于开发网页游戏原型、玩法循环、交互逻辑和前端实现。 - `figma`：用于处理 Figma 设计读取、解析、交付和实现协作。 - `figma-implement-design`：用于将 Figma 设计转化为可实现的前端界面和组件。 - `hermes-agent`：用于配置、扩展、调试和贡献 Hermes Agent
SkillMIT★ 73No key
🎯 The definitive collection of 50+ verified Awesome Claude Skills for Claude Code, Claude.ai, and API. Boost productivity with TDD, debugging, git workflows, document processing, and more. Community-
in the skill textJava admin app with the erupt framework, H2, CRUD, and permission models. | | figma-design-extract | Extract Figma values into a design specification mapped to the project
SkillMIT★ 549No key
Who stands behind it
Who stands behind it
