Заметки о вайб-кодинге сайтов. Часть 1.
Если для тебя, мой дорогой читатель, что тег <h1>, что <div>, что <p> звучат примерно одинаково, а frontend-сборщики, SPA-приложения и не дай бог backend — это вообще какие-то ругательства, то тебе сюда.
А если ты искушенный разработчик, то, возможно, тоже сможешь почерпнуть что-нибудь полезное.
Где-то кто-то сказал, что веб-разработчики скоро будут не нужны. ИИ всех оставит без работы, и теперь любой желающий сможет сделать сайт сам. Вон пусть тетя Маша из бухгалтерии сайт нам на ИИ запилит.
На практике все чуть интереснее.
Допустим, пользователю удалось купить VPN, запустить его на компьютере, добраться до заветного Claude, ChatGPT или Lovable и даже каким-то образом оплатить подписку.
Первые проблемы начнутся не с кода. Они начнутся с внешнего вида.
Пусть это будет обычный сайт. Если кто пробовал Lovable, тот поймет, о чем я говорю: блоки получаются ровные, аккуратные, но до боли похожие. Вроде все на месте, но сайт выглядит шаблонно, скучно и не очень дорого.
Можно, конечно, кормить ИИ скриншотами с разных сайтов и говорить: “хочу вот так” или “сделай как тут”. Через боль, итерации и пару нервных срывов дизайн действительно начнет меняться.
Но я бы с этим не спешил.
Дизайн для ИИ — адски сложная задача, потому что она слишком абстрактная. Команда “сделай красиво” почти никогда не работает. А вот “сделай как тут, но в такой-то стилистике, с такими-то отступами, цветами, компонентами и ограничениями” — уже более-менее.
В крупных проектах есть такая штука как дизайн-система.
Если коротко, дизайн-система — это набор правил, компонентов, цветов, отступов, типографики и документации, который помогает продукту выглядеть единообразно. В небольших проектах она тоже обычно есть, просто чаще всего неоформленная, противоречивая и живет где-то в голове дизайнера, разработчика или владельца бизнеса.
Так вот, когда я говорю “не спешить кормить ИИ скрины всего подряд”, я имею в виду следующее: сначала лучше дать агенту базовую систему, в рамках которой он будет работать.
Что можно сделать на старте:
1. Зайти на https://styles.refero.design/ и посмотреть, как выглядят текстовые дизайн-системы для ИИ-агентов.
Там есть примеры Design.md — файлов, которые описывают стиль проекта словами: цвета, типографику, сетку, кнопки, карточки, состояния, ограничения и общую визуальную логику.
2. Выбрать понравившуюся стилистику и попросить ИИ добавить в проект файл Design.md.
Важно: просто положить файл в проект мало. Нужно прямо сказать агенту: “перед изменениями сверяйся с Design.md, не нарушай сетку, цвета, отступы, кнопки, карточки и общий стиль”.
Иначе он может бодро проигнорировать этот файл и снова начать творить прекрасное.
3. Когда со стилистикой определились, можно сгенерировать базовую обвязку интерфейса: модульную сетку, контейнеры, колонки, заголовки, кнопки, ссылки, карточки, формы и прочие элементы.
Сейчас очень популярен Tailwind CSS — https://tailwindcss.com/
Если проект делается с нуля, его вполне можно взять как базу. Это не “новый Bootstrap” в прямом смысле, а скорее набор utility-классов, из которых удобно собирать свой дизайн. Для ИИ это тоже удобно: он неплохо понимает Tailwind и часто быстрее попадает в нужную верстку.
4. Так как ИИ любит пихать иконки с поводом и без, лучше сразу выбрать одну библиотеку иконок, с которой он будет работать. Два нормальных варианта:
— Tabler Icons: https://tabler.io/icons
— Lucide Icons: https://lucide.dev/icons/
Можно прямо сказать модели: “используй только эту библиотеку, подбирай иконки по смыслу, не смешивай разные стили”.
Это мелочь, но она сильно влияет на ощущение цельности. Когда на одной странице иконки из пяти разных наборов, сайт сразу начинает выглядеть как франкенштейн.
Это была краткая база для старта. Продолжение во второй части.
👉 Александр Андреев. Подписаться
