“Figma”

This skill should be used when a task includes a Figma URL or node ID, or asks to "implement this Figma design", "convert this Figma section into a…

Use whenever working with Figma — implementing UI from a Figma URL or design, calling any Figma MCP tool (get_design_context, get_screenshot, get_metadata…

Use for "/build-figma", a figma.com/design URL with node-id, or "implement this Figma" into a web, desktop, or shared UI.

Figma MCP: list frames in a file and fetch one frame's JSON and image safely.

Use when 需要把现有 React、Vite、Next.js、V0 或 AI Studio 页面转换为 Figma Make 可导入的 .fig 资产，或补齐、更新、验证已有 Figma Make 导出壳和 canvas.fig。

Translates Figma designs into production-ready application code with 1:1 visual fidelity.

Implement a Figma UI in an existing frontend file, block by block; leave pending assets empty, bind prepared assets, and hand over for manual acceptance.

Use BEFORE any Figma MCP tool call during design-to-code work — reading, planning, or implementing a Figma design.

Read a Figma design offline from a .fig export — layer tree, copy, component properties, layout, colors, design-token names, and original vector or raster…

Figma MCP server with full read/write access via plugin bridge — no API token or rate limits.

Figma designs pulled once into a local vault; AI agents read them offline with no rate limits

Translate Figma nodes into production-ready code with 1:1 visual fidelity using the Figma MCP workflow (design context, screenshots, assets, and…

Judgement guardrails for implementing a component or page from a Figma design — token misses, missing states, convention drift, unbuilt features, and when to…

Keep Figma and code in sync — map the 3-tier DTCG tokens to Figma Variables (collections + modes), sync in either direction, use the Figma MCP when connected…

Optional Figma design context and visual acceptance for Android Compose UI.

Translates Figma designs into production-ready application code with 1:1 visual fidelity.

Use when implementing, reviewing, or planning Angular UI from a Figma link/frame using tds-ui components and tds-color tokens, updating/syncing TDS token JSON…

Prepare Figma bitmaps, SVGs, and videos for human-guided UI implementation; identify assets, validate their types, collect bitmap evidence, convert or…

Create a new blank Figma file.

Token-economical path when a screen/UC needs a visual design and no Figma frame covers it yet: ground a Figma Make prompt in the real, already-drawn chrome +…

Bidirectionally sync CSS custom properties with Figma variables — push local tokens to Figma, pull Figma changes to CSS, and diff for CI drift detection.

Use this skill when the user is about to do design work in Figma — creating or editing components, building layouts, working with variables/tokens, or…

Use this skill when implementing a Figma design as code (design → code) — the read-FROM-Figma direction.

Connects Figma design components to code components using Code Connect mapping tools.