Слоп всё
Материалы к уроку

Дизайн-петля
Три уровня против слопа

Все промпты, ссылки и текст навыка из видео. Забирай, повторяй по шагам, ничего не пересматривая.

▶ Смотреть видео

Что научишься делать

Пять вещей, которые останутся с тобой после урока.

01

Собирать по чужой системе

Берёшь готовую дизайн-систему из каталога и получаешь по ней сайт одним промптом.

02

Узнавать правду о сайте

Разбор своего сайта против эталона: цифры, приёмы и живой ползунок до и после.

03

Ставить дизайн-петлю

Навык с тремя критиками, которые судят работу нейросети вместо тебя.

04

Отправлять письма из чата

Подключаешь почту через Zapier и рассылаешь готовый HTML, не выходя из Claude.

05

Делать свою систему

Собираешь дизайн-систему бренда и получаешь по ней HTML-анимацию без монтажа.

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

Всё, кроме подписки на Claude, бесплатно.

Картинки Claude рисует не сам, а через отдельный навык generate. Как его поставить и генерить за копейки - в отдельном видео, ссылка в описании.

Шаги

По порядку, как в видео. Промпты копируются кнопкой.

01

Сайт по чужой дизайн-системе

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

  • Открой каталог и найди стиль, который нравится
  • Скопируй ссылку на карточку стиля
  • Вставь её в чат Claude Code вместе с промптом
Промпт 1 - сайт по чужой системе
привет, возьми вот эту дизайн-систему и собери мне красивый сайт по продаже гитар. гитары киберпанковые, дико креативные, выглядят как космолёт, и внутри у каждой встроенный синтезатор. картинки сгенери через скилл generate, качество 2к, модель бери среднюю по цене

https://styles.refero.design/style/c9cabb96-32fa-4896-837a-f2497ce1c856
Ссылка в промпте - карточка стиля Apple. Меняй её на свою и переписывай описание продукта под себя. Ни одной картинки загружать не нужно, он нарисует всё сам.
02

Разбор своего сайта против эталона

Собрать красивое с нуля - одно. Куда полезнее узнать, чем твой существующий сайт отличается от того, который тебе нравится, и что именно чинить первым.

  • Найди в каталоге сайт-эталон - тот, чья эстетика тебе нравится
  • Дай Claude свой сайт, ссылку на эталон и два-три скриншота их страницы
Промпт 2 - безжалостный разбор
привет, возьми сайт ниже, посмотри на него и сравни с моим. будь безжалостным: разбери чем отличается дизайн и как мне подтянуть свой под эстетику первого, она мне очень нравится. вот их дизайн-система, можешь ещё зайти к ним на сайт напрямую и поснимать скриншоты. результат хочу красивой HTML-страницей, покороче и попроще
На выходе HTML-страница: три самых больших разрыва, блок приёмов, таблица значений, палитра с копированием по клику и живой ползунок «как у меня / как у них».
03

Ставим дизайн-петлю

Беда нейросети в том, что она проверяет сама себя: тот же чат, который слепил работу, её же и оценивает. Как повар, который сам себе пишет отзыв на ресторан и всегда ставит пять звёзд. Петля отдаёт работу трём критикам со свежим контекстом.

  • Открой новый чат в Claude Code
  • Отправь промпт, следом вставь весь текст навыка
  • Появится команда /design-loop
Промпт 3 - установка навыка
привет, преврати это в скилл
Команда не подхватилась - перезапусти Claude Code. Список навыков читается на старте, в уже открытом окне новый не появится.
Выглядит дёшево
Почему это вообще работаетНикто не скажет «шрифтовая шкала кривая». Скажут «выглядит дёшево»
04

Три критика - кто что судит

Роли жёсткие, чтобы критики не сошлись в одно мнение. Каждый видит только своё и не знает, как собиралась работа. Пропустить должны все трое, любой провал уходит обратно на переделку.

Критик ТЗ

Судит только по заявленной задаче. Сделано то, о чём просили, или нет. Красоту игнорирует полностью.

Критик системы

Сверяет с дизайн-системой. Палитра, типографика, запрещённые приёмы - механическая проверка.

Критик ремесла

Смотрит на отрендеренный результат глазами и ставит его рядом с эталоном вслепую, без подписей. Кода не видит вообще.

Критик, который читает код, начинает оценивать замысел вместо результата. Поэтому третьему дают только картинку.
05

Пересобираем письмо через петлю

Красивая картинка письма - это одно. А как из неё сделать то, чем реально можно пользоваться и что не развалится в почте?

  • Найди на доске письмо, которое нравится, и сделай скриншот
  • Отправь скриншот в чат вместе с промптом
Промпт 4 - письмо через петлю
/design-loop просто пересобери мне это письмо в HTML так, чтобы если я вставлю его в почту, оно выглядело красиво. это анонс новой партии педалей MASTODONT, инфу возьми с моего сайта. картинки сгенери сам через скилл generate, в той же стилистике что в оригинале, только вместо коробок с играми - коробки с моими педалями. обрати особое внимание на свечение, на вайб, на энергию, при этом сохрани эстетику и баланс
06

Подключаем почту через Zapier

Zapier работает как связка ключей: подключаешь почту один раз, и доступ получают все агенты сразу, а не каждый по отдельности.

  • Зарегистрируйся на zapier.com, выбери Gmail, нажми MCP
  • Скопируй выданный текст и вставь его в чат целиком, ничего не меняя
Установка - копируется с сайта Zapier
Install Zapier-MCP for me globally in a flash!

Run this command:

  claude mcp add --transport http "Zapier-MCP" https://mcp.zapier.com/api/v1/connect

Then give me step by step instructions for how to restart claude, then prompt with "Zapier-MCP onboard me" which will call list_zapier_skills and run the "Zapier-MCP onboarding" skill.
  • Перезапусти Claude и вернись в чат
Промпт 5 - привязка своего ящика
дай ссылку на подключение моей почты
  • Перейди по выданной ссылке, нажми подключить, разреши доступ
Промпт 6 - отправка письма
привет, хочу чтобы ты через мой Zapier взял HTML который мы только что сделали и отправил его мне на почту. тему письма придумай сам
Подключить Gmail и подключить свой ящик - два разных шага. После первого агент уже видит почтовые действия, но отправить ещё не может.
07

Своя дизайн-система

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

  • Открой раздел дизайн-систем в Claude и создай новую
  • Загрузи свои материалы: презентацию, макет, логотип, фотографии, шрифты
  • Скажи «сделай из этого дизайн-систему»
  • Готовую выгрузи себе: Share → Project HTML
08

Анимация через петлю

В прошлый раз задача летела прямо в команду. Теперь запускаем петлю пустой - она сама спросит, что делаем, на что равняемся и какие файлы брать.

Промпт 7 - запуск петли
/design-loop
Промпт 8 - активация
активируй скилл
Промпт 9 - задача на анимацию
делаем HTML-анимацию на 14 секунд для моего бренда гитарных педалей. плоские чёрные силуэты как на концертной афише: стена комбиков, выходит гитарист, бьёт по струнам, ударная волна разносит стену, из дыма проступает знак MASTODONT. эталон прикладываю парой видосов. работай по моей дизайн-системе, файл тоже прикладываю
  • Приложи пару видео-эталонов и файл своей дизайн-системы
Эталон называй конкретно. «Сделай красиво» или «как у Apple» - критик сам придумает, с чем сравнивать, и пропустит первое, что вылезет. Размытая планка - причина номер один, по которой метод не работает.
На выходе один HTML-файл: шрифт и графика вшиты внутрь, интернет при воспроизведении не нужен. Ставь в видео, в сторис, на сайт.

Текст навыка

Это вставляется на третьем шаге, сразу после «преврати это в скилл». Копируй целиком.

Дизайн-петля - навык целиком
# Дизайн-петля

Четыре фазы: интервью, проверка готовности, разбор эталона, петля. Не забегай вперёд. Не начинай собирать во время первых трёх фаз.

## Фаза 1: интервью

Задай ровно три вопроса, все сразу, потом остановись и жди.

1. Что делаем и какого объёма или длительности?
2. Назови что-то, что уже сделано блестяще. Сайт, видео, документ - что угодно, что я могу открыть. Если ничего не приходит в голову, скажи «пропускаю».
3. Есть файлы, от которых работать? Дизайн-система, бренд-документ, сценарий, готовый черновик.

Если названо что-то размытое («сайт Apple», «хороший дизайн»), переспроси один раз про конкретную страницу или файл. Размытая планка - причина номер один, по которой этот метод не работает: критик придумывает себе сравнение и пропускает всё на первом же круге.

Если на второй вопрос сказали «пропускаю», предложи три кандидата в эталоны, по строке на каждый, почему именно он, и жди. Если не ответили - бери самый жёсткий.

## Фаза 2: проверка готовности

Это проверка, а не вопрос. Проведи её до любой работы и отчитайся одним блоком.

- Достань эталон прямо сейчас. Сними скриншот страницы или прочитай файл. Если он закрыт или отсутствует - скажи об этом и попроси другой.
- Убедись, что можешь отрендерить наш результат: скриншоты для сайта, раскадровка кадров для анимации, PDF для документа. Нет рендера - нет критика ремесла.
- Назови все инструменты генерации, которые нужны под задачу (картинки, видео, голос), и подтверди, что они подключены.
- Убедись, что входные файлы на месте: дизайн-система, бренд-документ, сценарий.

Потом выведи: что работает, чего не хватает и КАКОЙ КРИТИК ОСЛЕПНЕТ, если чего-то нет. Никогда не продолжай молча с критиком, который ничего не видит.

## Фаза 3: разбор эталона

Изучи эталон как следует и выпиши от пяти до семи механик в файл bar.md.

Механики, а не прилагательные. «Выглядит дорого» - бесполезно. Полезно вот так:

- заголовок в пять раз крупнее основного текста, всего три размера шрифта
- один акцентный цвет, максимум два раза на экран
- движение всегда разрешается в одну сторону
- ничего не анимируется быстрее 400 миллисекунд
- пустого места на первом экране не меньше 40% кадра

Каждая строка должна быть тем, что критик может проверить глазами. Покажи bar.md заказчику перед тем, как идти дальше.

## Фаза 4: петля

Разбей задачу на самые мелкие куски, которые можно улучшать и судить по отдельности. Куски выбираешь сам. Держись трёх-четырёх, если не сказано иначе: каждый лишний кусок умножает весь прогон.

На каждый кусок: запусти сборщика, потом трёх критиков, у каждого свежий контекст и никакого знания о том, как сборщик работал.

- КРИТИК ТЗ судит только по заявленной задаче. Сделано то, о чём просили, или нет? Красоту игнорирует.
- КРИТИК СИСТЕМЫ судит только по дизайн-системе. Объективное соответствие.
- КРИТИК РЕМЕСЛА судит только по bar.md и по отрендеренному результату. Ставит наш результат рядом с эталоном вслепую, без подписей, говорит, что лучше, и называет одну самую большую дыру.

Задание для каждого критика пиши сам, под эту конкретную задачу. Не переиспользуй общие формулировки на разных задачах.

Правила:

- Критики жёсткие. Похвала бесполезна.
- Критики судят по отрендеренному результату, никогда по коду. Прочитав реализацию, критик начинает оценивать замысел вместо результата.
- Вердикты двоичные, а не баллы. Баллы каждый круг ползут вверх.
- Пройти должны все трое. Любой провал уходит обратно сборщику с названной самой большой дырой.
- Числа кругов нет. Выход - это победа, либо заказчик остановил прогон.

Веди живую страницу прогресса и обновляй её по ходу: состояние кусков, вердикт каждого критика, история дыр, номер круга.

## Цена

Честного самоотчёта по токенам не существует, так что не делай вид, что показываешь его. Показывай номер круга и пройденные куски.

Если заказчик назвал потолок, считай его контрольной точкой: остановись и спроси, прежде чем идти дальше. Скажи прямо, что настоящий тормоз - это он сам, когда смотрит и останавливает прогон.

## Что ломает метод

- Размытая планка. С большим отрывом самая частая поломка.
- Сборщик, который судит свою же работу. Критикам нужен свежий контекст.
- Мягкий критик. Работа двоичная, а не баллы.
- Фиксированное число кругов. Выход - это победа.
- Переуточнение. Каждая лишняя инструкция - на одно решение меньше, которое модель примет своим вкусом.

## Три критика

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

- КРИТИК ТЗ - судит по заявленной задаче, красоту игнорирует. Модель попроще: суждение простое, зрение не нужно.
- КРИТИК СИСТЕМЫ - судит только по дизайн-системе. Модель попроще: механическая сверка.
- КРИТИК РЕМЕСЛА - судит по bar.md и по отрендеренным кадрам, никогда по коду. Самая сильная модель из доступных, и её никогда не понижать. Дешёвый критик ремесла пропускает всё, и петля умирает на первом круге.

## Что делает планку работающей

Разбор превращает эталон в механики, которые критик проверяет глазами. Прилагательные опровергнуть нельзя, измерения можно.

- бесполезно «выглядит дорого» - проверяемо «заголовок в пять раз крупнее текста»
- бесполезно «чисто и современно» - проверяемо «всего три размера шрифта, не больше»
- бесполезно «хорошо использует воздух» - проверяемо «один акцентный цвет, максимум два раза на экран»
- бесполезно «сильная визуальная иерархия» - проверяемо «ничего не анимируется быстрее 400 миллисекунд»

## Главное, что надо запомнить

Критик, который делит память со сборщиком, проверяет собственную домашку. Всё остальное здесь - детали.
Слоп сделал ремонт
Что изменилосьСлоп перестал выглядеть плохо, но не перестал быть узнаваемым

Первые $2к на ИИ - бесплатный интенсив

Внутри

  • ✅ Реальное демо на Claude вживую
  • ✅ Софт, который за 5 минут находит компании без сайтов с готовыми контактами
  • ✅ Кейсы учеников: $1650 за 3 проекта без команды

Два бонуса в конце

  • 💰 50 скучных и самых прибыльных ниш без конкуренции
  • 🚀 Чек-лист: первые $500 за 7 дней
Бесплатно. Навсегда. Забрать интенсив