AI-дизайн-пайплайн: от референса до дизайн-системы за 3 шага

Как не получить на выходе 'дефолтный шаблон'. Пайплайн из трёх шагов: находите референс, генерируете вариации, получаете готовую дизайн-систему для проекта.

Зачем этот гайд

Вы запускаете Claude Code, говорите «сделай красивый лендинг» — и получаете… дефолтный шаблон. Белый фон, синие кнопки, стандартные карточки. Работает, но выглядит как каждый второй сайт в интернете.

Проблема не в Claude. Проблема в том, что вы не дали ему визуальный ориентир. Claude отлично строит интерфейсы, но ему нужен конкретный стилистический фундамент — как архитектору нужен эскиз, а не просто слово «красиво».

Этот гайд — пайплайн из трёх шагов, который решает эту проблему. На выходе — не один экран, а дизайн-система: набор правил, цветов, компонентов, которые Claude будет использовать во всём проекте. Единый стиль, без «дефолтных шаблонов».

Пайплайн собран из практик реальных разработчиков, которые строят продукты с помощью AI.

Обзор пайплайна

Шаг	Что делаете	Инструмент	Результат
1	Находите визуальный референс	Dribbble, Mobbin, cosmos.so	Один скриншот — «я хочу как здесь»
2	Генерируете вариации экранов	Google Stitch	10–15 вариаций на одном канвасе
3	Создаёте дизайн-систему	Gemini + Claude Code	design-rules.md + готовые компоненты

Весь процесс занимает 1–2 часа. После этого каждый новый экран в проекте Claude будет делать в едином стиле.

Шаг 1. Найдите визуальный референс

Вам нужен один скриншот или макет, который передаёт стиль, который вы хотите. Не два, не три — именно один. Смешивание нескольких стилей на старте — главная ошибка, которая даёт «кашу» на выходе.

Где искать

Dribbble (dribbble.com) — дизайнерское портфолио. Много концептов, красивые, но не всегда реалистичные
Mobbin (mobbin.com) — 400 000+ скриншотов из реальных приложений (Airbnb, Uber, Spotify). Лучший выбор для мобильных приложений — это продакшн, не концепты
cosmos.so — кураторская коллекция веб-дизайна
minimal.gallery — минималистичные сайты

Что выбирать

Плоский скриншот (не 3D-мокап, не видео)
Один стиль, не микс
Не обязательно ваша тема — важен именно визуальный стиль: типографика, отступы, цвета, компоновка

Сохраните скриншот — он понадобится на следующем шаге.

Шаг 2. Сгенерируйте вариации

Google Stitch (stitch.withgoogle.com) — бесплатный инструмент от Google, который генерирует UI-экраны по визуальному референсу.

Что делать

Откройте Google Stitch в браузере
Загрузите ваш скриншот-референс
Опишите, какие экраны нужны: «главная страница», «страница продукта», «форма контактов»
Stitch сгенерирует 10–15 вариаций на одном канвасе

Что вы получите

За полчаса — набор экранов в едином стиле. Не все будут идеальными, но среди 15 вариаций вы найдёте 3–5, которые точно подходят.

Формат на выходе

Stitch отдаёт результат в двух форматах:

HTML/CSS — можно использовать напрямую для веб-проектов
Figma — можно доработать в дизайн-редакторе

Для нашего пайплайна достаточно скриншота лучших вариаций.

Шаг 3. Создайте дизайн-систему

Это ключевой шаг. Вы берёте скриншоты из Stitch и превращаете их в набор правил, которые Claude Code будет использовать во всём проекте.

3а. Анализ скриншота через Gemini

Откройте Gemini (gemini.google.com) или Google AI Studio и загрузите скриншот лучшей вариации из Stitch.

Промпт:

Проанализируй этот UI-скриншот. Создай подробный JSON-файл (design.json) со следующей структурой:

colors: основные цвета (primary, secondary, background, text, accent) в HEX

typography: шрифты, размеры заголовков (h1–h4), основного текста, подписей

spacing: отступы между секциями, карточками, элементами внутри карточек (в px)

shadows: тени карточек и кнопок

borders: скругления углов, толщина рамок

components: описание каждого видимого компонента (кнопки, карточки, навигация, формы)

Различай padding (внутренний отступ) от margin (внешний). Указывай точные значения, не приблизительные.

Почему Gemini, а не Claude? На этом конкретном шаге — анализе скриншота — Gemini точнее считывает цвета и отступы. Claude иногда «додумывает» цвета, которых нет на картинке. Gemini реже ошибается.

Сохраните результат как design.json.

3б. Генерация компонентов через Claude Code

Теперь передайте design.json в Claude Code:

У меня есть design.json с дизайн-токенами проекта. Сделай три вещи:

Создай UI-kit: базовые компоненты (кнопки, карточки, формы, навигация) на React + Tailwind, строго по токенам из design.json

Создай design-rules.md — документ-«библию» проекта: все правила стилей, отступов, типографики, компонентов. Этот документ будет использоваться как контекст для всех будущих задач

Обнови CLAUDE.md — добавь ссылку на design-rules.md как обязательный контекст для UI-задач

3в. Критический обзор (опционально)

Для лучшего результата попросите Claude Code проверить собственную работу:

Проведи критический обзор design-rules.md: найди несоответствия с design.json, пропущенные компоненты, неконсистентные отступы. Исправь.

Что вы получили

После этого пайплайна у вас есть:

design.json — токены дизайна: цвета, шрифты, отступы, тени
UI-kit — готовые компоненты в коде
design-rules.md — правила, по которым Claude будет делать все будущие экраны

Теперь, когда вы говорите Claude Code «сделай страницу FAQ» — он берёт компоненты из UI-kit, следует правилам из design-rules.md, и результат выглядит как часть единого продукта.

Альтернативный подход: токены без скриншотов

Если у вас уже есть представление о стиле и вы не хотите проходить через Stitch, можно создать дизайн-систему «с нуля» через токены:

Опишите Claude Code желаемый стиль словами: «минималистичный, тёмная тема, много воздуха, акцент — фиолетовый»
Попросите создать design-tokens.json — цвета, типографика, отступы, тени
Из токенов Claude сгенерирует Tailwind-конфиг и CSS-переменные
Компоненты строятся поверх этих токенов

Этот путь быстрее, но результат менее предсказуем — без визуального референса легко получить «ещё один дефолтный шаблон».

Частые ошибки

Смешивать 2–3 референса. Один стиль — один референс. Хотите комбинировать — сначала проверьте через Stitch, не будет ли «каши»
Пропускать шаг с Gemini. Если дать скриншот напрямую Claude Code без промежуточного анализа, результат будет грубее — Claude хуже считывает точные значения с картинок
Не создавать design-rules.md. Без этого документа стиль «расползётся» через 3–4 экрана — Claude начнёт импровизировать
Не обновлять CLAUDE.md. Если design-rules.md не прописан как обязательный контекст, Claude может его проигнорировать

Итог

Вместо «сделай красивый лендинг» → «дефолтный шаблон» — вы получаете пайплайн:

Референс → Вариации → Дизайн-система → Единый стиль во всём проекте

Один раз потратили 1–2 часа на настройку — и дальше каждый экран делается в едином стиле автоматически.