# 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 - Skill: `takazudo/dev-figma-script-install` (Agent Skill) - Install (CLI): `npx skillmds@latest add takazudo/dev-figma-script-install` - Raw SKILL.md: https://api.skillmd.com/api/skills/takazudo/dev-figma-script-install/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Design & Media - Author: takazudo (https://skillmd.com/u/takazudo) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/takazudo/dev-figma-script-install --- # 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 ``` 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' && (