pimenov.ai

Пять интерактивных лендингов за час: что умеет Codex с правильными skills

За один рабочий проход мы собрали и публично развернули пять интерактивных визуальных концепций. Разбираю, как gpt-taste, Impeccable и Sites превратили Codex из универсального агента в небольшую команду специалистов.

ИИРазработкаКейсПрактика

Всё началось с одной фразы: «Давай сделаем что-нибудь яркое и впечатляющее, чтобы можно было показать людям возможности этого скилла».

Мы выбрали идею «Одна задача — пять ИИ-профессий». Я хотел не очередной рассказ о возможностях ИИ, а живой объект, который можно открыть, прокрутить и почувствовать руками. Первый вариант получился настолько убедительным, что следом мы собрали ещё четыре самостоятельных опыта и объединили их в публичный шоукейс.

От первой идеи до работающей версии прошло около часа. Не считая последующей упаковки в пост и эту статью.

⏱️
Результат рабочего прохода: пять интерактивных лендингов, пять разных визуальных систем, изображения, motion, адаптивная вёрстка, общая навигация и публичный сайт без авторизации.
Notion image

Открыть весь шоукейс «Практический ИИ можно увидеть»


Не один идеальный промпт, а правильная команда из 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 перестаёт быть «чатиком для кода». Он становится рабочим слоем между намерением и результатом — местом, где мой опыт, контекст и критерии качества собираются в публичный проект намного быстрее, чем раньше.

Посмотреть все пять опытов в общем шоукейсе


По теме

Если вам интересно разбирать такие сценарии не в теории, а на живой практике, посмотрите образовательную программу «Перезагрузка»