From claude-resources
Captures web pages as editable Figma design files via MCP. Uses URL fragments for local dev servers with embedded scripts or Playwright injection for others. Handles multiple URLs.
npx claudepluginhub takazudo/claude-resources[url1] [url2] ... [--existing fileKey]This skill uses the workspace's default tool permissions.
Capture web pages and convert them to editable Figma design files via Figma MCP.
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.
Guides building MCP servers enabling LLMs to interact with external services via tools. Covers best practices, TypeScript/Node (MCP SDK), Python (FastMCP).
Share bugs, ideas, or general feedback.
Capture web pages and convert them to editable Figma design files via Figma MCP.
claude mcp add --transport http figma https://mcp.figma.com/mcpplaywright npm package available (global or local)$ARGUMENTS contains one or more URLs and optional flags--existing <fileKey> means add to existing file instead of creating newFor 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
Call mcp__figma__generate_figma_design to get a capture ID.
outputMode: "newFile" (unless --existing flag)outputMode: "existingFile" with the fileKey from first captureOpen the URL with hash parameters:
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.
Run the bundled capture script:
node $HOME/.claude/skills/dev-figma-capture/scripts/figma-capture.mjs \
--url <URL> \
--capture-id <CAPTURE_ID>
The script:
captureForDesign() and submits DOM to FigmaOptions: --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).
Call mcp__figma__generate_figma_design with the captureId to check status. On success, it returns a claim URL. Open it for the user:
open "<claim-url>"
For multiple URLs:
newFile → get fileKeygenerate_figma_design with outputMode: "existingFile" and the fileKey to get a new capture IDcaptureForDesign() 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.--headless false to debug.--selector.