# stitch-to-nextjs

Плагин переносит экраны из Google Stitch в компоненты Next.js с Tailwind CSS, сохраняя значения цветов, отступов и шрифтов. Пригодится, когда нужно сверстать экран по готовому дизайну.

- плагин · `type=plugin` · Claude Code · ★ 11
- Автор: yshaish1
- Лицензия: MIT · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/yshaish1/stitch-to-nextjs
- Обновлён: 2026-04-01
- HTML: https://affpapa.org/nevibecode/plugins/stitch-to-nextjs

## Что делает

stitch-to-nextjs извлекает HTML, CSS, шрифты и изображения из проекта Google Stitch и генерирует компоненты Next.js. Для размеров, цветов и отступов использует точные значения, а не ближайшие классы Tailwind. Изображения скачивает в `public/assets/`, а шрифты подключает через `next/font/google` или, для METROPOLIS, `next/font/local`.

Работа проходит в семь этапов: плагин находит проект и экран, считывает токены дизайна, получает код, создаёт компоненты, загружает изображения, настраивает шрифты и сохраняет скриншот для сравнения. Он распознаёт Tailwind v3 и v4, может сопоставлять элементы с ShadCN/UI и по умолчанию создаёт React Server Components. Для работы нужны Claude Code, проект в Google Stitch и однократная авторизация через `npx @_davideast/stitch-mcp init`; без неё доступ к данным Google не настроить.

## Установка

### Claude Code (родная платформа)

**Через маркетплейс плагинов**
В чате агента (не в терминале):
```text
/plugin marketplace add anthropics/claude-plugins-community
```
В чате агента (не в терминале):
```text
/plugin install stitch-to-nextjs@claude-community
```

## Когда брать
- перенести экран Google Stitch в компонент Next.js
- сохранить заданные в дизайне цвета и отступы
- скачать изображения экрана в `public/assets/`
- сверить результат со скриншотом из Stitch

## Примеры запросов агенту
- Покажи мои проекты Google Stitch: `/stitch-to-nextjs list`.
- Преобразуй экран `Hero Section` из проекта `My Landing Page` командой `/stitch-to-nextjs "My Landing Page" "Hero Section"`.
- Собери экран по идентификаторам проекта и экрана: `/stitch-to-nextjs 4044680601076201931 98b50e2ddc9943efb387052637738f61`.

## Похожие
- [impeccable](https://affpapa.org/nevibecode/plugins/impeccable.md) — плагин · ★ 89321
- [hyperframes](https://affpapa.org/nevibecode/plugins/hyperframes.md) — плагин · ★ 73168
- [typescript-lsp](https://affpapa.org/nevibecode/plugins/typescript-lsp.md) — плагин · ★ 44770
- [playground](https://affpapa.org/nevibecode/plugins/playground.md) — плагин · ★ 44770
- [frontend-design](https://affpapa.org/nevibecode/plugins/frontend-design.md) — плагин · ★ 44770
- [fakechat](https://affpapa.org/nevibecode/plugins/fakechat.md) — плагин · ★ 44770

_Часть страницы не вошла по размеру — она есть в HTML-версии._

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md