Маркетинг-стратег, IT-предприниматель, ментор по вайбкодингу
10+ лет в маркетинге, 300+ клиентских проектов: сайты, реклама, боты. Создатель GoBanana (228K+ пользователей, 11.6 млн ₽ выручки) и VibeCoderz. Делаю AI-продукты сам через Claude Code, Cursor, Windsurf и консультирую тех, кто хочет так же.
🎯 О чём этот конспект: Обзор и практическое руководство по использованию Combi — AI-инструмента для дизайнеров и вайбкодеров, который позволяет генерировать UI на холсте, редактировать его через визуальный инспектор (как в Figma) и мгновенно превращать в чистый код прямо в вашей IDE (Cursor/VS Code).
👤 Кому будет полезно: Вайбкодерам, фронтенд-разработчикам и UI/UX дизайнерам, которые хотят ускорить процесс создания лендингов и интерфейсов, минуя ручную верстку.
✨ Что получите: Вы научитесь настраивать Combi, использовать библиотеку вдохновения для генерации уникальных макетов, создавать системные гайды (Style Guides) из AI-генераций и экспортировать результат в production-ready код.
1. Установка и интеграция Combi в рабочее окружение
Контекст: Combi работает не как отдельный веб-сервис, а как глубокая интеграция с вашей IDE. Это позволяет AI видеть контекст вашего текущего проекта (файлы, стили, структуру) и записывать сгенерированный код напрямую в папку проекта. Автор демонстрирует установку расширения для Cursor, что является стандартом для современного вайбкодинга.
Тайминг:[00:45]
Выгода: Экономия времени на переключении между браузером и редактором кода; автоматическая синхронизация дизайна и файлов проекта.
Как применить:
Шаг 1: Установка расширения — Перейдите на combi.com/install и выберите вашу IDE (например, Cursor или VS Code).
Шаг 2: Подготовка проекта — Откройте пустую папку или существующий проект.
Шаг 3: Запуск интерфейса — В верхней панели IDE нажмите на иконку Combi, чтобы открыть визуальный холст и чат.
2. Настройка параметров генерации и «High Creativity»
Контекст: Перед генерацией важно настроить «интеллект» агента. Combi позволяет регулировать количество вариантов дизайна и глубину проработки. Особое внимание стоит уделить режиму высокой креативности, который идеально подходит для нестандартных лендингов и Hero-секций, где важен визуальный «вау-эффект».
Тайминг:[00:74], [01:04]
Выгода: Получение более качественных и разнообразных макетов с первого промпта.
Как применить:
Шаг 1: Настройка итераций — Установите Variations на 2 (количество вариантов) и Passes of refinement на 3 (количество проходов для улучшения деталей).
Шаг 2: Включение креативности — Переключите тумблер High Creativity. Это заставит AI использовать более сложные композиции и современные тренды.
Шаг 3: Извлечение дизайн-системы — Если у вас уже есть код, используйте опцию Extract design system, чтобы AI придерживался ваших текущих стилей.
3. Использование Inspiration Library как контекста для AI
Контекст: Вместо того чтобы описывать дизайн словами с нуля, автор предлагает использовать библиотеку вдохновения. Вы выбираете готовый стиль (например, «Neon», «Neumorphism» или «Neo-brutalism»), и Combi использует его как визуальный референс. Это не копирование, а передача эстетического контекста нейросети.
Тайминг:[01:23], [01:54]
Выгода: Предсказуемый визуальный результат; возможность быстро примерить разные стили на свою идею.
Как применить:
Шаг 1: Выбор референса — Зайдите в Canvas Gallery -> Inspiration Library.
Шаг 2: Добавление в контекст — Выберите понравившийся макет (например, темную тему Neon) и нажмите Use as inspiration. Ссылка на стиль автоматически добавится в чат.
I am building LiveBand app. Take a look at the current code to get an understanding. Generate two different designs based on the Neon template. Include a 3JS waveform in the hero section. Give us options based on that overall look and feel.
4. Визуальное редактирование через Property Inspector
Контекст: После генерации макета вы не ограничены тем, что выдал AI. В Combi встроен визуальный редактор, аналогичный Figma. Вы можете кликнуть на любой элемент (кнопку, заголовок, блок) и изменить его свойства: цвета, отступы, толщину границ или шрифты.
Тайминг:[03:61], [03:89]
Выгода: Возможность «докрутить» дизайн руками без написания CSS-кода.
Как применить:
Шаг 1: Вход в режим правки — Выберите макет на холсте и нажмите Edit Design.
Шаг 2: Изменение элементов — Кликните на объект (например, вторичную кнопку). В правой панели Property Inspector измените Stroke (границу): установите цвет из палитры и прозрачность 100%.
Шаг 3: Тонкая настройка — Увеличьте Stroke Weight для придания веса кнопке или измените шрифт для улучшения иерархии.
5. Создание Style Guide и финальная сборка страницы
Контекст: Чтобы дизайн был консистентным, Combi позволяет извлечь «Style Guide» из вашего макета. Это набор переменных (цвета, типографика, радиусы скруглений), которые AI будет использовать для генерации остальных секций страницы (фичи, футер и т.д.).
Тайминг:[04:28], [04:48]
Выгода: Гарантия того, что футер и блок преимуществ будут выглядеть так же, как Hero-секция.
Как применить:
Шаг 1: Экстракция стилей — Нажмите Style Guide -> Create New -> Import from design. Нажмите Extract Style.
Шаг 2: Достройка страницы — В чате дайте команду на завершение страницы, используя созданный гайд.
Шаг 3: Промпт для завершения:
Finish this landing page with the features in mind and end it with a footer. Use the extracted style guide for consistency.
6. Конвертация дизайна в код (Code Design)
Контекст: Финальный и самый важный этап — превращение визуальных блоков в реальные файлы. Combi генерирует HTML и CSS (или компоненты), которые сразу появляются в структуре вашего проекта.
Тайминг:[05:46], [05:65]
Выгода: Получение чистого, готового к деплою кода за один клик.
Шаг 2: Сборка проекта — После завершения генерации выполните команду в терминале (если требуется):
npm run build
Шаг 3: Проверка результата — Проверьте папку dist/ или src/. Откройте index.html, чтобы увидеть готовую верстку с анимациями и стилями.
FAQ
В: Можно ли использовать Combi с React или Tailwind? О: Да, Combi поддерживает современные фреймворки. При инициализации проекта или в промпте можно указать предпочтительный стек, и AI будет генерировать компоненты в соответствующем формате.
В: Насколько чистый код выдает инструмент? О: Код структурирован и разделен на логические блоки. Как показано в видео, он создает стандартную разметку и CSS, которые легко редактировать вручную или через AI-чат Cursor (Ctrl+L).
В: Нужно ли уметь рисовать в Figma, чтобы пользоваться Combi? О: Нет. Основная фишка в том, что вы используете Inspiration Library и промпты. Визуальный редактор нужен только для финальных правок «по вкусу».
В: Как Combi понимает, какие цвета использовать для бренда? О: Вы можете либо загрузить существующий код (Extract design system), либо создать Style Guide на основе понравившейся генерации, как это сделал автор видео.
В: Поддерживает ли инструмент сложные анимации? О: Да, в видео показаны scroll-based анимации границ и интеграция с Three.js для создания 3D-волн в реальном времени.
Ресурсы и ссылки
Combi — Основной инструмент для дизайна и генерации кода — https://combi.com
Combi Install — Страница загрузки расширений для IDE — https://combi.com/install
Cursor — AI-редактор кода, использованный в видео — https://cursor.com
Three.js — Библиотека для 3D-графики, упомянутая в контексте анимации волн — https://threejs.org
Конспект создан на основе видео «Combi AI Review: Figma to Code & AI Design» канала DesignCourse. Все права на оригинальный материал принадлежат авторам.Источник: https://youtu.be/BCD6oUZp4bc
Cursor