Навык Claude Code преобразует дизайны Stitch в Next.js без смещения пикселей.

Что делает этот инструмент

Навык Claude Code (слэш-команда) преобразует дизайны Google Stitch AI в компоненты Next.js, предотвращая смещение пикселей, которое обычно возникает при использовании Claude для этой задачи. Инструмент решает конкретные проблемы, когда Claude округляет значения вроде text-[15px] до text-sm, заменяет точные цвета вроде #1E293B на приблизительные классы Tailwind вроде bg-slate-800, теряет изображения из-за истечения срока действия CDN-URL или пропускает шрифты.

Ключевые особенности и процесс

• Извлекает точный HTML/CSS из Stitch через MCP — без копирования-вставки или скриншотов
• Сохраняет точные значения пикселей на протяжении всего процесса (text-[15px] остаётся text-[15px], не округляется до класса Tailwind)
• Загружает все изображения с CDN Stitch до истечения срока действия URL
• Правильно сопоставляет все 29 шрифтов Stitch с next/font/google
• Включает 5 обязательных контрольных точек проверки, которые сравнивают результат с исходником перед продолжением
• Генерирует полный отчёт аудита, показывающий, что именно было сохранено и где потребовались субъективные решения
• Поддерживает сопоставление компонентов ShadCN/UI с точными переопределениями стилей

Установка и настройка

Установите с помощью: curl -sL https://raw.githubusercontent.com/yshaish1/stitch-to-nextjs/main/install.sh | bash

Установка также автоматически настраивает сервер stitch-mcp.

Почему необходимы контрольные точки проверки

Контрольные точки проверки решают проблему склонности Claude отклоняться в сторону соглашений Tailwind, когда его оставляют наедине с задачей. Подсказка навыка явно отмечает эту закономерность и принудительно требует повторной проверки на каждом этапе. Хотя это не панацея, такой подход выявляет типичные ошибки до того, как они накопятся.

Инструмент доступен на GitHub: https://github.com/yshaish1/stitch-to-nextjs