Skip to content
mcp/skillhub

Agent Skill

Figma Generate Design skill

figma-generate-designDevin-AXIS/iPolloWorkexamples/plugin-packages/figma/skills/figma-generate-design/SKILL.md

Use this skill alongside figma-use when the task involves translating an application page, view, or multi-section layout into Figma. Triggers: 'write to Figma', 'create in Figma from code', 'push page to Figma', 'take this app/page and build it in Figma', 'create a screen', 'build a landing page in Figma', 'update the Figma screen to match code', 'convert this modal/dialog/drawer/panel to Figma'. This is the preferred workflow skill whenever the user wants to build or update a full page, modal, dialog, drawer, sidebar, panel, or any composed multi-section view in Figma from code or a description. Discovers design system components, variables, and styles from Code Connect files, existing screens, and library search, then imports them and assembles views incrementally section-by-section using design system tokens instead of hardcoded values.

7.1k

always on

192 tokname + description

once used

7,514 tokSKILL.md body

bundled files

26 KB

repo stars

7.1kGitHub

Install the Figma Generate Design skill

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

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

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-generate-design ~/.claude/skills/figma-generate-design

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 description192 tok
When the agent uses itThe SKILL.md instructions7,514 tok
Only if opened2 bundled files (6 KB)varies

Until it is used, figma-generate-design costs about 7.1× 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

  • The instructions are over 5,000 tokens, the Agent Skills specification's guideline for SKILL.md.

Checked 2026-10-22 · method

What's inside

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

  • Build / Update Screens and Views from Design System
  • Skill Boundaries
  • Prerequisites
  • Parallel Workflow with generatefigmadesign (Web Apps Only)
  • Required Workflow
  • Step 1: Understand the Deliverable
  • Step 2: Collect Component Keys, Variables, and Styles
  • Step 3: Create the Wrapper Frame First
  • Step 4: Build Each Section Inside the Wrapper
  • Step 5: Validate the Full View and Transfer Images
  • Step 6: Updating an Existing View
  • Reference Docs
  • Error Recovery
  • Best Practices

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