import_html_to_plan
Convert HTML pages or folders into an editable Design Plan with Auto Layout, styles, and design system components, returning a planId for later execution in Figma.
Instructions
Convert an HTML page or folder (e.g. a Claude Design standalone HTML export) into an editable Design Plan: flexbox → Auto Layout, colors, borders, radii, shadows, gradients, fonts, text (incl. RTL), images and SVG icons. With a scanned Design System, buttons/inputs/links become real DS components. Returns a planId for figma_execute_plan, exactly like figma_preview_plan. Nothing is sent to Figma yet.
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| page | No | Page (name or id) to build on when executed (default: the current page) | |
| path | Yes | An .html file, or a folder containing index.html | |
| target | No | Where to build: inside an existing node such as a section (needs approval), or at x/y on the page | |
| fontMap | No | Replace font families, e.g. { "YekanBakhFaNum": "IRANYekanX" } for a web font that isn't installed | |
| targets | No | Several elements, each its own screen (e.g. the cards of a Claude Design review board); each keeps its rendered width | |
| mappings | No | Your own element → component mappings; they win over automatic Design System matching | |
| selector | No | CSS selector of the element to import (default body) | |
| viewport | No | Viewport width(s). Default [1440, 390] (desktop + mobile) | |
| useDesignSystem | No | Map buttons/inputs/links to scanned DS components (default: true when a DS is cached) |