stitch::code-to-designавтор Google Labs

Stitch Code to Design Skill.

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

Web и UI
Дизайн-файл

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

google-labs-code/stitch-skills · plugins/stitch-design/skills/code-to-design/SKILL.mdSKILL.md

--- name: stitch::code-to-design description: - Convert frontend code (Vite, React, Angular, Vue, etc.) to a Stitch Design by chaining static HTML extraction, design system extraction, and file upload. **ALWAYS** use this skill when the user's intent is to move existing web apps or React/Angular/Vue components into Stitch (e.g., requests to "save", "migrate", or "upload"). You must use this skill even for simple "save" operations, as it is the only way to … --- ## Workflow

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

01 Что делает

Что делает skill stitch::code-to-design в Claude Code и Codex

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

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

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

Преобразует существующую фронтенд-кодовую базу (React + Vite, Next.js, Angular, Vue) в Stitch Design, последовательно вызывая три skill: extract-static-html, extract-design-md и upload-to-stitch. Предназначен для дизайнеров и разработчиков, переносящих работающее приложение или собранную веб-директорию в Stitch, чтобы продолжить работу над ним там.

Рабочий процесс извлекает один автономный HTML-файл, записывает дизайн-систему в .stitch/DESIGN.md, создаёт дизайн-систему в Stitch, затем загружает HTML как экран с названием по маршруту страницы. Это обязательный путь для запросов на сохранение, миграцию или загрузку, а проверка HTML необязательна и никогда не блокирует выполнение.

Что он выдаёт

Один автономный HTML-файл, например /path/to/extracted/standalone.html.
Описание дизайн-системы, записанное как DESIGN.md.
Экран, загруженный в Stitch, чьё имя и заголовок определяют маршрут, из которого он взят в приложении.

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

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

01
Извлечь автономный HTML-файл
Передаёт задачу skill extract-static-html, который работает с результатом сборки или запущенным dev-сервером, таким как Vite или Angular CLI ng serve, и создаёт один автономный HTML-файл.
02
Предложить проверку без остановки
После извлечения вы сообщаете пользователю, где находится файл, чтобы он мог проверить его сам в браузере, а выполнение продолжается к следующему шагу независимо от результата.
03
Анализ исходного кода для построения дизайн-системы
Skill extract-design-md считывает компоненты проекта, файлы стилей и конфигурации темы, а результат записывается в файл дизайн-системы.
04
Создание дизайн-системы в Stitch
Skill manage-design-system загружает DESIGN.md и вызывает create_design_system_from_design_md с необходимыми схемами.
05
Загрузка HTML как экрана
Тот же скрипт загрузки отправляет автономный HTML с использованием ключа API Stitch и projectId, при этом аргумент title устанавливается равным маршруту страницы, чтобы экран можно было идентифицировать в Stitch.

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

Когда использовать skill stitch::code-to-design

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

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

Существующее приложение, написанное на React + Vite, Next.js, Angular или Vue, которое пользователь хочет перенести в Stitch и продолжать улучшать там.
Запрос, сформулированный расплывчато — как «сохранить», «перенести» или «загрузить», а не как явная задача конвертации.
Проект, уже запущенный на dev-сервере Vite или обслуживаемый через Angular CLI ng serve.
Рабочее пространство Angular, организованное с помощью angular.json, внешних .html-шаблонов, файлов темы и компонентов — всё это используется при извлечении дизайн-системы.

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

Нет ничего запускаемого, на что можно ссылаться: workflow требует либо запущенного локального dev-сервера, либо каталога собранного веб-приложения, содержащего index.html и ресурсы.

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

Целевой projectId в StitchДля загрузок нужен проект назначения; если он неизвестен, сначала найдите его с помощью list_projects.
Путь к извлечённому HTMLАвтономный файл, созданный на шаге 1, необходимо передать на шаг загрузки вместе с ключом API и projectId.
Исходные файлы проектаКомпоненты, файлы стилей и конфигурации темы — это то, что анализ дизайн-системы считывает для получения DESIGN.md.

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

Правила, которые skill stitch::code-to-design задаёт для Claude Code и Codex

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

Всегда используйте его при намерении сохранить, перенести или загрузить
Любой перенос существующих веб-приложений или компонентов React/Angular/Vue в Stitch должен проходить через этот skill, даже при простом сохранении, поскольку это единственный путь, который также извлекает дизайн-систему и связывает ресурсы.
Запись дизайн-системы в .stitch/DESIGN.md
Файл дизайн-системы должен находиться по пути .stitch/DESIGN.md и соответствовать структуре, определённой skill extract-design-md.
Никогда не блокируйте процесс на этапе проверки
Проверка извлечённого HTML управляется пользователем и является необязательной; агент должен переходить напрямую к шагу создания дизайн-системы, не дожидаясь этого.
Пометка загрузки дизайн-системы
При загрузке DESIGN.md передавайте аргумент --generated-by 'stitch::code-to-design', чтобы зафиксировать источник созданного продукта.
Иначе помечайте загрузку HTML
Для загрузки HTML используется другой маркер, --generated-by 'stitch::extract-static-html', а не тот, что для code-to-design.
Повторное использование одного API-ключа для обеих загрузок
Ключ Stitch API, указанный в шаге 4, — это тот же ключ, который требуется для загрузки HTML; второй учётной записи не нужно.

04 Применение

Установить stitch::code-to-design в Claude Code или Codex

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

Добавить stitch::code-to-design в Claude Code, Codex или ваш агент

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

Terminal

npx skills add https://github.com/google-labs-code/stitch-skills --skill stitch::code-to-design

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

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

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

Starter prompt

Take the frontend in [path to repo] and move it into my Stitch project [projectId]. The Vite dev server is already running at [http://localhost:5173]. Extract the standalone HTML, write the design system to .stitch/DESIGN.md, upload both, and title the screen '/[route]'.

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

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

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

Откройте извлечённый файл в браузере, чтобы убедиться, что страница отображается как ожидается.
Если после проверки извлечения пользователь сообщает о проблемах, исправьте их, прежде чем продолжать workflow.

В OpenDesign импортируйте stitch::code-to-design по ссылке на его 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/code-to-design/SKILL.md Контрольная сумма содержимого записана при проверке; коммит 0337446
License: Apache-2.0 Из LICENSE.
Звёзды репозитория: 8 304 Снимок GitHub от 14.09.2026 для всего репозитория google-labs-code/stitch-skills, который содержит 12 навыков из этого каталога. Не является рейтингом или счётчиком использования для stitch::code-to-design.
Проверено OpenDesign: 2026-09-14 Исходный файл, путь, текст лицензии и количество звезд были проверены. Не входит в основной комплект OpenDesign (проверено 2026-08-28); живой запуск не был записан на этой странице.

Внутри SKILL.md

WorkflowУказывает агенту следовать перечисленным шагам для преобразования существующего кода.
ТребованияНужен запущенный dev-сервер или каталог собранного приложения, а также projectId в Stitch.
ШагиПять последовательных шагов, каждый из которых делегирует задачу другому skill или скрипту.

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

«- Конвертирует frontend-код (Vite, React, Angular, Vue и т.д.) в дизайн Stitch через цепочку извлечения статического HTML, извлечения дизайн-системы и загрузки файла. **ВСЕГДА** используйте этот skill, когда намерение пользователя — перенести существующие веб-приложения или React/Angular/Vue-компоненты в Stitch (например, запросы «сохранить», «мигрировать» или «загрузить»). Вы должны использовать этот skill даже для простых операций «сохранить», поскольку только так можно гарантировать, что дизайн-система извлечена, а ресурсы правильно связаны.»

Описание из метаданных SKILL.md. Полный файл содержит около 3 645 символов. Читать полный файл на GitHub.

06 Перед установкой

Вопросы о skill stitch::code-to-design

Ответы взяты из SKILL.md в редакции от 2026-09-14, а не из записанного запуска.

Он только загружает экран, или также создаёт design system?

И то, и другое. Файл DESIGN.md загружается, а design system создаётся в Stitch через workflow manage-design-system, который использует скрипт загрузки и вызов create_design_system_from_design_md с необходимыми схемами.

Какой skill на самом деле извлекает HTML из моего приложения?

Извлечение выполняет extract-static-html, создавая единый автономный HTML-файл из результата сборки или из запущенного dev-сервера, например Vite.

Stitch Code to Design

Запустите stitch::code-to-design на реальной задаче дизайна интерфейса.

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

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

Терминал

npx skills add https://github.com/google-labs-code/stitch-skills --skill stitch::code-to-design