stitch::extract-static-htmlавтор Google Labs

Stitch Extract Static HTML Skill.

Skill для Claude Code и Codex для UI-дизайна: извлекает автономные снимки статического HTML с встроенными CSS и изображениями.

Web и UI
HTML

Скачать OpenDesign Инструкция по использованию

google-labs-code/stitch-skills · plugins/stitch-design/skills/extract-static-html/SKILL.mdSKILL.md

--- name: stitch::extract-static-html description: - Extract self-contained static HTML from a built web application or React components by inlining CSS and images. Use this skill 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 user just asks to 'save the HTML' or 'mock the view'. --- ## Which Strategy to Use ## Strategy A: Puppeteer Snapshot (Recommended) ## Strategy B: Browser Subagent Capture ## Appendix: Static Fallback (MockPage.jsx)

Метаданные и заголовки разделов считаны из исходного файла 2026-09-14 · 10 732 символа в полной версии

01 Что делает

Что делает skill stitch::extract-static-html в Claude Code и Codex

Сводка, рабочий процесс и результаты — всё прочитано из SKILL.md этого skill.

Из SKILL.mdПрочитано 14.09.2026 · не запись выполнения

Словами самого skill

Создаёт единый самодостаточный HTML-файл из работающего веб-приложения, запуская headless Chrome через Puppeteer, захватывая полностью отрендеренный DOM, встраивая правила CSSOM и преобразуя изображения в base64 data URI. Работает с любым фреймворком — React/Vite, Next.js, Angular, Vue/Nuxt, Svelte, Storybook — без необходимости в MockPage.jsx.

Skill заставляет агента спросить, какую из двух стратегий захвата использовать, прежде чем продолжить, рекомендуя снапшот через Puppeteer, и приостановиться для подтверждения после запуска локального сервера. Флаги охватывают время ожидания, вьюпорт, тёмную тему, удаление фиксированных элементов, встраивание canvas и скрипт авторизации для страниц с логином. Задокументированное приложение сводит React-компоненты в ручной MockPage.jsx, если приложение нельзя запустить локально.

Что он выдаёт

Самодостаточный HTML-файл для каждого захваченного маршрута, со встроенными стилями и изображениями в виде base64.
По одному файлу на маршрут, если вы захватываете несколько экранов, например главную, тарифы и дашборд.
Графики, сериализованные из элементов canvas в изображения base64, при использовании флага canvas.

Смотрите пример запроса ↗

Как это работает

01
Дайте пользователю выбрать стратегию
Перед любым извлечением агент представляет сравнение A/B, рекомендует маршрут через Puppeteer и ждёт явного выбора.
02
Запустите скрипт снапшота для каждого маршрута
Одна команда на URL, записывающая каждый захват в отдельный файл в .stitch с фиксированным ожиданием после network idle.
03
Позвольте скрипту встроить страницу
Правила CSSOM, подключённые таблицы стилей, изображения, источники srcset и иконочные шрифты того же источника сворачиваются в файл, чтобы ничто не зависело от работающего сервера.
04
Настройте флаги под фреймворк
Время ожидания и URL различаются в зависимости от стека, например требуется более долгое ожидание, когда фреймворк гидрирует серверно отрендеренную разметку.
05
Авторизуйтесь на защищённых страницах
Модуль авторизации выполняется внутри сессии Puppeteer, после чего скрипт возвращается на исходный URL с уже установленной сессией.
06
Переходите на мок только при необходимости
Если приложение вообще не может запуститься, приложение-раздел сводит компоненты в один JSX-файл вместо захвата живого рендера.

02 Определите своё применение

Когда использовать скилл stitch::extract-static-html

Используйте skill stitch::extract-static-html в Claude Code или Codex, когда работа над UI-дизайном относится к этому типу. Назначение и ограничения ниже взяты из собственного файла skill.

Хорошо подходит

Вам нужно зафиксировать определённое состояние UI и передать кому-то статическую версию страницы.
Вы готовите ассеты для загрузки в Stitch.
Приложение работает локально на любом фреймворке, и вы предпочитаете не писать MockPage.jsx.
Вам нужно нажать, заполнить или перейти, прежде чем страница достигнет нужного состояния.
Вам нужна одна история Storybook, а не весь маршрут приложения.

Знайте границы

Большие страницы, захваченные через браузерный субагент, могут быть обрезаны из-за контекстного окна агента.
Ручной путь с упрощением («flattening») не рекомендуется, если приложение можно фактически запустить.
Внешние шрифты не преобразуются в data URI — только ресурсы того же источника и относительные ресурсы.
Для состояний UI, недостижимых через навигацию, например экранов ошибок и пустых состояний, нужен маршрут mock.

Что предоставить

Ваш выбор стратегииАгент не начнёт работу без явного решения между снимком Puppeteer и подагентом браузера.
Приложение, запущенное на localhostСервер, к которому у вас есть доступ, например запущенный через dev-скрипт проекта, поскольку скрипт получает данные с живой страницы.
Путь к выходному файлу--output обязателен, поэтому нужно решить, куда попадёт каждый захваченный маршрут, обычно в .stitch.
Модуль авторизации для закрытых страницФайл JS/TS, экспорт по умолчанию которого — асинхронная функция, получающая страницу Puppeteer, используется для форм входа, токенов или внедрения модулей.
Среда Node с puppeteerСкрипт снимка запускается через npx tsx и требует, чтобы puppeteer был доступен в этой среде.

03 Внутри скилла

Правила, которые Skill stitch::extract-static-html задаёт Claude Code и Codex

8 конкретных инструкций, значений по умолчанию и ограничений, которые SKILL.md задаёт для агента — та часть файла, которая влияет на результат.

Никогда не выбирайте стратегию самостоятельно
Агент не должен выбирать между Puppeteer и подагентом браузера от имени пользователя, а также продолжать работу до подтверждения пользователем.
Стратегия A — заявленный вариант по умолчанию
Варианты должны быть представлены чётко, с рекомендацией Стратегии A и коротким резюме плюсов/минусов для каждой.
Контрольная точка перед снимком
После запуска локального сервера агент должен остановиться и получить подтверждение, прежде чем запускать скрипт снимка или подагента браузера.
Останавливайте dev-сервер после завершения
Dev-сервер, запущенный только для извлечения, должен быть остановлен, а его фоновая задача завершена после завершения захвата.
По умолчанию ожидание 1000 мс
--wait по умолчанию равен 1000 мс после простоя сети и должен быть увеличен для приложений с отложенной загрузкой; --viewport по умолчанию 1280x800.
Не поставляйте скрипты
Выходные данные не содержат тегов script; блоки Vite HMR в стиле dev (createHotContext, import.meta.hot) и dev-оверлеи удаляются.
Фиксированные элементы включаются вручную
--remove-fixed по умолчанию false — это флаг для удаления баннеров о cookie и виджетов чата из захвата.
Упрощайте всё для пути mock
Резервный вариант с приложением не является снимком в реальном времени; он требует ручного сведения React-компонентов в единый JSX-файл.

04 Применение

Установить stitch::extract-static-html в Claude Code или Codex

Одна команда npx skills add, затем первая задача в вашем агенте и чек-лист для результата.

Добавить stitch::extract-static-html в Claude Code, Codex или ваш агент

Запустите в своём проекте; установщик спросит, какому агенту его добавить.

Terminal

npx skills add https://github.com/google-labs-code/stitch-skills --skill stitch::extract-static-html

Общая форма CLI-команды skills для plugins/stitch-design/skills/extract-static-html/SKILL.md; репозиторий может документировать собственный путь.

Дайте skill первую задачу по дизайну интерфейса

Написано в терминах самого skill; замените части в квадратных скобках своим материалом.

Starter prompt

The app is running at http://localhost:5173. Snapshot the [dashboard] route to .stitch/dashboard.html with --html-class dark and --inline-canvas, and pass --wait 5000 because the ECharts graphs load late. That page sits behind a login guard, so run it with my [auth-myapp.ts] script first.

Источник: составлено по SKILL.md в терминах самого skill.

Проверьте первый результат

Что сам SKILL.md считает правильным результатом:

Остановите dev-сервер и откройте сохранённый файл: если изображения не отображаются, встраивание srcset не сработало, и важен переход на встроенный src.
Прочитайте лог скрипта, чтобы узнать количество встроенных изображений, прежде чем доверять результату.
Если иконки отображаются как текст или используется запасной шрифт с засечками, значит захват CSSOM или встраивание @font-face не произошли.
Светлая страница, несмотря на запрос тёмной темы, означает, что при запуске не был указан флаг html-class.
Графики, отображаемые как пустые прямоугольники, означают, что флаг canvas не был передан.
В Next.js оптимизированные изображения встраиваются только пока dev-сервер запущен во время захвата.

В OpenDesign импортируйте stitch::extract-static-html по ссылке на его SKILL.md: Plugins → Add → Skill → Import from link, затем выберите его в верхней панели.

Скачать OpenDesign Читать quickstart

05 Открытый исходный код, проверяемость

Источник, лицензия и проверка

Откуда взяты факты на этой странице и когда они были последний раз проверены.

Author: Google Labs
Repository: github.com/google-labs-code/stitch-skills Ветка main
Файл skill: plugins/stitch-design/skills/extract-static-html/SKILL.md Контрольная сумма содержимого записана при проверке; коммит 0337446
License: Apache-2.0 Из LICENSE.
Звёзды репозитория: 8 304 Снимок GitHub сделан 2026-09-14 для всего репозитория google-labs-code/stitch-skills, который содержит 12 skill в этом каталоге. Это не рейтинг и не счётчик использования для stitch::extract-static-html.
Проверено OpenDesign: 2026-09-14 Исходный файл, путь, текст лицензии и количество звезд были проверены. Не входит в основной комплект OpenDesign (проверено 2026-08-28); живой запуск не был записан на этой странице.

Внутри SKILL.md

Какую стратегию использоватьТаблица сравнения Puppeteer и браузерного субагента; агент должен получить одобрение пользователя перед продолжением.
Стратегия A: снимок Puppeteer (рекомендуется)Снимок в headless Chrome, самодостаточный HTML, работает с любым фреймворком, MockPage.jsx не требуется.
Флаги скриптаЗначения по умолчанию для флагов url, output, wait, viewport, html-class, remove-fixed, full-height, title, auth-script и inline-canvas.
Что делается автоматическиЗахват CSSOM, встраивание стилей и изображений, очистка srcset, удаление скриптов и HMR, разрешение url().
Заметки по фреймворкамВремя ожидания и URL по умолчанию для React/Vite, Next.js, Angular, Vue/Nuxt, Svelte, Storybook и SSR.
Устранение неполадокТаблица соответствия симптомов и флагов: отсутствующие изображения, иконочные шрифты, тёмная тема, баннеры cookie, авторизация и canvas.
Страницы с авторизациейНаписание модуля авторизации Puppeteer; скрипт повторно переходит на исходный url после входа.
Стратегия B: захват через браузерного субагентаСубагент переходит и взаимодействует со страницей, затем извлекает outerHTML; большие страницы могут обрезаться в контексте агента.
Приложение: статичный резервный вариант (MockPage.jsx)Крайний вариант — запуск extract_inline_html.ts на вручную сведённом MockPage.jsx, когда приложение не может быть запущено.
Правила MockPage.jsxВключайте полную разметку, сводите условные конструкции, задавайте данные явно, сохраняйте логотипы, убирайте плавающие элементы.
Постобработкаpost_process.ts встраивает локальные изображения, используя каталог приложения как base-dir.

Собственное описание skill

«Извлекает самодостаточный статический HTML из собранного веб-приложения или React-компонентов, встраивая CSS и изображения. Используйте этот skill всякий раз, когда нужно захватить конкретное состояние интерфейса, поделиться статической версией страницы или подготовить ресурсы для загрузки в Stitch, даже если пользователь просто просит «сохранить HTML» или «смоковать вид»».

Описание из front-matter файла SKILL.md. Полный файл содержит около 10 732 символов. Прочитать полный файл на GitHub.

Stitch Extract Static HTML

Запустить stitch::extract-static-html на реальной задаче UI-дизайна.

Скачайте OpenDesign, импортируйте stitch::extract-static-html по ссылке на SKILL.md, вставьте промпт выше и прочитайте план перед результатом.

Загрузить OpenDesign Все навыки

Терминал

npx skills add https://github.com/google-labs-code/stitch-skills --skill stitch::extract-static-html

Что делает skill stitch::extract-static-html в Claude Code и Codex

Словами самого skill

Как это работает

Когда использовать скилл stitch::extract-static-html

Хорошо подходит

Знайте границы

Что предоставить

Правила, которые Skill stitch::extract-static-html задаёт Claude Code и Codex

Никогда не выбирайте стратегию самостоятельно

Стратегия A — заявленный вариант по умолчанию

Контрольная точка перед снимком

Останавливайте dev-сервер после завершения

По умолчанию ожидание 1000 мс

Не поставляйте скрипты

Фиксированные элементы включаются вручную

Упрощайте всё для пути mock