html2figma
Capture any web page and convert it into an editable Figma design
Open source Open in the app JSON README (API)
About
Capture any web page and convert it into an editable Figma design
Details
- Kind
- Plugins
- Topic
- Media, design & games
- Publisher
- asxelot
- Origin
- marketplace
- Category
- ferramentas
- Stars
- 1
- Last push
- 2026-02-28T23:01:54Z
- Repository state
- ativo
- Language
- JavaScript
- Added
- 2026-08-30 01:48:58
- Updated
- 2026-08-30 01:48:58
- Origin id
asxelot/html2figma/html2figma
README
# html2figma
Capture any web page and convert it into a Figma design file. Built with Playwright and Figma's MCP capture API.
## Features
- Captures full web pages into editable Figma designs
- Automatically dismisses cookie banners and consent dialogs
- Scrolls pages to trigger lazy-loaded content
- Strips CSP headers to allow Figma script injection
- Supports authenticated pages via `cookies.json`
- Works as a [Claude Code skill](https://docs.anthropic.com/en/docs/claude-code/skills) for seamless integration
## Prerequisites
- Node.js 18+
- A Figma account with [MCP server](https://www.figma.com/community/plugin/1465068452498756621) configured
## Installation
```bash
git clone https://github.com/your-username/html2figma.git
cd html2figma
npm install
npx playwright install chromium
```
## Usage
### As a Claude Code skill
The easiest way to use html2figma is as a Claude Code skill. Add this repository to your project, then invoke:
```
/html2figma https://example.com
```
Claude will handle the full workflow: obtaining a capture ID from Figma, running the capture, and returning the Figma file link.
### Manual usage
**Step 1** — Get a capture ID from Figma's `generate_figma_design` MCP tool.
**Step 2** — Run the capture script:
```bash
node scripts/capture.mjs <url> <captureId>
```
**Step 3** — The script will poll for completion and print the Figma file URL when done.
## Authenticated pages
To capture pages that require login, export your cookies as a JSON array and save them to `scripts/cookies.json`:
```json
[
{
"name": "session",
"value": "abc123",
"domain": ".example.com",
"path": "/"
}
]
```
The format follows Playwright's [browser context cookies](https://playwright.dev/docs/api/class-browsercontext#browser-context-add-cookies).
## How it works
1. Launches a Chromium browser via Playwright (viewport: 1440x900)
2. Loads cookies if `scripts/cookies.json` exists
3. Intercepts responses to strip `Content-Security-Policy` headers
4. Navigates to the target URL and waits for content to load
5. Detects and dismisses cookie/consent banners
6. Scrolls through the page to trigger lazy-loaded images and content
7. Fetches and injects Figma's capture script from `mcp.figma.com`
8. Calls `figma.captureForDesign()` to serialize the page
9. Polls Figma's status endpoint until the capture completes
## License
ISC