Просишь у Cursor или Claude посадочную страницу. Получаешь рабочий код за минуту. Открываешь в браузере: кривые отступы, шрифт из «Ворда», кнопки висят криво. Знакомо. Сейчас разберём, почему так выходит и какие 4 способа реально работают, чтобы нейронка делала нормально.
Почему нейронка по умолчанию рисует ужасно
Когда ты пишешь «сделай стильную лендинг/презентацию с модным дизайном», модель получает пожелание, а не задание. У слова «стильный» нет параметров. Какая палитра, какие шрифты, какие отступы, какие радиусы у кнопок — нейронка не знает.
Что она делает? Берёт усреднённое из всего, что видела в обучении. И выдаёт ту самую «среднюю по больнице» вёрстку. Как если бы попросил художника «нарисуй модную картину», не уточнив, какую именно.
Решение одно: дать модели систему координат. Это можно сделать четырьмя способами. От самого простого до самого технического.
Способ 1. Claude Design - рисуешь дизайн через чат
В апреле 2026 Anthropic выкатили Claude Design. Это не просто чат с Claude, а полноценный продукт. Слева окно чата, справа холст с дизайном. Описал задачу, получил макет за минуты.
Дальше уточняешь голосом или кликаешь прямо на элемент в макете и пишешь комментарий. Claude переделывает только этот кусок. Не ломает остальное. Есть регуляторы для отступов, цветов, размеров.
Что умеет: лендинги, прототипы веб- и мобильных приложений, презентации, дашборды, формы. Можно загрузить картинку, документ Word, презентацию PowerPoint, таблицу Excel и сказать «сделай по этому». Можно подключить свой сайт, и Claude снимет с него стили.
Когда дизайн готов, можно экспортировать в Canva, PDF, PowerPoint или передать прямо в код одной командой.
Минусы. Это сырая ранняя версия (research preview), иногда теряет комментарии. Тарификация мутная: токены сессии заканчиваются раньше, чем ожидаешь. Из России оплата только через посредников типа Oplatym или иностранную карту, подписка Pro выходит примерно в 2 300 рублей.
Кому подходит. Основателю без дизайнера. Маркетологу, которому нужен прототип. Тебе, если ты хочешь показать концепт инвестору и не уметь при этом ни в Figma, ни в код.
Способ 2. Файл DESIGN.md - дизайн-инструкция для нейронки
Google в 2026 опубликовал открытый формат DESIGN.md. Это просто текстовый файл, который ты кладёшь в папку проекта. В нём расписана вся твоя дизайн-система: цвета, шрифты, отступы, правила использования.
Cursor, Claude Code, Codex и другие инструменты читают этот файл и используют как инструкцию. Любой новый кусок интерфейса делается в твоём стиле автоматически.
Логика: машинная часть файла говорит нейронке что использовать (цвет такой-то, шрифт такой-то), человеческая часть объясняет зачем (этот красный для важных кнопок, не для ошибок).
Плюсы: работает с любой нейронкой, есть проверка контраста и читаемости, можно экспортировать в стандартные форматы.
Минусы: нужен технический бэкграунд. Писать YAML, разбираться в форматах. Для маленького лендинга избыточно. Для большой команды и долгого проекта — золото.
Способ 3. Готовые промпт-блоки стилей от TATSY.PRO
Самый быстрый путь. Берёшь готовое описание стиля известного продукта и даёшь нейронке.
Сначала про то, почему не работает «сделай как на stripe.com». Не все нейронки ходят в интернет, многие видят только то, что ты вставил в промпт. Если сходила — берёт то, что на первом экране. Логику компонентов, состояния hover, анимации схватывает редко. Особенно зарубежные и китайские модели вроде Qwen. Получаешь бледную тень оригинала.
Я сделал свою библиотеку дизайн-стилей на tatsy.pro. Там собраны промпт-блоки по 50+ известным продуктам: Linear, Stripe, Т-Банк и другие. Российские и зарубежные, классика и модный современный SaaS.
Как работаешь:
- Зашёл, отфильтровал по типу продукта или стилю
- Скопировал промпт-блок
- Вставил в начало задания нейронке
- Дальше формулируешь свою задачу
Модель сразу получает систему координат: типографику, отступы, логику цвета. Попадание в нужный визуал с первой попытки. Свои цвета и шрифты можешь подменить руками в промпте.
Главный плюс перед другими способами: работает с любой нейронкой. Cursor, Codex, Claude Code, ChatGPT, Qwen, DeepSeek. Не требует подписки, не требует кода, не нужен Node.js. Скопировал, вставил, готово.
Минус: это визуальный язык, а не готовая компонентная библиотека. Кнопка будет выглядеть в нужном стиле, но за её поведение (что происходит при наведении, при клике) отвечает уже сам код.
Библиотека готовых стилей TATSY.PRO
Способ 4. Готовые библиотеки компонентов
Четвёртый путь — для тех, кто работает с реальным проектом и хочет максимальной надёжности.
Идея: подключаешь к проекту готовую библиотеку, где уже есть кнопки, формы, таблицы, модальные окна. Нейронка не выдумывает их с нуля, а берёт готовые. Получаешь предсказуемый интерфейс, который привычен пользователям.
Самые популярные сейчас:
🔹 Ant Design — большая библиотека от Alibaba, идеальна для админок и сложных таблиц
🔹 Material UI — реализация Material Design от Google, классика для корпоративных приложений
🔹 shadcn/ui — самый трендовый подход 2025–2026, идеально под ИИ-кодинг
🔹 Mantine — для SaaS с богатым функционалом
🔹 HeroUI — готовый «премиум» вид без усилий
Минус всех библиотек: нужно работать с кодом и React. Не для тех, кто никогда не открывал терминал. Для серьёзных проектов — стандарт индустрии.
Что выбрать тебе
- Если ты не разработчик и не дизайнер, а нужно показать концепт — Claude Design.
- Если работаешь в команде и проект живёт долго — DESIGN.md плюс библиотека компонентов.
- Если хочешь быстрый визуал в любой нейронке — готовый промпт-блок из библиотеки стилей TATSY.PRO.
- Если собираешь боевой продукт — связка всего вместе.
Эти способы не конкурируют, они складываются. Можно начать концепт в Claude Design, прокачать через промпт-блок, потом перенести в DESIGN.md и докрутить на shadcn/ui. На каждом этапе нейронка будет понимать, что ты от неё хочешь.
#вайбкодинг
Написано человеком.
Подпишись в Telegram и Дзен 🧠