/site-to-figma

description: "Capture a live website and recreate its layout in Figma as editable frames with auto-layout, styles, and proper layer structure."
argument-hint: "[URL] [options: full-page, above-fold, specific-section]"
allowed-tools: ["Read", "Write", "Edit", "Bash", "Glob", "Grep", "mcp__*"]

/site-to-figma

You are **reverse-engineering a live website** into an editable Figma design. This captures the site's visual structure, extracts styles, and recreates the layout as properly structured Figma frames.

Input: **$ARGUMENTS**

Read `${CLAUDE_PLUGIN_ROOT}/skills/design/references/figma-creation.md` for Figma API patterns and `${CLAUDE_PLUGIN_ROOT}/skills/design/references/ui-designer.md` for layout analysis.

Process

1. Capture the Website

Screenshot the site

Use Playwright to capture the page:

mcp__plugin_playwright_playwright__browser_navigate(url)
mcp__plugin_playwright_playwright__browser_take_screenshot(type: 'png', fullPage: true)

Extract layout structure

Get the page's accessibility tree for structure:

mcp__plugin_playwright_playwright__browser_snapshot()

Extract computed styles

mcp__plugin_playwright_playwright__browser_evaluate: `
  function extractStyles() {
    const sections = document.querySelectorAll('header, nav, main, section, footer, [class*="hero"], [class*="container"]');
    const results = [];

    for (const el of sections) {
      const style = window.getComputedStyle(el);
      const rect = el.getBoundingClientRect();
      results.push({
        tag: el.tagName,
        class: el.className?.toString()?.substring(0, 80),
        rect: { x: Math.round(rect.x), y: Math.round(rect.y), w: Math.round(rect.width), h: Math.round(rect.height) },
        styles: {
          bg: style.backgroundColor,
          color: style.color,
          fontSize: style.fontSize,
          fontFamily: style.fontFamily?.split(',')[0]?.trim(),
          fontWeight: style.fontWeight,
          padding: style.padding,
          margin: style.margin,
          gap: style.gap,
          display: style.display,
          flexDirection: style.flexDirection,
          borderRadius: style.borderRadius
        },
        textContent: el.textContent?.substring(0, 100)?.trim(),
        childCount: el.children.length
      });
    }
    return results;
  }
  return extractStyles();
`

Extract color palette

mcp__plugin_playwright_playwright__browser_evaluate: `
  const allElements = document.querySelectorAll('*');
  const colors = new Map();
  for (const el of allElements) {
    const style = window.getComputedStyle(el);
    ['backgroundColor', 'color', 'borderColor'].forEach(prop => {
      const val = style[prop];
      if (val && val !== 'rgba(0, 0, 0, 0)' && val !== 'transparent') {
        colors.set(val, (colors.get(val) || 0) + 1);
      }
    });
  }
  return [...colors.entries()]
    .sort((a, b) => b[1] - a[1])
    .slice(0, 20)
    .map(([color, count]) => ({ color, count }));
`

Extract typography

mcp__plugin_playwright_playwright__browser_evaluate: `
  const textNodes = document.querySelectorAll('h1, h2, h3, h4, h5, h6, p, span, a, button, li, label');
  const typeStyles = new Map();
  for (const el of textNodes) {
    const style = window.getComputedStyle(el);
    const key = style.fontSize + '|' + style.fontWeight + '|' + style.fontFamily?.split(',')[0];
    if (!typeStyles.has(key)) {
      typeStyles.set(key, {
        fontSize: style.fontSize,
        fontWeight: style.fontWeight,
        fontFamily: style.fontFamily?.split(',')[0]?.trim()?.replace(/"/g, ''),
        lineHeight: style.lineHeight,
        sample: el.textContent?.substring(0, 40)?.trim()
      });
    }
  }
  return [...typeStyles.values()].sort((a, b) =>
    parseInt(b.fontSize) - parseInt(a.fontSize)
  );
`

1.5: Stitch Alternative Intake

Use this path if **Playwright MCP is unavailable** OR if `$ARGUMENTS` contains `--stitch`:

1. Find or create a Stitch project:

   mcp__stitch__list_projects → use first owned project, or mcp__stitch__create_project(title: "Site Capture — [domain]")

2. Generate a Stitch screen from the site description (async — do not retry on connection errors):

   mcp__stitch__generate_screen_from_text(
     projectId: [id],
     prompt: "Recreate the layout and visual style of [URL or site description]: [key sections, colors, and style noted from $ARGUMENTS]",
     deviceType: DESKTOP,
     modelId: GEMINI_3_PRO
   )

Poll `mcp__stitch__get_screen` until `screenMetadata.status === "COMPLETE"`.

3. Download outputs:

   curl -L "[screenshot.downloadUrl]" -o stitch-capture.png
   curl -L "[htmlCode.downloadUrl]" -o stitch-capture.html   # if figmaExport absent
   curl -L "[figmaExport.downloadUrl]" -o stitch-export.fig  # if figmaExport present

4. If `figmaExport` is present: open in Figma Desktop → use `get_design_context` → skip Steps 3–5, go to Step 7 (Validate).

5. If only `htmlCode`: use `stitch-capture.png` as the reference screenshot for Step 6, and derive color/type styles from the HTML rather than Playwright evaluation.

2. Connect to Figma

figma_get_status → verify Desktop Bridge connection

3. Create Figma Page

figma_execute: `
  const page = figma.createPage();
  page.name = 'Site Capture — [domain name]';
  await figma.setCurrentPageAsync(page);
  return { pageId: page.id };
`

4. Create Figma Styles

From extracted colors, create Paint Styles:

figma_execute: `
  const colors = [/* extracted palette */];

  function rgbaToFigma(rgba) {
    const match = rgba.match(/rgba?\\((\\d+),\\s*(\\d+),\\s*(\\d+)/);
    if (match) {
      return { r: +match[1]/255, g: +match[2]/255, b: +match[3]/255 };
    }
    return null;
  }

  let created = 0;
  for (const { color, role } of colors) {
    const figmaColor = rgbaToFigma(color);
    if (figmaColor) {
      const style = figm