Дизайн сайта с ИИ без макета и кода: как дизайнер собрал портфолио на жестах через Claude Code

Обычно «дизайн сайта ИИ» подают как рекламу: картинка из промпта (текстовой инструкции для нейросети), ретушь за секунду, быстрый результат. Дмитрий Тогулев в своём эксперименте, опубликованном на GitHub и Хабре, сместил фокус: не скорость, а метод работы, при котором автор остаётся автором, даже когда исполнитель полностью ИИ.

Сайт работает так: при загрузке страница выглядит как абстрактная система, а когда вебкамера обнаруживает человека, интерфейс перестраивается вокруг его присутствия. Навигация управляется жестами и движениями тела. Никаких кнопок, менюшек и подсказок «поднимите руку».

Что понадобится

• Claude Code (ИИ-агент для написания кода от Anthropic) или аналогичный агентный инструмент разработки, например Cursor
• Текстовый чат с мощной языковой моделью для подготовки стартового промпта (Claude, ChatGPT, GigaChat)
• Вебкамера на десктопе для тестирования результата
• GitHub-аккаунт для публикации и версионирования
• Время: от нескольких вечеров до недели, зависит от сложности задумки
• Навыки программирования: не нужны, но нужен опыт формулирования задач и насмотренность в дизайне

Как собрать интерактивный сайт без макета и без кода?

1. Соберите замысел в отдельном текстовом чате. Не бросайтесь сразу генерировать код. Откройте диалог с языковой моделью и проговорите: что за проект, какое ощущение должен вызывать, какие технические возможности вы хотите задействовать. Зафиксируйте, чем вас не устраивает стандартный результат. Тогулев называет это «эксперимент из дефолта»: сначала посмотрите, что ИИ считает очевидным, и явно от этого откажитесь.

2. Напишите стартовый промпт на английском с жёсткими ограничениями. Промпт Тогулева для Claude Code занимает больше страницы и содержит не только цель, но и список запретов. Вот ключевые блоки, которые стоит включить:

## Project goal
Цель проекта одним абзацем: что за сайт, для кого, какой главный эффект.

## Core concept
Ключевое ощущение, которое должен испытать посетитель.
Пример: "the visitor should think 'this is magic' on first load,
and 'this person really knows what they're doing' after 30 seconds."

## Hard constraints — things that must NOT exist
Список того, чего НЕ должно быть.
Пример: No onboarding tooltips. No progress bars styled as UI.
No fallback navigation. No hover states that signal "click here".

## Interaction principles
Правила поведения интерфейса.
Пример: "The first meaningful interaction must happen accidentally,
not by following an instruction."

1. Запустите первую генерацию и ищите слоп. Слоп (slop) в контексте ИИ-генерации означает шаблонный, усреднённый результат, который модель выдаёт «по умолчанию». Тогулев перечисляет конкретные признаки:

2. Одинаковые блоки на сетке Tailwind (популярной CSS-библиотеки): чем чаще блок используется в обучающих данных модели, тем вернее он выдаёт генерацию

3. Шрифты «из коробки», которые никто не выбирал осознанно
4. Мелкие надписи-кикеры над заголовками или курсив на одном слове в строгом заголовке: фирменный почерк Claude
5. Маркетинговые клише в текстах

6. Переизбыток системы: всё унифицировано, нет ни одного смелого хода

7. Правьте промпт, а не код. Вы не читаете сгенерированный код, вы смотрите на результат в браузере и описываете, что не так. Формулируйте претензии к поведению и ощущению, а не к строчкам кода. «Блоки живут сами по себе, между ними нет связи» работает лучше, чем «поменяй margin на 20px».

8. Тестируйте руками. Тогулев подчёркивает: за ним были «полевые тесты». Откройте результат, пощёлкайте, подвигайтесь перед камерой. ИИ не проверяет, каково пользоваться тем, что он собрал. Это ваша работа, и именно она отличает авторский проект от генерации.

9. Опубликуйте через GitHub Pages или аналогичный хостинг. Код и история решений открыты, это позволяет другим учиться на вашем процессе.

Что делать с этим по ролям?

Автору на Дзене. Метод «эксперимент из дефолта» работает не только для сайтов. Когда вы просите нейросеть написать текст, первый результат покажет, что модель считает «нормой». Посмотрите на него как на карту шаблонов и явно откажитесь от того, что вам не подходит, прямо в следующем промпте.

Маркетологу. Дизайн сайта ИИ-инструментами становится доступнее, но шаблонность убивает конверсию. Признаки слопа из статьи Тогулева можно использовать как чеклист при приёмке лендингов от подрядчиков, которые «всё сделали на ИИ».

Предпринимателю в РФ. Claude Code доступен через VPN и оплату зарубежной картой. Из доступных в России альтернатив для агентной разработки можно смотреть на Cursor (тоже требует обходных путей) или ждать локальных решений. Метод работы при этом универсален: промпт с ограничениями, поиск шаблонов, ручное тестирование.

Сайт Тогулева можно разобрать на приёмы, но полезнее забрать из него принцип: автор в связке с ИИ это не тот, кто нажимает «сгенерировать», а тот, кто знает, от чего отказаться.