🎯 О чём этот конспект: Пошаговое руководство по созданию эстетичного и профессионального фронтенда для AI-проектов. Разбор процесса трансформации «кринжового» интерфейса в современное веб-приложение с использованием AI-агента Combai и методологии последовательного дизайна.

👤 Кому будет полезно: Вайбкодерам и разработчикам, которые создают продукты с помощью AI (Cursor, Windsurf), но сталкиваются с проблемой однотипных, «дешевых» интерфейсов, генерируемых нейросетями по умолчанию.

✨ Что получите: Алгоритм из 4 шагов для создания уникального UI, набор инструментов для работы со шрифтами и анимациями, а также понимание того, как правильно структурировать стек проекта для лучшего понимания нейросетями.

1. Подготовка стека: Переход на Next.js для точности AI

Контекст: Большинство AI-моделей (Claude, GPT) обучались на огромных массивах кода Next.js и Tailwind CSS. Если ваш фронтенд «зашит» внутри Python-кода (например, возвращается строкой из FastAPI/Flask), нейросети сложнее вносить правки, добавлять анимации и следить за структурой. Перенос фронтенда на стандартный стек резко снижает количество галлюцинаций и ошибок при генерации интерфейса.

Выгода: Чистый код, предсказуемый результат генерации и доступ к огромной библиотеке готовых компонентов.

Как применить:

• Шаг 1: Анализ текущего кода — Используйте AI-агент (например, Combai или Cursor), чтобы вычленить HTML/JS из бэкенда.
• Шаг 2: Рефакторинг — Дайте команду переписать фронтенд на Next.js + Tailwind.
• Шаг 3: Проверка связи — Настройте API-запросы между новым фронтендом и вашим Python-бэкендом.

Перепиши текущий фронтенд на Next.js. Используй Tailwind CSS для стилизации. Раздели логику отображения и API-запросы. Убедись, что структура проекта соответствует стандартам App Router.

Результат: Масштабируемая архитектура, которую AI понимает «с полуслова».

2. Проектирование через Wireframes (Каркасы)

Контекст: Главная ошибка — просить AI сразу сделать «красиво». Это приводит к хаосу. Сначала нужно определить скелет приложения: где будут кнопки, как выглядят карточки, какой путь проходит пользователь. В инструменте Combai для этого есть специальный скилл create wireframes, который генерирует структуру без отвлечения на цвета.

Выгода: Вы контролируете UX (пользовательский опыт) до того, как начнется работа над визуалом.

Как применить:

• Шаг 1: Генерация вариантов — Используйте команду /create wireframes. Выберите режим (например, multipage flow) и стиль (balanced).
• Шаг 2: Итерация — Просмотрите 3 предложенных варианта. Если что-то не нравится (например, форма карточек), попросите поправить конкретный элемент.
• Шаг 3: Применение — Только после утверждения структуры давайте команду на имплементацию кода.

Результат: Логичный интерфейс, где каждый элемент находится на своем месте.

3. Работа с ресурсами: Цвета, Шрифты и Анимации

Контекст: Чтобы сайт не выглядел как «типовой шаблон ChatGPT», нужно использовать внешние библиотеки ресурсов. Вместо того чтобы полагаться на фантазию AI, направьте его на проверенные решения: палитры, шрифтовые пары и библиотеки анимаций (например, GSAP или Framer Motion).

Выгода: Профессиональный вид сайта за счет использования «человеческих» дизайн-систем.

Как применить:

• Шаг 1: Цвета — Используйте ресурс Colors в агенте или скормите AI ссылку на палитру. Запретите использовать стандартные эмодзи и дефолтные яркие цвета (красный/зеленый).
• Шаг 2: Шрифты — Подключите скилл Fontpair или попросите подобрать современную шрифтовую пару (например, Inter + Geist).
• Шаг 3: Анимации — Используйте библиотеку GSAP. Попросите добавить микро-взаимодействия: плавное появление элементов, прогресс-бары, ховер-эффекты.

Используй библиотеку GSAP для добавления микро-анимаций на кнопки и карточки. Сделай прогресс-бар более живым, добавь плавную смену состояний. Избегай агрессивных анимаций.

Результат: «Живой» интерфейс, который ощущается дорогим и качественным.

4. Финальная шлифовка: Темная тема и визуальные эффекты

Контекст: Темная тема (Dark Mode) — это стандарт для современных инструментов. Она придает «лакшери» вайб и делает интерфейс менее утомительным. Финальный штрих — добавление эффектов (стеклянный морфизм, градиенты, тени), но здесь важно вовремя остановиться, чтобы не перегрузить систему.

Выгода: Эстетичный продукт, готовый к публикации или презентации.

Как применить:

• Шаг 1: Темы — Используйте команду suggest themes. Выбирайте глубокие оттенки (например, Carbon Glow — темно-серый вместо чисто черного).
• Шаг 2: Системные настройки — Настройте автоматическое переключение темы в зависимости от настроек ОС пользователя.
• Шаг 3: Исправление багов — Если после добавления эффектов элементы «поплыли» (кнопки убегают от мышки), используйте функцию Select в браузере агента, чтобы указать на проблемную зону и попросить фикс.

Результат: Профессиональный UI с глубокими цветами и отполированными деталями.

FAQ

В: Почему мой AI всегда генерирует фиолетовые кнопки и градиенты?

О: Это «усредненный» стиль большинства обучающих данных. Чтобы этого избежать, нужно явно запрещать дефолтные стили и использовать внешние референсы или библиотеки ресурсов (как в Combai), которые направляют модель к более современным палитрам.

В: Стоит ли использовать Next.js, если я делаю простую утилиту для себя?

О: Да. Даже для маленьких проектов стандартный стек упрощает работу с AI. Модели лучше знают Next.js, чем кастомные способы вставки HTML в Python, что экономит время на отладке фронтенда.

В: Как быстро исправить конкретный кривой элемент на странице?

О: В современных AI-агентах (Combai, Cursor с плагинами) есть функция «Select». Вы просто выделяете элемент прямо в браузере, и агент получает контекст именно этого куска кода, что позволяет исправить его точечно, не ломая остальное.

В: Что делать, если анимации тормозят сайт?

О: Проверьте, не переборщил ли AI с количеством JS-библиотек. Попросите оптимизировать анимации, использовать CSS-переходы вместо тяжелых JS-скриптов там, где это возможно, и уберите лишние эффекты наведения.

В: Можно ли обойтись без платных AI-агентов для дизайна?

О: Можно, но это потребует ручного копирования кода в Claude/ChatGPT и обратно. Агенты вроде Combai или Cursor ускоряют процесс за счет прямого доступа к файлам и встроенных «скиллов» (предустановленных промптов для дизайна).

Конспект создан на основе видео «Как я делаю дизайн для своих AI проектов (чтобы не был мусором)» канала Олег (VibeCoder). Все права на оригинальный материал принадлежат авторам. Источник: https://youtu.be/Xh4ydlZ8lPQ