Как проектировать интерфейсывместе с Claude Code

Дизайнер новой эпохи

Появился новый тип специалиста. Его называют по-разному — вайбкодер, design engineer, AI-native designer — но суть одна: человек, который проектирует не пиксели, а намерение, и доверяет перевод намерения в работающий интерфейс модели. Термин «вайбкодинг» ввёл Андрей Карпати в феврале 2025-го: «полностью отдаться вайбу» — описывать что ты хочешь, а не как это построить.

Но есть ловушка, которую видно невооружённым глазом. Вайбкодинг должен был демократизировать дизайн — а вместо этого залил веб одинаковыми, бездушными интерфейсами, на которых написано «сделано ИИ». Фиолетовые градиенты на белом, шрифт Inter, предсказуемые сетки из трёх карточек. Это называют AI slop.

Хорошая новость: рычаг невероятный. То, на что раньше уходила неделя — макет, вёрстка, прототип, ревью, правки — теперь сжимается в часы. Но рычаг работает в обе стороны: без вкуса ты быстрее производишь мусор. Поэтому курс построен в таком порядке: сначала мышление и вкус, потом инструменты и циклы, потом системы и масштаб.

Ментальная модель: два мозга

Главная ошибка новичка — смешивать исследование и производство в одном диалоге. Именно здесь сгорают часы. Профессионалы держат два режима раздельно.

Дизайнер Кэтрин Йе предлагает простую структуру из трёх сущностей. Запомни её — это карта всего, что будет дальше:

Три сущности подробнее

Skills (навыки) — это знание, которое ты даёшь Claude: принципы дизайна, спеки компонентов и токенов, правила тона и копирайта. Это «почему» и «по каким правилам». Skills — обычные markdown-файлы (SKILL.md), и, что важно, ты можешь попросить сам Claude помочь их написать.

MCP-серверы (Model Context Protocol) — это руки. Открытый стандарт-«переходник», через который Claude дотягивается до Figma, браузера, таск-трекера, базы кода. Без MCP Claude знает как делать, но не может дотянуться до твоих инструментов.

Окружения — где ты работаешь. Терминал / IDE-расширение Claude Code умеет рендерить на localhost и редактировать узлы Figma. Десктоп-приложение (Cowork) хорошо для размышлений и критики, но рендеринг живёт там, где есть localhost.

Вкус — твой единственный дифференциатор

Когда любой может сгенерировать сайт за минуту, ценность смещается с производства на суждение. Что именно сделать, почему именно так, что выбросить. Это нельзя промптить «в лоб» — это насмотренность, которую нужно тренировать и оцифровывать.

Анатомия AI slop — чтобы узнавать врага

Большинство AI-фронтендов сходятся к одной и той же усталой эстетике. Вот её приметы — если видишь это в своём результате, ты на дистрибуции, в «среднем по интернету»:

Swipe file — твоя оцифрованная насмотренность

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

Тренируй язык, которым описываешь эстетику

Claude отлично реагирует на эмоциональные и стилевые ярлыки, если они конкретны. Сравни:

Полезные опорные слова-направления: brutally minimal, maximalist chaos, retro-futuristic, editorial, solarpunk, swiss / international, terminal / IDE aesthetic, warm analog. Каждое тянет за собой свой набор шрифтов, цветов и ритма.

Промптинг для эстетики

Anthropic в своём Cookbook прямо называет проблему: модель «тяготеет к генерическим, on-distribution выводам». Лекарство — структурно управлять отдельными измерениями дизайна, а не просить «красиво». Есть три стратегии, которые стабильно дают результат.

1. Управляй каждым измерением отдельно — типографика, цвет, движение, фон по очереди.
2. Ссылайся на источники вдохновения — IDE-темы, культурные эстетики, конкретные референсы.
3. Называй дефолты, которых надо избегать — явно запрещай то, к чему модель скатывается сама.

Четыре измерения, которыми ты управляешь

Типографика

Шрифт мгновенно сигналит о качестве. Запрещай: Inter, Roboto, Arial, Lato, Open Sans, системные. Бери из палитры по настроению:

Приём силы: экстремальные контрасты веса (100/200 против 800/900, а не 400 против 600) и скачки размера в 3+ раза. Один шрифт, использованный решительно, лучше трёх робких.

Цвет и тема

Используй CSS-переменные для консистентности. Доминирующий цвет + резкий акцент выигрывает у робкой равномерной палитры. Черпай из IDE-тем и культурных эстетик. Главное — коммитнуться в одну цельную эстетику, а не растекаться.

Движение

Для HTML — только CSS; для React — библиотека Motion. Фокус на моментах высокой отдачи: одна хорошо срежиссированная загрузка страницы со ступенчатыми появлениями (animation-delay) даёт больше восторга, чем десяток разбросанных микро-анимаций.

Фон

Создавай атмосферу и глубину вместо плоской заливки: слоистые CSS-градиенты, геометрические паттерны, контекстные эффекты, которые поддерживают общую эстетику.

Мастер-промпт по эстетике (копируй)

Это эталонный блок от Anthropic. Вставляй его в начало сессии, в CLAUDE.md или в свой skill — он разворачивает Claude от слопа к замыслу. По данным Anthropic, структурная подача даёт на 20–30% более отличительные результаты.

<frontend_aesthetics>
Ты склонен скатываться к генерическим, "on-distribution" выводам. Во
фронтенде это даёт "AI slop". Избегай этого: делай креативные,
отличительные интерфейсы, которые удивляют и радуют.

Типографика: выбирай красивые, уникальные, интересные шрифты. Избегай
Inter, Roboto, Arial; бери отличительные начертания, повышающие класс.

Цвет и тема: коммитнись в цельную эстетику. Используй CSS-переменные.
Доминирующие цвета с резкими акцентами лучше робких равномерных палитр.
Черпай вдохновение из IDE-тем и культурных эстетик.

Движение: используй анимации для эффектов и микро-взаимодействий.
Приоритет — CSS для HTML; Motion для React. Фокус на моментах высокой
отдачи: одна срежиссированная загрузка со ступенчатыми появлениями
(animation-delay) радует больше, чем разбросанные микро-анимации.

Фон: создавай атмосферу и глубину вместо плоской заливки. Слои
CSS-градиентов, геометрические паттерны, контекстные эффекты.

Избегай генерической AI-эстетики:
- избитые шрифты (Inter, Roboto, Arial, системные)
- клишированные палитры (особенно фиолетовый градиент на белом)
- предсказуемые лейауты и паттерны компонентов
- шаблонный дизайн без контекстного характера

Интерпретируй креативно, делай неожиданные выборы, которые ощущаются
спроектированными именно под этот контекст.
</frontend_aesthetics>

Изолированный промптинг — точечный контроль

Когда нужен быстрый результат или фокус на одном — изолируй измерение в отдельный блок:

<use_interesting_fonts>
Типографика мгновенно сигналит о качестве. Никаких скучных шрифтов.
Никогда: Inter, Roboto, Open Sans, Lato, системные.
Используй: [твои конкретные рекомендации].
Выбери один отличительный шрифт и применяй его решительно.
Подключай из Google Fonts.
</use_interesting_fonts>

Design system как фундамент

Промпт управляет одной сессией. Система управляет всеми. Лучшая практика, которую повторяют все профи: сначала засей дизайн-систему, потом проси дизайн. Если не задать бренд первым — будешь воевать с генерической эстетикой весь проект.

CLAUDE.md — память проекта

Файл CLAUDE.md в корне проекта Claude Code читает автоматически в каждой сессии. Это твой постоянный контекст: стек, правила, эстетика, ссылки на skills. Минимальный дизайн-ориентированный каркас:

# Проект: [название]

## Стек
React + Tailwind + shadcn/ui + Motion. Иконки — Lucide.

## Дизайн-эстетика (читать всегда)
- Шрифты: заголовки — Bricolage Grotesque, текст — Newsreader,
  код — JetBrains Mono. НИКОГДА Inter/Roboto/системные.
- Палитра: тёмная "studio" база, доминанта — ember (#ff6a3d),
  холодный акцент — teal. CSS-переменные обязательны.
- Фон: атмосферный, слоистые градиенты. Не плоская заливка.
- Движение: один срежиссированный момент на экран, не россыпь.
- Лейаут: асимметрия и воздух приветствуются, шаблонные
  "три карточки по центру" — нет.

## Правила
- Перед версткой компонента сверяйся с design-tokens.
- Новые UI меряй о принципы из skill `design-principles`.
- После изменения UI — снимай скриншот через Playwright и проверяй сам.

Трёхслойная архитектура skills

Это ключ к системе, которая не «плывёт». Профи раскладывают знание на три слоя — так обновление принципов автоматически отражается во всех зависимых воркфлоу, без дублирования и дрейфа.

Слой 1 — Reference Skills (знание)

• design-principles — «почему»: фреймворки оценки, визуальная иерархия, философия. Учит Claude суждению.
• component-token-specs — единый источник правды по компонентам, токенам, иконкам. То, что инструмент рендеринга читает при генерации.
• content-strategy — голос, тон, паттерны копирайта.
• motion-specs — тайминги, кривые, длительности, паттерны переходов.

Слой 2 — Capability Skills (воркфлоу)

• generate-design — создаёт hi-fi экран (тянет Principles + Specs + Content).
• design-review — эвристическая оценка (тянет Principles, подключается к Figma MCP).
• identify-ux-problems — аудит интерфейса против принципов.
• read-filter-prd, create-design-ticket — вход из требований.

Слой 3 — Tools & Connectors (MCP)

• Figma MCP — скриншоты, метаданные, узлы, переменные.
• Playwright MCP — браузер, рендер, скриншоты состояния.
• Таск-трекеры, вики, база кода.

Claude Design: от текста к прототипу

17 апреля 2026 Anthropic Labs выпустила Claude Design — AI-нативный дизайн-инструмент на Claude Opus 4.7. Идея: вместо того чтобы первым делом открывать традиционный редактор, ты описываешь желаемое словами, а Claude генерирует работающий визуальный артефакт, который дальше уточняется разговором.

Как это работает

1. Онбординг. Claude читает твою кодовую базу и дизайн-файлы и строит дизайн-систему команды. Дальше каждый проект автоматически использует твои цвета, типографику и компоненты.
2. Вход. Текстовый промпт, загрузка изображений/документов (DOCX, PPTX, XLSX), указание на кодовую базу, или web-capture — захват элементов прямо с твоего сайта, чтобы прототип выглядел как реальный продукт.
3. Уточнение. Комментируй конкретные элементы инлайн, правь текст напрямую, крути «ручки» (spacing, цвет, лейаут) вживую — потом проси применить правки по всему дизайну.
4. Экспорт. Внутренний URL организации, папка, или экспорт в Canva, PDF, PPTX, отдельные HTML-файлы.

Главный мост: Handoff в Claude Code

Когда дизайн готов к сборке, Claude упаковывает всё в handoff-бандл: дизайн-файлы, токены системы, структуру компонентов и намерение каждой страницы. Один инструкцией ты передаёшь это в Claude Code — и исследование превращается в производство без потери контекста.

Figma MCP: мост дизайн ↔ код

Если ты или твоя команда живёте в Figma, MCP-сервер Figma — главный инструмент. Он даёт Claude Code структурный доступ к файлам: компоненты, переменные, данные лейаута, FigJam-контент. Claude читает дизайн напрямую из файла — а решение «правильный ли дизайн» остаётся за человеком; автоматизируется только перевод.

Настройка (коротко)

1. Установи плагин Figma — он включает настройки MCP-сервера и Agent Skills для типовых воркфлоу.
2. Подключи MCP-сервер в Claude Code.
3. Проверь: вставь ссылку на фрейм и попроси описать его компоненты.

Два направления потока

Code Connect — секретный соус точности

Figma MCP работает в паре с Code Connect: он даёт агенту и дизайн-контекст, и осведомлённость о проде. Claude Code тянет детали реализации прямо из кодовой базы — поэтому сгенерированные прототипы зеркалят реальные продакшн-компоненты, а не выдумывают свои. Это разница между «похоже на макет» и «использует наш настоящий Button».

Вот фрейм: [figma-url]

Реализуй его как React-компонент. Используй наши существующие
компоненты из @/components/ui (через Code Connect), не создавай
новые кнопки/инпуты. Токены — из design-tokens.
Сверь отступы и типографику с фреймом. Покажи, что переиспользовал.

Визуальный цикл: дай Claude глаза

Фундаментальная проблема: ИИ слеп. Он пишет CSS, но не видит результат. Playwright MCP это чинит — он даёт Claude настоящий браузер (Chromium/Firefox/WebKit) как набор инструментов: навигация, клик, заполнение форм, выполнение JS, снимок дерева доступности, скриншот.

Это меняет всё. Теперь цикл обратной связи — сам Claude. Он видит ту же страницу, что и ты. Скажешь «форма слишком узкая» — он понимает, о чём речь, потому что смотрит на ту же форму.

Цикл «capture → propose → confirm → verify»

Реальный лог такой сессии: «Открыл браузер через Playwright MCP, зашёл на localhost:3000, снял скриншот. Заметил, что мобильная навигация вылезает за вьюпорт. Починил. Снял ещё раз. Подтвердил.» Claude видит рендер, читает консоль, может ресайзить вьюпорт, кликать табы, заполнять формы — и итерировать по собственному выводу без ручных циклов.

Через Playwright MCP открой localhost:3000 и сделай так:

1. Сними скриншот хедера на десктопе (1440px) и мобайле (375px).
2. Сверь с нашими принципами (skill design-principles): иерархия,
   воздух, акцент.
3. Назови 3 конкретные проблемы, которые видишь на скриншотах.
4. Исправь по одной, после каждой — пересними и покажи до/после.
5. Останавливайся, если правка визуально не улучшает.

Полный пайплайн профи

Теперь сложим всё вместе. Вот как выглядит сквозной воркфлоу зрелого AI-native дизайнера — от сырого требования до приёмки. Каждый шаг тянет нужные skills и MCP.

Разбор по шагам

1. Извлечь требования. read-filter-prd вытаскивает из PRD то, что важно для дизайна. create-design-ticket структурирует задачу.
2. Спроектировать поток. До пикселей — экраны, состояния, переходы. Текстом или в Claude Design (дивергенция направлений).
3. Сгенерировать hi-fi. generate-design создаёт экран, опираясь на принципы, токены и контент-стратегию — поэтому он сразу «в системе», а не генерический.
4. Ревью против принципов. design-review — эвристическая оценка по скриншоту/Figma-ссылке, толкает аннотации обратно.
5. Сборка в Claude Code. Handoff-бандл или Figma-фрейм → код на реальных компонентах через Code Connect.
6. Визуальный QA. Playwright MCP снимает состояния, сверяет с принципами, чинит и пересматривает.

Где обычно ломается у новичков

Библиотеки и компоненты

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

Реальный кейс из практики: дизайнер отдал Claude задачу собрать весь сайт на shadcn + Magic UI + Playwright MCP. shadcn дал консистентную базу, Magic UI — «вау»-моменты, Playwright — глаза для самопроверки. Результат собрался без ручного тестового цикла.

Документация в реальном времени

Библиотеки меняются. Чтобы Claude не галлюцинировал устаревший API, подключают MCP-сервер документации (например, Context7): он подтягивает актуальные доки по библиотеке прямо в контекст. Особенно полезно для Tailwind/shadcn/Motion, у которых часто меняется синтаксис.

Практика и проекты

Чтение не даёт навык. Вот прогрессия проектов от простого к сложному — проходи по порядку, каждый закрепляет один модуль.

Проект 1 · «Анти-слоп лендинг» (модули 2–3)

Сделай одностраничный лендинг на чистом HTML/CSS для вымышленного продукта. Условие: ноль шрифтов Inter/Roboto, ноль фиолетовых градиентов. Сначала сгенерируй без мастер-промпта, потом с ним — сравни. Запиши, что изменилось.

Проект 2 · «Свой design-principles» (модуль 4)

Возьми 3 сайта, которые любишь. Разбери каждый приёмом «обратный разбор референса». Сведи в один design-principles.md. Попроси Claude собрать из него skill и прогони им свой лендинг из Проекта 1 на ревью.

Проект 3 · «Замкни визуальный цикл» (модуль 7)

Подними проект на localhost. Подключи Playwright MCP. Дай Claude промпт визуального цикла из модуля 07 и наблюдай, как он сам находит и чинит проблемы по скриншотам. Не вмешивайся, пока он не закончит — потом оцени.

Проект 4 · «Сквозной пайплайн» (модуль 8)

Напиши короткий PRD на 1 экран. Пройди весь путь: требование → поток → генерация → ревью → сборка → визуальный QA. Замерь время. Это твой бенчмарк скорости.

Чеклист «готов к проду»

• Эстетика задана в CLAUDE.md, а не только в голове
• Ни одного запрещённого шрифта/паттерна из списка слопа
• Доминирующий цвет + резкий акцент, не робкая палитра
• Атмосферный фон, не плоская заливка
• Один срежиссированный момент движения на экран
• UI сверен со скриншотами на десктопе и мобайле
• Переиспользованы реальные компоненты, не самопал
• Прошёл ревью против собственных принципов

Источники и что читать дальше

Курс собран из актуальных материалов 2025–2026. Иди к первоисточникам, чтобы углубиться: