メニュー
7 official Figma skills for design-to-code and code-to-design workflows. Covers Figma Plugin API scripting, design implementation, library generation, Code Connect component mapping, and design system rules creation.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Catalogue navigator for design-agent-skills. Lists available design skill stubs, matches user intent to the right stub, and routes to install and invoke. Use when the user wants to browse or find the right design skill.
Domain navigator for UI craft, visual design, brand, color, typography, mobile design, and interactive design engineering skills. Routes to skills for taste-driven UI, platform design (iOS/Android), components, color science, and the full visual design stack.
Create programmatic videos with React. Official Remotion skill package — compose video sequences using React components, animate with spring physics, and render to MP4/GIF. Ideal for product demos, explainers, and data-driven videos.
SwiftUI visual design skill for distinctive iOS/macOS interfaces that avoid generic AI-slop patterns. Covers design direction, layout systems, typography, color, spacing, brand integration, and design review.
6 web quality skills from Google Chrome's Addy Osmani: accessibility (WCAG), web quality audit (Lighthouse-style), Core Web Vitals (LCP/INP/CLS), performance, SEO, and security best practices.
Validates animation durations, enforces typography scale, checks component accessibility, and prevents layout anti-patterns in Tailwind CSS. Ensures UI work meets baseline quality standards before shipping.
| name | figma-official-skills |
| description | 7 official Figma skills for design-to-code and code-to-design workflows. Covers Figma Plugin API scripting, design implementation, library generation, Code Connect component mapping, and design system rules creation. |
| triggers | ["Figma skill","figma-implement-design","figma-generate-design","Figma to code","code to Figma","figma-use","Figma Plugin API"] |
| das | {"category":"figma-code","upstream":"https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Dev-Mode-MCP-Server","version":"latest","install":false} |
Catalogue stub — full package: figma/skills
Run this before any Figma ↔ code workflow:
Is a Figma skill already installed?
Check: ~/.design-agent-skills/skills/figma-use/SKILL.md exists (representative skill).
Do you have shell access?
! — add -g for global install or omit for project-onlyInstall individual skills (recommended — install only what you need):
# Figma Plugin API scripting
npx skills add figma/figma-use
# Figma to production code with 1:1 fidelity
npx skills add figma/figma-implement-design
# Build/update Figma screens from code or description
npx skills add figma/figma-generate-design
# Build design system library in Figma from codebase
npx skills add figma/figma-generate-library
# Connect Figma components to code
npx skills add figma/figma-code-connect-components
# Generate project-specific design system rules
npx skills add figma/figma-create-design-system-rules
# Create a blank Figma/FigJam file
npx skills add figma/figma-create-new-file
| Skill | Invoke with |
|---|---|
figma-use | "run Figma Plugin API", "Figma script" |
figma-implement-design | "implement this Figma design", "Figma to code" |
figma-generate-design | "generate Figma design", "code to Figma" |
figma-generate-library | "build Figma library", "design system in Figma" |
figma-code-connect-components | "code connect", "link Figma to code" |
figma-create-design-system-rules | "Figma design system rules" |
figma-create-new-file | "create Figma file", "new FigJam" |
Official Figma skill suite covering the complete design ↔ code bridge. Converts Figma designs to production code with 1:1 fidelity, generates or updates Figma screens from code changes, builds design system libraries, connects Figma components to code components via Code Connect, and scripts the Figma Plugin API for custom automation.