Figma Build
awdr74100/figwright
Build a Figma design from code or a description — the reverse of figma-codegen.
用于处理涉及检查、读取、创建、编辑、导出或代码映射的 Figma 内容任务，也用于将 HTML/React/Vue 等网页复制到 Figma，尤其适用于当前选区、设计系统、Figma MCP、Drafito、Figwright 或需要避免 MCP 工具污染上下文的场景。当用户需要可批注 Figma 链接或要求同时绑定工作目录时，也应与 axhub-commentary 组合。
Install Figma Content Operator
$ npx skills add lintendo/Axhub-Skills --skill figma-content-operator -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install lintendo/Axhub-Skills figma-content-operator --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/lintendo/Axhub-Skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/figma-content-operator .claude/skills/figma-content-operator && rm -rf skills-srcUse ~/.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/
Install the "figma-content-operator" agent skill from https://github.com/lintendo/Axhub-Skills/tree/main/skills/figma-content-operator into .claude/skills/figma-content-operator/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "figma-content-operator", 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 install https://github.com/lintendo/Axhub-Skills/tree/main/skills/figma-content-operatorType 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.
$ npx skills add lintendo/Axhub-Skills --skill figma-content-operator -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install lintendo/Axhub-Skills figma-content-operator --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/lintendo/Axhub-Skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/figma-content-operator .agents/skills/figma-content-operator && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "figma-content-operator" agent skill from https://github.com/lintendo/Axhub-Skills/tree/main/skills/figma-content-operator into .agents/skills/figma-content-operator/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "figma-content-operator", 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.
$ npx skills add lintendo/Axhub-Skills --skill figma-content-operator -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install lintendo/Axhub-Skills figma-content-operator --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/lintendo/Axhub-Skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/figma-content-operator .cursor/skills/figma-content-operator && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "figma-content-operator" agent skill from https://github.com/lintendo/Axhub-Skills/tree/main/skills/figma-content-operator into .cursor/skills/figma-content-operator/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "figma-content-operator", 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 https://github.com/lintendo/Axhub-Skills.git --path skills/figma-content-operator--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add lintendo/Axhub-Skills --skill figma-content-operator -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install lintendo/Axhub-Skills figma-content-operator --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/lintendo/Axhub-Skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/figma-content-operator .gemini/skills/figma-content-operator && rm -rf skills-srcUse ~/.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/
Install the "figma-content-operator" agent skill from https://github.com/lintendo/Axhub-Skills/tree/main/skills/figma-content-operator into .gemini/skills/figma-content-operator/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "figma-content-operator", 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.
$ gh skill install lintendo/Axhub-Skills figma-content-operatorInstalls 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).
$ npx skills add lintendo/Axhub-Skills --skill figma-content-operator -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/lintendo/Axhub-Skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/figma-content-operator .github/skills/figma-content-operator && rm -rf skills-srcUse ~/.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/
Install the "figma-content-operator" agent skill from https://github.com/lintendo/Axhub-Skills/tree/main/skills/figma-content-operator into .github/skills/figma-content-operator/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "figma-content-operator", 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.
$ npx skills add lintendo/Axhub-Skills --skill figma-content-operator -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install lintendo/Axhub-Skills figma-content-operator --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/lintendo/Axhub-Skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/figma-content-operator .opencode/skills/figma-content-operator && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "figma-content-operator" agent skill from https://github.com/lintendo/Axhub-Skills/tree/main/skills/figma-content-operator into .opencode/skills/figma-content-operator/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "figma-content-operator", 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-content-operator- GitHub stars
- 127
- Token cost
- ~630 tokens
- SKILL.md length
- 160 words
- Files
- 24 (incl. scripts, references, assets)
- Skills in repo
- 13
- Repo updated
- First seen
- Licence
- MIT
At a glance
用于处理涉及检查、读取、创建、编辑、导出或代码映射的 Figma 内容任务，也用于将 HTML/React/Vue 等网页复制到 Figma，尤其适用于当前选区、设计系统、Figma MCP、Drafito、Figwright 或需要避免 MCP 工具污染上下文的场景。当用户需要可批注 Figma 链接或要求同时绑定工作目录时，也应与 axhub-commentary 组合。
- Works in 3 steps: 读取 references/tools/index.md，了解七个领域中的… → 只读取当前领域参考文档。 → 仅对即将调用的工具运行 schema ；名称不确定时运行 tools 。
- Frontend & Design work in your project
- SKILL.md covers 运行要求, 先选交付路径, 网页复制到 Figma and 渐进式工具发现, plus 3 more sections
- Runs JavaScript scripts from its folder
What it does
Figma Content Operator is an agent skill from lintendo/Axhub-Skills. 用于处理涉及检查、读取、创建、编辑、导出或代码映射的 Figma 内容任务，也用于将 HTML/React/Vue 等网页复制到 Figma，尤其适用于当前选区、设计系统、Figma MCP、Drafito、Figwright 或需要避免 MCP 工具污染上下文的场景。当用户需要可批注 Figma 链接或要求同时绑定工作目录时，也应与 axhub-commentary 组合。
Its SKILL.md is about 630 tokens, which your agent loads only when the skill is triggered. The skill folder holds 27 other files, including scripts, reference files and assets (for example `agents/openai.yaml`, `assets/figwright.mcp.json` and `assets/figwright.windows.mcp.json`).
It sits in Frontend & Design. It works with Figma, Model Context Protocol, React and Vue.js. The licence is MIT.
When your agent uses it
- Frontend & Design work in your project
Example prompts
- “/figma-content-operator”
Requirements
- Node.js
Workflow steps
3 steps, taken from the first numbered list in SKILL.md.
- 读取 references/tools/index.md，了解七个领域中的 104 个工具名。
- 只读取当前领域参考文档。
- 仅对即将调用的工具运行 schema ；名称不确定时运行 tools 。
What it can do on your machine
Read from SKILL.md and the folder at commit 1e1c5bc. 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
Ships 1 file in scripts/ (JavaScript, from the files we listed), which the agent can run.
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
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 Content Operator loads about 630 tokens when it runs, and up to ~8k if it reads all its reference files. Until then it costs about 53 tokens; SKILL.md has 160 words of instructions outside code blocks.
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); the scripts in this folder are not scanned.
SKILL.md
The full file from lintendo/Axhub-Skills at commit 1e1c5bc, republished under its MIT licence (© lintendo). 160 words, ~630 tokens.
Download SKILL.mdSave it as
.claude/skills/figma-content-operator/SKILL.md (or your agent's skills folder). This skill also uses 23 other files; get the full folder from GitHub.- name
- figma-content-operator
- description
- 用于处理涉及检查、读取、创建、编辑、导出或代码映射的 Figma 内容任务，也用于将 HTML/React/Vue 等网页复制到 Figma，尤其适用于当前选区、设计系统、Figma MCP、Drafito、Figwright 或需要避免 MCP 工具污染上下文的场景。当用户需要可批注 Figma 链接或要求同时绑定工作目录时，也应与 axhub-commentary 组合。
Figma 内容操作器
画布操作通过官方 MCP Inspector CLI 驱动 @figwright/mcp；网页转换则写入 Figma 剪贴板，不经过 MCP，也不替用户粘贴到画布。
运行要求
- Node.js
22.19+ npx- 网页复制需要本机 Chromium 浏览器；使用 Axhub 扩展时可直接在目标网页操作
- 依赖 Figma 画布读写的任务，需要在目标文件中运行当前版本的 Drafito 或上游 Figwright 插件
将 SKILL_DIR 解析为包含本 SKILL.md 的目录，再按任务执行相应脚本。
先选交付路径
这里的“网页”包括静态 HTML、React、Vue、其他前端框架以及已部署 URL；判断依据是浏览器中实际渲染的页面，不是源码扩展名。
- 用户明确要求修改当前画布、选区或已有节点时，直接走 Figwright MCP。不要再询问是否先生成网页。
- 用户明确要求先做网页、响应式页面、多页面或浏览器状态时，先完成可运行网页，再走网页剪贴板流程。
- 用户提出新设计但没有说明交付路径时，先问：“这次先生成网页（HTML/React/Vue），还是直接修改 Figma 画布？”同时给出推荐：完整页面、响应式和多状态设计优先生成网页；已有设计上的局部调整、组件/变量复用优先直接修改画布。
- 需要网页初稿后继续做语义化微调时，先让用户把剪贴板内容粘贴到 Figma；只有用户确认继续修改画布后，才启动 MCP 读取和编辑流程。
网页复制到 Figma
网页交付统一读取 references/webpage-to-figma.md。该路径不启动 Relay 或调用 MCP，最终由用户把剪贴板内容粘贴到目标 Figma 文件。
渐进式工具发现
本节只适用于 MCP 画布任务。按三个层级探索，避免加载所有 schema：
- 读取
references/tools/index.md，了解七个领域中的 104 个工具名。 - 只读取当前领域参考文档。
- 仅对即将调用的工具运行
schema <exact-tool-name>；名称不确定时运行tools <keyword>。
不要输出完整 tools/list 或把全部 schema 放进上下文。catalog-check 只比较精简索引与固定版本服务器。
MCP 画布流程
- 确认目标 Figma Web 设计文件、页面和操作范围；写入前先读取目标。
- 运行
doctor，再在独立且可保持运行的进程中启动relay，保留准确进程句柄。 - Relay 就绪后运行
launch-url。等待用户确认已在 Figma 中运行 Drafito，再依次运行ping和profile；服务器启动不代表插件已经连通。 - 建立连接时读取
references/setup-and-connect.md。Drafito 与上游 Figwright 提供相同的完整契约。 - 按需读取工作流参考：
- 选区、节点树、元数据、截图：
references/read-and-inspect.md - 画布写入与验证：
references/edit-canvas.md - 样式、变量、组件、页面、资源、原型交互：
references/design-systems-and-advanced.md - 设计到代码或代码到设计的映射：
references/grounding-workflows.md
- 选区、节点树、元数据、截图：
- 执行范围最小的写入，再通过
get_node、get_selection或相应设计系统查询聚焦验证。 - 报告当前页面和文件上下文、调用、节点 ID 或文件路径及验证结果；部分失败时明确说明。
- 任务完成、取消或失败后，停止本次启动的准确 Relay 进程；不要尝试启动、关闭或替用户管理 Drafito 插件本身。
仅服务器本地运行的 analyze_project 和 scan_components 不需要 Figma。其他映射工具会结合本地项目和实时 Figma 数据，需要端到端插件连接。
批注 Figma
涉及批注或可批注链接时，参考 axhub-commentary。
只在原始 Figma URL 上追加绝对 projectPath，不要预先追加 try-plugin-*。Axhub 扩展会先绑定工作目录，再自行启动 Drafito。
安全与效率
- 将创建、更新、移动、删除、导入、批处理和导出调用视为修改操作，严格限制在用户指定范围。
- 优先聚焦读取，避免直接调用
get_document。 - 不猜节点 ID 或参数结构；先读取 ID，再获取实时 schema。
batch只用于相关且可逆的编辑；破坏性操作单独限定范围并验证。- 失败、版本偏差、文件不明确或安全问题时读取
references/troubleshooting-and-security.md。
© lintendo, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 23 other files (scripts, references, assets) in skills/figma-content-operator of lintendo/Axhub-Skills.
- SKILL.md
- agents/openai.yaml
- assets/figwright.mcp.json
- assets/figwright.windows.mcp.json
- assets/tool-index.json
- assets/webpage-to-figma-runtime.js
- references/design-systems-and-advanced.md
- references/edit-canvas.md
- references/grounding-workflows.md
- references/read-and-inspect.md
- references/setup-and-connect.md
- references/tools/canvas-content.md
- references/tools/components-and-prototypes.md
- references/tools/export-and-grounding.md
- references/tools/index.md
- references/tools/inspect.md
- references/tools/layout-and-structure.md
- … and 7 more
Open the folder on GitHubat commit 1e1c5bc
Compare with similar skills
Figma Content Operator 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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Figma Content Operator this skilllintendo/Axhub-Skills | 127 | — | ~630 | Automated safety check: Pass | MIT | |
| Figma Buildawdr74100/figwright | 982 | — | ~2k | Automated safety check: Pass | MIT | |
| Figma Codegenawdr74100/figwright | 982 | — | ~4.2k | Automated safety check: Pass | MIT | |
| UithingBayBreezy/ui-thing | 729 | — | ~1.3k | Automated safety check: Pass | Custom licence | |
| Wonder BlocksKhan/wonder-blocks | 163 | — | ~3.2k | Automated safety check: Pass | MIT | |
| Golemuigolemui/golemui | 113 | — | ~2.2k | Automated safety check: Pass | MIT |
Similar skills
Figma Codegen
awdr74100/figwright
Generate framework-aware code from a Figma design. An agent skill from awdr74100/figwright.
Uithing
BayBreezy/ui-thing
Manages UI Thing components, prose, blocks, themes, shortcuts, docs, and MCP-driven workflows in Nuxt projects and in the UI Thing source repo.
Wonder Blocks
Khan/wonder-blocks
Implements user interfaces using the Wonder Blocks (WB) design system — Khan Academy's React component library.
Golemui
golemui/golemui
Build, validate, and debug GolemUI forms in React, Angular, Vue, Lit, or vanilla JS.
Igniteui Wc Customize Component Theme
IgniteUI/igniteui-webcomponents
Theme and style Ignite UI Web Components (and igniteui-react) apps using CSS custom properties, optional Sass, and the igniteui-theming MCP server.
More from lintendo/Axhub-Skills
All 13 skills in this repoReact To Figma Make
lintendo/Axhub-Skills
A skill your agent uses when 需要把现有 React、Vite、Next.js、V0 或 AI Studio 页面转换为 Figma Make 可导入的 .fig 资产，或补齐、更新、验证已有 Figma Make 导出壳和 canvas.fig。
Search Design System
lintendo/Axhub-Skills
A skill your agent uses when selecting an existing design system or theme for a product, page, prototype, or implementation through Axhub design knowledge indexes; not when creating or updating a…
Axhub Prototype Context
lintendo/Axhub-Skills
A skill your agent uses when an annotated prototype URL exposes PRD, directory, annotation, or source context that an AI Agent needs for review, implementation planning, production work, source…
Extract Axure Data
lintendo/Axhub-Skills
Extract structured data from Axure prototypes using Playwright — screenshots, design tokens, interaction maps, annotations, and page text.
Clone Page
lintendo/Axhub-Skills
高精度克隆网页。使用 Playwright 渐进式采集页面数据（DOM 结构、样式、截图、资源）， 然后分阶段构建完整的 HTML/CSS 还原。支持快速还原和高精度还原两种模式。
Extract Page Data
lintendo/Axhub-Skills
Extract structured data from any web page using Playwright — screenshots, design tokens, page text as Markdown, interactive element maps, and full page data packs.
Related
Works with
Categories
Questions about Figma Content Operator
What does Figma Content Operator do?
用于处理涉及检查、读取、创建、编辑、导出或代码映射的 Figma 内容任务，也用于将 HTML/React/Vue 等网页复制到 Figma，尤其适用于当前选区、设计系统、Figma MCP、Drafito、Figwright 或需要避免 MCP 工具污染上下文的场景。当用户需要可批注 Figma 链接或要求同时绑定工作目录时，也应与 axhub-commentary 组合。. Figma Content Operator is an agent skill from lintendo/Axhub-Skills.
When should I use Figma Content Operator?
Figma Content Operator fits situations like: frontend & Design work in your project.
How do I install Figma Content Operator in Claude Code?
Run `npx skills add lintendo/Axhub-Skills --skill figma-content-operator -a claude-code`. Or copy the skill folder (skills/figma-content-operator in lintendo/Axhub-Skills) into .claude/skills/figma-content-operator in your project. Claude Code loads it when a task matches its description.
How do I install Figma Content Operator in Codex?
Run `npx skills add lintendo/Axhub-Skills --skill figma-content-operator -a codex`. Or copy the skill folder (skills/figma-content-operator in lintendo/Axhub-Skills) into .agents/skills/figma-content-operator in your project. Codex loads it when a task matches its description.
Can I use Figma Content Operator 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 lintendo/Axhub-Skills --skill figma-content-operator -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-content-operator, .gemini/skills/figma-content-operator, .github/skills/figma-content-operator and .opencode/skills/figma-content-operator in your project.
What does Figma Content Operator need to run?
Going by SKILL.md and its folder, Figma Content Operator needs JavaScript for the scripts in its folder. Our summary lists: Node.js.
Does Figma Content Operator access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Figma Content Operator 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. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
What licence does Figma Content Operator use?
Figma Content Operator is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Figma Content Operator use?
About 630 tokens (SKILL.md is roughly 2.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 7.3k tokens, read only when the agent opens those files.
What are the alternatives to Figma Content Operator?
Skills that share tags, products or a category with Figma Content Operator: Figma Build (awdr74100/figwright, 982 stars), Figma Codegen (awdr74100/figwright, 982 stars), Uithing (BayBreezy/ui-thing, 729 stars) and Wonder Blocks (Khan/wonder-blocks, 163 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Figma Content Operator?
lintendo (a GitHub user) maintains it in lintendo/Axhub-Skills, which has 127 GitHub stars. The repository holds 13 skills in this directory. The repository was last updated on August 21, 2026.
Source: lintendo/Axhub-Skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.