Our review
Captures a live webpage and converts it into a Figma design using Playwright and a configured Figma MCP.
Strengths
- Works with both external and local sites
- Bypasses CSP policies to inject the capture script
- Leverages Figma's API for direct integration
- End-to-end automation of the capture process
Limitations
- Requires Playwright and a configured Figma MCP
- Polling for completion can be slow (up to 10 attempts)
- Does not support pages with complex authentication
Use this skill to quickly turn a live webpage into a Figma design without manual effort.
Avoid using it for heavily dynamic pages or when pixel-perfect accuracy is needed.
Security analysis
CautionThe skill instructs running a Node.js script that strips CSP protections and injects Figma's capture code, which could be exploited on malicious sites, though the intended use is legitimate. No destructive commands or data exfiltration are evident. The combination of browser automation and security bypass warrants caution.
- •Bypasses Content Security Policy headers on external websites to inject capture scripts, weakening page security during capture.
- •Uses Playwright browser automation with a user-supplied URL, which could expose the local environment to malicious page content.
Examples
Capture https://www.ryanallen.com into my Figma file at https://www.figma.com/file/abc123/designConvert my localhost:3000 page to Figma using file https://www.figma.com/file/xyz789/projectname: capture-webpage description: Capture a live webpage as a Figma design using Playwright and the configured Figma design MCP (for this repo, Figma Console MCP). Use when user says "capture page", "to Figma", or /capture-webpage. In Claude Code and Cursor, /skills lists all.
Capture Webpage
Capture a live webpage as a Figma design using Playwright and the configured Figma design MCP.
Inputs
You need two things from the user before starting:
- Webpage URL - The page to capture (e.g.,
https://example.com) - Figma file URL - Where to put the generated design (e.g.,
https://www.figma.com/file/abc123/...)
If either is missing, ask the user before proceeding.
External Sites
For sites you don't control (e.g., ryanallen.com, competitor.com). Uses .claude/skills/capture-webpage/scripts/capture.js to bypass CSP and inject Figma's capture script.
1. Generate Capture ID
Use the Figma Console MCP (or other configured Figma design MCP) with the target Figma file details to get a capture ID and endpoint URL.
2. Run Capture Script
node .claude/skills/capture-webpage/scripts/capture.js "https://example.com" "CAPTURE_ID" 1920 1080
The script handles:
- Launching browser with specified viewport
- Stripping CSP headers
- Fetching and injecting Figma's capture script
- Calling
window.figma.captureForDesign()to send page data to Figma - Cleanup
3. Poll for Completion
- Wait 5 seconds after script starts
- Call
generate_figma_designwith the captureId to check status - Repeat until status is
completed(max 10 polls)
Local Sites
For localhost or dev servers where you can modify the HTML.
1. Generate Capture ID
Same as external sites - call generate_figma_design to get a capture ID and endpoint.
2. Add Capture Script to HTML
<script src="https://mcp.figma.com/mcp/html-to-design/capture.js" async></script>
3. Open Browser with Capture URL
open "http://localhost:3000#figmacapture=ID&figmaendpoint=ENDPOINT&figmadelay=1000"
4. Poll for Completion
Same polling process as external sites.
Requirements
- Playwright installed (
npm install playwright) - for capture.js script - Figma Console MCP (
figma-console-mcp) or another Figma design MCP configured and authenticated for this project
Next.js App Router Expert
Development
A skill that turns Claude into a Next.js App Router expert.
README Generator
Development
Creates professional and comprehensive README.md files for your projects.
API Documentation Writer
Development
Generates comprehensive API documentation in OpenAPI/Swagger format.