Capture live webpages as Figma designs via Playwright and Figma MCP.
npx skills add https://github.com/ryanallen/Studio --skill capture-webpage
Please help me install this Agent Skill. Skill: capture-webpage Source: https://github.com/ryanallen/Studio/tree/main/.claude/skills/capture-webpage Command: npx skills add https://github.com/ryanallen/Studio --skill capture-webpage
Captures a live webpage as a Figma design by automating a Playwright-based workflow and submitting the result to the configured design MCP.
Provide the webpage URL and the Figma file URL, then trigger the capture-webpage skill to create a Figma design from the page.
High-intent search queries and answers about installing and using this skill.
To capture a live webpage as a Figma design, you provide a webpage URL and a Figma file URL. The skill uses a Playwright workflow to capture the page and submits it to a configured Figma MCP.
Yes, capturing locally hosted webpages into Figma is fully supported. The Playwright workflow handles both external sites and local pages, bypassing CSP headers where needed during the capture process.
Yes, you need a configured Figma Console MCP or equivalent to automate webpage capture. The workflow depends on this MCP to obtain a captureId and endpoint URL to insert the design into your Figma file.
The best way to handle CSP headers during webpage capture is using the built-in Playwright workflow. It automatically manages CSP headers, ensuring the live page renders correctly for your Figma design reference.
Yes, you can set optional viewport settings when capturing a webpage to Figma. This provides deterministic viewport options, allowing you to capture responsive designs accurately for design-system updates.
Your webpage capture to Figma workflow requires Playwright because it drives the local script that captures the live page. It automates the browser interactions needed to submit the capture to the Figma MCP.
lttrAdd or remove MCP servers to the local project scope.
ilandahanAnalyze Figma components and generate dual-score design-system quality reviews.
mrcsXndrNavigate live web pages and extract content using Playwright or Selenium.
daffy0208Convert Figma designs into React components and design tokens.
