Вы знаете, как это выглядит. Белый фон. Синяя кнопка. Шрифт Inter. Секция «героя» с градиентом от фиолетового к индиго. Карточки с одинаково скругленными углами и такой же едва заметной тенью. Панель навигации с вашим логотипом слева и кнопкой «Начать» справа.

Вы видели это сотни раз. И в тот момент, когда вы создали свое первое приложение, вы снова увидели это — только на этот раз оно было вашим.

Это самый популярный и наименее решаемый вопрос в «вайб-кодинге» прямо сейчас: как сделать что-то, что выглядит как вы сами, а не как усредненный вариант всего, что когда-либо видел ИИ?

Ответ кроется не в техническом исправлении. Это проблема описания. И эта статья поможет её решить.

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

Наши цели в этой статье просты:

Почему ИИ по умолчанию выдает стандартный вид — и что на самом деле происходит, когда он это делает
Словарный запас, необходимый для описания дизайна без профильного образования
Пошаговый процесс перехода от общего к уникальному прямо здесь, в Enter

Почему ИИ по умолчанию выдает один и тот же вид?

Прежде всего, давайте поймем, что происходит на самом деле, потому что, если один раз это увидеть, развидеть уже не получится.

Искусственный интеллект учится на существующем материале. Когда вы просите его создать что-то, что выглядит «профессионально», «чисто» или «современно», он обращается к статистическому среднему всех профессиональных, чистых, современных интерфейсов, на которых он обучался. У этого среднего есть вполне конкретное лицо: синий, белый, шрифт Inter, скругленные углы, тени у карточек.

Это неплохой дизайн. Это безопасный дизайн. Тот, который никого не обижает и никого не выделяет.

ИИ не делает эстетический выбор. Он делает вероятностный выбор. Он строит интерфейс, который с наибольшей вероятностью соответствует тому, что вы описали, основываясь на всем, что он видел ранее. И когда ваше описание расплывчато — «современный», «минималистичный», «профессиональный» — в ответ приходит усредненный результат всего этого вместе взятого.

Вот правило, которое меняет всё: расплывчатое задание → стандартный результат. Каждый раз.

Это означает, что решение не в инструменте. Оно в том, как вы общаетесь с инструментом.

Психологический сдвиг: вы — арт-директор

Большинство людей подходят к дизайну с мыслью, что им нужны технические знания — названия шрифтов, цветовые коды, свойства CSS. Это неверный подход.

Психологический сдвиг заключается в следующем: вы арт-директор, а не дизайнер. Арт-директор не рисует логотип и не верстает код. Он входит в комнату, указывает на что-то на мудборде и говорит: «Я хочу, чтобы это ощущалось вот так — но теплее и с большей остротой». Дизайнер сам разбирается с исполнением.

Вы развивали этот навык всю свою жизнь. Каждый раз, когда вы заходили в кафе и сразу понимали, приятно ли там. Каждый раз, когда вы заходили на сайт и закрывали его через три секунды, потому что что-то было не так. Каждый раз, когда вы смотрели на что-то и думали «это слишком старается» или «это выглядит дорого» — это и есть дизайнерская грамотность. Просто раньше для неё не было канала выхода.

Вайб-кодинг дает такой канал. Проблема не в вашем вкусе. Проблема в том, как вы описываете свой вкус. И этому навыку можно научиться.

От общего к уникальному: пошаговое руководство

Здесь начинается практика. Мы пройдемся по точному процессу придания вашему приложению визуальной идентичности — от первого слова, которое вы вводите, до результата, который действительно выглядит так, будто его сделал человек со своим видением.

Прежде чем что-то печатать — сформируйте свой словарь

Дизайн не требует степени в этой области. Он требует правильных слов. Вот категории, которые работают лучше всего:

Слова настроения — они подсказывают ИИ, каким должен быть продукт по общему ощущению. Не «профессиональный». А скорее: редакционный, необработанный, теплый, клинический, игривый, структурированный, дерзкий, кинематографичный, сдержанный. Каждое из них создает совершенно разное визуальное направление.

Референтные индустрии — некоторые индустрии имеют сильную, мгновенно узнаваемую эстетику. Попробуйте: архитектурное бюро, модный журнал, финансовый терминал, медицинский журнал, роскошный отель, независимый книжный магазин. Сообщение ИИ, что ваш продукт должен ощущаться как один из них, дает ему целостный мир для вдохновения.

Контраст и вес — насколько сильное визуальное напряжение вам нужно? Высокий контраст или мягкий? Тяжелая типографика или легкая? Плотная или свободная? Этот выбор определяет ощущение продукта больше, чем любой цвет.

Направление типографики — вам не нужно называть конкретные шрифты. Вам нужно понимать: с засечками (serif) или без них (sans-serif)? Шрифт с засечками — те самые маленькие горизонтальные штрихи на концах букв, как в газетах и книгах — ощущается как основательный, литературный, заслуживающий доверия. Сан-сериф — чистый, без штрихов, как у большинства технологических продуктов — ощущается как современный и прямой. Знание того, какое направление вам нужно, меняет весь характер продукта.

Шаг 1 — Начните с того, что уже есть в Enter

Прежде чем написать хотя бы слово в промпте, самый быстрый способ найти направление дизайна уже есть внутри Enter.

На главной странице пролистайте вниз мимо поля чата. Вы увидите две вкладки: «Шаблоны» (Templates) и «Компоненты» (Components).

Шаблоны — это готовые к использованию отправные точки, созданные сообществом Enter, каждая из которых — свой эстетический мир. Смелый редакционный макет. Темный игровой интерфейс. Чистая музыкальная платформа. Минималистичная презентация курса. Они намеренно выглядят по-разному. Просматривайте их не для того, чтобы найти тот, который вы скопируете, а чтобы найти тот, на который вы среагируете.

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

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

Ваши действия: просматривайте, реагируйте, записывайте, что заметили. Не просто «мне нравится этот» — это слишком расплывчато. А конкретно:

«Мне нравится, что заголовки крупные, а основной текст мелкий. Мне нравится, что используется только один акцентный цвет, а остальное — черно-белое. Мне нравится, сколько свободного места между элементами — ничего не кажется переполненным».

Эти наблюдения — и есть ваше техническое задание. Если хотите зайти дальше, найдите один-два внешних примера — сайт, приложение, журнал — которые вызывают то ощущение, которое вы хотите от своего продукта. Добавьте эти реакции в свои заметки. Теперь у вас есть нечто реальное для работы.

Шаг 2 — Напишите конкретный промпт

Откройте чат и напишите промпт, который включает все собранные данные. Вот как выглядит стандартный запрос против конкретного:

Стандартный: «Создай сайт-портфолио с современным профессиональным дизайном».

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

Идея та же. Результаты совершенно разные. Второй промпт дает результат с собственным видением — потому что вы его привнесли. Всё, что вы заметили на Шаге 1, напрямую влияет на это. --> подробнее в нашей первой статье: Руководство по вайб-кодингу для нетехнических фаундеров | С нуля до профи | Enter

Шаг 3 — Примите три решения, которые несут 80% успеха

Если хотите упростить еще больше: эти три решения определяют, выглядит ли дизайн уникальным или шаблонным.

Цветовая палитра. Один цвет фона. Один цвет текста. Один акцентный цвет. Называйте их конкретно — небело-белый, почти черный, глубокий лесной зеленый — и продукт сразу обретает индивидуальность. Ошибка большинства дизайнов, сгенерированных ИИ — использование пяти цветов, ни один из которых не подходит идеально.

Типографика. Одно направление шрифта для заголовков. Одно для основного текста. Если возможно, выберите один шрифт с засечками и один без. Им не нужно быть знаменитыми — они должны гармонично смотреться вместе. Попросите ИИ подобрать что-то редакционное, или техническое, или теплое, и он выберет соответствующим образом.

Отступы. Свободное пространство почти всегда лучше, чем теснота. Если что-то выглядит дешево или переполнено, первое решение — добавить больше пространства между элементами. Попросите больше «воздуха», больше белого пространства, больше внутренних отступов в карточках. Вы сразу увидите разницу.

Шаг 4 — Используйте визуальный редактор для финальных 20%

В любой разработке наступает момент, когда описать изменение словами дольше, чем сделать его напрямую. Отступ между секциями слишком мал на два пикселя. Цвет кнопки правильный, но слишком насыщенный. Размер заголовка нужно немного уменьшить.

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

Фаза описания и фаза «кликов» работают в связке. ИИ быстро доводит вас до 80% готовности. Визуальный редактор точно обрабатывает последние 20%. Рабочий процесс становится таким: просмотр шаблонов → описание направления → генерация → настройка кликами → публикация.

Шаг 5 — Опубликуйте и взгляните свежим взглядом

Когда результат кажется близким, нажмите «опубликовать».

Enter моментально развернет его на живой URL. Затем откройте эту ссылку на телефоне, отойдите от компьютера и взгляните на результат так, как смотрел бы незнакомец. Не как создатель.

Задайте один вопрос: выглядит ли это так, будто создано человеком со своим видением? Если да — вы закончили. Если нет, теперь вы знаете, чего не хватает. Вернитесь, опишите пробел, доработайте.

Это и есть цикл. С каждым разом он проходит быстрее.

Что дальше в серии

Теперь вы знаете, почему возникает «шаблонность» и как ее избежать. Ваша следующая сборка должна выглядеть как «ваша».

В следующий раз мы пойдем на уровень глубже. Потому что дизайн — это одно, но создание того, чем люди действительно захотят пользоваться — другое. Мы поговорим о самой распространенной ошибке фаундеров, после того как они добились нужного внешнего вида: создание красивого, но бесполезного продукта. Как найти верную задачу, как валидировать идею до разработки и как убедиться, что то, что вы выпускаете, стоит выпускать.

До скорой встречи.