Как использовать Claude Design в проде

Я разработчик, а не дизайнер. Но сайт, который ты сейчас читаешь, выглядит ровно так, как я хотел — потому что дизайн я собрал с Claude, сам руками не рисовал.

Расскажу весь путь — от пары референсов до живого домена. Без «нарисуйте мне красиво»: по шагам, с артефактами, которые реально пошли в разработку.

С чего начал — референсы

За основу взял несколько design.md со styles.refero.design — это готовые спеки стиля, модель понимает их как текстовый вход. Плюс анимации с reactbits.dev — оттуда забрал то, что хотел по ощущению: микровзаимодействия, decrypt-текст, reveal на скролле.

Это не «вдохновение в Figma». Это конкретный бриф для Claude: вот спека стиля, вот вайб анимаций — дальше работаем предметно.

Структура → вайфреймы → рабочий прототип

На основе референсов проработал структуру сайта и вайфреймы, а потом — рабочий прототип. Никаких статичных макетов, сразу кликабельные экраны: hero, блог, кейсы, about. Всё уже в моей терминальной айдентике — тёмный фон, изумрудный акцент, моноширинные детали.

Дизайн-система вместо набора макетов

Из прототипа Claude собрал дизайн-систему: токены — цвета, типографика, спейсинг, — компоненты и правила. Из неё любой новый экран собирается единообразно, «вот пять картинок» такого не дают. Для меня как разработчика это разница между «угадай по макету» и «возьми токен».

В каком виде получил handoff

Самое ценное — форма отдачи. Это готовый к разработке handoff, без единого PNG-макета: DS-токены прямо в CSS (colors, fonts, spacing, typography), компоненты в виде .dc.html, скриншоты каждого экрана и CLAUDE.md с правилами. Я открыл это в VS Code и сразу начал переносить; разглядывать макет и гадать не пришлось.

Хороший дизайн-handoff — это система, которую открываешь в редакторе и собираешь. Картинка так не умеет.

С прототипа — на живой сервер

Дальше моя территория. Взял дизайн-систему рабочего прототипа и перенёс на боевой стек: React + TypeScript, SCSS-модули с токенами один-в-один из handoff, FSD-архитектура. Никаких inline-стилей и хардкода цветов — всё через переменные, чтобы тема не поехала.

А потом развернул на живой сервер и домен: Docker + nginx + Certbot на VPS, автодеплой через GitHub Actions по SSH. Блог при этом вынес в отдельный контент-сервис на Hono и Turso, который кормит оба моих сайта — но это уже отдельный разбор, он есть в ленте.

Что в итоге

• →Референс (design.md + reactbits) → прямой вход для модели, без мудборда.
• →Структура и вайфреймы → кликабельный прототип в моей айдентике.
• →Дизайн-система из прототипа: токены + компоненты + правила.
• →Handoff в виде кода (CSS-токены, .dc.html, CLAUDE.md) вместо PNG.
• →Перенос на боевой стек (React/TS/SCSS-модули/FSD) и деплой (Docker/nginx/GitHub Actions).

Я не стал дизайнером. Но получил дизайн, за который не стыдно, и — главное — систему, которую сам понимаю и могу развивать. Claude закрыл ровно тот кусок, где я слабее всего, и отдал результат в форме, с которой я как разработчик работаю быстро.

P.S. Про то, как блог этого сайта переехал в отдельный сервис сразу на два домена и не уронил SEO — отдельный разбор, он уже в ленте.