Визуальный закон должен пережить браузер. Мы соберём живую страницу в 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; на мобильном колонки по умолчанию складываются вертикально. Автоматическое складывание решает техническую задачу, но не гарантирует смысловой порядок.
Для каждой зоны выберите операцию:
⚫️ сохранить отношение;
⚫️ изменить порядок;
⚫️ сжать;
⚫️ заменить медиа;
⚫️ убрать второстепенное;
⚫️ раскрыть скрытый контроль.
Мобильная версия проектируется после проверки рукой, взглядом и реальным соединением, а не уменьшением окна до красивой узкой полосы.
Тест на двух телах
Откройте страницу на собственном компьютере и чужом телефоне. Проверьте:
⚫️ первый экран без прокрутки и после первого жеста;
⚫️ длину заголовка;
⚫️ порядок текста и изображения;
⚫️ размер целей касания;
⚫️ работу ссылок и формы;
⚫️ управление видео и звуком;
⚫️ скорость появления тяжёлых материалов;
⚫️ ориентацию и увеличение.
Скриншот показывает состояние. Использование показывает сопротивление.
Архивные макеты полезны для сравнения, но они часто демонстрируют страницу в идеальном устройстве без адресной строки, медленной сети и пальца. Добавьте к презентационному мокапу доказательство из браузера: запись прохождения или полноэкранный скрин живой версии.
Доступность входит в художественный закон
WCAG 2.2 требует воспринимаемости, управляемости, понятности и технической совместимости контента. Для учебного лендинга обязательный минимум:
⚫️ текстовая альтернатива содержательным изображениям;
⚫️ клавиатурная доступность действия;
⚫️ видимый фокус;
⚫️ достаточный контраст;
⚫️ управляемое движение и учёт prefers-reduced-motion;
⚫️ подписи к полям;
⚫️ отсутствие скрытой смены контекста;
⚫️ читаемость при увеличении и reflow;
⚫️ понятное сообщение об ошибке.
Концепт не выдаёт освобождение от управления. Исчезающая кнопка может быть содержательным образом; пользователь всё равно должен получить доступный способ совершить действие.
Техническая уверенность и фактическая хрупкость
Агент способен исправить контраст и одновременно придумать несуществующую ссылку, оптимизировать изображение и сломать смысловой порядок, добавить SEO-текст и размыть голос проекта. Поэтому аудит проходит отдельными слоями:
1. концепт и обещание;
2. факты, права, статусы материалов;
3. композиция и адаптив;
4. доступность и управление;
5. производительность;
6. действие и данные.
Контролируемый избыток
Выберите одну проблемную секцию и получите четыре варианта с помощью агента или конструктора. До запуска укажите неизменяемые свойства: содержание, тип доказательства, порядок чтения, действие, доступность. После генерации сравните варианты по DESIGN.md и удалите минимум три.
Новый вариант не получает преимущества за скорость рождения. Вы отвечаете за оставленный экземпляр и за то, что было потеряно при автоматической «полировке».
Журнал решений
Для существенной итерации фиксируйте:
⚫️ проблему;
⚫️ использованный инструмент;
⚫️ варианты;
⚫️ критерий;
⚫️ выбранное решение;
⚫️ причину отказа;
⚫️ результат браузерной проверки;
⚫️ новое ограничение или правило.
Журнал нужен не для отчётного балла. Он показывает, как изменялся нож, и позволяет отделить авторский критерий от удачного случайного вывода модели.
Фабрика и единичная страница
В статье [[2026-лендингов-и-один-дом-у-реки|«2026 лендингов и один дом у реки»]] страница становится состоянием производственного контура. В учебном проекте мы сохраняем единичный авторский масштаб, но документируем устройство фабрики: что она могла производить, чем ограничивалась и кто остановил цикл. Это подготовка к профессии, где дизайнер всё чаще проектирует диапазон решений и систему их проверки.
Интерактив. Браузерная клиника
Работа парами, 30 минут. Откройте обе страницы на компьютере и телефоне. Проведите четыре прохода:
⚫️ обещание и действие;
⚫️ маршрут и сопротивление;
⚫️ адаптив и доступность;
⚫️ материалы, ссылки и технический вес.
Проверяющий фиксирует наблюдение и доказательство, не предлагая немедленный редизайн. Автор выбирает две правки по тяжести последствия и выполняет одну при свидетеле.
Три линзы, которые меняют оптику производства
Формат
Десять минут. Выберите одну линзу и измените карту конвейера, разрешение агента или правило браузерной проверки.
Линза 1. Акторно-сетевая сборка
Акторно-сетевая теория, связанная с Бруно Латуром, Мишелем Каллоном и Джоном Ло, предлагает следовать за действием, не решая заранее, что по-настоящему действует только человек. Доводчик двери заставляет закрыть её, «лежачий полицейский» переводит правило скорости в бетон, таблица меняет то, какие сравнения доступны исследователю. Актор определяется не внутренней душой, а способностью преобразовать состояние других участников.
Живая страница собирается именно так. Автор приносит тезис, модель производит код, Cargo навязывает структуру, CSS рассчитывает поток, файл шрифта меняет переносы, браузер толкует стандарт, сеть задерживает изображение, политика cookie создаёт окно поверх первого экрана. Даже URL действует: он разрешает доступ, ломается после миграции, входит в поисковый индекс, путешествует в сообщении без автора.
Слово «сборка» возвращает ответственность из героического одиночества в карту связей. Это не значит, что виноваты все понемногу и потому никто. Нужно указать полномочия: модель предлагает, студент принимает; хостинг хранит, но не решает редакционную иерархию; браузер рендерит, однако набор допустимых технологий выбрала команда. Когда страница ломается, сеть перестраивает авторство результата: внезапно выясняется, кто может исправить код, кто владеет аккаунтом, кто контролирует домен. Карта полезна, если по ней видно не названия сервисов, а места принятия и проверки решений.
Вопрос к проекту: какой участник сейчас действует, оставаясь невидимым на карте? Вмешательство: добавьте его, укажите полномочие и способ проверки его действия.
Линза 2. Фармакон
В «Фармации Платона» Деррида возвращается к греческому pharmakon, которое означает и лекарство, и яд. Письменность в «Федре» обещает поддержать память, но производит зависимость от внешних знаков и видимость знания. Техническое средство нельзя разделить на чистую пользу и отдельно лежащий вред: одна способность поворачивается обеими сторонами.
Генеративная сборка лечит узкое место производства — за минуты предлагает варианты сетки, пишет адаптивный код, находит повторяющиеся компоненты. Тот же избыток снижает цену варианта почти до нуля, и проект заболевает отсутствием отсечения. Модель уверенно изобретает API, недоступный в выбранной среде, заменяет реальный текст плейсхолдером, чинит мобильную версию, незаметно разрушая клавиатурный фокус. Скорость скрывает место, где решение перестало быть понятым.
Фармакологический дизайн работает дозой и протоколом. Модель может получить право мутировать один компонент, но обязана вернуть список изменённых зависимостей; генерация фактов отделяется от операции над формой; после каждого крупного шага страница проходит ручной тест без объясняющего автора рядом. Контрольная точка ставится там, где полезная способность достигает максимума и потому же становится опасной. Кнопка «сгенерировать ещё» требует рядом более трудной функции — «назвать критерий, по которому следующий вариант будет отвергнут».
Вопрос к проекту: какая способность инструмента одновременно усиливает и ослабляет вашу работу? Вмешательство: добавьте контрольную точку ровно после этой операции и сформулируйте проверяемый риск.
Линза 3. Сломанный молоток
В «Бытии и времени» Хайдеггер показывает, как исправный инструмент отступает в употреблении. Молоток ощущается продолжением работы, пока не ломается, не пропадает или не оказывается неподходящим. Тогда виден не один предмет, а отсылочная сеть мастерской: гвоздь, материал, навык, задача, другой инструмент. Сбой делает мир оборудования навязчиво присутствующим.
Идеальная демонстрация лендинга создаёт такое же исчезновение техники. Автор открывает страницу на знакомом ноутбуке, с быстрым интернетом, авторизованным аккаунтом и уже загруженным кешем. Публикация кажется цельной. Чужой телефон показывает системный шрифт; видео требует согласия на cookie; экранная клавиатура закрывает кнопку; ссылка из Telegram открывается во встроенном браузере, где нужное API не работает. То, что называлось «страницей», распадается на договоры между множеством вещей.
Намеренная поломка — способ узнать объект до публичной аварии. Пройдите страницу клавиатурой, ограничьте скорость сети, отключите изображения, увеличьте текст, вставьте очень длинное имя, откройте ссылку без аккаунта. Записывайте не только дефект, но зависимость, которую он раскрыл. Исправить один margin недостаточно, если система по-прежнему считает нормальным лишь тело, устройство и сеть автора. Хороший production audit превращает случайный сбой в новое правило.
Вопрос к проекту: какая поломка быстрее всего раскрывает молчаливое устройство вашей страницы? Вмешательство: вызовите её намеренно, запишите первый разрушившийся слой и исправьте правило системы.
---
Домашняя работа
Подготовьте:
⚫️ публичную beta-ссылку;
⚫️ desktop и mobile;
⚫️ рабочее или честно смоделированное основное действие;
⚫️ карту AI-конвейера и разрешений;
⚫️ журнал минимум трёх решений;
⚫️ результаты браузерной клиники;
⚫️ перечень известных хрупкостей;
⚫️ резервную копию текстов и медиа.
Критерий готовности
Ссылка открывается без авторизации, основной маршрут проходим на телефоне и с клавиатуры, изображения и движение управляемы, статусы материалов различимы. Вы способны показать, где действовал агент, где изменился критерий и кто принимает решение о публикации.
Exit ticket
⚫️ «Агент ускорил…»
⚫️ «Агент не имел права самостоятельно…»
⚫️ «После браузерной проверки я изменил…»
След занятия
Публичная beta + карта конвейера + журнал решений + список хрупкостей + резервная копия.
