figma-mcp skills

noemuch/bridge

Skill Claude CodeCodex

Part of bridge

Use when the user requests to design, create, build, generate, or make a new Figma component or screen — including phrases like "make a button", "design a settings page", "build a new card", "generate X". Produces a CSpec, compiles it to a scene graph, executes it in Figma via MCP, and verifies the output.

noemuch/bridge

Skill Claude CodeCodex

Part of bridge

Use when the user says they adjusted the design in Figma, mentions "fix", "correct", "learn from", "I changed", "diff", "what changed", or wants the system to incorporate manual Figma edits back into the spec. Diffs the current Figma state against the last snapshot, classifies each change as a DS learning or a…

noemuch/bridge

Skill Claude CodeCodex

Part of bridge

Use when the user says "done", "ship it", "finish", "complete", "archive", or otherwise indicates the current design is ready to be shipped. Runs final verification (Gate B), archives the CSpec, updates history, extracts a recipe when eligible, and cleans up temp files.

natdexterra/work-with-design-systems

Skill Claude CodeCodex

Inspect, build, or extend Figma design systems — and optionally sync them to code. Two modes in one skill: inspect mode (read-only audits with WCAG checks, component scoring, detached instance detection, handoff docs) and build mode (creating components with variable bindings, slot-based composition, structured…

southleft/skills-for-figma

Skill Claude CodeCodex

Analyze a Figma COMPONENTSET as a state machine for code generation — extract variant axes (state/size/etc.), map state variants to CSS pseudo-classes (hover→:hover, focus→:focus-visible, disabled→:disabled, error→[aria-invalid]), and compute per-variant visual diffs (only what changes per state). Use when generating…

southleft/skills-for-figma

Skill Claude CodeCodex

Extract a single Figma component (or any node) as a full recursive tree to N levels deep — every child's layout, fills/strokes/effects, typography, resolved bound variables (token names + code syntax), INSTANCE mainComponent references, prototype reactions, and annotations. Use when you need maximum-fidelity data to…

southleft/skills-for-figma

Skill Claude CodeCodex

Bootstrap a complete design-token system in Figma in one atomic step — create a variable collection, its modes (e.g. Light/Dark), and every variable with per-mode values together. Use when starting a token system from scratch: triggers 'set up design tokens in Figma', 'create a token collection with light and dark…

let-sunny/canicode

Skill Claude CodeCodex

Part of canicode

Run a gotcha survey on a Figma design — Q&A workflow that captures designer/developer answers locally in .claude/skills/canicode-gotchas/SKILL.md so figma-implement-design can read them at code-gen time. Memo-only: this skill never writes to the Figma canvas. TRIGGER when: the user shares a figma.com/design/... URL…

let-sunny/canicode

Skill Claude CodeCodex

Part of canicode

Run the full design-to-code roundtrip — analyze a Figma design, surface gotchas, write designer answers back into the file via the Figma Plugin API (usefigma), re-analyze to confirm the gotchas were captured, hand off to figma-implement-design, then optionally register a Code Connect mapping pointing the Figma…

let-sunny/canicode

Skill Claude CodeCodex

Part of canicode

Analyze a Figma design for development-friendliness and AI-friendliness — produces a graded readiness report listing rule-based issues with severity, affected nodes, and fix suggestions. Read-only: this skill never modifies the Figma file. TRIGGER when: the user shares a figma.com/design/... URL and asks to analyze…

prasantloki/figjam-builder

Skill Claude CodeCodex

Build OR modify FigJam boards via the Figma Plugin API. Use when asked to create, edit, extend, restructure, add content to, or fix layout in a FigJam board — initial creation OR follow-up changes. Triggers on "make a FigJam", "build a board", "add to this FigJam", "update this FigJam", "fix the layout"…

Klionskiy/claude-mobile-mvp-skills

Skill Claude CodeCodex

Part of mobile-mvp-product

This skill should be used when the user wants Claude Code to review a mobile app MVP, product concept, Figma design, feature list, App Store submission plan, or competitor-inspired app for App Store readiness, differentiation, thin-wrapper risk, and practical release scope.

Klionskiy/claude-mobile-mvp-skills

Skill Claude CodeCodex

Part of mobile-mvp-product

This skill should be used when the user wants Claude Code to create, improve, audit, or structure mobile app interfaces in Figma using Figma MCP. It is best for iOS or Android MVP screens, onboarding, paywalls, home screens, practice flows, settings, empty states, design systems, and handoff-ready mobile UI.

Klionskiy/claude-mobile-mvp-skills

Skill Claude CodeCodex

Part of mobile-mvp-product

This skill should be used when the user wants Claude Code to convert approved Figma mobile app screens into production-ready SwiftUI code, map Figma components to SwiftUI views, or implement iOS screens based on a Figma file using Figma MCP.