What is the stitch-extract-static-html skill?
The stitch-extract-static-html skill saves a web app page as a single HTML file. It offers a Puppeteer snapshot or a browser-subagent capture, asks you to choose, inlines stylesheets and images as base64, strips scripts and dev overlays, and supports auth-gated pages, dark mode and chart canvases.
This skill sits in the stitch-design plugin of Google's stitch-skills repository. It captures a UI state from a built web application or React components and returns one HTML file with styles and images folded inside.
Its description says to use it whenever you need to capture a specific UI state, share a static version of a page or prepare assets for Stitch upload, even if the request is only to save the HTML or mock the view.
Two strategies, and you choose
| Strategy A, Puppeteer | Strategy B, browser subagent | |
|---|---|---|
| Use when | App runs locally with no auth wall | You must click or fill forms first |
| Fidelity | Highest, computed styles resolved | High, rendered DOM |
| Output | Written to a file, no size limit | May truncate in agent context |
| Framework | Any | Any |
The SKILL.md marks this as a checkpoint. The agent must show the comparison, recommend Strategy A, and wait for your explicit choice before it does anything else.
What the Puppeteer snapshot cleans up
- It reads CSSOM rules from document.styleSheets, so dynamic Vite, Tailwind and CSS-in-JS styles survive.
- Stylesheet links become style blocks, and img src and srcset values become base64 data URIs.
- Same-origin icon fonts are inlined so ligatures do not render as plain text.
- Script tags, Vite hot-reload style blocks and dev overlays are removed.
Who the stitch-extract-static-html skill is for
Best for
- Developers preparing a page for upload to Stitch, including one snapshot per route.
- Teams that need a frozen copy of a view, such as a dark mode dashboard or a Storybook story.
- Apps behind a login, where an auth script signs in before the capture runs.
Not for
- Capturing sites you do not run. Related: firecrawl-website-design-clone.
- Reading design tokens. Use the extract-design-md skill, or design-md, for that job.
- Hands-off automation. The skill pauses twice for your confirmation.
Use it with UiChemy
The output is static HTML for Stitch, not a WordPress page. If a finished design should become an editable WordPress site, UiChemy can build from Figma, Composer or AI to WordPress. Click Get Started on uichemy.com. Related: image-to-code.
How to install Stitch Extract Static HTML Skill: Snapshot Any Web App as One File
npx plugins add google-labs-code/stitch-skills --scope project --target claude-codeSet up the Stitch MCP server
The plugin family works with the Stitch MCP server. The setup guide is at https://stitch.withgoogle.com/docs/mcp/setup/.
Install the plugin
With Claude Code, run
npx plugins add google-labs-code/stitch-skills --scope project --target claude-code. For Cursor, switch to--scope workspace --target cursor. This skill is part of stitch-design.Alternative for Codex
Use
codex plugin marketplace add google-labs-code/stitch-skills --ref main, then install stitch-design from the marketplace.Check Puppeteer
Strategy A needs Node.js with puppeteer available. The skill's check is
node -e "require('puppeteer')", and the fix for a missing module isnpm install -g puppeteer.Start the app and ask
Run your dev server, for example npm run dev, and ask the agent to save the page as static HTML.
Check that it loaded
Ask for a snapshot of one route. The agent should ask you to pick a strategy, wait for your go-ahead after the server starts, and then write a single .html file under .stitch.
Key features
- Strategy choice with a checkpointThe agent presents both options with pros and cons, recommends Puppeteer, and waits for your approval before starting.
- Snapshot script flagssnapshot.ts takes url, output, wait, viewport, html-class, remove-fixed, full-height, title, auth-script and inline-canvas flags.
- Per-route captureRun the script once per route to write separate files such as home.html, pricing.html and dashboard.html under .stitch.
- Framework notesA table covers React with Vite, Next.js, Angular, Vue and Nuxt, Svelte, Storybook and SSR builds, with suggested wait times such as 1000, 2000 or 3000 milliseconds.
- Auth-gated pagesAn auth script exporting an async function receives the Puppeteer page, signs in or injects storage, and the script then re-navigates to the original URL.
- Canvas chartsThe inline-canvas flag converts canvas elements from ECharts, Chart.js or D3 into base64 images so charts do not appear as blank boxes.
- Cleanup optionsremove-fixed drops cookie banners and chat widgets, and the html-class flag applies a class such as dark to the html element.
- Troubleshooting tableEntries cover missing images, broken icons, unstyled fonts, Next.js image routes, dark mode, banners, login walls and a missing puppeteer module.
- MockPage fallbackA last-resort method flattens React components into one JSX file with hardcoded data, then a post-process script inlines local images.
Frequently asked questions
What does the stitch-extract-static-html skill do?
It extracts a self-contained static HTML file from a web application. The Puppeteer strategy loads the page in headless Chrome, resolves styles, inlines CSS, fonts and images as base64, removes scripts and writes the result to a file you can upload to Stitch.
Which strategy should I pick?
The skill recommends Strategy A, the Puppeteer snapshot, as the default. It gives the highest fidelity and writes to a file with no size limit. Strategy B, a browser subagent, suits pages where you must click or fill forms first, but long output may truncate.
How does it handle pages behind a login?
You write a small auth script that exports a default async function taking the Puppeteer page. It can fill a form or set storage values. The snapshot script runs it, then navigates again to the original URL with the signed-in session.
How do I install the stitch-extract-static-html skill?
Run the repository's plugin install, for example npx plugins add google-labs-code/stitch-skills with a project scope and your agent as the target. Codex users add the repo as a plugin marketplace. The skill ships in the stitch-design plugin.
Will charts and icons survive the snapshot?
Icons survive because same-origin icon fonts are inlined as base64 so ligatures do not turn into text. Charts drawn on canvas need the inline-canvas flag, which converts them to base64 images. Without it the troubleshooting table says they show as blank boxes.
What if the app cannot run locally?
The appendix describes a last-resort MockPage.jsx method. You flatten the components into one JSX file, pick one state, hardcode the data, then run the extract script and a post-process step. The skill says to prefer Strategy A whenever possible.
Does the agent run without asking me?
No. It must ask you to choose a strategy, and after starting a local server it must pause so you can check the URL and port before the snapshot. The SKILL.md says not to proceed until you confirm each checkpoint.