figma-design-to-code

figma-design-to-code is a skill in Devin-AXIS/iPolloWork, last changed 15 Aug 2026. It is instructions only: no scripts, no named hosts and no pre-approved tools. Our pattern check flagged nothing at commit 0de1cc5 on 27 Oct 2026.

Pattern check: nothing flagged · commit 0de1cc5 · 27 Oct 2026

Install

From the author

Use this skill when implementing a Figma design as code (design → code) — the read-FROM-Figma direction. Triggers: 'implement this Figma design', 'build this screen from Figma', 'turn this Figma into code', 'code this up from Figma', 'design to code', or a figma.com design URL provided alongside a codebase. Encodes the workflow for reading a node out of Figma with get_design_context and adapting its reference output to the target project — reusing existing components, tokens, and conventions, and honoring Code Connect mappings, component docs, design annotations, and design tokens by priority. Complements figma-code-connect (component mapping) and figma-generate-design / figma-use (the reverse, code → design direction).

Licence: Licence not identified
Repo stars: 7.3k
Folder last changed: 15 Aug 2026 (opens in a new tab)
Publisher: Devin-AXIS
Files: 1 file
Checked: 0de1cc5 (opens in a new tab) · 27 Oct 2026

Install

Each tab says whether it installs commit 0de1cc5, the one we checked, or the latest version.

No tab for your agent? Use Any agent for OpenCode, Goose, Windsurf (Devin Desktop), Zed, Roo Code, Factory Droid, Junie, Amp and Antigravity, and Claude Code for Cline. Kiro needs the folder copied by hand.

Pinned to commit 0de1cc5, the one we checked.

From your project's root folder:

tmp="$(mktemp -d)" &&
  git clone -q --depth 1 --filter=blob:none --no-checkout https://github.com/Devin-AXIS/iPolloWork.git "$tmp" &&
  git -C "$tmp" fetch -q --depth 1 origin 0de1cc50c24395fed7cfbb21ff6d933cdce1f52e &&
  git -C "$tmp" sparse-checkout set -- examples/plugin-packages/figma/skills/figma-design-to-code &&
  git -C "$tmp" checkout -q 0de1cc50c24395fed7cfbb21ff6d933cdce1f52e &&
  mkdir -p .claude/skills &&
  mkdir .claude/skills/figma-design-to-code &&
  cp -R "$tmp"/examples/plugin-packages/figma/skills/figma-design-to-code/. .claude/skills/figma-design-to-code/ &&
  rm -rf "$tmp"

If Claude Code was already running and this created the skills folder, run /reload-skills.

Claude Code docs

Pinned to commit 0de1cc5, the one we checked.

Skills in the Claude apps belong to your account rather than to a project.

Make figma-design-to-code.zip, with the skill folder at the top level:

tmp="$(mktemp -d)" &&
  git clone -q --depth 1 --filter=blob:none --no-checkout https://github.com/Devin-AXIS/iPolloWork.git "$tmp" &&
  git -C "$tmp" fetch -q --depth 1 origin 0de1cc50c24395fed7cfbb21ff6d933cdce1f52e &&
  git -C "$tmp" sparse-checkout set -- examples/plugin-packages/figma/skills/figma-design-to-code &&
  git -C "$tmp" checkout -q 0de1cc50c24395fed7cfbb21ff6d933cdce1f52e &&
  out="$(mktemp -d)" &&
  cp -R "$tmp"/examples/plugin-packages/figma/skills/figma-design-to-code "$out"/figma-design-to-code &&
  (cd "$out" && zip -qr - figma-design-to-code) > figma-design-to-code.zip &&
  rm -rf "$tmp" "$out"

In Claude, open Customize > Skills, select +, then + Create skill > Upload a skill, and choose figma-design-to-code.zip.

On Free, Pro and Max plans, turn on Code execution and file creation (Create and edit files in newer settings) under Settings > Capabilities.

Claude apps docs

Pinned to commit 0de1cc5, the one we checked.

From your project's root folder:

tmp="$(mktemp -d)" &&
  git clone -q --depth 1 --filter=blob:none --no-checkout https://github.com/Devin-AXIS/iPolloWork.git "$tmp" &&
  git -C "$tmp" fetch -q --depth 1 origin 0de1cc50c24395fed7cfbb21ff6d933cdce1f52e &&
  git -C "$tmp" sparse-checkout set -- examples/plugin-packages/figma/skills/figma-design-to-code &&
  git -C "$tmp" checkout -q 0de1cc50c24395fed7cfbb21ff6d933cdce1f52e &&
  mkdir -p .agents/skills &&
  mkdir .agents/skills/figma-design-to-code &&
  cp -R "$tmp"/examples/plugin-packages/figma/skills/figma-design-to-code/. .agents/skills/figma-design-to-code/ &&
  rm -rf "$tmp"

Codex picks up new skills on its own; restart it if this one does not appear.

Codex docs

Pinned to commit 0de1cc5, the one we checked.

From your project's root folder:

tmp="$(mktemp -d)" &&
  git clone -q --depth 1 --filter=blob:none --no-checkout https://github.com/Devin-AXIS/iPolloWork.git "$tmp" &&
  git -C "$tmp" fetch -q --depth 1 origin 0de1cc50c24395fed7cfbb21ff6d933cdce1f52e &&
  git -C "$tmp" sparse-checkout set -- examples/plugin-packages/figma/skills/figma-design-to-code &&
  git -C "$tmp" checkout -q 0de1cc50c24395fed7cfbb21ff6d933cdce1f52e &&
  mkdir -p .cursor/skills &&
  mkdir .cursor/skills/figma-design-to-code &&
  cp -R "$tmp"/examples/plugin-packages/figma/skills/figma-design-to-code/. .cursor/skills/figma-design-to-code/ &&
  rm -rf "$tmp"

Cursor docs

Pinned to commit 0de1cc5, the one we checked.

From your project's root folder:

tmp="$(mktemp -d)" &&
  git clone -q --depth 1 --filter=blob:none --no-checkout https://github.com/Devin-AXIS/iPolloWork.git "$tmp" &&
  git -C "$tmp" fetch -q --depth 1 origin 0de1cc50c24395fed7cfbb21ff6d933cdce1f52e &&
  git -C "$tmp" sparse-checkout set -- examples/plugin-packages/figma/skills/figma-design-to-code &&
  git -C "$tmp" checkout -q 0de1cc50c24395fed7cfbb21ff6d933cdce1f52e &&
  mkdir -p .github/skills &&
  mkdir .github/skills/figma-design-to-code &&
  cp -R "$tmp"/examples/plugin-packages/figma/skills/figma-design-to-code/. .github/skills/figma-design-to-code/ &&
  rm -rf "$tmp"

In a running Copilot CLI session, run /skills reload.

Or install it with gh skill, which also installs the commit we checked. Needs GitHub CLI 2.90 or later.

gh skill install Devin-AXIS/iPolloWork examples/plugin-packages/figma/skills/figma-design-to-code/SKILL.md@0de1cc50c24395fed7cfbb21ff6d933cdce1f52e --agent github-copilot --scope project

Copilot & VS Code docs

Pinned to commit 0de1cc5, the one we checked.

From your project's root folder:

tmp="$(mktemp -d)" &&
  git clone -q --depth 1 --filter=blob:none --no-checkout https://github.com/Devin-AXIS/iPolloWork.git "$tmp" &&
  git -C "$tmp" fetch -q --depth 1 origin 0de1cc50c24395fed7cfbb21ff6d933cdce1f52e &&
  git -C "$tmp" sparse-checkout set -- examples/plugin-packages/figma/skills/figma-design-to-code &&
  git -C "$tmp" checkout -q 0de1cc50c24395fed7cfbb21ff6d933cdce1f52e &&
  mkdir -p .gemini/skills &&
  mkdir .gemini/skills/figma-design-to-code &&
  cp -R "$tmp"/examples/plugin-packages/figma/skills/figma-design-to-code/. .gemini/skills/figma-design-to-code/ &&
  rm -rf "$tmp"

In a running session, run /skills reload.

Or use Gemini CLI’s own installer. Installs the latest version, not the one we checked.

gemini skills install https://github.com/Devin-AXIS/iPolloWork.git --path examples/plugin-packages/figma/skills/figma-design-to-code --scope workspace

Gemini CLI docs

Pinned to commit 0de1cc5, the one we checked.

Codex, Cursor, Copilot, VS Code, Gemini CLI, OpenCode, Goose, Amp and Zed all read .agents/skills; Claude Code and Kiro list only their own folders.

From your project's root folder:

tmp="$(mktemp -d)" &&
  git clone -q --depth 1 --filter=blob:none --no-checkout https://github.com/Devin-AXIS/iPolloWork.git "$tmp" &&
  git -C "$tmp" fetch -q --depth 1 origin 0de1cc50c24395fed7cfbb21ff6d933cdce1f52e &&
  git -C "$tmp" sparse-checkout set -- examples/plugin-packages/figma/skills/figma-design-to-code &&
  git -C "$tmp" checkout -q 0de1cc50c24395fed7cfbb21ff6d933cdce1f52e &&
  mkdir -p .agents/skills &&
  mkdir .agents/skills/figma-design-to-code &&
  cp -R "$tmp"/examples/plugin-packages/figma/skills/figma-design-to-code/. .agents/skills/figma-design-to-code/ &&
  rm -rf "$tmp"

Or use the skills CLI from skills.sh. Installs the latest version, not the one we checked. The skills CLI reports installs to skills.sh unless you set DISABLE_TELEMETRY=1.

npx skills@1.7.4 add Devin-AXIS/iPolloWork --skill figma-design-to-code

Agent Skills docs

What it can touch

From the files and frontmatter at commit 0de1cc5. This is how much a skill can do, not whether it is risky.

What it can touch: Instructions only

It is instructions only: no scripts, no named hosts and no pre-approved tools.

Pattern check

Pattern check: nothing flagged · commit 0de1cc5 · 27 Oct 2026

We checked every text file in this skill, at commit 0de1cc5 on 27 Oct 2026, against 45 published patterns such as download-and-run commands, hidden text and credential access. We don't run the skill, we don't read the web pages it points to, and we can't judge everything its instructions might lead an agent to do. In published tests, pattern checks like this one missed most malicious skills. Read the skill before you install it — especially anything it asks you to download or run.

How the check works Report an incorrect finding

Format check

Each agent reads SKILL.md a little differently. We check the file against each one's published rules; we don't run the skill in any agent.

Agent Skills specPasses with warnings
The open format from agentskills.io, held to what the strictest agents enforce, so one folder loads everywhere.
- Warning
  Fields outside the spec: disable-model-invocation (read by Claude Code and VS Code). Uploads to the Claude apps and API, and the spec's validator, reject the file; most agents ignore these fields. O1
  Fix: Delete them for a portable skill, or keep them if you only target the agents that read them.
- Warning
  Paths that may not work once the skill is installed: line 9: ../figma-generate-design/SKILL.md (outside the skill folder). B6
  Fix: Use forward-slash paths relative to SKILL.md, and copy shared files into the skill.
- Note
  There is no license field, so readers can't tell whether they may reuse the skill. O2
  Fix: Add license: with an SPDX name such as MIT or Apache-2.0, or the name of a bundled licence file.
Claude CodePasses with warnings
Claude Code reads its own extra fields, ignores unknown ones, and still loads a skill whose frontmatter is broken, without its fields.
- Warning
  Paths that may not work once the skill is installed: line 9: ../figma-generate-design/SKILL.md (outside the skill folder). B6
  Fix: Use forward-slash paths relative to SKILL.md, and copy shared files into the skill.
Claude apps & API uploadFails
Uploading to claude.ai or the Claude API, or packaging with Anthropic's script, accepts only the six spec fields and stops on anything else.
- Error
  Upload and packaging fail on fields outside the spec: disable-model-invocation. O1
  Fix: Delete them, and keep your own data under metadata as text values.
- Warning
  Paths that may not work once the skill is installed: line 9: ../figma-generate-design/SKILL.md (outside the skill folder). B6
  Fix: Use forward-slash paths relative to SKILL.md, and copy shared files into the skill.
- Note
  The description is 729 characters. The claude.ai Help Center says 200 at most, though Anthropic's API docs and validator allow 1,024. D4
  Fix: If the claude.ai upload refuses it, trim the description to 200 characters.
OpenAI (Codex & API)Passes with warnings
Codex finds SKILL.md by its exact name and needs a description; OpenAI's Skills API checks the frontmatter against the spec and caps uploads.
- Warning
  Fields outside the spec: disable-model-invocation. Codex ignores them; OpenAI doesn't say whether its upload accepts them. O1
  Fix: Delete them, or move your own data under metadata as text values.
- Warning
  Paths that may not work once the skill is installed: line 9: ../figma-generate-design/SKILL.md (outside the skill folder). B6
  Fix: Use forward-slash paths relative to SKILL.md, and copy shared files into the skill.
VS Code & CopilotPasses with warnings
VS Code reads skills one folder below .github/skills, .claude/skills or .agents/skills and falls back to the folder name when the name is missing or differs; GitHub's Copilot docs require the exact name SKILL.md.
- Warning
  Paths that may not work once the skill is installed: line 9: ../figma-generate-design/SKILL.md (outside the skill folder). B6
  Fix: Use forward-slash paths relative to SKILL.md, and copy shared files into the skill.

SKILL.md

We only show SKILL.md text here when its licence clearly allows it.

Read SKILL.md on GitHub

Files

1 file

Path	Size
SKILL.md (opens in a new tab)	3.6 KB

More from Devin-AXIS/iPolloWork

acme-research
Devin-AXIS/iPolloWork
Search and summarize material from the Acme research service.
- Instructions only
Pattern check: Nothing flagged
No licence · 7.3k repo stars · Updated 15 Aug 2026
context7-docs-research
Devin-AXIS/iPolloWork
Resolve the correct library and retrieve a small, relevant set of version-aware official documentation before answering a technical question.
- Instructions only
Pattern check: Nothing flagged
No licence · 7.3k repo stars · Updated 15 Aug 2026
context7-version-aware-implementation
Devin-AXIS/iPolloWork
Use the current project dependency versions and Context7 documentation to implement or upgrade code without importing APIs from a different release line.
- Instructions only
Pattern check: Nothing flagged
No licence · 7.3k repo stars · Updated 15 Aug 2026
deepseek-harness
Devin-AXIS/iPolloWork
Let the OpenCode host delegate code review, development, and research tasks to DeepSeek Harness.
- Instructions only
Pattern check: Nothing flagged
No licence · 7.3k repo stars · Updated 19 Aug 2026
douyin-ops-dispatcher
Devin-AXIS/iPolloWork
通过 iPolloWork 已有日程和会话执行抖音运营任务，固定账号、运行标识和操作编号，避免发布与回复重复发送。用于抖音定时运营、日程发布或定期数据查询。
- Instructions only
Pattern check: Nothing flagged
No licence · 7.3k repo stars · Updated 4 Oct 2026
douyin-ops-worker
Devin-AXIS/iPolloWork
用户说“发布抖音”“发到抖音”或生成视频后发布时优先使用。先复用插件已有登录账号，保存草稿、创建发布任务，再走 API 或插件账号浏览器，所有结果和验证码阻塞都回写运营台。也用于抖音搜索、数据、评论和账号登录。
- Names web addresses
Pattern check: Nothing flagged
No licence · 7.3k repo stars · Updated 12 Oct 2026

All skills in Devin-AXIS/iPolloWork

Install

What it can touch

Pattern check

Format check

SKILL.md

Files

More from Devin-AXIS/iPolloWork

acme-research

context7-docs-research

context7-version-aware-implementation

deepseek-harness

douyin-ops-dispatcher

douyin-ops-worker