{
  "markdown": "# html2figma\n\nCapture any web page and convert it into a Figma design file. Built with Playwright and Figma's MCP capture API.\n\n## Features\n\n- Captures full web pages into editable Figma designs\n- Automatically dismisses cookie banners and consent dialogs\n- Scrolls pages to trigger lazy-loaded content\n- Strips CSP headers to allow Figma script injection\n- Supports authenticated pages via `cookies.json`\n- Works as a [Claude Code skill](https://docs.anthropic.com/en/docs/claude-code/skills) for seamless integration\n\n## Prerequisites\n\n- Node.js 18+\n- A Figma account with [MCP server](https://www.figma.com/community/plugin/1465068452498756621) configured\n\n## Installation\n\n```bash\ngit clone https://github.com/your-username/html2figma.git\ncd html2figma\nnpm install\nnpx playwright install chromium\n```\n\n## Usage\n\n### As a Claude Code skill\n\nThe easiest way to use html2figma is as a Claude Code skill. Add this repository to your project, then invoke:\n\n```\n/html2figma https://example.com\n```\n\nClaude will handle the full workflow: obtaining a capture ID from Figma, running the capture, and returning the Figma file link.\n\n### Manual usage\n\n**Step 1** — Get a capture ID from Figma's `generate_figma_design` MCP tool.\n\n**Step 2** — Run the capture script:\n\n```bash\nnode scripts/capture.mjs <url> <captureId>\n```\n\n**Step 3** — The script will poll for completion and print the Figma file URL when done.\n\n## Authenticated pages\n\nTo capture pages that require login, export your cookies as a JSON array and save them to `scripts/cookies.json`:\n\n```json\n[\n  {\n    \"name\": \"session\",\n    \"value\": \"abc123\",\n    \"domain\": \".example.com\",\n    \"path\": \"/\"\n  }\n]\n```\n\nThe format follows Playwright's [browser context cookies](https://playwright.dev/docs/api/class-browsercontext#browser-context-add-cookies).\n\n## How it works\n\n1. Launches a Chromium browser via Playwright (viewport: 1440x900)\n2. Loads cookies if `scripts/cookies.json` exists\n3. Intercepts responses to strip `Content-Security-Policy` headers\n4. Navigates to the target URL and waits for content to load\n5. Detects and dismisses cookie/consent banners\n6. Scrolls through the page to trigger lazy-loaded images and content\n7. Fetches and injects Figma's capture script from `mcp.figma.com`\n8. Calls `figma.captureForDesign()` to serialize the page\n9. Polls Figma's status endpoint until the capture completes\n\n## License\n\nISC\n",
  "bytes": 2388,
  "sha": "811a066faca7867f3e1d38b1a5328d30b492ed65b0d35fea63d6820835fe5151",
  "repo_slug": "asxelot/html2figma",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/plg_asxelot_html2figma_html2figma_98dccf8a/readme"
}