Визуальный закон должен пережить браузер. Мы соберём живую страницу в доступной среде, проверим сетку, текстовые стили, мобильное превращение, медиа и доступность; затем опишем производственный цикл от брифа и DESIGN.md до браузерного теста. Кодинг-агент может выполнять всю техническую сборку, если выбранная среда это позволяет; дизайнер отвечает за критерии, проверку и остановку. Итог занятия — публичная beta-версия с проверяемым результатом основного действия, карта операций и перечень известных хрупкостей.
Рабочий вопрос
Что остаётся дизайнеру, когда агент умеет собрать, запустить и проверить сайт?
Макет больше не занимает привилегированное место между замыслом и публикацией. Генеративный контур способен перейти от брифа к коду, открыть браузер, сравнить результат с изображением, исправить ошибку и задеплоить страницу. Figma, Cargo, редактор кода и работающий URL становятся состояниями одной системы, между которыми решение ходит в обе стороны.Это не отменяет визуальную работу. Она перемещается в постановку задачи, подготовку контекста, выбор референсов, формализацию правил, контроль вариантов, проверку последствий и право остановки. Профессия поднимается в диспетчерскую, но диспетчерская тоже нуждается в окнах на цех.
Среда сборки: Cargo как один из маршрутов
Cargo остаётся одним из примеров сборки: типографика, изображения, встроенные медиа и CSS/HTML позволяют обсуждать выразительность внутри ограниченной системы. Вы можете работать в Tilda, другом конструкторе или собрать страницу кодом, включая вайбкодинг. Выбор подтверждается рабочей ссылкой и доступностью для вашей аудитории, в том числе из России. Если публикация не открывается в обычных условиях проверки или требует недоступной оплаты, выбираем другой способ размещения; освоение Cargo само по себе в задание не входит.
Перед сборкой проверьте:⚫️ публичный адрес и доступ без авторизации;
⚫ структуру страниц и навигацию (в Cargo — в том числе 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. Поддержка skills, постоянного контекста и работы с файлами зависит от конкретной среды. При наличии только чата передавайте нужные материалы сообщениями и храните их отдельно. Достаточно короткого файла правил — превращать каждый лендинг в программную религию с сорока заповедями пока рано.
Маршрут без обязательной подписки
Платный ChatGPT, Claude, Adobe или другой зарубежный сервис не может быть условием выполнения модуля. Доступ к инструменту нестабилен, география вмешивается в учебную программу быстрее методиста, а навык, совпавший с кнопкой одного поставщика, стареет особенно бодро.Каждую операцию можно пройти несколькими путями:
Qwen, Kimi и DeepSeek могут закрыть отдельные операции с текстом, вариантами и кодом, но не обязаны давать связный цикл «увидеть страницу → изменить файл → открыть браузер → проверить». Отсутствующее звено восполняется ручной сборкой и проверкой, а не рассказом о воображаемом агенте.Названия в таблице — примеры класса инструментов, а не закреплённый стек. Перед началом потока преподаватель проверяет реальный доступ и условия использования. Оценивается способность собрать воспроизводимый цикл с человеческими контрольными точками; наличие дорогой подписки преимущества не даёт.Школьный доступ через Phygital+ обсуждается, но наличие чата с LLM ещё не подтверждает наличие кодинг-агента, достаточного лимита или загрузки skills. Обязательный объём работы назначается по фактически доступным ресурсам; обещанные интеграции и локальные модели не считаются уже выданным инструментом. При изменении доступа заранее согласуем другой маршрут и масштаб результата.
Адаптив меняет композицию
Для маршрута Cargo разберите систему Columns; в другой среде проверьте соответствующее поведение сетки. Автоматическое складывание колонок решает техническую задачу, но не гарантирует смысловой порядок. Число колонок выбирается по композиции, одинаковой сетки для всех проектов не требуется.Для каждой зоны выберите операцию:⚫️ сохранить отношение;
⚫️ изменить порядок;
⚫️ сжать;
⚫️ заменить медиа;
⚫️ убрать второстепенное;
⚫️ раскрыть скрытый контроль.Мобильная версия проектируется после проверки рукой, взглядом и реальным соединением, а не уменьшением окна до красивой узкой полосы.
