skills.rest
reason-machines
reason-machinesOFFICIAL
Explore all skills by this author →
Website𝕏@reasonmachinesGitHub

web-to-figma-chrome-extension

Captures webpages and converts DOM structure, styles, and images into Figma-compatible JSON files.

4|Updated May 16, 2026
Search Tags:#figma#design tokens#chrome extension#json export#webpage capture#cors proxy#dom extraction
One-click install
npx skills add https://github.com/reason-machines/design-skills --skill web-to-figma-chrome-extension-reason-machines
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-to-figma-chrome-extension
Source: https://github.com/reason-machines/design-skills/tree/main/skills/web-to-figma-chrome-extension
Command: npx skills add https://github.com/reason-machines/design-skills --skill web-to-figma-chrome-extension-reason-machines

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designers and developers often need to recreate existing webpage layouts in Figma, which normally requires manually rebuilding every element, style, and image. This Skill automates that process by capturing a live webpage's DOM, computed styles, and assets, then exporting them as a Figma-compatible JSON file. ## Core Features & Use Cases - Full-Page and Element Capture: Traverse the DOM to extract element positions, computed styles, text nodes, and layout data for an entire page or a specific selector. - Cross-Origin Image Proxy: A background service worker fetches CORS-blocked images and converts them to data URLs so no assets are missing from the export. - Configurable Concurrency: Control parallel image downloads (4/6/8/10/12/16/20/infinite) to balance speed and network load. - Use Case: A designer wants to study a competitor's landing page layout in Figma. They load the unpacked extension, click capture from the in-page toolbar, and receive a .json file containing the full element tree ready for conversion into Figma nodes. ## Quick Start Load the unpacked extension in Chrome via chrome://extensions with Developer mode enabled, then ask the agent to capture the current webpage and export it as a Figma-compatible JSON file.

Frequently Asked Questions about web-to-figma-chrome-extension

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert a webpage into a Figma file?▼

Install the extension via chrome://extensions in Developer mode using Load unpacked, then trigger capture from the in-page toolbar or popup. The extension traverses the DOM, extracts styles and images, and downloads a Figma-compatible JSON file.

How to capture a single element instead of a full webpage?▼

Use the element-specific capture function with a CSS selector, such as captureSpecificElement('header.main-header'). It runs the same extraction logic on only that subtree with fullPage set to false.

Why are images missing from my webpage capture?▼

Missing images are usually caused by CORS restrictions or lazy loading. Enable proxy mode so the background service worker fetches cross-origin images, and scroll through the page first to trigger lazy-loaded assets.

Does the extension work on pages with strict Content Security Policy?▼

Pages with strict CSP may block content script injection, preventing the toolbar and capture logic from running. Check the console for CSP errors and verify the manifest content_scripts configuration matches all URLs.

What are the limitations of capturing large or complex pages?▼

Very large pages can cause memory pressure, slow captures, or oversized JSON exports. Mitigate this by lowering image concurrency, skipping hidden elements, limiting DOM depth, capturing in chunks, or compressing style output.

Related Skills

Explore More Design & Creative Skills→
juricamigac-from-hrjuricamigac-from-hr

scrape-webpage

Scrape webpage content, metadata, and images into migration-ready JSON and assets.

Official
Advanced
ahandselahandsel
1

extract-copy-from-figma

Extract UX copy and layer names from Figma nodes into Markdown tables.

Community
Advanced
vikingokftvikingokft

design-md

Extract Stitch project design metadata and generate a structured DESIGN.md file.

Official
Intermediate
MadAppGangMadAppGang
7

browser-use-integration

Capture headless Chromium screenshots of URLs when claude-in-chrome is unavailable.

Official
Intermediate