Все промпты, ссылки и текст навыка из видео. Забирай, повторяй по шагам, ничего не пересматривая.
▶ Смотреть видеоПять вещей, которые останутся с тобой после урока.
Берёшь готовую дизайн-систему из каталога и получаешь по ней сайт одним промптом.
Разбор своего сайта против эталона: цифры, приёмы и живой ползунок до и после.
Навык с тремя критиками, которые судят работу нейросети вместо тебя.
Подключаешь почту через Zapier и рассылаешь готовый HTML, не выходя из Claude.
Собираешь дизайн-систему бренда и получаешь по ней HTML-анимацию без монтажа.
Всё, кроме подписки на Claude, бесплатно.
generate. Как его поставить и генерить за копейки - в отдельном видео, ссылка в описании.По порядку, как в видео. Промпты копируются кнопкой.
В каталоге больше двух тысяч разобранных систем: палитра, шрифты, отступы, скругления - и всё это отдаётся готовым кодом. Берёшь чужой вкус и натягиваешь на свой продукт.
привет, возьми вот эту дизайн-систему и собери мне красивый сайт по продаже гитар. гитары киберпанковые, дико креативные, выглядят как космолёт, и внутри у каждой встроенный синтезатор. картинки сгенери через скилл generate, качество 2к, модель бери среднюю по цене https://styles.refero.design/style/c9cabb96-32fa-4896-837a-f2497ce1c856
Собрать красивое с нуля - одно. Куда полезнее узнать, чем твой существующий сайт отличается от того, который тебе нравится, и что именно чинить первым.
привет, возьми сайт ниже, посмотри на него и сравни с моим. будь безжалостным: разбери чем отличается дизайн и как мне подтянуть свой под эстетику первого, она мне очень нравится. вот их дизайн-система, можешь ещё зайти к ним на сайт напрямую и поснимать скриншоты. результат хочу красивой HTML-страницей, покороче и попроще
Беда нейросети в том, что она проверяет сама себя: тот же чат, который слепил работу, её же и оценивает. Как повар, который сам себе пишет отзыв на ресторан и всегда ставит пять звёзд. Петля отдаёт работу трём критикам со свежим контекстом.
/design-loopпривет, преврати это в скилл
Роли жёсткие, чтобы критики не сошлись в одно мнение. Каждый видит только своё и не знает, как собиралась работа. Пропустить должны все трое, любой провал уходит обратно на переделку.
Судит только по заявленной задаче. Сделано то, о чём просили, или нет. Красоту игнорирует полностью.
Сверяет с дизайн-системой. Палитра, типографика, запрещённые приёмы - механическая проверка.
Смотрит на отрендеренный результат глазами и ставит его рядом с эталоном вслепую, без подписей. Кода не видит вообще.
Красивая картинка письма - это одно. А как из неё сделать то, чем реально можно пользоваться и что не развалится в почте?
/design-loop просто пересобери мне это письмо в HTML так, чтобы если я вставлю его в почту, оно выглядело красиво. это анонс новой партии педалей MASTODONT, инфу возьми с моего сайта. картинки сгенери сам через скилл generate, в той же стилистике что в оригинале, только вместо коробок с играми - коробки с моими педалями. обрати особое внимание на свечение, на вайб, на энергию, при этом сохрани эстетику и баланс
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.
дай ссылку на подключение моей почты
привет, хочу чтобы ты через мой Zapier взял HTML который мы только что сделали и отправил его мне на почту. тему письма придумай сам
Представь: у тебя лучший дизайнер в мире, но с дырявой памятью. Дизайн-система - это чертёж, который он читает перед каждой работой. Штука необязательная, но вытягивает всё, что ты будешь делать дальше.
В прошлый раз задача летела прямо в команду. Теперь запускаем петлю пустой - она сама спросит, что делаем, на что равняемся и какие файлы брать.
/design-loop
активируй скилл
делаем HTML-анимацию на 14 секунд для моего бренда гитарных педалей. плоские чёрные силуэты как на концертной афише: стена комбиков, выходит гитарист, бьёт по струнам, ударная волна разносит стену, из дыма проступает знак MASTODONT. эталон прикладываю парой видосов. работай по моей дизайн-системе, файл тоже прикладываю
Это вставляется на третьем шаге, сразу после «преврати это в скилл». Копируй целиком.
# Дизайн-петля Четыре фазы: интервью, проверка готовности, разбор эталона, петля. Не забегай вперёд. Не начинай собирать во время первых трёх фаз. ## Фаза 1: интервью Задай ровно три вопроса, все сразу, потом остановись и жди. 1. Что делаем и какого объёма или длительности? 2. Назови что-то, что уже сделано блестяще. Сайт, видео, документ - что угодно, что я могу открыть. Если ничего не приходит в голову, скажи «пропускаю». 3. Есть файлы, от которых работать? Дизайн-система, бренд-документ, сценарий, готовый черновик. Если названо что-то размытое («сайт Apple», «хороший дизайн»), переспроси один раз про конкретную страницу или файл. Размытая планка - причина номер один, по которой этот метод не работает: критик придумывает себе сравнение и пропускает всё на первом же круге. Если на второй вопрос сказали «пропускаю», предложи три кандидата в эталоны, по строке на каждый, почему именно он, и жди. Если не ответили - бери самый жёсткий. ## Фаза 2: проверка готовности Это проверка, а не вопрос. Проведи её до любой работы и отчитайся одним блоком. - Достань эталон прямо сейчас. Сними скриншот страницы или прочитай файл. Если он закрыт или отсутствует - скажи об этом и попроси другой. - Убедись, что можешь отрендерить наш результат: скриншоты для сайта, раскадровка кадров для анимации, PDF для документа. Нет рендера - нет критика ремесла. - Назови все инструменты генерации, которые нужны под задачу (картинки, видео, голос), и подтверди, что они подключены. - Убедись, что входные файлы на месте: дизайн-система, бренд-документ, сценарий. Потом выведи: что работает, чего не хватает и КАКОЙ КРИТИК ОСЛЕПНЕТ, если чего-то нет. Никогда не продолжай молча с критиком, который ничего не видит. ## Фаза 3: разбор эталона Изучи эталон как следует и выпиши от пяти до семи механик в файл bar.md. Механики, а не прилагательные. «Выглядит дорого» - бесполезно. Полезно вот так: - заголовок в пять раз крупнее основного текста, всего три размера шрифта - один акцентный цвет, максимум два раза на экран - движение всегда разрешается в одну сторону - ничего не анимируется быстрее 400 миллисекунд - пустого места на первом экране не меньше 40% кадра Каждая строка должна быть тем, что критик может проверить глазами. Покажи bar.md заказчику перед тем, как идти дальше. ## Фаза 4: петля Разбей задачу на самые мелкие куски, которые можно улучшать и судить по отдельности. Куски выбираешь сам. Держись трёх-четырёх, если не сказано иначе: каждый лишний кусок умножает весь прогон. На каждый кусок: запусти сборщика, потом трёх критиков, у каждого свежий контекст и никакого знания о том, как сборщик работал. - КРИТИК ТЗ судит только по заявленной задаче. Сделано то, о чём просили, или нет? Красоту игнорирует. - КРИТИК СИСТЕМЫ судит только по дизайн-системе. Объективное соответствие. - КРИТИК РЕМЕСЛА судит только по bar.md и по отрендеренному результату. Ставит наш результат рядом с эталоном вслепую, без подписей, говорит, что лучше, и называет одну самую большую дыру. Задание для каждого критика пиши сам, под эту конкретную задачу. Не переиспользуй общие формулировки на разных задачах. Правила: - Критики жёсткие. Похвала бесполезна. - Критики судят по отрендеренному результату, никогда по коду. Прочитав реализацию, критик начинает оценивать замысел вместо результата. - Вердикты двоичные, а не баллы. Баллы каждый круг ползут вверх. - Пройти должны все трое. Любой провал уходит обратно сборщику с названной самой большой дырой. - Числа кругов нет. Выход - это победа, либо заказчик остановил прогон. Веди живую страницу прогресса и обновляй её по ходу: состояние кусков, вердикт каждого критика, история дыр, номер круга. ## Цена Честного самоотчёта по токенам не существует, так что не делай вид, что показываешь его. Показывай номер круга и пройденные куски. Если заказчик назвал потолок, считай его контрольной точкой: остановись и спроси, прежде чем идти дальше. Скажи прямо, что настоящий тормоз - это он сам, когда смотрит и останавливает прогон. ## Что ломает метод - Размытая планка. С большим отрывом самая частая поломка. - Сборщик, который судит свою же работу. Критикам нужен свежий контекст. - Мягкий критик. Работа двоичная, а не баллы. - Фиксированное число кругов. Выход - это победа. - Переуточнение. Каждая лишняя инструкция - на одно решение меньше, которое модель примет своим вкусом. ## Три критика Критика ты не пишешь. Три роли зашиты жёстко, чтобы они никогда не сошлись в одно мнение, но задание каждому пишется под конкретный прогон: «попали в задачу» для анимации и для страницы с ценами - разные вещи. - КРИТИК ТЗ - судит по заявленной задаче, красоту игнорирует. Модель попроще: суждение простое, зрение не нужно. - КРИТИК СИСТЕМЫ - судит только по дизайн-системе. Модель попроще: механическая сверка. - КРИТИК РЕМЕСЛА - судит по bar.md и по отрендеренным кадрам, никогда по коду. Самая сильная модель из доступных, и её никогда не понижать. Дешёвый критик ремесла пропускает всё, и петля умирает на первом круге. ## Что делает планку работающей Разбор превращает эталон в механики, которые критик проверяет глазами. Прилагательные опровергнуть нельзя, измерения можно. - бесполезно «выглядит дорого» - проверяемо «заголовок в пять раз крупнее текста» - бесполезно «чисто и современно» - проверяемо «всего три размера шрифта, не больше» - бесполезно «хорошо использует воздух» - проверяемо «один акцентный цвет, максимум два раза на экран» - бесполезно «сильная визуальная иерархия» - проверяемо «ничего не анимируется быстрее 400 миллисекунд» ## Главное, что надо запомнить Критик, который делит память со сборщиком, проверяет собственную домашку. Всё остальное здесь - детали.