TATSY.PRO блог

Как делать дизайн в вайб-кодинге, если вы не дизайнер

Нейросеть выдаёт код фронта за минуты, а интерфейс получается, мягко говоря, студенческий. Кнопки кривые, отступы разные, шрифт откуда-то из 2012-го. Знакомо. Разбираю четыре способа, которыми сегодня реально управляют дизайном в Cursor, Claude Code, Codex, ChatGPT и Qwen. Без иллюзий: у каждого свои сильные стороны и свои ловушки.

Почему нейронка по умолчанию рисует плохо

Когда вы пишете «сделай красивую посадочную страницу», модель получает пожелание, а не задание. У «красивой» нет параметров: ни палитры, ни шрифтов, ни отступов, ни радиусов. Модель берёт усреднённое из всего, что видела в обучающих данных, и рисует «среднее по больнице».
Чтобы получить нормальный визуал, модели нужна система координат. Её можно задать четырьмя способами: встроенным продуктом от Anthropic, открытым форматом от Google, готовыми промпт-блоками или подключением боевой библиотеки компонентов. Разбираю по порядку.

Способ 1. Claude Design: нейросеть с холстом

17 апреля 2026 года Anthropic запустили Claude Design. Это не просто чат с Claude, а полноценный продукт с двумя окнами: слева чат, справа холст, на котором появляется дизайн. Работает на модели Opus 4.7, доступен подписчикам Pro, Max, Team и Enterprise.
Как это выглядит: описываете задачу голосом или текстом, получаете первую версию за минуты. Дальше уточняете. Кликаете прямо на элемент в макете и оставляете комментарий. Claude переделывает только этот кусок, не ломая остальное. Есть регуляторы-ручки для отступов, цветов, размеров. Их Claude, кстати, сам генерирует под конкретный проект.
Что умеет на практике. Прототипы веб- и мобильных приложений, лендинги с секцией цен, презентации и питч-деки, одностраничники, внутренние дашборды, формы обратной связи с условной логикой. Можно импортировать из текста, картинок, DOCX, PPTX, XLSX. Можно подключить репозиторий, и Claude будет использовать ваш существующий стек. Есть web-capture — снимает элементы прямо с вашего сайта, чтобы прототип был похож на реальный продукт.
Что важно для команд. На старте Claude читает ваш код и дизайн-файлы, строит дизайн-систему автоматически. Дальше каждый новый проект использует ваши цвета, шрифты и компоненты. Можно вести несколько дизайн-систем параллельно: одну для маркетинга, другую для продукта.
Экспорт куда угодно. Внутренняя ссылка для коллег, Canva (где дизайн становится полноценно редактируемым), PDF, PPTX, отдельные HTML-файлы. Когда дизайн готов, Claude упаковывает всё в handoff-bundle и передаёт в Claude Code одной командой. Разработчик получает не картинку, а рабочие файлы.
Реальный кейс. Джон Вурхис из MacStories за выходные сделал два проекта. Первый: iPad-ориентированное веб-приложение, куда сводятся статьи из Notion, избранное из RSS и лонгриды из Matter. Второй: фича разбиения длинного поста на цепочку для кросс-постера в Bluesky и Mastodon. Claude сам предложил решение со слайдером. Джон пишет, что цикл «обсуждение → визуал → комментарий → правка» оказался заметно быстрее, чем делать то же самое в Claude Code через терминал.
Команда Datadog сжала неделю на брифы, макеты и ревью в одну беседу. Команда Brilliant превратила статические макеты в интерактивные прототипы, потом передала всё в Claude Code на реализацию.
Честные минусы. Research preview означает сырое состояние. Комментарии иногда пропадают до того, как Claude их прочитает (лечится копированием в чат). В компактном режиме отображения бывают ошибки сохранения. Большие репозитории подключать целиком не стоит, лучше линковать отдельные подпапки. Тарификация непрозрачная: пользователи жалуются, что выделенные токены сессии кончаются раньше ожидаемого, и начинают расходоваться дополнительно купленные. Нет обратной связи Code → Design: передать прототип в Claude Code легко, а вернуть доработки из кода обратно в дизайн можно только через скриншоты. Работает пока только в веб-версии, нет десктопного и мобильного клиента.
Доступ из России. Прямой оплаты с российских карт на claude.ai нет с 2022 года. Сам сервис работает, ограничение только на оплате. Рабочие варианты: платёжные посредники вроде Oplatym (оплата через СБП, подписка активируется за 15–60 минут), иностранная карта (Казахстан, Армения, Турция, Узбекистан принимаются без вопросов), зарубежный родственник с картой. Pro по курсу начала 2026 обходится примерно в 1 900–2 000 рублей, через посредника 2 300–2 500 с учётом комиссии.
Если у вас уже оплачен Claude Pro или Max, Claude Design просто появляется в интерфейсе без отдельной настройки. Запускаете, описываете задачу, получаете дизайн. Это самый низкий порог входа для тех, кто не разработчик и не дизайнер, но хочет показать концепт инвесторам или клиентам.
Когда использовать:
  • Основатель без дизайнера хочет показать концепт
  • Нужен прототип для тестов на пользователях до написания кода
  • Питч-дек для инвесторов на основе бренда компании
  • Внутренний инструмент, где важна функция, а не уникальный визуал
Когда не подходит:
  • Проекты с требованием предельной уникальности визуала
  • Команды, где процесс уже построен в Figma и менять его больно
  • Задачи с мобильным клиентом (пока только веб)
Claude Design

Способ 2. DESIGN.md от Google: дизайн-контракт для нейросети

В апреле 2026 Google Labs опубликовали открытый формат DESIGN.md (Apache 2.0, 1.6 тысячи звёзд на GitHub). Это не инструмент, а спецификация файла. Обычный текстовый файл формата markdown, который лежит в корне вашего проекта и служит общим языком между вами, разработчиком и нейросетью.
Как устроен. Файл делится на две части. В начале идёт YAML-блок с машинно-читаемыми токенами: цвета в hex-кодах, шрифты, размеры, отступы, радиусы, компоненты. Ниже идёт проза на markdown: пояснения, почему цвета именно такие, как их применять, что с чем сочетать, какие есть «можно» и «нельзя».
Логика ясная: токены говорят нейросети что использовать, проза говорит зачем. Вместе получается полный дизайн-контракт, который понимают Cursor, Codex, Claude Code и другие агенты.
Как выглядит на практике. В начале файла секция с определениями: primary color такой-то, h1 шрифт такой-то и размер такой-то. Дальше раздел Overview с описанием настроения бренда. Потом секции Colors, Typography, Layout, Elevation & Depth, Shapes, Components, Do's and Don'ts. Порядок секций жёстко задан спецификацией. Любую секцию можно опустить, но если она есть, она идёт в своём месте.
Инструменты от Google. Есть CLI-утилита @google/design.md. Команда lint проверяет файл на ошибки: сломанные ссылки между токенами, отсутствие primary-цвета, контрастность ниже стандарта WCAG AA, неиспользуемые токены. Команда diff сравнивает две версии дизайн-системы, показывает что изменилось. Команда export конвертирует в формат Tailwind CSS или в стандарт W3C Design Tokens, чтобы передавать в другие инструменты.
Как Google рекомендует использовать. Создаёте DESIGN.md в корне проекта. Заполняете YAML-блок токенами. Добавляете прозу-обоснование. Прогоняете линтер. Подключаете к агенту. При обновлении дизайна меняете файл, прогоняете diff, проверяете регрессии.
Плюсы подхода. Открытый формат, работает с любым ИИ-агентом, поддерживает экспорт в общий стандарт, есть проверка контрастности, один источник правды для всей команды.
Минусы. Версия alpha, спецификация ещё меняется. Нужен технический бэкграунд: писать YAML, разбираться в ссылках между токенами. Для CLI нужен Node.js и npm. Формат описывает свойства, но не сами компоненты: кнопку-как-кнопку вам придётся определить в коде отдельно.
DESIGN.md идеально работает в паре с Claude Code или Cursor в больших проектах, где важна консистентность от релиза к релизу. Но для маленьких лендингов и одноразовых прототипов это избыточно. Там быстрее взять готовый промпт-блок (способ 3).
Когда использовать:
  • Команда работает в репозитории и хочет, чтобы ИИ знал дизайн-систему всегда
  • Проект живёт долго, дизайн-система эволюционирует
  • Нужна интеграция с существующим стеком (Tailwind, W3C Design Tokens)
DESIGN.md от Google

Способ 3. Готовые промпт-блоки стилей

Типичный ход новичка: «Сделай как на stripe.com» или «возьми стиль с linear.app». В теории Cursor или Codex должны сходить по ссылке, снять стили, применить. На практике работает плохо.
Почему. Не все модели ходят в интернет. Многие видят только то, что вы вставили в промпт. Если модель сходила, она берёт то, что на первом экране: иконки, сетку, палитру. Логику компонентов, анимации, состояния hover схватывает редко. Зарубежные нейронки ведут себя терпимо, китайские (Qwen) могут вернуть что-то похожее, но с потерей деталей. Лендинг снимается нормально, сложный дашборд почти никогда.
Итог: просите Stripe-стиль, получаете бледную тень Stripe-стиля. Время потрачено, результат не тот.
Решение, которое я сделал. Библиотека дизайн-стилей tatsy.pro. Это каталог готовых промпт-блоков с описанием визуального языка известных продуктов: Linear, Stripe, Т-Банк и ещё 50+ компаний. Отфильтровали по типу продукта и стилю, скопировали промпт, вставили в самое начало задания к модели. Дальше формулируете свою задачу: «сделай страницу с такими-то блоками». Модель получает систему координат сразу: типографику, отступы, логику цвета. Попадание в нужный визуал с первой попытки.
Почему это работает с любой нейронкой. Промпт — это просто текст. Его читают Cursor, Codex, Claude Code, ChatGPT, Qwen. Не требует подписки на конкретный продукт, не требует настройки проекта, не нужен Node.js. Скопировал — вставил — получил.
Как это соотносится с другими способами.
Подход Порог входа С какими моделями работает Глубина контроля
Claude Design Низкий Только Claude Высокая, но в рамках продукта Anthropic
DESIGN.md Высокий (YAML, CLI) Любая модель с доступом к репо Очень высокая
● Промпт-блоки Минимальный Любая нейронка Средняя (визуальный язык, не компоненты)
Ant Design и аналоги Высокий (нужен React) Только через код Максимальная на уровне компонентов
Честные минусы промпт-блоков. Это визуальный язык, а не компонентная библиотека. Кнопка будет выглядеть в нужном стиле, но за её поведение (состояния, доступность, клавиатурная навигация) отвечает сам фронтенд, не промпт. Если уже работаете с конкретным фреймворком (shadcn, Ant Design), промпт нужно уточнить под него. Часть систем (Apple HIG, Microsoft Fluent) изначально под нативные платформы, для веба адаптация на совести разработчика.
В промпт-блок можно вставить свои цвета и шрифты, оставив остальную логику (отступы, радиусы, типографическую иерархию). Так получаете узнаваемый визуальный язык выбранной системы, но под свой бренд. Это то, что нельзя сделать ни в Claude Design (там своя логика), ни в Ant Design (там вы привязаны к их теме).
Когда использовать:
  • Быстрый визуал под любой ИИ-редактор
  • Переключение между проектами с разным стилем
  • Стартап-лендинг, MVP, презентация концепта
  • Работа с любой моделью, включая китайские и российские
Библиотека дизайн-стилей TATSY.PRO

Способ 4. Дизайн-системы уровня Ant Design

Четвёртый способ — подключить к проекту готовую библиотеку компонентов. Это значит: нейросеть не рисует кнопку с нуля, а импортирует её из библиотеки. Получаем предсказуемый результат, привычный пользователям интерфейс, меньше багов.
Все библиотеки ниже работают в React, это фреймворк, на котором чаще всего генерят фронт в Cursor, Codex, Claude Code. Часть поддерживает Vue и Angular.
Ant Design. Одна из самых больших библиотек, 92+ тысяч звёзд на GitHub. Разработана Ant Group (материнская компания Alibaba). Внутри 60+ готовых компонентов: кнопки, формы, таблицы, календари, деревья файлов, каскадные меню, графики. Огромное сообщество: любая проблема уже решалась на Stack Overflow. Редко встречаются баги. Сильна в бизнес-интерфейсах и админках: сложные формы, таблицы с сортировкой и фильтрами, визуализации данных. Минусы: «китайский корпоративный» визуал выглядит строго, бандл тяжёлый (100–200 килобайт после сжатия), доступность слабее конкурентов / shadcn/ui
Material UI (MUI). React-реализация Material Design от Google. 96+ тысяч звёзд. 100+ компонентов, официальный Figma-кит для дизайнеров. Есть платная версия MUI X с продвинутыми таблицами, календарями и DataGrid уровня enterprise. Подходит корпоративным приложениям, проектам с требованием поддержки. Минусы: тяжёлый бандл (120–180 килобайт), Material-визуал виден издалека, отойти от него требует сил / shadcn/ui
shadcn/ui. Самый трендовый подход 2025–2026. Не библиотека в привычном смысле, а инструмент командной строки, который копирует код компонентов прямо в ваш проект. Запустили npx shadcn@latest add button, и код кнопки появился в папке components/ui вашего проекта. Вы владеете этим кодом, можете менять, удалять, переписывать. Технически построен на Radix UI (логика и доступность) и Tailwind CSS (стили). Идеально для ИИ-кодинга: модель понимает код в вашем репо, потому что он там лежит. Минусы: требует Tailwind CSS, каждый проект может выглядеть по-своему / shadcn/ui
Mantine. 120+ компонентов, 100+ хуков (готовых функций React). Встроенный редактор текста Tiptap, менеджер форм с валидацией, система уведомлений, spotlight-поиск. Подходит для нового проекта без технического долга, для SaaS с формами и богатым редактированием. Минус: сообщество меньше, чем у MUI и Ant Design, специфичных проблем искать дольше / Mantine
Chakra UI. 50+ компонентов, знаменита подходом «style props»: стили пишутся прямо в JSX через параметры. Доступность встроена по умолчанию. Поддержка тёмной темы из коробки. Минус: в конце 2024 перешли на новую архитектуру (Panda CSS), экосистема ещё перестраивается / Chakra UI
HeroUI. Современная библиотека на Tailwind и React Aria от Adobe. Визуал сразу «премиум», не нужно допиливать. Идеально подходит для Next.js. Минусы: менее популярна, меньше материалов в сети / HeroUI
Лайфхак для вайб-кодера. Если делаете прототип, на котором потом пойдёт боевая разработка, выбирайте shadcn/ui. Почему: код компонентов лежит в вашем проекте, и любая следующая нейросеть видит его как контекст. Работает цикл: Claude Code пишет кнопку в стиле shadcn/ui, вы её правите, Cursor дорабатывает фичу, и все модели используют ту же кнопку. Без shadcn/ui каждая нейросеть рисует свою версию кнопки, и интерфейс расползается.

Когда какую брать:

  • Админка или дашборд с таблицами → Ant Design или MUI
  • SaaS с богатым функционалом → Mantine
  • Быстрый прототип с хорошей эстетикой → shadcn/ui или HeroUI
  • Доступный MVP → Chakra UI
  • Корпоративный продукт с требованием поддержки → MUI

Способ 5. MotionSites: премиум-промпты для готовых секций

В апреле 2026 на Product Hunt запустился motionsites.ai. Это библиотека готовых промптов под hero-секции и блоки сайтов, заточенных под Codex, Cursor, Claude Code и Lovable.
В отличие от способа 3, где промпт-блок задаёт визуальный язык (палитру, типографику, отступы), MotionSites продаёт готовую секцию целиком: разметку, анимации, фоновые видео, glass-эффекты, framer-motion. Вы получаете не рамку, а собранный экран уровня топовых агентств.
Как устроено. Каталог разбит по категориям: космические лендинги, агентства, портфолио, фитнес, финтех, SaaS. Внутри каждого промпта 150–200 строк описания: разметка, шрифты, ссылки на видео, поведение элементов, классы Tailwind, тайминги анимаций. Часть бесплатна, остальные доступны по разовой оплате 29 долларов (не подписка).
Кейс: я взял бесплатный промпт «Cinematic Space-Travel Landing Page» и вставил в Codex. Через пять минут чистого времени получил рабочий лендинг с двумя секциями, фоновыми видео и word-by-word анимациями заголовка. Анимации сработали как в оригинале на сайте автора.
Плюсы. Премиум-результат с первой попытки. Работает с любым агентом для разработки. Не требует подписки на ИИ. Бесплатных промптов хватает для теста идеи.
Минусы. Первый и главный: промпт описывает только два экрана (hero и capabilities). Остальные блоки нейронка достраивает сама, и стилевой контраст бросается в глаза. Решается выравнивающим промптом «достраивай остальные блоки в той же стилистике». Второй: видео и зависимости в промпте лежат на чужих CDN. Лечится одной командой Codex: «скачай видео и библиотеки локально, собери через Vite». Третий: для коммерческих проектов лучше брать свои видео на pexels.com или mixkit.co.
MotionSites хорошо ложится поверх способа 3. Промпт-блок tatsy.pro задаёт общий визуальный язык всего сайта, а MotionSites закрывает входную точку: первые два экрана, где посетитель решает, оставаться или уходить.
Когда использовать:
  • Лендинг с упором на впечатление от первого экрана
  • Презентация концепта инвестору
  • Тест идеи проекта без бюджета на дизайнера и моушн-дизайнера
MotionSite

Что выбрать вам

Если не разработчик и не дизайнер, а нужно показать концепт → Claude Design.
Если ведёте проект в репозитории с командой и хотите консистентности от релиза к релизу → DESIGN.md плюс любая подходящая библиотека компонентов.
Если работаете в Cursor, Codex, ChatGPT или Qwen и нужен быстрый визуал под задачу → готовый промпт-блок из библиотеки стилей.
Если собираете боевой продакшен → одна из дизайн-систем плюс промпт-блок для задания визуального языка поверх неё.
Если делаете лендинг или одностраничник, где первый экран решает всё → MotionSites поверх промпт-блока tatsy.pro.
Эти способы не конкурируют. Они сочетаются. На реальном проекте вы можете начать концепт в Claude Design, экспортировать в Canva для маркетинга, потом перенести логику в DESIGN.md и собрать продукт на shadcn/ui с промпт-блоком tatsy.pro в качестве задающего визуальный язык слоя, а первый экран лендинга усилить промптом из MotionSites.

Инструменты из статьи:

Источники:

2026-04-23 17:23 Нейросети