Боевой пайплайн на реальном кейсе сайта нашей с братом студии: разбор бренд-ассетов, формирование ТЗ, настройка дизайн-системы, промптинг, генерация графики через MCP Higgsfield и паттерны итераций.
Claude Design собирает живой кликабельный прототип по описанию — но по умолчанию выдает дефолтный AI-стиль. Ниже полный боевой пайплайн, по которому я собрал прототип сайта нашей студии BRO(Z)ERS: от разбора бренд-ассетов до прототипа с генерацией графики через MCP.
Интерфейс, модели, настройки
Вход: claude.ai/design (или вкладка Design в десктоп- или веб-приложении claude.ai). Бета, входит в подписки Pro, Max, Team и Enterprise. Официальный гайд по ссылке.
Структура привычна – слева чат, справа канвас. На стартовом экране: поле промпта, кнопка «+» для прикрепления файлов, дропдауны Design system и Template, переключатель кода и селектор модели. Модель бери самую продвинутую из доступных — у меня это Claude Fable 5 (также Opus 4.8 или Sonnet 5 нормис), менять можно между итерациями. Шаблоны: Prototype — интерактивные прототипы (наш случай), Wireframe — черновые схемы, Slides — деки, Document и Animation — по названию.
Правки делаются четырьмя способами: команды в чате, inline-комментарии на конкретных элементах, канвас-редактор (двигать, ресайзить, выравнивать руками) и слайдеры отступов и цвета. Экспорт: живой HTML, PDF, PPTX или хендофф в Claude Code. Косяк беты: при «chat upstream error» открой новый чат-таб в том же проекте.
Шаг 1. Разбор бренд-ассетов
У меня на входе были два SVG лого и OTF-шрифты от дизайнера. Цвета забираю прямо из SVG (обычный grep по hex): фиолет #5900DF, чернила #0D0E12, светлый #EAEAEB — и сразу проверяю контраст (8.4:1 на белом — можно красить текст).
Если своих ассетов нет: шрифты — fonts.google.com (наш моноширинный JetBrains Mono оттуда: JetBrains+Mono); цветовые референсы — behance.net и dribbble.com; собрать и проверить палитру — coolors.co.
Шрифты в веб-формат: OTF -> WOFF2 в две строки — pip install fonttools brotli, затем в python: f = TTFont('font.otf'); f.flavor = 'woff2'; f.save('font.woff2'). Веб-лицензия у шрифта отдельная от десктопной — проверь до продакшена.
Паттерны компонентов и механик: reactbits.dev (в нашем прототипе оттуда ScrollStack и FlowingMenu), magicui.design, uiverse.io, 21st.dev, ui.shadcn.com. Иконки: hugeicons.com. Мой полный стек — в вики: /wiki/frontend-ui-stack.
Шаг 2. Пакет: ТЗ, дизайн-система, код токенов
Три файла решают 80% качества. ТЗ (markdown): паспорт продукта -> дизайн-токены hex-в-hex -> структура по блокам с готовыми текстами 1:1 (тексты пишутся до дизайна) -> обязательные анимации списком -> запреты -> критерии приемки. У нас вышло около 460 строк — окупилось на первой же итерации. Дизайн-система отдельным markdown: цвета таблицей, шкала типографики, компоненты с состояниями (hover, active, focus, error), композиционные правила и раздел «нельзя». Код-папка: tokens.css, fonts.css с @font-face, base.css с базовыми компонентами, index.html-спесимен, подпапки fonts/ и assets/. Код сильнее слов: значения читаются из него, и вывод потом валидируется по системе.
Руками этот пакет не собираю — его делает Claude по моим ассетам.
Промпт, который копируешь целиком (прикрепив свои файлы):
Ты — арт-директор и продуктовый инженер. Собери пакет для Claude Design из моих бренд-ассетов. Вход: прикладываю SVG лого и шрифты (OTF или TTF). О продукте: [2-3 предложения — что продаем, кому, целевое действие страницы, характер бренда, референсы]. Сделай три файла. Первый — ТЗ (markdown): паспорт продукта (что, для кого, целевое действие, KPI) -> дизайн-токены: палитру возьми из моих файлов лого hex-в-hex и проверь контрасты по WCAG, шрифты — точные имена и веса из приложенных файлов -> структура страницы по блокам, в каждом блоке готовый текст 1:1 (заголовок, подзаголовок, body, CTA) и какое возражение блок закрывает -> обязательные анимации списком с приоритетами P0 и P1 -> запреты -> критерии приемки чек-листом. Второй — дизайн-система (отдельный markdown): цвета таблицей с ролями, шкала типографики, компоненты с состояниями hover, active, focus, error, композиционные правила, раздел «нельзя». Третий — код-папка: tokens.css со всеми переменными, fonts.css с @font-face (шрифты сконвертируй в WOFF2), base.css с базовыми компонентами (кнопки, ссылки, чипы, карточки, инпуты), index.html-спесимен, подпапки fonts/ и assets/. Отдай архивом. Правила: цвета и шрифты — только из моих файлов; ничего не выдумывай — ни кейсов, ни цифр, ни отзывов; чего не хватает — помечай TODO и спрашивай; тексты пиши до дизайна; при конфликте мои вводные важнее твоих дефолтов.
На выходе — три файла и архив, готовые к шагу 3.
Шаг 3. Дизайн-система в Claude Design
Дропдаун Design system -> Set up. Заполняю так:
- Company name and blurb — имя плюс 2-3 предложения: кто вы, что делаете, характер айдентики, ключевой hex.
- Link code from your computer — та самая код-папка. Старый проект с чужой палитрой не линкуй: импорт ровно настолько хорош, насколько хорош источник.
- Upload a .fig file — если есть Figma-исходник.
- Add fonts, logos and assets — WOFF2, SVG и сам файл дизайн-системы.
- Any other notes — самое жесткое: палитра hex-в-hex, веса шрифта (и каких НЕТ), радиусы, единственная тень, главные запреты.
Сохранил — и проверь, что на главном экране в Design system стоит твоя система, а не None.
Шаг 4. Проект и промпт
Шаблон Prototype, кнопкой «+» прикрепляю ТЗ. Промпт строю так: роль и задача -> список приложенных файлов -> жесткие константы -> карта страниц кратко -> обязательные механики списком -> порядок работы -> критерии сдачи. Два золотых правила: «при конфликте ТЗ важнее промпта, промпт важнее дефолтов модели» и «первая итерация — один экран, покажи и остановись».
Сам мастер-промпт тоже не пишу руками — его генерит Claude из готового пакета. Мета-промпт (копируй целиком, приложив ТЗ и дизайн-систему из шага 2):
Ты — промпт-инженер дизайн-агентов. Прикладываю ТЗ и дизайн-систему проекта. Собери из них один мастер-промпт для Claude Design, который я вставлю в поле чата целиком. Структура промпта: роль и задача в две строки -> список прикладываемых файлов и назначение каждого -> жесткие константы, вытащенные из ТЗ (палитра hex-в-hex, шрифты с весами и fallback, ключевой концепт, фирменные приемы) -> карта страниц кратко, по строке на страницу -> обязательные механики списком из P0-раздела ТЗ -> композиционные правила и запреты -> порядок работы: первая итерация — только главная страница, покажи и остановись, после правок — внутренние, в финале — самопроверка по критериям приемки из ТЗ -> критерии сдачи кратким чек-листом. Обязательно включи две строки: «при конфликте: ТЗ важнее этого промпта, промпт важнее твоих дефолтов» и «чего нет в ТЗ — спроси, не выдумывай». Правила генерации: все значения бери только из приложенных файлов, ничего не изобретай; не пересказывай ТЗ целиком — промпт это сжатие, ТЗ поедет рядом вложением; объем — до полутора экранов; плейсхолдеры TODO переноси как есть. Отдай промпт одним блоком, готовым к копированию.
У нас мастер-промпт собран именно так — и первой же итерацией агент выдал всю главную по ТЗ.
Шаг 5. Графика через MCP Higgsfield
Картинки не рисую руками и не беру со стоков — генерю через подключенный MCP-коннектор Higgsfield (модель Nano Banana) прямо из чата.
Подключение: настройки Claude -> Connectors -> найти Higgsfield в каталоге (или добавить вручную по адресу сервера mcp.higgsfield.ai/mcp) -> авторизоваться. Сайт: higgsfield.ai.
Правила промптов под бренд: фиксируй палитру hex-в-hex прямо в тексте промпта; всегда добавляй no text, no logos, no people, no UI screenshots; задавай формат кадра (3:2, 4:5). Мы сгенерили 6 абстрактных текстур для плиток раздела работ, амбиент-ленту для страницы студии и 15-секундный шоурил — все строго в палитре бренда.
Шаг 6. Итерации: внесение правок
Паттерны из реальных правок нашего прототипа — забирай как чек-лист:
- Чисти hero: дубли лого, лишние бейджи и кнопки — под нож; заголовок делай адаптивным, чтобы не уезжал за экран.
- Кастомный инерционный скролл ломает прокрутку сложных блоков — нативный надежнее.
- Колоды карточек (ScrollStack): масштаб плавнее, зазор меньше, ранний нахлест; блюр дальних карточек не добавляй.
- Типографика: характерный дисплей плюс спокойный наборный (у нас CoFo Kak + Inter) читается лучше, чем все одним характерным шрифтом.
- Разделители-точки между словами меняй на запятые или другие не слопные разделители.
- Full-bleed ленты проверяй на обрезку по левому краю.
- Футер: editorial-подача вместо четырех колонок, без дубля навигации из шапки, с кнопкой «Наверх».
- Критический баг на переходах между страницами (белый экран) оказался лишним закрывающим div в шве двух секций — он выкидывал остальные секции из main. Валидируй разметку швов.
- Мобайл 390: процесс горизонтально, тапы не меньше 44px, никакого горизонтального скролла страницы.
Шаг 7. Финалим
Прогон по чек-листу приемки из ТЗ -> экспорт HTML, PDF, PPTX или хендофф в Claude Code, где прототип превращается в код.
Прикладной чек-лист: с нуля до прототипа
Прочитал — теперь делай. Иди по шагам и отмечай галочки по ходу:
- Открой claude.ai/design и проверь доступ (нужна подписка Pro, Max, Team или Enterprise)
- Собери в одну папку бренд-ассеты: SVG лого и файлы шрифтов. Своих нет — шрифты бери на fonts.google.com, палитру собери на coolors.co
- Скопируй промпт из шага 2, приложи ассеты, замени плейсхолдер описанием продукта — забери у Claude ТЗ, дизайн-систему и код-папку
- Вычитай тексты блоков в ТЗ: должен говорить твой продукт, а не шаблон
- В Claude Design открой Design system -> Set up: заполни имя и blurb, перетащи код-папку, загрузи шрифты и лого, вставь жесткие правила в Any other notes
- Проверь, что в дропдауне Design system стоит твоя система, а не None
- Создай проект по шаблону Prototype и прикрепи ТЗ кнопкой «+»
- Скопируй мета-промпт из шага 4, приложи ТЗ и дизайн-систему — забери готовый мастер-промпт
- Вставь мастер-промпт в чат проекта и отправь. Первая итерация — только главная
- Не обязательно. Подключи Higgsfield в Connectors и сгенери графику: палитра hex-в-hex в промпте, всегда no text, no logos, no people (важная памятка, требуется подписка и наличие кредитов на Higgsfield)
- Прогони главную по правкам из шага 6; правь не пожеланиями, а четкими командами
- Собери внутренние страницы одной командой: «по ТЗ, токены и компоненты не менять»
- Финальная проверка: цвета hex-в-hex, тексты 1:1 из ТЗ, мобайл 390 без горизонтального скролла, переходы без белых экранов, консоль без ошибок
- Экспортируй HTML или передай в Claude Code
Все готово, поздравляю!