Skip to content
mcp/skillhub

Agent Skill

Figma Design To Code skill

figma-design-to-codeDevin-AXIS/iPolloWorkexamples/plugin-packages/figma/skills/figma-design-to-code/SKILL.md

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).

7.1k

always on

166 tokname + description

once used

638 tokSKILL.md body

bundled files

0

repo stars

7.1kGitHub

Install the Figma Design To Code skill

Skills CLI (Claude Code, Codex, Cursor and others)

npx skills add https://github.com/Devin-AXIS/iPolloWork --skill figma-design-to-code

Claude Code, by hand (all projects)

git clone --depth 1 https://github.com/Devin-AXIS/iPolloWork.git /tmp/iPolloWork
mkdir -p ~/.claude/skills
cp -R /tmp/iPolloWork/examples/plugin-packages/figma/skills/figma-design-to-code ~/.claude/skills/figma-design-to-code

For one project only, copy the folder into .claude/skills/ in that project instead. The agent picks it up when a task matches its description.

What it costs your context

Agent Skills load in three steps. Tokens counted with the o200k tokenizer; your model's count will differ a little.

WhenWhat loadsCost
Every sessionName and description166 tok
When the agent uses itThe SKILL.md instructions638 tok
Only if openedNo bundled files—

Until it is used, figma-design-to-code costs about 8.2× less than the median MCP server we measured (1,362 tokens on every turn). Installing all 102 skills from Devin-AXIS/iPolloWork would load 4,966 tokens of descriptions. Skills vs MCP study

Checks

Our checks found nothing to flag: it follows the Agent Skills specification's naming and size guidelines and doesn't pipe downloads into a shell.

Checked 2026-10-22 · method

What's inside

The headings of its SKILL.md. Read the full file on GitHub.

  • Implement a Figma Design as Code (Design → Code)
  • Direction and Scope
  • Workflow
  • 1. Call getdesigncontext first
  • 2. Treat the output as a reference, not final code
  • 3. Reuse what the project already has
  • 4. Honor the response hints by priority
  • Error Recovery

More skills from Devin-AXIS/iPolloWork

All skills in this repo
  1. acme-researchDevin-AXIS/iPolloWork

    Search and summarize material from the Acme research service.

    7.1k16 tok idle · 126 in use
  2. agent-first-screenshotsDevin-AXIS/iPolloWork

    Agent-first screenshots — an agent drives the real app via CDP and produces clean, defect-free product screenshots (newsletters, landing pages, social, decks, PR). Dual-channel verification (DOM + pixels + vision) in a capture loop. Use for any "take/redo screenshots of the app" task.

    7.1k269 tok idle · 1,128 in use
  3. context7-docs-researchDevin-AXIS/iPolloWork

    Resolve the correct library and retrieve a small, relevant set of version-aware official documentation before answering a technical question.

    7.1k29 tok idle · 99 in use
  4. context7-version-aware-implementationDevin-AXIS/iPolloWork

    Use the current project dependency versions and Context7 documentation to implement or upgrade code without importing APIs from a different release line.

    7.1k31 tok idle · 106 in use
  5. create-pluginDevin-AXIS/iPolloWork

    Create an OpenCode plugin for iPolloWork. Scaffolds the plugin file with the correct API shape, tool definitions, and hook registration. Use when the user asks to 'create a plugin', 'write a plugin', or 'make a plugin that does X'.

    7.1k58 tok idle · 1,227 in use
  6. daytona-chrome-cdpDevin-AXIS/iPolloWork

    Launch and control standalone Chrome in a Daytona sandbox via CDP. Use for web sign-in, OAuth, Den Web setup, browser-only flows, or when the app should not be driven through Electron CDP.

    7.1k49 tok idle · 556 in use
  7. daytona-cloud-serverDevin-AXIS/iPolloWork

    Daytona cloud server, Den sandbox, desktop plus cloud e2e, marketplace server, worker proxy, cloud auth, org policies, connect Electron to Den. Use for server-side setup in validated flows.

    7.1k45 tok idle · 598 in use
  8. daytona-devDevin-AXIS/iPolloWork

    Daytona development environment overview. Use when the user asks about Daytona setup, Daytona toolbox, dev environment, noVNC, CDP, server sandbox, secrets volume, Electron sandbox, standalone Chrome, validation, or artifacts volume.

    7.1k49 tok idle · 1,455 in use