Как заставить Claude Design работать с реальной дизайн-системой, а не генерить «похожие» компоненты.
Синхронизация дизайн-системы с Claude Design через /design-sync: бандл, экспорты, типы и проверка рендера.
Если вы пробуете использовать Claude Design для прототипирования или генерации UI, наверняка замечали проблему: AI любит генерить интерфейсы из своих дефолтных или приблизительных элементов вместо реальных компонентов из вашего репозитория.
Нитай Ниман выкатил подробный разбор как это сделать. В статье он объясняет, как устроен процесс синхронизации через команду /design-sync в Claude Code и создаётся т.н. зеркало дизайн-системы.
Главные тезисы:
- Зеркало — это скомпилированный бандл, а не просто исходники. Чтобы Claude мог честно рендерить компоненты, в бандл упаковываются сами компоненты, типы TypeScript, стили, шрифты и автономный экземпляр React.
- Невидимые экспорты: все компоненты должны быть строго ре-экспортированы из корневого файла (например,
src/index.ts). Если забыть что-то ре-экспортировать, Claude банально не увидит элемент. - Типизация критична: синхронизация ищет компоненты через
.d.ts-файлы. Если сборка не генерирует декларации типов илиpackage.jsonне указывает на них, типы пропадают, а вместе с ними — и пропсы с вариациями. - Проверка визуальной точности: при синхронизации запускается headless-браузер, делается скриншот каждого превью/истории из Storybook, а сам Claude сверяет рендер с эталоном side-by-side, чтобы убедиться, что стили не слетели.
Если развиваете внутренний UI-кит или используете shadcn/ui и хотите, чтобы Claude Code выдавал готовые макеты на реальных пропсах и стилях, статья — отличный пошаговый гайд с примером репозитория.
Для наглядного разбора того, как связать Claude Design и Claude Code с помощью MCP-сервера и команды /design-sync, советую посмотреть это видео. Автор показывает живой процесс импорта компонентов и генерации формы на их основе.