🎯 О чём этот конспект: Подробный разбор новой мультимодальной творческой платформы Imagine Computer от Imagine Art, объединяющей LLM-агентов, генераторы изображений и видео в единый пайплайн разработки. Рассматривается подключение стека через GitHub и MCP-серверы, редизайн реальных веб-проектов, генерация интерактивных посадочных страниц и маркетинговых материалов, а также текущие ограничения и ошибки агентов при длительных сессиях.
👤 Кому будет полезно: Вайбкодерам, фронтенд-разработчикам, UI/UX-дизайнерам и фаундерам, которые создают посадочные страницы, веб-приложения и рекламные промо-материалы с помощью мультимодальных AI-агентов.
✨ Что получите: Пошаговое руководство по связке внешних репозиториев и баз знаний с AI-агентом, технику безопасной гранулярной настройки MCP-интеграций, методы быстрого прототипирования адаптивных UI-компонентов и понимание того, как обходить потерю контекста (agent drift).
1. Архитектура Imagine Computer и решение проблемы фрагментации AI-инструментов
Контекст: Современный рабочий процесс вайбкодера и дизайнера сильно фрагментирован: генерация визуалов происходит в одних нейросетях, код пишется в других, а маркетинговые связки создаются вручную в третьих. Перенос персонажей, единого визуального стиля и архитектурного контекста между отдельными сервисами отнимает большую часть времени. Imagine Computer решает эту задачу, объединяя мультимодальные генеративные модели и рассуждающие LLM в едином агентском интерфейсе с персистентной памятью проекта. Платформа дает доступ к передовым генераторам (MiniMax H3, SeaDance 2.5, GPT Image 2) и топовым LLM под капотом. Это позволяет агенту одновременно помнить кодовую базу, стилистику бренда и генерировать согласованные ассеты без постоянного переобъяснения контекста.
Тайминг: , ,
Выгода: Устранение ручного переноса промптов и ассетов между 3–5 несвязанными сервисами; сквозная работа от промпта до готового кода и рендеров в одном окне.
Как применить:
- Шаг 1: Инициализация агентского пространства — Imagine Computer — Зарегистрируйте аккаунт и перейдите в единое рабочее пространство. Ознакомьтесь со списком доступных специализированных модулей (генерация синематиков, маркетинговые кампании, дизайн веб-интерфейсов).
- Шаг 2: Выбор уровня вычислений (LLM Tier) — Imagine Computer UI — Обратите внимание на выбор тиров модели (Flash, Pro, Ultra). Для сложных задач программирования и оркестрации ассетов выбирайте Pro или Ultra через селектор в верхнем меню чата.
Результат: Единое агентское окружение, готовое к мультимодальной работе с проектом без постоянного переключения вкладок.
2. Настройка безопасных интеграций: подключение GitHub и YouTube через MCP
Контекст: Агенты приносят реальную пользу только тогда, когда имеют прямой доступ к внешним источникам данных и кодовой базе. Imagine Computer использует протокол Composer MCP (Model Context Protocol) для подключения сервисов вроде GitHub и YouTube. Однако предоставление агенту полного доступа без ограничений несет критические риски (случайное удаление веток, перезапись продакшена или удаление контента). Автор видео наглядно демонстрирует подход с гранулярным разделением прав доступа: чтение разрешается автоматически, деструктивные действия блокируются, а действия с изменениями требуют обязательного ручного подтверждения.
Тайминг: , ,
Выгода: Безопасная передача контекста продакшен-репозитория агенту без риска повреждения кодовой базы или внешних аккаунтов.
Как применить:
- Шаг 1: Подключение учетных записей — Settings > Integrations — Перейдите во вкладку интеграций платформы. Выберите целевые сервисы (GitHub для доступа к репозиториям кода, YouTube для контентных пайплайнов). Авторизуйте MCP-коннектор.
- Шаг 2: Гранулярная настройка пермишенов (Tools Permission) — Integrations Security Panel — Не нажимайте «Allow All». Настройте политики для каждого типа действий:
Data Fetching / Read: переведите в статус Allow (чтение структуры проекта, коммитов, файлов).Uploading / Modifying: переведите в статус Ask (агент запрашивает подтверждение перед пушем или загрузкой).Deleting functions: переведите в статус Block / Disallow (полный запрет на любые операции удаления).
Результат: Подключенный репозиторий, из которого агент на лету считывает стек и архитектуру, но физически лишен возможности удалить данные.
3. Формирование базы знаний (Knowledge Base) проекта
Контекст: Чтобы агент не гадал структуру вашего приложения, стек технологий и дизайн-систему, необходима постоянная база знаний проекта. В Imagine Computer база знаний хранит гайдлайны бренда, системные инструкции, предпочтения и архитектурные схемы. На текущий момент поддерживаются преимущественно текстовые форматы: Markdown (.md), JSON и PDF. Для загрузки визуальных референсов прямо сейчас существует проверенный воркэраунд — упаковка изображений в PDF-документы.
Тайминг: , ,
Выгода: Экономия до 30–40% токенов и времени на каждом промпте — агенту больше не нужно объяснять, на каком фреймворке написан проект и какие цвета использовать.
Как применить:
- Шаг 1: Подготовка файлов базы знаний — Markdown Editor / VS Code — Соберите в единый Markdown-файл описание архитектуры, используемый UI-кит, целевую аудиторию и правила оформления компонентов.
- Шаг 2: Упаковка визуальных референсов — PDF Utility — Если в проект нужно передать скриншоты дизайна, мудборды или брендинг, скомпилируйте их в PDF-документ с текстовыми подписями каждого экрана.
- Шаг 3: Загрузка в проект — Knowledge Base Tab — Загрузите подготовленные
.md,.jsonи.pdfфайлы в раздел Knowledge. При старте сессии укажите агенту прочитать контекстные файлы.
Результат: Постоянная база знаний проекта, обеспечивающая соблюдение гайдлайнов при генерации страниц и маркетинговых промо.
4. Редизайн веб-интерфейсов на основе существующего стека (Кейс dogdog.hk)
Контекст: Авторы протестировали возможности Imagine Computer на реальном работающем проекте — каталоге дог-френдли ресторанов Гонконга (dogdog.hk). Существующий лендинг был перегружен массивными неструктурированными изображениями и плохо читался при скролле. Подключив репозиторий через GitHub MCP с правами read-only, авторы попросили агента проанализировать репозиторий, понять архитектуру (проект на Astro) и предложить чистый редизайн с фокусом на UX/UI и сторителлинг (история реальных собак Мисси и Маффина).
Тайминг: , ,
Выгода: Быстрое получение рабочей HTML/CSS-верстки с продуманным UX и сюжетной линией всего за 1 итерацию без ручного переписывания стилей с нуля.
Как применить:
- Шаг 1: Анализ структуры репозитория — New Chat — Дайте команду агенту просканировать подключенный репозиторий, определить стек и выявить слабые места верстки главной страницы.
- Шаг 2: Итеративный запрос на редизайн — Chat Prompt — Чтобы не усложнять отладку, попросите сначала сгенерировать прототип в чистом HTML/CSS с адаптивной сеткой, а после утверждения перенести код в целевой
.astroфайл.
Проанализируй подключенный GitHub-репозиторий dogdog.hk и файлы из Knowledge Base.
Текущая посадочная страница перегружена крупными изображениями и плохо воспринимается при вертикальном скролле.
Предложи полный редизайн главной страницы:
1. Четкая визуальная иерархия и фокус на цели сервиса (поиск dog-friendly заведений).
2. Сторителлинг-блок с историей собак Missy и Muffin.
3. Техническое ограничение: сгенерируй результат в виде единого чистого файла HTML + Tailwind CSS для быстрого ревью. После согласования перенесем в .astro компонент.- Шаг 3: Проверка и генерация ассетов — Sites UI — Оцените результат в окне предпросмотра, проверьте расположение блоков и логику взаимодействия.
Результат: Готовый, легковесный прототип страницы с улучшенным сторителлингом и понятной структурой, готовый к интеграции в продакшен-репозиторий.
5. Борьба с агентским дрейфом (Agent Drift) и потеря контекста вызовов инструментов
Контекст: Главная техническая проблема Imagine Computer в бета-версии — так называемый «агентский дрейф» (agent drift). Примерно на 3–4 шаге диалога агент теряет историю предыдущих вызовов инструментов (tool calls). В блоках рассуждений (thinking blocks) появляется системное сообщение: «There is no prior tool result in my context». Агент перестает помнить, какие данные он только что выгрузил из репозитория или API (например, список заведений для Google Maps), начинает заново объяснять задачу самому себе, ходить по кругу и выдавать нерелевантный результат. Кроме того, в платформе пока отсутствует классический Plan Mode (режим предварительного планирования шагов перед исполнением).
Тайминг: , , ,
Выгода: Предотвращение бесконечных циклов рассуждений агента и экономия кредитов подписки за счет своевременного перезапуска контекста.
Как применить:
- Шаг 1: Контроль блоков рассуждения (Thinking Blocks) — Agent Chat — При выполнении сложных задач обязательно раскрывайте цепочку рассуждений агента. Отслеживайте статус контекста инструментов.
- Шаг 2: Ограничение длины сессии (Правило 2–3 промптов) — Workflow Strategy — Не ведите длинные диалоги по 10–15 сообщений внутри одной сессии. Первые 1–2 промпта агент выполняет идеально. Как только задача одного этапа решена, фиксируйте результат.
- Шаг 3: Сброс сессии при появлении ошибки — Chat Navigation — Если агент начинает блуждать («chasing its tail») или сообщает об отсутствии
tool result, немедленно остановите выполнение и откройте новый чат (New Chat), передав туда готовые вводные из предыдущего шага. - Шаг 4: Явное указание мультимодальных моделей — Prompting — Если в системе не включен Plan Mode, явно указывайте в промпте, какую модель генерации графики использовать (например, требовать
GPT Image 2вместо дефолтнойNano Banana 2).
Внимание: для генерации визуальных ассетов используй строго модель GPT Image 2.
Перед началом генерации опиши краткий план из 3 пунктов, затем выполни первый пункт и запроси подтверждение.Результат: Стабильная работа без зависаний и зацикливаний, минимальный расход кредитов при многоэтапной разработке.
6. Быстрая генерация интерактивных веб-приложений через встроенные Site Templates
Контекст: Инструмент «Sites» внутри Imagine Computer содержит библиотеку готовых интерактивных шаблонов с поддержкой продвинутых анимаций скролла (scrolling storytelling), нейроинтерфейсов и утилитных сервисов. Автор демонстрирует два примера: премиальный лендинг люксовых часов с кинематографичной покадровой анимацией при прокрутке и полноценный интерактивный трекер подписок и биллинга (SaaS Subscription & Expense Tracker), созданный всего за 5 минут по целевому запросу «CRM and Sales».
Тайминг: , , ,
Выгода: Развертывание готового интерактивного прототипа или маркетингового микросервиса с анимациями за 5 минут вместо нескольких дней ручной верстки.
Как применить:
- Шаг 1: Выбор цели или шаблона — Tools > Sites — Откройте инструмент Sites. Выберите подходящую категорию (например, «CRM and sales» для дэшбордов или «Neural interface» / шаблоны со скролл-анимацией для премиальных продуктовых лендингов).
- Шаг 2: Формулирование промпта по бизнес-задаче — Sites Prompt Box — Опишите специфику приложения или продукта, указав ключевые поля данных и функционал.
Создай интерактивный SaaS-трекер расходов на AI-инструменты и подписки:
- Дашборд с метриками суммарных трат за месяц.
- Таблица сервисов с полями: название, стоимость, дата списания, категория.
- Фильтры по категориям и статусу оплаты.
- Современный темный минималистичный интерфейс.- Шаг 3: Инлайн-редактирование элементов (Visual Highlighting) — Sites Canvas — Выделите курсором любой элемент на сгенерированной странице (кнопку, заголовок, график) и отправьте контекстную команду агенту: «Сделай этот график столбчатым и добавь экспорт в CSV».
Результат: Полностью рабочий веб-интерфейс с живой версткой, анимациями и интерактивными элементами, который можно дорабатывать точечными визуальными правками.
Imagine Computer: ответы на частые вопросы
В: В чем главное отличие Imagine Computer от привычных связок вроде Cursor + Midjourney?
О: Imagine Computer пытается объединить написание кода, генерацию медиаконтента (видео, 3D, изображения) и маркетинговую обвязку в одну платформу с постоянной памятью. Вместо переключения между графическими генераторами и IDE агент сам обращается к нужным моделям и встроенным инструментам визуализации на основе подключенного репозитория.
В: Какие форматы файлов поддерживает база знаний платформы на текущий момент?
О: Сейчас поддерживаются текстовые форматы: Markdown (.md), JSON и PDF. Прямая загрузка изображений и видео пока в разработке, но вы можете использовать рабочий хак авторов видео: упаковывать скриншоты интерфейсов, мудборды и графические ассеты в PDF-документ перед загрузкой.
В: Насколько безопасно подключать рабочий GitHub-репозиторий к Imagine Computer?
О: Интеграция использует стандарт Composer MCP. Безопасность полностью зависит от настроек пермишенов: авторы настоятельно рекомендуют давать права Allow только на чтение (read/fetch), для любых операций изменения (upload/modify) включать обязательное подтверждение пользователя (Ask), а команды удаления (delete) полностью блокировать.
В: Что такое «agent drift» и как с ним бороться?
О: Это потеря контекста и истории вызова внешних инструментов, которая происходит в платформе после 3–4 промптов подряд. Агент пишет в мыслях, что у него нет предыдущих результатов, и начинает ходить по кругу. Решение — не затягивать сессию: делайте задачу за 1–2 точных промпта, фиксируйте код и открывайте новый чат для следующего этапа.
В: Сколько стоит Imagine Computer и что входит в максимальный тариф?
О: В видео разобран тариф Ultimate стоимостью порядка $34 в месяц. За эту сумму пользователь получает кредиты, которых хватает примерно на 3000 генераций изображений и до 530 генераций видео в месяц, а также доступ к мультимодальным моделям и агентским инструментам.
В: Можно ли выбрать конкретную LLM внутри проектной папки?
О: На момент записи видео в UI проектных папок был баг, не позволявший переключать модель напрямую. Единственный рабочий способ выбрать конкретный тир нейросети (Flash, Pro, Ultra) — запускать диалог через раздел «New Chat» и переключать модель в верхнем селекторе всплывающего окна.
В: Есть ли в платформе режим предварительного планирования (Plan Mode)?
О: Нет, встроенного режима Plan Mode пока нет — агент сразу приступает к выполнению действий. Чтобы контролировать процесс, явно прописывайте в системном промпте требование сначала вывести план из нескольких пунктов и ждать вашего подтверждения перед генерацией кода.
Imagine Computer: инструменты и ссылки из видео
- Imagine Computer by Imagine Art — Мультимодальная творческая платформа с агентскими рабочими процессами —
https://imagine.art(упомянут в видео) - dogdog.hk — Реальный продакшен-проект авторов (каталог дог-френдли заведений в Гонконге на базе Astro), на котором тестировался редизайн — упомянут в видео
- Composer MCP — Протокол Model Context Protocol для подключения сторонних API и репозиториев (GitHub, YouTube) — упомянут в видео
- MiniMax H3 / SeaDance 2.5 / GPT Image 2 / Nano Banana 2 — Мультимодальные модели генерации видео и изображений, интегрированные в платформу — упомянуты в видео
Конспект создан на основе видео «Imagine Computer Review» канала автора Ron. Все права на оригинальный материал принадлежат авторам. Источник: https://www.youtube.com/watch?v=z8YRvn71EsA