Skills
.Work. You
Rest

web-to-figma-chrome-extension

Official

Turn any webpage into editable Figma JSON.

Design & Creative#chrome extension#ui extraction#webpage capture#dom traversal#image proxy#computed styles#figma json
AuthorAradotso
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill reduces the time and guesswork of recreating UI designs by automatically capturing webpage layouts and styling into a Figma-compatible JSON structure.

Core Features & Use Cases

  • Full-page and element capture: Capture an entire page tree or target specific DOM elements for focused extraction.
  • CORS-friendly image handling: Proxy cross-origin images to prevent missing/broken assets during export.
  • Configurable capture performance: Control image download concurrency to balance speed and stability on different pages.
  • Design workflow output: Export capture results as JSON suitable for Figma-based downstream processing.

Quick Start

Use the web-to-figma-chrome-extension to open a webpage, click the extension’s in-page toolbar to capture it, and download the exported Figma-compatible JSON.

Dependency Matrix

Required Modules

None required

Components

Standard package

đź’» Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: web-to-figma-chrome-extension
Download link: https://github.com/Aradotso/design-skills/archive/main.zip#web-to-figma-chrome-extension

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.