stitch::react-nativeавтор Google Labs

Stitch React Native Skill.

Skill для Claude Code и Codex для дизайна мобильных приложений: конвертирует или синхронизирует Stitch HTML-дизайны в React Native компоненты.

Мобильные приложения
UI-код

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

google-labs-code/stitch-skills · plugins/stitch-build/skills/react-native/SKILL.mdSKILL.md

--- name: stitch::react-native description: - Convert Stitch HTML designs to React Native components, or syncs/updates existing native components to align with the latest Stitch designs, using StyleSheet. --- ## Phase 1: Retrieval and networking ## Phase 2: Theme extraction ## Phase 3: Architectural rules and HTML mapping ## Phase 4: Execution steps

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

01 Что делает

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

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

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

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

Этот skill превращает веб-дизайны Stitch на HTML/CSS в готовые к продакшену компоненты React Native с использованием StyleSheet, а также может синхронизировать существующие нативные компоненты с последними дизайнами Stitch. Он работает в четыре последовательных этапа с проверками: скачивание всех экранов с помощью scripts/fetch-stitch.sh и визуальный аудит каждого скриншота, извлечение токенов tailwind.config в src/theme.ts, преобразование HTML-элементов и CSS в примитивы React Native по строгим архитектурным правилам, а затем составление компонентов на основе resources/component-template.tsx.

Компоненты организованы по папкам Atomic Design в src/components/, логика находится в src/hooks/, контент — в src/data/mockData.ts, и каждый файл компонента экспортирует интерфейс readonly [ComponentName]Props. Валидация через npm run validate и tsc --noEmit необязательна и требует разрешения пользователя.

Что он выдаёт

src/theme.ts — файл токенов TypeScript, содержащий цвета, отступы и типографику, извлечённые из tailwind.config дизайна.
src/data/mockData.ts — файл, в котором хранится весь статический текст, URL-адреса изображений и списки, чтобы в компонентах не было захардкоженного контента.
Собственные хуки в src/hooks/, которые берут на себя обработчики событий, вызовы API и бизнес-логику, оставляя компонентам только рендеринг.
Файл .stitch/metadata.json, записанный внутри папки приложения и отражённый в корне рабочей области.

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

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

01
Определение пространства имён MCP
Выполните list_tools, чтобы найти префикс Stitch MCP, а затем используйте этот префикс для всех последующих вызовов в рамках сессии.
02
Скачивайте через скрипт
Внутренние инструменты для fetch могут давать сбой на доменах Google Cloud Storage, поэтому HTML и скриншоты загружаются через scripts/fetch-stitch.sh, который обрабатывает редиректы и проверки безопасности.
03
Проверьте каждый снимок экрана
Откройте скачанный PNG, чтобы убедиться в замысле дизайна и деталях макета, а не строить предположения о том, как выглядит дизайн.
04
Извлечь тему
Прочитайте объект tailwind.config внутри каждого блока script в head HTML-файла, чтобы получить цвета, шрифты, отступы, радиусы и типографику, затем запишите их в src/theme.ts в виде констант TypeScript.
05
Черновик по шаблону
Начинайте каждый компонент с resources/component-template.tsx и заменяйте все вхождения имени компонента-заглушки.
06
Запись метаданных синхронизации
Сохраните конфигурацию проекта в .stitch/metadata.json с полем Last Sync Time, соответствующим текущему времени выполнения синхронизации.

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

Когда использовать навык stitch::react-native

Используйте навык stitch::react-native в Claude Code или Codex, когда задача — дизайн мобильного приложения такого типа. Область применения и ограничения ниже взяты из собственного файла навыка.

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

Существующее приложение на React Native, чьи компоненты разошлись с дизайном и нуждаются в приведении в соответствие с новейшими макетами Stitch.
Многоэкранный проект Stitch, для которого нужен NavigationContainer со стековым или табовым навигатором, подключённым в App.tsx.
Дизайн, тени которого должны корректно выглядеть на обеих платформах: используется Platform.select для теневых свойств iOS и elevation в Android.
Команды, которым нужно, чтобы результат проверялся по письменному архитектурному чек-листу, прежде чем работа считается завершённой.

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

Дизайны, использующие эффекты hover, transition или animation в CSS: hover и transition не имеют аналога, а анимации относятся к react-native-reanimated.
Раскрывающиеся списки или поля выбора из веб-дизайна, поскольку в React Native нет встроенного select и требуется сторонний picker или собственное модальное окно.
Ожидания по веб-изображениям: у React Native Image нет собственного размера, поэтому всегда нужно задавать width и height либо aspectRatio.

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

Проект Stitch и его MCP-префиксАгент выполняет list_tools, чтобы найти MCP-префикс Stitch, и использует его для всех вызовов get_screen и get_project.
Значение ширины экранаК URL скриншотов нужно добавлять =w{width} с использованием ширины из метаданных экрана, иначе CDN Google отдаёт превью в низком разрешении.
Согласие на валидацию и запуск приложенияПеред запуском пакетировщика или визуальных аудитов в симуляторе для проверки отображения приложения на устройстве требуется разрешение.

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

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

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

Без сокращения поиска
Фаза 1 считается завершённой только после того, как все экраны загружены через скрипт и прошли визуальный аудит; чтение локальных файлов дизайна без предварительного вызова MCP get_screen запрещено.
Спрашивать перед обновлением дизайнов
Если .stitch/designs/{page}.html и .png уже существуют, агент должен спросить, обновить ли данные из проекта Stitch или использовать локальные файлы, и повторно загружать их только после подтверждения.
Никаких необработанных цветов в компонентах
Использование hex-кодов цвета и строк rgba в файлах компонентов запрещено; каждое значение цвета, отступа и размера шрифта должно браться из src/theme.ts.
Экспортируйте интерфейс Readonly Props
Каждый файл компонента, включая экраны, должен экспортировать интерфейс с именем [ComponentName]Props с модификаторами readonly, иначе валидация завершится ошибкой.
Безопасные зоны из правильного пакета
Экраны верхнего уровня оборачиваются в SafeAreaView из react-native-safe-area-context, а не в стандартный компонент из react-native.
Разбиение на файлы Atomic Design
Компоненты размещаются в src/components/atoms/, molecules/ и organisms/; помещать весь UI в один файл страницы или экрана запрещено.
Без заголовков Google
Сгенерированные компоненты следуют соглашениям целевого проекта и не должны содержать заголовки лицензии Google.
Разрешение перед тестированием
Скрипты валидации, упаковщики и аудиты симулятора никогда не запускаются в одностороннем порядке; агент должен сначала спросить разрешение у пользователя.

04 Применение

Установить stitch::react-native в Claude Code или Codex

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

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

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

Terminal

npx skills add https://github.com/google-labs-code/stitch-skills --skill stitch::react-native

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

Дайте скиллу первую задачу по дизайну мобильного приложения

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

Starter prompt

Convert the Stitch designs in project [project ID] to React Native. Download every screen with scripts/fetch-stitch.sh, visually audit the screenshots, extract the tailwind.config tokens into src/theme.ts, and build the components from resources/component-template.tsx using the atoms, molecules and organisms folders. Please hold off on starting the packager or a simulator audit for now.

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

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

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

Запустите валидатор для каждого файла .tsx в components и screens, чтобы получить отчёт о валидности компонентов.
Запустите компилятор TypeScript в режиме no-emit, чтобы подтвердить, что проект всё ещё компилируется.
Убедитесь, что цвета и шрифты в src/theme.ts действительно соответствуют тому, что получилось из HTML-дизайна.
Проверьте, что необработанный текст не находится вне компонента Text, так как React Native из-за этого крашится.

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

Внутри SKILL.md

Этап 1: получение и сетьНайдите префикс MCP, получите все экраны, скачайте HTML и скриншоты скриптом, проведите визуальный аудит, сохраните метаданные.
Этап 2: извлечение темыПеренесите токены цвета, шрифта, отступов, радиуса и типографики из tailwind.config в src/theme.ts.
Этап 3: архитектурные правила и маппинг HTMLСопоставьте HTML-теги с примитивами, преобразуйте CSS в StyleSheet, следуйте правилам Atomic Design, хуков, темы и доступности.
Этап 4: шаги выполненияУстановите зависимости, соберите тему, данные и компоненты из шаблона, подключите навигацию, затем при желании проведите валидацию с разрешения.
Устранение неполадокРешения для ошибок получения данных, сбоев валидации, необёрнутого текста, размеров изображений и предупреждений VirtualizedList.

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

"- Преобразует HTML-дизайны Stitch в компоненты React Native или синхронизирует/обновляет существующие нативные компоненты в соответствии с последними дизайнами Stitch, используя StyleSheet."

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

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

Вопросы о skill stitch::react-native

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

Можно ли пропустить Stitch MCP и просто передать локальные HTML-файлы?

Нет. Этап 1 требует, чтобы каждый экран был получен через get_screen и скачан с помощью scripts/fetch-stitch.sh до того, как что-либо будет прочитано, а прямое чтение локального HTML дизайна без предварительного вызова get_screen указано как антипаттерн.

Этот skill только создаёт новые экраны с нуля или может обновить приложение, которое у меня уже есть?

Он делает и то, и другое. Наряду с преобразованием нового HTML из Stitch в компоненты, skill синхронизирует и обновляет существующие нативные компоненты так, чтобы они соответствовали последним дизайнам Stitch.

Запустит ли он симулятор или упаковщик самостоятельно, чтобы проверить результат?

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

Stitch React Native

Запустите stitch::react-native на реальной задаче дизайна мобильного приложения.

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

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

Терминал

npx skills add https://github.com/google-labs-code/stitch-skills --skill stitch::react-native

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

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

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

Когда использовать навык stitch::react-native

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

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

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

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

Без сокращения поиска

Спрашивать перед обновлением дизайнов

Никаких необработанных цветов в компонентах

Экспортируйте интерфейс Readonly Props

Безопасные зоны из правильного пакета

Разбиение на файлы Atomic Design

Без заголовков Google

Разрешение перед тестированием