Agent skill

Figma

Design-to-code workflow for Figma designs. An agent skill from epam/ai-dial-chat.

Apache-2.0Auto-check passedFrontend & Design

Install Figma

skills CLI

$ npx skills add epam/ai-dial-chat --skill figma -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install epam/ai-dial-chat figma --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/epam/ai-dial-chat.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/figma .claude/skills/figma && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "figma" agent skill from https://github.com/epam/ai-dial-chat/tree/development/.claude/skills/figma into .claude/skills/figma/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "figma", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/epam/ai-dial-chat/tree/development/.claude/skills/figma

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add epam/ai-dial-chat --skill figma -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install epam/ai-dial-chat figma --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/epam/ai-dial-chat.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.claude/skills/figma .agents/skills/figma && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "figma" agent skill from https://github.com/epam/ai-dial-chat/tree/development/.claude/skills/figma into .agents/skills/figma/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "figma", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add epam/ai-dial-chat --skill figma -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install epam/ai-dial-chat figma --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/epam/ai-dial-chat.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.claude/skills/figma .cursor/skills/figma && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "figma" agent skill from https://github.com/epam/ai-dial-chat/tree/development/.claude/skills/figma into .cursor/skills/figma/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "figma", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/epam/ai-dial-chat.git --path .claude/skills/figma

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add epam/ai-dial-chat --skill figma -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install epam/ai-dial-chat figma --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/epam/ai-dial-chat.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.claude/skills/figma .gemini/skills/figma && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "figma" agent skill from https://github.com/epam/ai-dial-chat/tree/development/.claude/skills/figma into .gemini/skills/figma/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "figma", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install epam/ai-dial-chat figma

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add epam/ai-dial-chat --skill figma -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/epam/ai-dial-chat.git skills-src && mkdir -p .github/skills && cp -r skills-src/.claude/skills/figma .github/skills/figma && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "figma" agent skill from https://github.com/epam/ai-dial-chat/tree/development/.claude/skills/figma into .github/skills/figma/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "figma", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add epam/ai-dial-chat --skill figma -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install epam/ai-dial-chat figma --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/epam/ai-dial-chat.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.claude/skills/figma .opencode/skills/figma && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "figma" agent skill from https://github.com/epam/ai-dial-chat/tree/development/.claude/skills/figma into .opencode/skills/figma/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "figma", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: figma
GitHub stars: 504
Token cost: ~997 tokens
SKILL.md length: 475 words
Files: 1
Skills in repo: 18
Repo updated: Oct 7, 2026
First seen: Oct 7, 2026
Licence: Apache-2.0

At a glance

Design-to-code workflow for Figma designs. An agent skill from epam/ai-dial-chat.

Works in 4 steps: Fetch the design → Map to project components → Implement → …
The user shares a Figma URL
SKILL.md covers Overview, When to Use, Workflow and Constraints
Calls npm

What it does

Figma is an agent skill from epam/ai-dial-chat. Design-to-code workflow for Figma designs. Use when the user shares a Figma URL or asks to implement a design into the codebase.

Its SKILL.md is about 1000 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering Design to code. It works with Figma and Tailwind CSS. The repository describes itself as: A default UI for AI DIAL. The licence is Apache-2.0.

When your agent uses it

The user shares a Figma URL
Asks to implement a design into the codebase

Example prompts

“/figma”

Workflow steps

4 steps, taken from the step headings in SKILL.md.

Fetch the design
Map to project components
Implement
Verify

What it can do on your machine

Read from SKILL.md and the folder at commit 2d66a8d. It shows what the files ask for, not the result of running them.

Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
- npm
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use npm, which can reach the network depending on how they are called.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Figma loads about 997 tokens when it runs. Until then it costs about 34 tokens; SKILL.md has 475 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~34
When it runs · the whole SKILL.md, loaded when a task matches: ~997

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from epam/ai-dial-chat at commit 2d66a8d, republished under its Apache-2.0 licence (© epam). 475 words, ~997 tokens.

Download SKILL.mdSave it as .claude/skills/figma/SKILL.md (or your agent's skills folder).

name: figma
description: Design-to-code workflow for Figma designs. Use when the user shares a Figma URL or asks to implement a design into the codebase.

Figma Design-to-Code

Overview

Translate Figma designs into production-ready React components that match project conventions: React 19, Tailwind CSS, TypeScript, and @epam/ai-dial-ui-kit.

When to Use

User shares a figma.com URL
User says "implement this design" or "build this screen"
User asks to match a Figma component or layout

Workflow

Step 1 — Fetch the design

Call get_design_context with the fileKey and nodeId extracted from the URL.

URL parsing rules:

figma.com/design/:fileKey/...?node-id=:nodeId → replace - with : in nodeId
figma.com/board/:fileKey/... → FigJam file, use get_figjam instead

If the design context includes Code Connect snippets, prefer those — they map directly to codebase components.

Responsive variants. Before fetching, scan the file for sibling frames at mobile vs. desktop sizes (typically 375/390 and 1280/1440/1920). When both exist, fetch both node IDs and reconcile the divergences (layout swaps, hidden sections, drawer vs. sidebar) before writing code. When only desktop is provided, ask the user before deriving a mobile version rather than guessing. See .claude/skills/responsive-design/SKILL.md for the breakpoint mapping and decision rubric.

Step 2 — Map to project components

Before writing any new code, check whether ui-kit or existing project components cover the need:

Design need	Check first
Buttons, inputs, modals, icons	`@epam/ai-dial-ui-kit`
Generic icons	`@tabler/icons-react`
Layout, spacing, color	Tailwind CSS classes
Project-specific patterns	`libs/` and `apps/` in this monorepo

Grep the codebase before building from scratch:

Grep("ComponentName", path="libs/")

Step 3 — Implement

Write TypeScript + JSX; no plain JS
Use async/await with try/catch/finally for frontend async flows; avoid Promise chains with .then()/.catch()
Use Tailwind for all styling — no inline styles, no CSS modules unless they already exist in the target file
Do not copy raw hex colors from Figma; map to Tailwind tokens or CSS variables already in the project
Match the naming conventions of surrounding files (PascalCase components, kebab-case files)
Name React event callback props onEvent and component-local handlers handleEvent
Keep components small and focused — split at logical boundaries, not at line count
When implementing under libs/*, keep the component host-agnostic: no host-owned integration details such as /api URLs, generated clients, server-api imports, app contexts, auth/session/cookie/env access, feature flags, route/navigation knowledge, analytics/telemetry, SDK setup, platform bridges, app-specific URL schemes, or storage keys/schemas. Expose props/callbacks/resolved values for app behavior instead.

Show full SKILL.md (122 more words)Show less

Step 4 — Verify

After implementation:

Run npm exec nx lint <project> — fix any lint errors before reporting done
If the component has logic, add a unit test in the same lib
If the dev server is running, open the component in the browser and compare with the Figma screenshot at each breakpoint the design covers (360 / 768 / 1024 / 1280 / 2560 as applicable)

Constraints

Never use absolute positioning unless the Figma design explicitly requires it and no flex/grid alternative exists
Do not add new dependencies without asking — check if the need is already met
Pixel-perfect fidelity matters less than semantic correctness and accessibility
If the design is ambiguous or missing states (hover, disabled, error), flag them explicitly rather than guessing

Files

Just SKILL.md in .claude/skills/figma of epam/ai-dial-chat.

Open the folder on GitHubat commit 2d66a8d

Compare with similar skills

Figma next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Figma compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Figma this skillepam/ai-dial-chat	504	—	~997	Automated safety check: Pass	Apache-2.0	today
Design To CodeMigoXLab/coderio	114	2 repos	~1.2k	Automated safety check: Pass	Apache-2.0	4 mo ago
Figma Codegenawdr74100/figwright	982	—	~4.2k	Automated safety check: Pass	MIT	today
React Screenshot Recreatorbuildfastwithai/gen-ai-experiments	785	—	~2.9k	Automated safety check: Pass	MIT	15 days ago
FigmaJetBrains/skills	364	5 repos	~833	Automated safety check: Pass	Apache-2.0	3 mo ago
Figma To Codemajiayu000/spellbook	286	—	~2.1k	Automated safety check: Pass	MIT	today

Similar skills

Design To Code
MigoXLab/coderio
Pixel-perfect Figma to React conversion using coderio. An agent skill from MigoXLab/coderio.
114 GitHub starsUsed in 2 repos~1.2k tokens
Frontend & DesignAuto-check passed
Figma Codegen
awdr74100/figwright
Generate framework-aware code from a Figma design. An agent skill from awdr74100/figwright.
982 GitHub stars~4.2k tokensUpdated today
Frontend & DesignAuto-check passed
React Screenshot Recreator
buildfastwithai/gen-ai-experiments
Recreate a UI screenshot, mockup, or design image as production-quality React + TypeScript + Tailwind code with near-pixel-perfect visual fidelity.
785 GitHub stars~2.9k tokensUpdated 15 days ago
Frontend & DesignAuto-check passed
Figma
JetBrains/skills
Official
Use the Figma MCP server to fetch design context, screenshots, variables, and assets from Figma, and to translate Figma nodes into production code.
364 GitHub starsUsed in 5 repos~833 tokens
Frontend & DesignAuto-check passed
Figma To Code
majiayu000/spellbook
Extract Figma designs and generate production-ready React/Next.js components with TypeScript, Tailwind CSS, and pixel-perfect accuracy.
286 GitHub stars~2.1k tokensUpdated today
Frontend & DesignAuto-check passed
Figma use_figma Plugin API Rules
warpdotdev/warp
Required groundwork before any use_figma call: the rules and reference files for running JavaScript in a Figma file through the Plugin API without common failures.
65k GitHub starsUsed in 4 repos~4.4k tokens
Frontend & DesignAuto-check passed

Questions about Figma

What does Figma do?

Design-to-code workflow for Figma designs. An agent skill from epam/ai-dial-chat. Figma is an agent skill from epam/ai-dial-chat. Design-to-code workflow for Figma designs.

When should I use Figma?

Figma fits situations like: the user shares a Figma URL; asks to implement a design into the codebase.

How do I install Figma in Claude Code?

Run `npx skills add epam/ai-dial-chat --skill figma -a claude-code`. Or copy the skill folder (.claude/skills/figma in epam/ai-dial-chat) into .claude/skills/figma in your project. Claude Code loads it when a task matches its description.

How do I install Figma in Codex?

Run `npx skills add epam/ai-dial-chat --skill figma -a codex`. Or copy the skill folder (.claude/skills/figma in epam/ai-dial-chat) into .agents/skills/figma in your project. Codex loads it when a task matches its description.

Can I use Figma in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add epam/ai-dial-chat --skill figma -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/figma, .gemini/skills/figma, .github/skills/figma and .opencode/skills/figma in your project.

What does Figma need to run?

Going by SKILL.md and its folder, Figma needs the command-line tools its instructions call (npm).

Does Figma access the network?

SKILL.md contains no URLs. Its commands use npm, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Figma safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Figma use?

Figma is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Figma use?

About 997 tokens (SKILL.md is roughly 4k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Figma?

Skills that share tags, products or a category with Figma: Design To Code (MigoXLab/coderio, 114 stars), Figma Codegen (awdr74100/figwright, 982 stars), React Screenshot Recreator (buildfastwithai/gen-ai-experiments, 785 stars) and Figma (JetBrains/skills, 364 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Figma?

epam (a GitHub organization) maintains it in epam/ai-dial-chat, which has 504 GitHub stars. The repository holds 18 skills in this directory. The repository was last updated on October 7, 2026.

Source: epam/ai-dial-chat on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Figma

Facts

At a glance

What it does

When your agent uses it

Example prompts

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

Figma Design-to-Code

Overview

When to Use

Workflow

Step 1 — Fetch the design

Step 2 — Map to project components

Step 3 — Implement

Step 4 — Verify

Constraints

Files

Compare with similar skills

Similar skills

More from epam/ai-dial-chat

Related

Questions about Figma