Пять интерактивных лендингов за час: что умеет Codex с правильными skills
За один рабочий проход мы собрали и публично развернули пять интерактивных визуальных концепций. Разбираю, как gpt-taste, Impeccable и Sites превратили Codex из универсального агента в небольшую команду специалистов.
СейчасНе один идеальный промпт, а правильная команда из skills
- Не один идеальный промпт, а правильная команда из skills
- Пять способов показать практический ИИ
- 1. Одна задача — пять ИИ-профессий
- 2. Перезагрузка: из хаоса в систему
- 3. Атлас практического ИИ
- 4. До ИИ / после ИИ
- 5. ИИ не выглядит как ИИ
- Что реально поместилось в один час
- Где в этой работе оставался человек
- Что я из этого вынес
Всё началось с одной фразы: «Давай сделаем что-нибудь яркое и впечатляющее, чтобы можно было показать людям возможности этого скилла».
Мы выбрали идею «Одна задача — пять ИИ-профессий». Я хотел не очередной рассказ о возможностях ИИ, а живой объект, который можно открыть, прокрутить и почувствовать руками. Первый вариант получился настолько убедительным, что следом мы собрали ещё четыре самостоятельных опыта и объединили их в публичный шоукейс.
От первой идеи до работающей версии прошло около часа. Не считая последующей упаковки в пост и эту статью.
Открыть весь шоукейс «Практический ИИ можно увидеть»
Не один идеальный промпт, а правильная команда из skills
Обычно разговор об ИИ упирается в формулировку промпта. Как будто нужно подобрать одну магическую фразу — и на выходе появится готовый проект.
В реальной работе важнее другое: какой контекст получает агент, какую роль он играет на конкретном этапе и по каким правилам проверяет результат.
Skills превращают Codex из универсального собеседника в небольшую команду специалистов. В этом проекте каждый отвечал за свой слой:
- gpt-taste задал смелую арт-дирекцию, сильную типографику, композицию без типовых карточных сеток и общий anti-slop регистр.
- Impeccable подключился следующим проходом и привёл идею к дизайн-контракту: выровнял отступы, ширину текстовых блоков, иерархию и поведение на разных экранах.
- Sites собрал проекты в публичные страницы, связал их навигацией и позволил сразу выпускать новые версии без отдельного ручного контура публикации.
- GSAP стал техническим слоем движения: закреплённые секции, трансформации при прокрутке, горизонтальные переходы и управляемая анимация.
Я намеренно не давал двум дизайн-скиллам одновременно спорить за один экран. Сначала Taste Skill помог найти характер, затем Impeccable проверил и дисциплинировал вёрстку. Получился не компромисс между двумя подходами, а нормальная последовательность: сначала направление, потом точность.
Пять способов показать практический ИИ
1. Одна задача — пять ИИ-профессий
В центре — одна понятная рабочая задача: запустить продукт за 14 дней. По мере движения она проходит через пять ролей: исследователя, редактора, продюсера, аналитика и разработчика.
Мне было важно показать не набор инструментов, а смену профессиональных оптик. Один и тот же исходный материал превращается в исследование, структуру, план производства, систему метрик и работающий прототип. ИИ здесь не шестая профессия и не замена команде. Это слой, который помогает ролям быстрее передавать результат друг другу.
Открыть «Одна задача — пять ИИ-профессий»
2. Перезагрузка: из хаоса в систему
В начале экран заполнен отдельными сущностями: чат, поиск, промпт, документ, таблица, API, метрика, созвон. Это хорошо передаёт состояние человека, который уже попробовал много ИИ-инструментов, но пока не собрал из них рабочий метод.
По мере прокрутки хаос перестраивается в маршрут:
задача → подход → инструмент → практика → система
Так появилась визуальная метафора «Перезагрузки»: ценность не в количестве сервисов, а в том, что человек начинает понимать, когда и зачем каждый из них использовать.
Открыть «Перезагрузка: из хаоса в систему»
3. Атлас практического ИИ
Это не лендинг в привычном смысле, а исследовательская карта. Практический ИИ разложен не по названиям моделей, а по направлениям применения: работа, обучение, управление, исследования, творчество и автоматизация.
Направления можно изучать как территории. Внутри появляются реальные задачи и короткие маршруты. Такая форма лучше обычной сетки карточек передаёт главное: у ИИ нет одного сценария применения, но есть понятные точки входа.
Открыть «Атлас практического ИИ»
4. До ИИ / после ИИ
Экран физически разделён на две реальности. С одной стороны — старый процесс, с другой — новый метод. Граница двигается и превращает исследование, презентацию, коммерческое предложение, совещание, базу знаний или запуск проекта в более собранный рабочий контур.
Здесь принципиально нет идеи «ИИ всё сделал». После ИИ остаются ответственность, профессиональное решение и проверка. Меняется организация той же работы: меньше механики, быстрее сборка, яснее следующий шаг.
5. ИИ не выглядит как ИИ
Последний опыт — визуальный манифест против привычного киберпанка. Никаких роботов, фиолетового свечения, цифрового мозга и голограмм.
Вместо этого — бумага, провода, мастерские, кабинеты, человеческие руки и реальные задачи. Настоящее изменение редко выглядит фантастически. Оно проявляется в обычной работе: человек быстрее понимает материал, яснее принимает решение и меньше времени тратит на механику.
Открыть «ИИ не выглядит как ИИ»
Что реально поместилось в один час
За этот проход мы успели:
- выбрать основную концепцию и визуальный регистр;
- собрать пять разных архитектур экранов;
- подобрать и встроить изображения;
- добавить motion и интерактивность;
- проверить композицию и адаптивную вёрстку;
- связать страницы общей навигацией;
- добавить на каждую страницу баннер «Перезагрузки»;
- развернуть всё публично без логина;
- пройти финальные правки и выпустить новые версии.
Это не строгий лабораторный тест. Скорость появилась не потому, что ИИ нажал одну кнопку, а потому, что задача была разложена на понятные роли, у каждой роли был свой skill, а результат сразу проверялся в браузере.
Где в этой работе оставался человек
Самые важные решения никуда не исчезли.
Я выбирал направление, утверждал варианты и определял, что должно остаться. Во время проверки заметил, что в баннере обрезались буквы логотипа, заголовок «Практический ИИ» переносился не там, где нужно, а надпись PIMENOV.AI не вела на основной сайт. Codex исправлял эти детали и сразу обновлял публичную версию.
Это хороший пример разделения ролей. Агент может очень быстро произвести, проверить и опубликовать десятки связанных изменений. Но вкус проявляется не только в генерации. Он проявляется в способности увидеть, что конкретно не работает, и принять решение.
Что я из этого вынес
Будущее работы с Codex — не в поиске одного идеального промпта. Оно в умении собрать правильную команду из skills: дать каждому понятную роль, выстроить последовательность и сохранить за человеком направление и финальное решение.
Тогда Codex перестаёт быть «чатиком для кода». Он становится рабочим слоем между намерением и результатом — местом, где мой опыт, контекст и критерии качества собираются в публичный проект намного быстрее, чем раньше.
Посмотреть все пять опытов в общем шоукейсе
По теме
Если вам интересно разбирать такие сценарии не в теории, а на живой практике, посмотрите образовательную программу «Перезагрузка»
Если хотите разобрать свою задачу — напишите мне Если хотите разобрать свою задачу — напишите мне.
Можно прийти с идеей, черновым контекстом или уже живой задачей. Помогу быстро понять, где реальный следующий шаг, а где лишний шум.
Обычно хватает 2–3 сообщений, чтобы понять, могу ли я здесь реально помочь и в каком формате лучше двигаться дальше.