🎯 О чём этот конспект: Обзор и практическое руководство по использованию Combi — AI-инструмента для дизайнеров и вайбкодеров, который позволяет генерировать UI на холсте, редактировать его через визуальный инспектор (как в Figma) и мгновенно превращать в чистый код прямо в вашей IDE (Cursor/VS Code).
👤 Кому будет полезно: Вайбкодерам, фронтенд-разработчикам и UI/UX дизайнерам, которые хотят ускорить процесс создания лендингов и интерфейсов, минуя ручную верстку.
✨ Что получите: Вы научитесь настраивать Combi, использовать библиотеку вдохновения для генерации уникальных макетов, создавать системные гайды (Style Guides) из AI-генераций и экспортировать результат в production-ready код.
1. Установка и интеграция Combi в рабочее окружение
Контекст: Combi работает не как отдельный веб-сервис, а как глубокая интеграция с вашей IDE. Это позволяет AI видеть контекст вашего текущего проекта (файлы, стили, структуру) и записывать сгенерированный код напрямую в папку проекта. Автор демонстрирует установку расширения для Cursor, что является стандартом для современного вайбкодинга.
Тайминг:
Выгода: Экономия времени на переключении между браузером и редактором кода; автоматическая синхронизация дизайна и файлов проекта.
Как применить:
- Шаг 1: Установка расширения — Перейдите на
combi.com/installи выберите вашу IDE (например, Cursor или VS Code). - Шаг 2: Подготовка проекта — Откройте пустую папку или существующий проект.
- Шаг 3: Запуск интерфейса — В верхней панели IDE нажмите на иконку Combi, чтобы открыть визуальный холст и чат.
2. Настройка параметров генерации и «High Creativity»
Контекст: Перед генерацией важно настроить «интеллект» агента. Combi позволяет регулировать количество вариантов дизайна и глубину проработки. Особое внимание стоит уделить режиму высокой креативности, который идеально подходит для нестандартных лендингов и Hero-секций, где важен визуальный «вау-эффект».
Тайминг: ,
Выгода: Получение более качественных и разнообразных макетов с первого промпта.
Как применить:
- Шаг 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 использует его как визуальный референс. Это не копирование, а передача эстетического контекста нейросети.
Тайминг: ,
Выгода: Предсказуемый визуальный результат; возможность быстро примерить разные стили на свою идею.
Как применить:
- Шаг 1: Выбор референса — Зайдите в
Canvas Gallery->Inspiration Library. - Шаг 2: Добавление в контекст — Выберите понравившийся макет (например, темную тему Neon) и нажмите
Use as inspiration. Ссылка на стиль автоматически добавится в чат. - Шаг 3: Написание промпта — Опишите суть вашего продукта, опираясь на выбранный стиль.
Пример промпта из видео:
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. Вы можете кликнуть на любой элемент (кнопку, заголовок, блок) и изменить его свойства: цвета, отступы, толщину границ или шрифты.
Тайминг: ,
Выгода: Возможность «докрутить» дизайн руками без написания CSS-кода.
Как применить:
- Шаг 1: Вход в режим правки — Выберите макет на холсте и нажмите
Edit Design. - Шаг 2: Изменение элементов — Кликните на объект (например, вторичную кнопку). В правой панели
Property InspectorизменитеStroke(границу): установите цвет из палитры и прозрачность 100%. - Шаг 3: Тонкая настройка — Увеличьте
Stroke Weightдля придания веса кнопке или измените шрифт для улучшения иерархии.
5. Создание Style Guide и финальная сборка страницы
Контекст: Чтобы дизайн был консистентным, Combi позволяет извлечь «Style Guide» из вашего макета. Это набор переменных (цвета, типографика, радиусы скруглений), которые AI будет использовать для генерации остальных секций страницы (фичи, футер и т.д.).
Тайминг: ,
Выгода: Гарантия того, что футер и блок преимуществ будут выглядеть так же, как 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 (или компоненты), которые сразу появляются в структуре вашего проекта.
Тайминг: ,
Выгода: Получение чистого, готового к деплою кода за один клик.
Как применить:
- Шаг 1: Запуск экспорта — Нажмите кнопку
Code Designпод выбранным макетом. - Шаг 2: Сборка проекта — После завершения генерации выполните команду в терминале (если требуется):
npm run build- Шаг 3: Проверка результата — Проверьте папку
dist/илиsrc/. Откройтеindex.html, чтобы увидеть готовую верстку с анимациями и стилями.
Combi AI: ответы на частые вопросы
В: Можно ли использовать 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 AI: инструменты и ссылки из видео
- 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
