stitch::generate-designавтор Google Labs

Stitch Generate Design Skill.

Skill для Claude Code и Codex для UI-дизайна: генерирует, редактирует и создаёт варианты экранов в Stitch из текста или референсных изображений.

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

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

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

--- name: stitch::generate-design description: - Generate new screens from text prompts or images, edit existing screens with prompts and design system tokens, and generate design variants using Stitch MCP. Includes prompt enhancement pipeline, design mappings, professional UI/UX terminology, design tokens and theme system capabilities. --- ## 🎨 Prompt Enhancement Pipeline ## Steps ## 💡 Tips

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

01 Что делает

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

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

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

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

Этот skill управляет Stitch MCP через четыре сценария: генерацию нового экрана из текста, воссоздание изображения или макета, редактирование существующего экрана и генерацию вариантов. Перед любым вызовом генерации или редактирования он запускает конвейер улучшения промпта, который определяет проект и design system, заменяет расплывчатые формулировки терминологией UI/UX из своих карт соответствий и оформляет промпт вокруг макета, контента и структуры по шаблону с разделами PLATFORM и PAGE STRUCTURE.

Визуальное оформление остаётся на уровне проекта, поэтому промпты генерации не должны содержать hex-кодов, шрифтов или значений скругления. После каждого вызова выводится обратная связь от AI, а ассеты скачиваются в .stitch/designs.

Что он выдаёт

HTML и скриншот сгенерированного экрана, скачанные в директорию .stitch/designs.
Текстовое описание и предложения от AI, возвращаемые в outputComponents и показываемые пользователю.
Экраны-варианты для выбранного направления, партиями от одного до пяти.

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

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

01
Сначала улучшите промпт
Конвейер обязателен, а не опционален: агент переписывает запрос пользователя до того, как ему разрешат вызвать инструмент генерации или редактирования Stitch.
02
Проверьте, что уже стилизовано в проекте
Если в проекте уже есть design system, цвета, шрифты и скругление применяются на уровне проекта, поэтому улучшенный промпт должен полностью исключать визуальное оформление.
03
Оформите промпт как платформу плюс разделы страницы
Новые экраны следуют шаблону, где сначала указывается общее назначение, затем PLATFORM, затем нумерованный PAGE STRUCTURE от Header до Footer.
04
Выберите один из четырёх сценариев
Запрос направляется в Generate from Text, Generate from Image, Edit или Generate Variants до вызова какого-либо инструмента.

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

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

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

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

Начало совершенно нового экрана по текстовому описанию страницы.
Воссоздание того, что у вас уже есть в виде изображения, скриншота или макета.
Внесение точечного изменения на экран, который уже существует в проекте.
Изучение альтернативных макетов, цветовых схем или текста для имеющегося у вас экрана.

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

Он не создаёт экраны, пока не существует дизайн-системы: если в проекте её нет, работа сначала передаётся skill manage-design-system.
Загрузка изображения здесь не выполняется; изображение сначала становится содержимым экрана через skill upload, и только затем уточняется правками.

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

ВводИменно это конвейер улучшения переписывает в структурированный промпт Stitch.
Целевой проектАгент ищет проект по id и создаёт новый только тогда, когда подходящего проекта не существует.
Экран для правок или вариантовДля правок и вариантов нужны и projectId, и screenId, которые находятся через список или получение экранов.

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

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

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

Никакой утечки темы в промптах генерации
Никогда не указывайте hex-коды, названия шрифтов или роли цветов в промпте генерации; дизайн-система сама отвечает за визуальное оформление и конфликты дублирования.
Hex-коды — только при редактировании
Точные hex-значения допускаются для точного подбора цвета в промптах правок — это единственное место, где запрет на промпты генерации не действует.
Всегда показывайте outputComponents
После любого вызова инструмента Stitch агент должен показать пользователю возвращённые Text Description и Suggestions, а не только итоговый экран.
Редактируйте, а не создавайте заново
Полная повторная генерация используется только при принципиально неверном макете; всё остальное должно проходить через точечные правки.
Перезаписывайте локальные копии после правки
Обновлённые HTML и URL-адреса скриншотов снова загружаются на место предыдущих файлов, чтобы локальные файлы отражали последние правки.
Держите .stitch/metadata.json синхронизированным
После загрузки ресурсов метаданные обновляются изменёнными названиями экранов или новыми ID экранов; файл отслеживает все экраны, типы устройств и данные дизайн-системы.

04 Применение

Установите stitch::generate-design в Claude Code или Codex

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

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

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

Terminal

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

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

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

Адаптируйте этот промт с вашим содержимым и ограничениями, затем запустите его в Claude Code или Codex.

Example prompt

This is a dashboard mockup — recreate it with a proper data table, sidebar navigation, and chart widgets.

Источник: пример SKILL.md (буквально).

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

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

Посмотрите на итоговый экран и убедитесь, что запрошенные изменения действительно применились.
Если результат не в точности такой, как ожидалось, продолжайте в режиме правок, а не перегенерируйте; повторите с новым конкретным промптом, когда нужна дополнительная доработка.
Перед генерацией проверьте, существует ли для проекта дизайн-система.

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

Внутри SKILL.md

🎨 Конвейер улучшения промптаАнализ контекста, замена расплывчатых формулировок, структурирование промпта, вывод инсайтов AI
ШагиВыбор режима плюс потоки текста, изображения, редактирования и вариантов с их вызовами инструментов
💡 СоветыСтруктурность, приоритет контента, итеративная доводка, без утечки темы, точечные правки
📚 МатериалыДизайн-соответствия, ключевые слова для промптов и пример улучшенного промпта до/после

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

«- Генерирует новые экраны из текстовых промптов или изображений, редактирует существующие экраны с помощью промптов и токенов дизайн-системы, а также генерирует варианты дизайна с использованием Stitch MCP. Включает конвейер улучшения промптов, сопоставления дизайна, профессиональную терминологию UI/UX, возможности работы с токенами дизайна и системой тем.»

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

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

Вопросы о skill stitch::generate-design

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

Нужно ли настраивать имена инструментов перед началом работы?

Skill вызывает инструменты Stitch MCP, такие как list_projects, generate_screen_from_text и edit_screens, и его собственная заметка указывает следовать вашему системному промпту в вопросе обработки префиксов инструментов MCP. Так что соглашение о префиксах зависит от вашей настройки, а не от самого skill.

В чём разница между вариантами и правками?

Правки изменяют экран, который у вас уже есть; варианты исследуют альтернативы вокруг него через инструмент generate_variants. Направление можно задать через creativeRange — REFINE для тонких изменений, EXPLORE для сбалансированных, REIMAGINE для радикальных — а также сузить аспекты или оставить их пустыми для всех.

Можно ли начать со скриншота или мокапа вместо описания?

Да. Изображение передаётся skill upload-to-stitch, чтобы поместить его в проект, после чего агент находит новый screenId и уточняет дизайн с помощью промпта редактирования, описывающего, что нужно изменить или воссоздать.

Stitch Generate Design

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

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

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

Терминал

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