🎯 О чём этот конспект: Обзор и практическое руководство по использованию 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. Ссылка на стиль автоматически добавится в чат.
• Шаг 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. Вы можете кликнуть на любой элемент (кнопку, заголовок, блок) и изменить его свойства: цвета, отступы, толщину границ или шрифты.

Тайминг: [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]

Выгода: Получение чистого, готового к деплою кода за один клик.

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

• Шаг 1: Запуск экспорта — Нажмите кнопку Code Design под выбранным макетом.
• Шаг 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