304 tagged figma, measured the same way as everything else here.
Browse within: design-systems 125design-system 103design-tokens 95design-engineering 62product-design 61design 28figma-mcp 28figma-plugin 26apple 22ios-development 22design-tools 17android 16design-to-code 16ios 16
Skill Claude CodeCodex
Convert Figma designs to production-ready React components with Tailwind CSS. Use when user provides a Figma URL, asks to convert Figma designs to React/code, wants to extract components from Figma, or mentions "vibefigma". Requires a Figma access token (via --token flag, FIGMATOKEN env var, or .env file).
Skill Claude CodeCodex
Upgrade @figma/plugin-typings and absorb what the new version exposes. Diffs the .d.ts between the installed and the target version (that package ships no changelog), sorts the changes into breakage / new API / silently-added fields, maps each onto the sandbox handlers, the hand-written Zod mirrors in shared, and the…
Skill Claude CodeCodex
Upgrade @modelcontextprotocol/server (the MCP TypeScript SDK v2) and prove the wire contract survived. The SDK is a runtime dependency whose breakage lands on the wire, not in the type checker — so this sorts each release by which SDK source files it touched (Figwright uses only the server + stdio slice of a…
Skill Claude CodeCodex
Generate framework-aware code from a Figma design. Reads the project's stack profile and emits code matching the existing framework (React/Vue/Svelte/Next/etc.) and styling (Tailwind/CSS/CSS-in-JS), reusing existing components and design tokens instead of regenerating from scratch. Triggers whenever the user wants a…
Skill Claude CodeCodex
Control Figma via CLI — create shapes, frames, text, components, set styles, layout, variables, export images. Use when asked to create/modify Figma designs or automate design tasks.
Skill Claude CodeCodex
Generate a visual anatomy annotation in Figma showing numbered markers on a component instance with an attribute table. Use when the user mentions "anatomy", "anatomy annotation", "component anatomy", "create anatomy", or wants to annotate a component's structural elements.
Skill Claude CodeCodex
Generate color annotation specifications mapping UI elements to design tokens. Use when the user mentions "color", "color annotation", "color spec", "tokens", "design tokens", or wants to document which color tokens a component uses.
Skill Claude CodeCodex
Generate a visual property annotation in Figma showing each configurable property axis with component instance previews. Use when the user mentions "property", "properties", "property annotation", "create property", or wants to document a component's configurable properties visually.
Skill Claude CodeCodex
Primary/default skill for UI design, product design, web design, landing pages, dashboards, product screens, redesigns, visual polish, frontend/CSS styling, design systems, components, responsive design, typography, color, spacing, motion, icons, accessibility, copywriting, conversion, and anti-AI-slop work. Use this…
murphytrueman/design-system-ops
Skill Claude CodeCodex
Generate AI-optimised text descriptions for components, formatted for Figma's MCP server and LLM consumption. This produces prose descriptions in a six-section format (purpose, props, anti-patterns, composition, accessibility, examples), NOT JSON schemas or structured data files. Trigger when someone says: write…
murphytrueman/design-system-ops
Skill Claude CodeCodex
Write a one-page stakeholder brief translating design system health or status into business language. Trigger when someone says: stakeholder update, exec brief, leadership summary, status report for leadership, system status for non-designers, write a brief for the business, or anything about communicating design…
murphytrueman/design-system-ops
Skill Claude CodeCodex
Write a design system investment pitch with a business case and ROI framing. Trigger when someone says: pitch the design system, make the case for the system, sell this to leadership, justify the investment, business case for design systems, why should we invest in a design system, or anything about building an…
Skill Claude CodeCodex
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.
Skill Claude CodeCodex
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…
Skill Claude CodeCodex
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.
Skill Claude CodeCodex
Use when building Figma plugins, creating design automation tools, implementing sandbox/UI communication, or working with the Figma Plugin API for node manipulation, styles, and components.
wpgaurav/generateblocks-skills
Skill Claude CodeCodex
Convert Figma designs to GenerateBlocks V2 format for WordPress.
Skill Claude CodeCodex
REQUIRED reading before using figmaexecute. Contains API syntax, parameter formats, and examples. READ rules/.md files for correct usage.
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…
Skill Claude CodeCodex
A workflow for fixing cases where MasterGo design files do not import into Figma with the same visual result as a reference screenshot or structure.
scoobynko/claude-code-design-skills
Skill Claude CodeCodex
Generate production-ready React/Next.js code from Figma designs. Instructs proper Figma MCP tool usage, component reuse strategies, and variant mapping. CRITICAL: ALWAYS use this skill when user provides a Figma link or mentions implementing/redesigning from Figma design. Never attempt manual implementation without…
Skill Claude CodeCodex
Convert manual annotation markers (numbered or lettered dots with connected descriptions) into Figma's native dev-mode annotations using figma-mcp-rust. Use when a design contains hand-placed annotation markers that should become real Figma annotations.
Skill Claude CodeCodex
Best practices for creating and modifying Figma designs with the figma-mcp-rust tools. Use when building screens or UI in Figma (forms, login pages, cards, layouts), covering layout hierarchy, naming, containers, element creation order, and verification.
Skill Claude CodeCodex
Extract unique colors, font sizes, spacing, and radii from an existing Figma design and turn them into variable collections and named styles with figma-mcp-rust. Use when creating design tokens from a finished design, including the free-plan single-mode workaround for theming.