Визуальный закон должен пережить браузер. Мы соберём живую страницу в Cargo, проверим 12-колоночную систему, текстовые стили, мобильное превращение, медиа и доступность; затем построим AI-конвейер от брифа и DESIGN.md до браузерного теста. Кодинг-агент рассматривается как производственный актор с разрешениями и пределами, а дизайнер — как автор критериев, проверок и остановки. Итог занятия — публичная beta-версия, карта конвейера, журнал решений и перечень известных хрупкостей.
Рабочий вопрос
Что остаётся дизайнеру, когда агент умеет собрать, запустить и проверить сайт?
Макет больше не занимает привилегированное место между замыслом и публикацией. Генеративный контур способен перейти от брифа к коду, открыть браузер, сравнить результат с изображением, исправить ошибку и задеплоить страницу. Figma, Cargo, редактор кода и работающий URL становятся состояниями одной системы, между которыми решение ходит в обе стороны.Это не отменяет визуальную работу. Она перемещается в постановку задачи, подготовку контекста, выбор референсов, формализацию правил, контроль вариантов, проверку последствий и право остановки. Профессия поднимается в диспетчерскую, но диспетчерская тоже нуждается в окнах на цех.
Cargo как ограниченная сцена
Cargo выбран для модуля благодаря публичному адресу, самостоятельной типографике, изображениям, встроенным медиа и возможности вмешиваться в CSS/HTML. Ограничения конструктора полезны: они заставляют найти выразительность в системе, вместо того чтобы каждый раз заново изобретать браузер.
Перед сборкой проверьте:⚫️ публичный адрес и доступ без авторизации;
⚫️ структуру страниц и Sets;
⚫️ текстовые стили;
⚫️ доступные шрифты и права на них;
⚫️ мобильный режим;
⚫️ вес изображений и видео;
⚫️ возможность сделать действие реальным или честно обозначить прототип.
Новый производственный цикл
Рабочая последовательность:бриф → паспорт артефакта → раскадровка → DESIGN.md → материалы → сборка → браузерная проверка → отсечение → публикация → наблюдение.ИИ может участвовать почти в каждом звене. Его роль указывается отдельно:⚫️ расширение поля вариантов;
⚫️ редактура текста;
⚫️ генерация или обработка изображений;
⚫️ предложение структуры;
⚫️ написание CSS/HTML;
⚫️ аудит доступности и поломок;
⚫️ сравнение версий.Фраза «сделано с помощью ИИ» слишком груба. Нам нужна карта операций и решений.
Кодинг-агенты уже умеют смотреть на страницу в собственном браузере и итеративно править фронтенд. OpenAI описывает такой цикл в обновлениях Codex, а связка Codex и Figma позволяет ходить от работающего интерфейса к дизайн-холсту и обратно через Figma MCP. Webflow генерирует из промпта многостраничный сайт со структурой, стилями и анимациями через AI Site Builder; v0 позиционирует переход от прототипа к production-приложению как единый агентный процесс в обновлении 2026 года.Эти заявления принадлежат производителям инструментов и описывают их траекторию, а не гарантированный результат каждого проекта. Для курса они важны как сигнал: ручная скорость сборки перестала быть устойчивым основанием профессии.
Кто меняет порог
В карте конвейера отметьте человеческие контрольные точки:⚫️ утверждение концепта;
⚫️ допуск фактического заявления;
⚫️ выбор публичного изображения;
⚫️ изменение основного действия;
⚫️ запрос и хранение данных;
⚫️ публикация;
⚫️ снятие страницы.Рядом укажите, кто обладает правом решения и на каком основании. Агент способен предложить правку и выполнить её; ответственность требует названного носителя критерия.
Контекст для агента
Чем сильнее агент, тем заметнее цена плохого контекста. Короткий промпт «сделай премиальный лендинг» активирует усреднённое представление о премиальности. Проектный пакет должен включать:⚫️ паспорт и закон артефакта;
⚫️ адресата и ступень узнавания;
⚫️ раскадровку;
⚫️ тексты с указанием статуса;
⚫️ DESIGN.md;
⚫️ moodboard и anti-moodboard;
⚫️ доступные ассеты;
⚫️ запреты;
⚫️ критерии приёмки.Портативные Agent Skills уже поддерживаются несколькими средами; GitHub описывает их как папки с инструкциями, скриптами и ресурсами, которые агент подгружает по задаче, в документации Agent Skills. В учебном проекте достаточно короткого файла правил — превращать каждый лендинг в программную религию с сорока заповедями пока рано.
Маршрут без обязательной подписки
Платный ChatGPT, Claude, Adobe или другой зарубежный сервис не может быть условием выполнения модуля. Доступ к инструменту нестабилен, география вмешивается в учебную программу быстрее методиста, а навык, совпавший с кнопкой одного поставщика, стареет особенно бодро.Каждую операцию можно пройти несколькими путями:
Qwen, Kimi и DeepSeek могут закрыть отдельные операции с текстом, вариантами и кодом, но не обязаны давать связный цикл «увидеть страницу → изменить файл → открыть браузер → проверить». Отсутствующее звено восполняется ручной сборкой и проверкой, а не рассказом о воображаемом агенте.Названия в таблице — примеры класса инструментов, а не закреплённый стек. Перед началом потока преподаватель проверяет реальный доступ и условия использования. Оценивается способность собрать воспроизводимый цикл с человеческими контрольными точками; наличие дорогой подписки преимущества не даёт.
Адаптив меняет композицию
Cargo использует 12-юнитную систему Columns; на мобильном колонки по умолчанию складываются вертикально. Автоматическое складывание решает техническую задачу, но не гарантирует смысловой порядок.Для каждой зоны выберите операцию:⚫️ сохранить отношение;
⚫️ изменить порядок;
⚫️ сжать;
⚫️ заменить медиа;
⚫️ убрать второстепенное;
⚫️ раскрыть скрытый контроль.Мобильная версия проектируется после проверки рукой, взглядом и реальным соединением, а не уменьшением окна до красивой узкой полосы.
