capture-webpage — community capture-webpage, Studio, community, ide skills

v1.0.0
GitHub

About this Skill

Perfect for Visual Analysis Agents needing webpage content extraction and design automation capabilities using Playwright and Figma MCP. 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 Cla

ryanallen ryanallen
[1]
[0]
Updated: 3/3/2026

Killer-Skills Review

Decision support comes first. Repository text comes second.

Reference-Only Page Review Score: 7/11

This page remains useful for operators, but Killer-Skills treats it as reference material instead of a primary organic landing page.

Original recommendation layer Concrete use-case guidance Explicit limitations and caution Locale and body language aligned
Review Score
7/11
Quality Score
48
Canonical Locale
en
Detected Body Locale
en

Perfect for Visual Analysis Agents needing webpage content extraction and design automation capabilities using Playwright and Figma MCP. 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 Cla

Core Value

Empowers agents to capture live webpages as Figma designs using Playwright, providing seamless integration with Figma files and enabling advanced webpage content analysis through configured MCP. This superpower leverages webpage URL and Figma file URL inputs to generate comprehensive design files, utilizing protocols like HTTPS and file formats like Figma's native design files.

Ideal Agent Persona

Perfect for Visual Analysis Agents needing webpage content extraction and design automation capabilities using Playwright and Figma MCP.

↓ Capabilities Granted for capture-webpage

Capturing competitor webpages for design inspiration and analysis
Automating webpage content extraction for market research and trend analysis
Generating Figma designs from live webpages for rapid prototyping and design iteration

! Prerequisites & Limits

  • Requires webpage URL and Figma file URL as inputs
  • Limited to webpages accessible via HTTPS
  • Dependent on Playwright and Figma MCP for functionality

Why this page is reference-only

  • - The underlying skill quality score is below the review floor.

Source Boundary

The section below is imported from the upstream repository and should be treated as secondary evidence. Use the Killer-Skills review above as the primary layer for fit, risk, and installation decisions.

After The Review

Decide The Next Action Before You Keep Reading Repository Material

Killer-Skills should not stop at opening repository instructions. It should help you decide whether to install this skill, when to cross-check against trusted collections, and when to move into workflow rollout.

Install Path

Start With Installation And Validation

If this skill is worth continuing with, the next step is to confirm the install command, CLI write path, and environment validation.
Trusted Recheck

Cross-Check Against Trusted Picks

If you are still comparing multiple skills or vendors, go back to the trusted collection before amplifying repository noise.
Workflow

Move To Workflow Collections For Team Rollout

When the goal shifts from a single skill to team handoff, approvals, and repeatable execution, move into workflow collections.
Labs Demo

Browser Sandbox Environment

⚡️ Ready to unleash?

Experience this Agent in a zero-setup browser environment powered by WebContainers. No installation required.

Boot Container Sandbox

FAQ & Installation Steps

These questions and steps mirror the structured data on this page for better search understanding.

? Frequently Asked Questions

What is capture-webpage?

Perfect for Visual Analysis Agents needing webpage content extraction and design automation capabilities using Playwright and Figma MCP. 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 Cla

How do I install capture-webpage?

Run the command: npx killer-skills add ryanallen/Studio/capture-webpage. It works with Cursor, Windsurf, VS Code, Claude Code, and 19+ other IDEs.

What are the use cases for capture-webpage?

Key use cases include: Capturing competitor webpages for design inspiration and analysis, Automating webpage content extraction for market research and trend analysis, Generating Figma designs from live webpages for rapid prototyping and design iteration.

Which IDEs are compatible with capture-webpage?

This skill is compatible with Cursor, Windsurf, VS Code, Trae, Claude Code, OpenClaw, Aider, Codex, OpenCode, Goose, Cline, Roo Code, Kiro, Augment Code, Continue, GitHub Copilot, Sourcegraph Cody, and Amazon Q Developer. Use the Killer-Skills CLI for universal one-command installation.

Are there any limitations for capture-webpage?

Requires webpage URL and Figma file URL as inputs. Limited to webpages accessible via HTTPS. Dependent on Playwright and Figma MCP for functionality.

↓ How To Install

  1. 1. Open your terminal

    Open the terminal or command line in your project directory.

  2. 2. Run the install command

    Run: npx killer-skills add ryanallen/Studio/capture-webpage. The CLI will automatically detect your IDE or AI agent and configure the skill.

  3. 3. Start using the skill

    The skill is now active. Your AI agent can use capture-webpage immediately in the current project.

! Reference-Only Mode

This page remains useful for installation and reference, but Killer-Skills no longer treats it as a primary indexable landing page. Read the review above before relying on the upstream repository instructions.

Upstream Repository Material

The section below is imported from the upstream repository and should be treated as secondary evidence. Use the Killer-Skills review above as the primary layer for fit, risk, and installation decisions.

Upstream Source

capture-webpage

Install capture-webpage, an AI agent skill for AI agent workflows and automation. Review the use cases, limitations, and setup path before rollout.

SKILL.md
Readonly
Upstream Repository Material
The section below is imported from the upstream repository and should be treated as secondary evidence. Use the Killer-Skills review above as the primary layer for fit, risk, and installation decisions.
Supporting Evidence

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:

  1. Webpage URL - The page to capture (e.g., https://example.com)
  2. 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

bash
1node .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_design with 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

html
1<script src="https://mcp.figma.com/mcp/html-to-design/capture.js" async></script>

3. Open Browser with Capture URL

bash
1open "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

Related Skills

Looking for an alternative to capture-webpage or another community skill for your workflow? Explore these related open-source skills.

View All

openclaw-release-maintainer

Logo of openclaw
openclaw

Your own personal AI assistant. Any OS. Any Platform. The lobster way. 🦞

★ 333.8k
⑂ 0
AI

widget-generator

Logo of f
f

Generate customizable widget plugins for the prompts.chat feed system

★ 149.6k
⑂ 0
AI

flags

Logo of vercel
vercel

The React Framework

★ 138.4k
⑂ 0
Browser

pr-review

Logo of pytorch
pytorch

Tensors and Dynamic neural networks in Python with strong GPU acceleration

★ 98.6k
⑂ 0
Developer