dev-figma-capture
Capture web pages and send them to Figma as editable design files. Use when: (1) User wants to capture a webpage to Figma, (2) User says 'figma capture', 'send to figma', 'capture to figma', (3) User provides URLs to convert to Figma designs
Best use case
dev-figma-capture is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Capture web pages and send them to Figma as editable design files. Use when: (1) User wants to capture a webpage to Figma, (2) User says 'figma capture', 'send to figma', 'capture to figma', (3) User provides URLs to convert to Figma designs
Teams using dev-figma-capture should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/dev-figma-capture/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How dev-figma-capture Compares
| Feature / Agent | dev-figma-capture | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Capture web pages and send them to Figma as editable design files. Use when: (1) User wants to capture a webpage to Figma, (2) User says 'figma capture', 'send to figma', 'capture to figma', (3) User provides URLs to convert to Figma designs
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Figma Capture Capture web pages and convert them to editable Figma design files via Figma MCP. ## Prerequisites - Figma MCP (remote) must be connected: `claude mcp add --transport http figma https://mcp.figma.com/mcp` - For Playwright path: `playwright` npm package available (global or local) ## Workflow ### Step 1: Parse Arguments - `$ARGUMENTS` contains one or more URLs and optional flags - `--existing <fileKey>` means add to existing file instead of creating new - If no URLs provided, ask the user ### Step 2: Determine Capture Method For each URL, decide the capture approach: ``` Is the page a local dev server (localhost, 127.0.0.1)? | +-- Yes: Does the page have Figma capture script embedded? | | (Check by fetching the page source and looking for | | "mcp.figma.com/mcp/html-to-design/capture.js") | | | +-- Yes → URL Fragment method (lightweight, no Playwright) | +-- No → Playwright injection method | +-- No (external site): → Playwright injection method ``` ### Step 3: Get Capture ID Call `mcp__figma__generate_figma_design` to get a capture ID. - First URL: use `outputMode: "newFile"` (unless `--existing` flag) - Ask which team/plan to save to if multiple are available - Subsequent URLs: use `outputMode: "existingFile"` with the fileKey from first capture ### Step 4A: URL Fragment Method (if capture script is on page) Open the URL with hash parameters: ```bash open "<URL>#figmacapture=<CAPTURE_ID>&figmaendpoint=https%3A%2F%2Fmcp.figma.com%2Fmcp%2Fcapture%2F<CAPTURE_ID>%2Fsubmit&figmadelay=1000" ``` Wait 5-10 seconds, then poll capture status. ### Step 4B: Playwright Injection Method Run the bundled capture script: ```bash node $HOME/.claude/skills/dev-figma-capture/scripts/figma-capture.mjs \ --url <URL> \ --capture-id <CAPTURE_ID> ``` The script: 1. Opens the page in headless Chromium 2. Strips CSP headers to allow injection 3. Injects Figma's capture.js 4. Triggers `captureForDesign()` and submits DOM to Figma Options: `--headless false` (show browser), `--delay <ms>`, `--selector <css>`, `--viewport-w <px>`, `--viewport-h <px>` **Playwright dependency:** The script requires `playwright` as a Node.js module. If not available in the current project, install it temporarily or check for a global install. The script imports `playwright` directly (not via npx). ### Step 5: Poll and Confirm Call `mcp__figma__generate_figma_design` with the `captureId` to check status. On success, it returns a claim URL. Open it for the user: ```bash open "<claim-url>" ``` ### Multi-Page Capture For multiple URLs: 1. Capture first URL as `newFile` → get `fileKey` 2. For each subsequent URL, call `generate_figma_design` with `outputMode: "existingFile"` and the `fileKey` to get a new capture ID 3. Capture each page with its own capture ID 4. Each page becomes a new page in the same Figma file ## Troubleshooting - **Capture hangs:** The `captureForDesign()` promise often doesn't resolve even when capture succeeds. The script handles this with a timeout. Check browser console logs for `[Figma Capture] Success!` confirmation. - **CSP errors on external sites:** Playwright strips CSP headers automatically. If still failing, try `--headless false` to debug. - **Large pages:** Pages over 10MB may fail. Try capturing specific sections with `--selector`.
Related Skills
dev-figma-script-install
Provide Figma capture script installation guidance for web projects. Use when: (1) User wants to set up Figma capture in a web dev project, (2) User says 'figma script install', 'add figma capture', 'figma setup', (3) User wants to enable browser-to-Figma capture in their dev environment
zudoesa-articlify
Convert conversation context into an esa article via the zudoesa-writer subagent. ONLY invoke when the user explicitly asks — NEVER proactively propose. Triggers: 'write esa article', 'esa記事', 'esaに書いて', 'articlify for esa', or /zudoesa-articlify. Gathers context, creates a writing brief, delegates to the writer subagent.
zudoesa-apply-voice
Apply Takazudo's esa writing voice and vocabulary rules to text. Use when: (1) User wants to write/rewrite text in Takazudo's esa style, (2) User says 'apply voice', 'esa voice', 'esa文体で', 'esa風に書いて', '文体を適用', (3) User provides text to transform to esa style. Reads writing-style.md and vocabulary-rule.md from takazudo-esa-writing repo and applies the rules.
zudocg-articlify
Convert conversation context into a CodeGrid article via the zudocg-writer subagent. ONLY invoke when the user explicitly asks — NEVER proactively propose. Triggers: 'write codegrid article', 'CodeGrid記事', 'codegridに書いて', 'articlify for codegrid', or /zudocg-articlify. Gathers context, creates a writing brief, delegates to the writer subagent.
zudocg-apply-voice
Apply Takazudo's CodeGrid writing voice and vocabulary rules to text. Use when: (1) User wants to write/rewrite text in Takazudo's CodeGrid style, (2) User says 'apply voice', 'codegrid voice', 'codegrid文体で', 'codegrid風に書いて', '文体を適用', (3) User provides text to transform to CodeGrid style. Reads writing-style.md and vocabulary-rule.md from takazudo-codegrid-writing repo and applies the rules.
zpaper-articlify
Convert conversation context into a zpaper blog article via the zpaper-writer subagent. ONLY invoke when the user explicitly asks — NEVER proactively propose. Triggers: 'write zpaper article', 'zpaper記事', 'zpaperに書いて', 'articlify for zpaper', or /zpaper-articlify. Gathers context, creates a writing brief, delegates to the writer subagent.
zpaper-apply-voice
Apply Takazudo's zpaper blog writing voice and vocabulary rules to text. Use when: (1) User wants to write/rewrite text in Takazudo's zpaper style, (2) User says 'apply voice', 'zpaper voice', 'zpaper文体で', 'zpaper風に書いて', 'ブログ文体を適用', (3) User provides text to transform to zpaper style. Reads writing-style.md and vocabulary-rule.md from the zpaper repo and applies the rules.
xlsx
Spreadsheet creation, editing, and analysis. Use when working with .xlsx, .xlsm, .csv, .tsv files for: (1) Creating spreadsheets with formulas and formatting, (2) Reading or analyzing data, (3) Modifying existing spreadsheets while preserving formulas, (4) Data analysis and visualization, (5) Recalculating formulas.
x
Facade for development workflows. Routes on two axes: plan-first vs implement-now (escalates to /big-plan -a when the request needs research / decomposition / has unclear scope — the appended -a makes the plan chain into implementation in-session), then single vs multi on the ready-to-build fast paths (/x-as-pr single-topic, /x-wt-teams multi-topic parallel). Use when: (1) User says '/x' followed by dev instructions, (2) User wants to start development without choosing the workflow skill, (3) User says 'dev', 'implement', or 'build' with a task. Default option: -v (verify-ui). Review-loop (-l) is opt-in — without -l the downstream skill runs a single /deep-review pass. Forwards -a (autonomy/auto-chain) and -m (merge at the end + cleanup + CI watch) through every route; auto-fix of raised findings (-f) and issue-raising (-ri) are downstream defaults, with -nf/--no-fix and -nori/--no-raise-issues as the forwarded opt-outs. -a and -m are orthogonal — full hands-off end-to-end is -a -m.
x-wt-teams
Parallel multi-topic development using git worktrees, base branches, and Claude Code agent teams. Use when: (1) User wants to work on multiple related features in parallel, (2) User mentions 'worktree', 'base branch', 'parallel development', 'split into topics', or 'multi-topic'. FULLY AUTONOMOUS — creates worktrees, spawns teams, coordinates everything. Also supports Super-Epic child mode for [Epic] issues from /big-plan with '**Super-epic:** #N' markers (targets the super-epic base branch instead of main).
x-as-pr
Start a development workflow as a draft PR. Creates a NEW branch from the current branch, empty start commit, draft PR targeting the current branch, then implements. ALWAYS creates a new branch by default — produces a nested PR-on-PR when the current branch already has one. Use when: (1) User says 'dev as pr', (2) User wants a PR-first workflow before coding, (3) User passes -s/--stay to reuse the current branch instead of nesting, (4) User passes a GitHub issue URL to implement, (5) User passes --make-issue/--issue to create an issue first. Logs progress via issue comments when an issue is linked.
watch-ci
Watch GitHub PR CI checks in the background and notify on completion. Use when: (1) User wants to monitor CI/CD status, (2) User says 'watch CI', 'check CI', 'monitor checks', or 'wait for CI', (3) User wants to know when checks pass or fail. Runs a background gh polling shell loop (NOT a subagent — near-zero token cost), sends macOS notification on completion. Also handles merged PRs by watching the target branch CI.