Конспект: WeWeb Co-Pilot: Пошаговое руководство по генерации No-code приложений с помощью AI — VibCoderZ - VibeCoderz

Загрузка...

🎯 О чём этот конспект: Разбор работы нового инструмента Co-Pilot в No-code платформе WeWeb. Видео демонстрирует, как создавать полноценные страницы веб-приложений (дашборды, навигацию, сложные UI-элементы) с помощью текстовых промптов и итеративного редактирования.

👤 Кому будет полезно: Вайбкодерам, No-code разработчикам и фаундерам, которые хотят ускорить процесс верстки фронтенда, используя AI-агентов внутри визуального редактора.

✨ Что получите: Вы научитесь правильно формулировать промпты для генерации страниц, настраивать контекст для AI, исправлять ошибки верстки через чат и создавать сложные компоненты (графики, календари) без ручного перетаскивания элементов.

1. Основы генерации страниц через контекстный промпт

Контекст: Для того чтобы AI выдал качественный результат, недостаточно просто попросить «сделай дашборд». WeWeb Co-Pilot требует базовой информации о стиле, назначении приложения и целевой аудитории. Чем больше контекста (название бренда, цветовая палитра, требования к адаптивности) вы передадите на первом этапе, тем меньше правок потребуется вносить вручную.

Выгода: Сокращение времени на первичную верстку страницы с нескольких часов до 1-2 минут.

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

Шаг 1: Подготовка вводных данных — Сформулируйте запрос, включающий: название приложения, стиль (например, минимализм), мобильную отзывчивость и конкретную страницу (Dashboard).
Шаг 2: Запуск генерации — Вставьте промпт в окно Co-Pilot.

Пример базового промпта:

I am building an app for salon owners to manage their salons. 
Design requirements: minimalistic, mobile responsive. 
Task: Build the dashboard page with general information and key metrics.

Результат: Готовый каркас страницы с базовыми блоками, соответствующий заданному стилю.

2. Итеративное редактирование и уточнение брендинга

Контекст: Первый результат генерации — это фундамент. Co-Pilot позволяет «докручивать» дизайн в режиме диалога. Вы можете добавлять забытые элементы (логотипы, названия) или менять структуру страницы (например, добавлять боковое меню), просто общаясь с AI.

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

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

Шаг 1: Уточнение бренда — Попросите AI обновить название или логотип.
Шаг 2: Добавление навигации — Запросите создание системы переходов между будущими страницами.

Пример промпта для итерации:

The salon is called "We Salon". Update the branding across the page. 
Also, add a left navigation bar so I can visit different pages in the future.

Результат: Обновленный интерфейс с актуальным названием и функциональной боковой панелью.

3. Точечная настройка элементов через контекстный выбор

Контекст: Co-Pilot понимает, какой элемент выбран в редакторе. Если блок выглядит неправильно (например, занимает не всю высоту или имеет лишний фон), не нужно описывать его словами — достаточно кликнуть на него, и AI автоматически получит этот элемент как контекст для следующей команды.

Выгода: Точное управление CSS-свойствами (высота, отступы, цвета) через естественный язык.

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

Шаг 1: Выбор элемента — Кликните на нужную секцию (например, Main Content) в дереве элементов WeWeb.
Шаг 2: Команда на изменение — Введите запрос на изменение конкретного свойства.

Пример промпта:

Update this section so its height takes up the full possible available space (100vh). 
Remove the gray background to make it seamless.

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

4. Создание сложных страниц по детальному ТЗ

Контекст: Для профессиональных приложений требуется глубокая проработка. Вы можете передать Co-Pilot структуру всего приложения (список всех страниц), детальный состав блоков для текущей страницы и даже параметры дизайн-системы (шрифты, цвета, персоны пользователей).

Выгода: Получение практически готового к работе интерфейса, который учитывает логику всего приложения.

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

Шаг 1: Составление расширенного промпта — Опишите структуру страниц, конкретные виджеты и визуальный гайд.
Шаг 2: Проверка результата — Убедитесь, что AI включил все запрошенные блоки.

Пример расширенного промпта:

App Context: Salon Management System. 
Planned Pages: Dashboard, Calendar, Bookings, Clients, Services, Staff, Settings, Reports.
Current Task: Build the Dashboard.
Include: 
1. Screenshot of day's metrics (revenue, bookings).
2. Today's schedule.
3. Notifications.
4. Customer insights section.
Design: Professional persona, soft blue and white palette, Inter font, fully responsive.

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

5. Экономия токенов и ручная доработка

Контекст: Каждый запрос к Co-Pilot расходует токены. Для мелких правок (например, изменить отступ с 20px на 24px) эффективнее использовать ручные настройки WeWeb. Это быстрее и дешевле, чем ждать ответа AI.

Выгода: Оптимизация затрат на AI и более высокая скорость работы над деталями.

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

Шаг 1: Анализ правки — Если правка касается одного числового значения (Margin, Padding, Font-size), делайте её вручную.
Шаг 2: Сверка стилей — Посмотрите значения у соседних элементов (например, Margin-top: 24px) и скопируйте их для нового блока.

Результат: Идеально выровненный интерфейс без лишних затрат ресурсов AI.

FAQ

В: Может ли Co-Pilot создавать функциональные элементы, например, выпадающие списки? О: Да. При генерации стандартных элементов, таких как иконка уведомлений или аватар пользователя, Co-Pilot автоматически создает связанные с ними Dropdown-меню, которые работают в режиме превью.

В: Что делать, если AI пропустил часть инструкций из длинного промпта? О: Это нормально при больших объемах данных. Просто отправьте уточняющий запрос: «Ты забыл добавить секцию [название]. Пожалуйста, добавь её сейчас под блоком [название]».

В: Можно ли использовать изображения для генерации дизайна? О: Да, WeWeb Co-Pilot поддерживает Vision-функционал. Вы можете загрузить скриншот существующего сайта или макета, и AI попытается воссоздать этот UI внутри WeWeb.

В: Умеет ли инструмент писать код? О: Да, Co-Pilot может генерировать Custom Code компоненты. Это полезно для создания сложных графиков, кастомных календарей или интеграции специфических JS-библиотек, которых нет в стандартном наборе WeWeb.

В: Как AI понимает, какие пункты меню добавить в навигацию? О: Если вы в начале сессии предоставили список планируемых страниц (Planned Pages), Co-Pilot запоминает этот контекст и при запросе «создай навигацию» использует именно эти названия страниц.

Конспект создан на основе видео «How to use Page Generations with Co-pilot» канала WeWeb. Все права на оригинальный материал принадлежат авторам. Источник: https://www.youtube.com/watch?v=jPdo4x01k7g