Skill

dev-figma-script-install

Guides installation of Figma capture script in web projects like React/Vite for dev-only browser-to-Figma page capture without Playwright injection.

React

Html

npx claudepluginhub takazudo/claude-resources

Tool Access

This skill uses the workspace's default tool permissions.

Preview

Guide for adding Figma's capture script to a web project so pages can be captured to Figma without Playwright injection.

SKILL.md

Similar Skills

cache-components

139.3k

Guides Next.js Cache Components and Partial Prerendering (PPR): 'use cache' directives, cacheLife(), cacheTag(), revalidateTag() for caching, invalidation, static/dynamic optimization. Auto-activates on cacheComponents: true.

cache-components

mcp-builder

124.2k

Guides building MCP servers enabling LLMs to interact with external services via tools. Covers best practices, TypeScript/Node (MCP SDK), Python (FastMCP).

9 files

anthropics-skills-13

Stats

Stars7

Forks0

Last CommitApr 5, 2026

Actions

View Source View Plugin View on GitHub View README

Help us improve

Share bugs, ideas, or general feedback.

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:

Script in HTML (this skill) - embed the script for dev-only use. Simpler, faster.

Playwright injection (via /dev-figma-capture) - inject at runtime. No source changes but heavier.

The Script

<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)

{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

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:

Script in HTML (this skill) - embed the script for dev-only use. Simpler, faster.
Playwright injection (via /dev-figma-capture) - inject at runtime. No source changes but heavier.

The Script

<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)

{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