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
Scanned 9/8/2026
Install to Claude Code
Skills Directorynpx -y skills add Takazudo/claude-resources --skill dev-figma-script-install --agent claude-codeInstalls into .claude/skills of the current project.
Are you the author of Dev Figma Script Install?
Add the live security badge to your README — it updates automatically with every re-scan.
[](https://www.skillsdirectory.com/skills/takazudo-dev-figma-script-install)More formats (shields.io, HTML) on the badges page.
---
name: dev-figma-script-install
description: "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"
argument-hint: ""
---
# Figma Capture Script Installation
Guide for adding Figma's capture script to a web project so pages can be captured to Figma without Playwright injection.
## Background
Figma MCP's `generate_figma_design` tool captures a rendered web page and converts it into editable Figma layers. The capture requires Figma's serializer script loaded on the page. Two approaches:
1. **Script in HTML** (this skill) - embed the script for dev-only use. Simpler, faster.
2. **Playwright injection** (via `/dev-figma-capture`) - inject at runtime. No source changes but heavier.
## The Script
```html
<script src="https://mcp.figma.com/mcp/html-to-design/capture.js" async></script>
```
What it does:
- Walks entire DOM tree, reads computed styles, layout, fonts, images
- Serializes everything into JSON (~several MB for typical pages)
- Listens for capture parameters via URL hash fragment
- POSTs serialized data to Figma's API when triggered
## Installation Guidance
Add the script to the project's HTML **only in development mode**. Never ship to production.
### Recommended Pattern (React/Vite)
```jsx
{process.env.NODE_ENV === 'development' && (
<script src="https://mcp.figma.com/mcp/html-to-design/capture.js" async />
)}
```
## Important Notes
- Place in `<head>` or end of `<body>`
- Loads asynchronously, minimal performance impact
- **Never ship to production** - serializes entire DOM structure
- After installation, `/dev-figma-capture` can use the simpler URL fragment approach instead of Playwright
- The actual file edit should be done by the main agent based on the project's framework
Is this your skill, or is something wrong with this listing? Request removal or report an issue. Author removals are honored within 72 hours.
No comments yet. Be the first to comment!
