Stats
Actions
Tags
'%20stop-opacity%3D'0.16'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'rgb(200%2C90%2C60)'%20stop-opacity%3D'0.03'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D'320'%20height%3D'200'%20fill%3D'url(%23g)'%2F%3E%3Ccircle%20cx%3D'250'%20cy%3D'56'%20r%3D'92'%20fill%3D'rgb(200%2C90%2C60)'%20fill-opacity%3D'0.06'%2F%3E%3Ccircle%20cx%3D'64'%20cy%3D'172'%20r%3D'58'%20fill%3D'rgb(200%2C90%2C60)'%20fill-opacity%3D'0.05'%2F%3E%3C%2Fsvg%3E)
From claude-resources
Guides adding Figma's capture script to web projects for browser-to-Figma page capture without Playwright injection.
How this skill is triggered — by the user, by Claude, or both
Slash command
/claude-resources:dev-figma-script-installThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Guide for adding Figma's capture script to a web project so pages can be captured to Figma without Playwright injection.
Guide for adding Figma's capture script to a web project so pages can be captured to Figma without Playwright injection.
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:
/dev-figma-capture) - inject at runtime. No source changes but heavier.<script src="https://mcp.figma.com/mcp/html-to-design/capture.js" async></script>
What it does:
Add the script to the project's HTML only in development mode. Never ship to production.
{process.env.NODE_ENV === 'development' && (
<script src="https://mcp.figma.com/mcp/html-to-design/capture.js" async />
)}
<head> or end of <body>/dev-figma-capture can use the simpler URL fragment approach instead of Playwrightnpx claudepluginhub takazudo/claude-resources --plugin claude-resourcesCaptures web page URLs and converts them to editable Figma design files via the Figma MCP. Supports Playwright-based injection and URL fragment methods.
Clones live webpages into active Figma file: measures layout, colors, fonts, text positions via Chrome DevTools, builds frames/tables with Figma Plugin API.