Figma web capture

Skill sarveshsea/design-skills/skills/figma-web-capture

Practical design judgment for AI coding agents: 78 installable skills for craft, research, generation, Figma, and Memoire.

Install

npx -y skills add sarveshsea/design-skills --skill figma-web-capture

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

6 stars6 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Figma web capture workflow - import live webpages or DOM elements into editable Figma layers with the public html-to-design capture.js bookmarklet

SKILL.md

3.3 KB, as published. Nobody here has run it

Figma Web Capture

Use this when a user wants to bring a webpage into Figma as editable layers instead of a screenshot.

This is a practical workflow built on Figma's public html-to-design capture asset. Treat it as an unofficial bookmarklet path, not as a guaranteed product surface. Re-check the script URL if Figma changes the flow.

What It Does

Loads Figma's public capture.js helper into the current page.
Serializes the rendered DOM into Figma layers.
Copies the capture to the clipboard so it can be pasted into any open Figma file.
Supports capturing the full viewport or a selected element.

Public Script

The capture helper lives at:

https://mcp.figma.com/mcp/html-to-design/capture.js

Load that script into the page, then use the capture toolbar to copy the result to the clipboard.

As of March 27, 2026, this public URL returns HTTP 200.

Recommended Workflow

Open the target page in a desktop browser.
Wait for fonts, images, and lazy-loaded content to finish rendering.
Scroll to the exact section you want to capture.
Run the bookmarklet or injected script that loads capture.js.
In the toolbar, choose Copy to clipboard.
Switch to Figma and paste into a dedicated scratch frame or page.
If you only need part of the page, use Select element before copying.

Safe Positioning

Capture the smallest stable container that still includes the content you need.
Paste into a scratch frame first, then move pieces into the final canvas.
Keep one capture per page or frame so imported layers stay organized.
Capture after scrolling into the intended viewport, not before.

Example Bookmarklet

javascript:(function(){var s=document.createElement('script');s.src='https://mcp.figma.com/mcp/html-to-design/capture.js';document.head.appendChild(s);setTimeout(function(){window.location.hash='figmacapture&figmadelay=1000';var s2=document.createElement('script');s2.src='https://mcp.figma.com/mcp/html-to-design/capture.js';document.head.appendChild(s2);},500);})();

When To Prefer It

Fast visual reverse-engineering from a live site into Figma.
Pulling one viewport or one component into a scratch page for redesign.
Capturing authenticated or in-progress UI that already renders correctly in the browser.

When Not To Use It

Sites with strict CSP that block injected scripts.
Cases where you need semantic code, reusable tokens, or a live sync instead of a one-time capture.
Mobile-browser workflows, since javascript: bookmarklets are commonly blocked there.

Caveats

Strict CSP sites can block external scripts, which prevents the toolbar from appearing.
Mobile browsers usually block javascript: bookmarklets.
Auth-gated pages capture what your current browser session can see.
Lazy-loaded content must be visible before capture.
The result is editable layers, but it is still a DOM capture, not live code.
Only run the bookmarklet on pages you trust, because it injects remote JavaScript into the page.
This is a public Figma-hosted script, but it is still an implementation detail and could change without notice.