Навык 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
📖 Read the full source: r/ClaudeAI
👀 Смотрите также
Сократовский генератор подсказок, созданный как артефакт React внутри Claude
Разработчик создал генератор сократических промптов как React-артефакт, работающий внутри Claude, с автоматическим определением сложности ввода и трёхуровневой генерацией промптов с анализом режимов сбоев.
Профилировщик затрат на LLM: инструмент с открытым исходным кодом отслеживает расходы на API, чтобы обосновать использование локальных моделей.
LLM Cost Profiler — это инструмент на Python, который отслеживает каждый API-вызов к OpenAI/Anthropic, показывая, на что именно и сколько вы тратите. Он выявляет задачи, стоимость которых завышена относительно их сложности, предоставляя конкретные суммы в долларах для обоснования перехода на локальные модели.
Пересмотрено: Редактор ИИ, созданный с помощью агентных инструментов программирования и Y.js CRDT
Revise — это AI-редактор для документов, созданный с нуля за 10 месяцев с использованием агентных инструментов кодирования, с собственным движком текстового процессора и слоем рендеринга, который использует Y.js только для стека CRDT. Он интегрирует несколько AI-моделей, включая варианты GPT-5.4 и модели Claude, для проверки и редактирования.
AutoProber: автоматизация летающих зондов на основе искусственного интеллекта для аппаратного взлома
AutoProber — это автоматизированный стек летающих зондов для хакеров аппаратного обеспечения, который позволяет ИИ-агентам обнаруживать цели, сопоставлять изображения с микроскопа, выполнять движения на ЧПУ с контролем безопасности, проверять зонды и проводить контролируемое зондирование контактов. Он включает код управления на Python, веб-панель управления, CAD-файлы и работает с контроллерами ЧПУ GRBL, USB-микроскопами и мониторингом безопасности через осциллограф.