Дизайн сайта без нейрослопа
Пять шагов из ролика: референсы, готовые библиотеки, один вау-приём, выбор вариантов глазами и система, которая держит стиль
Ниже те же пять шагов, что в ролике, и в том же порядке. Этот сайт, vibecoding.ru, целиком сделали ИИ-агенты: я не написал ни строчки кода и не нанимал дизайнера. С июля я заплатил за подписки на ИИ 2 700 долларов, а по ценам API те же токены стоили бы больше 95 тысяч.
Здесь ссылки и промпты, которых в ролике не видно целиком. Пятый шаг отличает вайбкодинг от агентной разработки: благодаря ему все страницы, которые пишут агенты, выглядят одним сайтом.
Все ссылки гайда
Шаг 1. Найдите референсы
- dark.design — подборка тёмных сайтов уровня S-tier
- Godly — подборка сильных лендингов с живыми превью
- Awwwards — сайты, которые выбрало жюри дизайнеров
- Land-book — лендинги по жанрам: SaaS, портфолио, магазины
- Mobbin — экраны приложений и сайтов по сценариям
- One Page Love — одностраничные сайты
Шаг 2. Готовые библиотеки компонентов
- 30 библиотек UI-компонентов — моя подборка с превью и задачами
- React Bits — анимированный текст, фоны и эффекты
- 21st.dev — компоненты от авторов, к каждому готовый промпт
Шаг 3. Один вау-приём на всю страницу
- vgpu — эффекты на WebGPU, из него кольца
- Агентная разработка — страница с кольцами, светом и металлом
Шаг 4. Выбирайте варианты глазами, а не в чате
- Селектор вариантов вживую — та же страница в режиме примерки
Шаг 5. Выстраивайте систему
- Карточка Codex — страница одного стиля с соседними
- Карта ИИ — другая по виду, стиль тот же
- ИИ-агенты — таблица в том же стиле
- Машина сайта вживую — как агенты ведут vibecoding.ru
Шаг 1. Найдите референсы
Найдите живой образец и снимите с него устройство.
Ищите по задаче
Делаете сайт кофейни — не ограничивайтесь кофейнями. Спросите себя, какую задачу должна решить страница, и найдите того, кто решает её лучше всех.
У меня на главной была задача показать движение: данные на сайте обновляются постоянно, выходят новости. Я сделал блок, где текст сначала идёт за картинкой, а потом собирается в крупную оранжевую надпись.
Взял я его у Apple: похожий блок есть на странице MacBook Pro. Оттуда же приём со шрифтом. Обычный текст Apple пишет серым, а важное — белым, без жирного.
Где брать S-tier доноров
Источников три. Сначала голова: сайты, которые вы уже запомнили. Потом подборки сильных сайтов, все они в списке ссылок выше. Я чаще всего открываю dark.design.
Третий источник — ИИ. Я спрашиваю в основном у Claude или у Codex. Без подсказки ИИ советует средние сайты, поэтому задачу ставлю так:
Я делаю [тип страницы] для [аудитория]. Посетитель должен [целевое действие]. Найди 5 референсов, у которых можно перенять решение этой задачи. - Возьми минимум два примера из других отраслей. Для каждого объясни, как устройство страницы помогает посетителю дойти до нужного действия. Не приписывай сайту высокую конверсию без данных. - Открой каждую ссылку, проверь страницу на компьютере и телефоне. Если страницу открыть не удалось, пометь это и не выдавай догадку за проверку. - Отдельно выбери донора структуры (порядок разделов и путь к действию) и донора оформления (сетка, шрифты, цвета). Это могут быть разные сайты. - У каждого назови конкретный приём, который стоит взять, и то, что не подойдёт моей задаче. Маленькие авторские сайты целиком не копируем. Покажи ссылки и предложи одну связку «структура + оформление» для моей страницы с объяснением выбора.
Отдайте референс агенту
Нашли подходящий референс — отдайте агенту скриншот и ссылку и поставьте задачу повторить дизайн под ваш контекст. Сначала агент снимает мерки с живой страницы, потом переносит их к вам:
Вот референс: [ссылка] и скриншот. Перенеси его устройство на мою страницу [какую] с моим содержанием. 1. Найди действующую дизайн-спеку проекта. Если её нет, создай DESIGN.md. Мерки референса запиши отдельно от утверждённых правил проекта: ширину окна и колонки, поля, сетку, шрифты и их веса, размеры и интерлиньяж, отступы, цвета по ролям, скругления и тени. Измерь компьютер и телефон, включая поведение между ними. Где измерить не удалось, так и напиши. 2. Раздели постоянные размеры и зависимости от окна: где фиксированная ширина, где процентные поля, где максимум ширины. Запиши состояния кнопок и ссылок. Покажи мерки и расхождения с правилами моего проекта, дождись моего «ок». 3. Собери страницу с учётом согласованных правил. Переиспользуй подходящие компоненты проекта, если они есть. Тексты, логотипы и изображения возьми мои. Если содержимого не хватает, обозначь пропуск. 4. Сними референс и результат при одинаковых размерах окна на компьютере и телефоне. Сравни сетку, переносы строк, интервалы и расположение кнопок. Исправь отличия от согласованных мерок и покажи страницу ещё раз.
Шаг 2. Готовые библиотеки компонентов
Компоненты берите готовые, из библиотек, где их уже довели до ума.
30 библиотек с превью
Я собрал 30 библиотек UI-компонентов. Подборка лежит на отдельной странице: у каждой библиотеки превью и задача, под которую её брать.
React Bits
Моя любимая — React Bits. Её ведёт один автор, и проходных компонентов я там не встречал.
Один компонент оттуда я взял за основу для карточек цен на странице агентной разработки: эффект проявления остался тот же.
Потом я переделывал его версию за версией, и исходный компонент в нём уже не узнать. Как не утонуть в версиях, расскажу в четвёртом шаге.
21st.dev
Вторая любимая — 21st.dev. Там компоненты публикует любой автор, поэтому выбор шире, чем в React Bits. Я и сам там автор, вхожу в топ-59.
Открываете компонент, нажимаете «скопировать» и получаете готовый промпт. Его вставляете агенту в своём проекте.
Шаг 3. Один вау-приём на всю страницу
Выберите один вау-приём на всю страницу и стройте весь дизайн вокруг него.
Кольца на странице агентной разработки
На странице агентной разработки таким приёмом стали кольца, которые светятся. Кольца рисует сам браузер на технологии WebGPU.
Сделал я их так. Снова пошёл в подборку 30 библиотек и открыл vgpu, библиотеку эффектов на WebGPU. Взял один из примеров и попросил агента переделать его в кольца.
Вот компонент из библиотеки: [ссылка и промпт компонента]. Сделай из него главный приём моей страницы: [где он стоит и какую мысль показывает]. - Подгони цвета, размер и скорость под действующую дизайн-спеку проекта. Один приём должен поддерживать смысл раздела. - Если эффект рассказывает историю при прокрутке, привяжи её этапы к положению страницы. На телефоне проверь плавность и читаемость; если эффект мешает, упрости движение, сохранив содержание. - Подготовь неподвижную версию, которая сохраняет смысл и место блока. Покажи её и при отсутствии нужной технологии, и при ошибке запуска эффекта. - При настройке «уменьшить движение» показывай законченный неподвижный кадр. Вне экрана останавливай анимацию. - Проверь обычный режим, отключённую технологию эффекта, ошибку его запуска, уменьшенное движение и телефон. Покажи скриншоты состояний. Движение и паузу проверь отдельно в браузере: один скриншот их не доказывает.
Свет и металл — для акцентов
Световым эффектом и металлом я выделяю места, куда хочу привлечь внимание.
На кнопке заявки у меня жидкая ртуть. Ртуть и есть металл, только жидкий. Тот же металл лежит под плашками цен.
С вау-приёмом осторожно
Кольца работают на WebGPU, а его нет в старых браузерах. Даже Chrome, который давно не обновлялся, может его отключить. У таких людей страница сначала не открывалась. Поэтому нужен запасной вариант: если WebGPU нет, человек видит простые кольца, без света. Промпт выше просит агента сделать его сразу.
Шаг 4. Выбирайте варианты глазами, а не в чате
Выбирайте дизайн глазами: попросите агента сделать селектор вариантов.
Режим примерки в адресе
Работает так: дописываете в адресную строку ?select, и на странице появляются панели вариантов. Механику целиком делает этот промпт. Вставьте его агенту, и у вас заработает так же. Claude Code для этого не обязателен, подойдёт почти любой агент на хорошей модели.
Сделай на странице режим примерки вариантов. - Панели включаются параметром ?select. Для спорных мест предложи по 3–5 заметно разных вариантов в рамках дизайн-спеки: палитра, выравнивание заголовка, кнопка, фон. Размести переключатели рядом с их блоками или в общей панели, которая не закрывает содержимое на телефоне. - Выбор сразу меняет страницу и сохраняется в параметрах адреса. Например, ?select&accent=sea&align=left. После удаления select тот же вариант должен открываться без панелей. - Если цвет повторяется в нескольких блоках, переключай общую палитру сразу у всех: эффект, кнопки и акценты должны оставаться согласованными. - Сохраняй остальные параметры адреса. Неизвестное значение заменяй исходным вариантом. Добавь сброс примерки. - Проверь обновление страницы и открытие ссылки в новой вкладке. Адреса примерки не добавляй в sitemap; основной адрес страницы укажи каноническим. Дай ссылку с панелями и ссылку на выбранный вариант без них. После моего выбора закрепи его как вид страницы по умолчанию.
Как я выбираю
Дальше нажимаете на варианты. У меня свет колец был белым, а в селекторе я пробую морской, инженерный, более тёплый. Проверяю, как заголовок смотрится по левому краю и по правому.
Я оставил селектор на сайте, чтобы вы посмотрели сами: откройте страницу в режиме примерки и пощёлкайте, какой она могла бы быть.
Шаг 5. Выстраивайте систему
Пятый шаг — выстраивайте систему. Она и отличает вайбкодинг от агентной разработки.
Разные страницы, один стиль
Откройте карточку Codex, а потом соседнюю карточку Claude Code. Они сделаны в одном дизайне, с теми же шрифтами и приёмами, хотя это разные страницы. Их писали агенты в разное время.
Карта ИИ и таблица ИИ-агентов выглядят по-другому, но стиль проекта в них угадывается.
Три линии обороны
Держу это тремя линиями обороны сайта: спеки, тесты и селфхил.
Спеки
Спеки — это файлы с правилами в формате .md. По этому проекту их у меня больше 7 000. Вот спека по типографике: в ней прописаны все шрифты, размеры и цвета, какими они должны быть на сайте.
Читать такие таблицы тяжело, поэтому у каждой спеки есть своя страница в админке. Там всё то же самое, только наглядно. Когда агент пишет сайт, он сверяется со спеками, и часто этого хватает. Лид статьи по спеке — 27 пикселей с интерлиньяжем 35, такой он и на сайте.
Спек-тесты
Когда нужно знать, что правила соблюдаются, агенты пишут тесты. Я называю их спек-тестами. Они не пропускают на сайт размеры, которые раньше уже убрали. Без них начинается дрейф: на одной странице один размер, на соседней другой, и страницы расползаются кто в лес, кто по дрова.
Начать систему можно с одного промпта: спека, общие стили, тесты на конкретные нарушения и страница образцов для проверки глазами.
Проверь, есть ли в проекте дизайн-система, и дополни её. Если нет, начни с DESIGN.md и общих стилей. 1. Запиши правила: роль текста, шрифт, размер, интерлиньяж, вес, цвет; сетка, отступы и скругления. Укажи отличия для телефона. У каждого правила должен быть один источник, без параллельных противоречащих таблиц. 2. Вынеси значения в общие стили, а повторяющиеся элементы в компоненты. Страницы должны брать их оттуда. Обоснованные исключения перечисли отдельно. 3. Добавь спек-тесты на конкретные нарушения: запрещённые размеры, лишние шрифты, обход общих стилей. Проверь согласованность спеки и значений в коде. Назови, какие файлы и правила покрыты; не обещай, что такой тест проверит весь внешний вид. Запускай проверки перед коммитом и в CI. 4. Собери страницу образцов из настоящих компонентов: заголовки, абзацы, кнопки, карточки и их состояния. Проверь её на компьютере и телефоне. Покажи таблицу правил, результат тестов и ссылку на образцы.
Самолечение
Третья линия обороны — селфхил, он работает на живом сайте. Он больше про то, чтобы сайт работал, но и дизайну помогает. Агенты следят, чтобы ничего не ломалось. Если сломалось, они сначала присылают мне сигнал в Telegram, потом находят проблему и чинят. Когда починят, приходит второй сигнал, а если не вышло, подключаюсь я.
Атлас страниц
В админке есть режим «Атлас», он показывает все основные типы страниц. Например, у карточки есть несколько видов: чистый, с сеткой, загрузка и анатомия страницы, где видно, как она устроена.
Всё это прописано в спеках, в тех же .md-файлах. Но мне как человеку удобнее смотреть сюда. Так я проверяю, правильно ли агент записал правила, и где проблема, если что-то не так: в спеке или в тестах.
Что дальше
Тем же способом агенты ведут весь vibecoding.ru: как устроена эта машина, видно вживую на странице vibecoding.ru/open. Если у вас бизнес и задачи для разработки, подробности — на странице агентной разработки.
Чтобы научиться собирать такие сайты самому, пройдите бесплатный курс по вайбкодингу: 56 уроков, от первой страницы до первого клиента.
Если застряли
Агент сделал «похоже, но не то». Попросите его открыть ссылку на референс и снять размеры, отступы и цвета с живой страницы.
Агент копирует чужие тексты и логотип. Напишите ему прямо: переносим только устройство, содержание — моё.
Вау-приём тормозит или не открывается. Проверьте страницу в старом браузере или с выключенной аппаратной графикой. Запасной вариант должен показывать простую версию.
Варианты в селекторе все одинаковые. Попросите агента развести варианты сильнее, по цвету, шрифту и выравниванию.
Новые страницы расходятся по стилю. Значит, правила живут только в спеке. Попросите агента написать спек-тест на то, что разъехалось, и прогонять его перед каждым коммитом.
Частые вопросы
Почему сайты, сделанные нейросетью, выглядят одинаково?+
Без образца ИИ собирает среднее из того, на чём учился: фиолетовый градиент, три карточки с иконками и шрифт по умолчанию. Если дать ему живой референс и готовые компоненты, он повторяет их устройство.
Можно ли сделать хороший дизайн сайта нейросетью без дизайнера?+
Да. Весь vibecoding.ru сделали ИИ-агенты, дизайнера в проекте нет. Работу дизайнера заменяют референсы уровня S-tier, готовые библиотеки компонентов и система правил, которую агент соблюдает на каждой странице.
Повторять дизайн по референсу — это не копирование?+
Переносится устройство: сетка, шрифты, отступы, приёмы. Тексты, логотипы и картинки остаются вашими. Промпт «повторить дизайн по референсу» запрещает агенту брать чужое содержание.
Нужен ли Claude Code или подойдёт другой агент?+
Подойдёт почти любой агент на хорошей модели. Я работаю в Claude Code, но все промпты из гайда работают и в Codex, и в других агентах. Сравнение агентов — в таблице ИИ-агентов.
Где найти готовые компоненты для сайта?+
В библиотеках UI-компонентов. Мои любимые — React Bits и 21st.dev, всего в подборке 30 библиотек с превью. В 21st.dev у каждого компонента есть кнопка, которая копирует готовый промпт для агента.
Что такое спек-тесты?+
Автотесты на конкретные правила дизайна. Например, тест на запрещённые размеры не пропустит их обратно в код. Внешний вид и поведение страницы дополнительно проверяют в браузере.