Claude Code соберёт сайт по референсу — и застрянет на «ну, похоже», гордо объявив «готово». Команда /goal превращает его в оркестратора, который сам себя гоняет скриншотами, пока не станет один в один 🔥
Дефолт агента — остановиться рано. Ты просишь «как на референсе», получаешь «в целом в ту сторону»: секции переехали, шрифт не тот, отступы гуляют. /goal задаёт условие завершения — и после каждого хода отдельная модель проверяет, выполнено ли оно; агент не бросит, пока не сойдётся (или пока ты не дашь /goal clear).
Когда использовать
У тебя есть сайт-образец (референс), и нужен такой же по ощущению, но под твой продукт и твою аудиторию. Ты — постановщик, а сборку, самопроверку и подгонку ведёт агент в цикле «свёрстал → скриншот → сравнил → поправил». Подходит, когда важна визуальная точность, а не «набросай лендинг».
Результат: страница, собранная под твой оффер и подогнанная к референсу поэлементно, с отчётом-чеклистом — вместо «вроде похоже» после первого прохода.
Промт (бери и вставляй)
/goal Собери сайт для моего продукта, визуально неотличимый от референса <РЕФЕРЕНС: URL или скриншоты образца>, но с моим контентом — не копией.
ПРОДУКТ: <что продаём/делаем, оффер, ключевые секции>.
АУДИТОРИЯ: <кто клиент, язык, тон>.
СТЕК: <HTML+Tailwind / Next.js / мой шаблон>.
СКРИНШОТЫ ДЕЛАЙ через <ИНСТРУМЕНТ: Playwright MCP / Chrome MCP / computer-use>.
Стань оркестратором и веди до конца:
1. Разбери референс: сетка, порядок секций, типографика, цвета, отступы, состояния кнопок, анимации. Составь детальный план-чеклист по секциям.
2. Верстай секцию за секцией под МОЙ контент (тексты, логотип, картинки — мои; смысл референса адаптируй, не копируй его контент).
3. После каждой секции делай скриншот собранной страницы и сравнивай с референсом поэлементно; фиксируй расхождения и подгоняй.
4. Прогони на ширинах <360 / 768 / 1440>. Убедись, что сборка/линт проходят без ошибок.
DONE (закрывай доказательством, а не на глаз):
- сделан и приложен скриншот каждой секции;
- по чеклисту закрыт КАЖДЫЙ пункт: порядок секций, шрифты, цвета, отступы, адаптив;
- <измеримое: `npm run build` выходит с кодом 0; нет горизонтального скролла на 360px>.
Пока хоть один пункт не доказан — продолжай. «Готово» без доказательства запрещено.
В конце дай отчёт по чеклисту: что совпало, что не удалось подогнать и почему.
Пример заполнения
РЕФЕРЕНС: 3 скриншота лендинга современного SaaS (первый экран, блок фич, тарифы). ПРОДУКТ: сервис онлайн-записи для мастеров маникюра, оффер «запись без переписок в директе». АУДИТОРИЯ: самозанятые мастера, RU, тёплый простой тон. СТЕК: HTML+Tailwind. Скриншоты — через Playwright MCP.
Ожидаемый ход агента: разбирает референс в чеклист (hero с оффером и CTA → 3 фичи-карточки → тарифы → FAQ → футер), верстает hero, делает скриншот, видит, что кнопка светлее и заголовок мельче референса — правит, снова скриншот. Так по каждой секции; прогоняет на 360/768/1440, ловит горизонтальный скролл на мобилке, чинит; в конце отдаёт отчёт по чеклисту и честно пишет, что анимацию градиента подогнать «один в один» не вышло.
Вариации
- Только через браузер (нет доступа к коду). Пусть агент «видит» страницу через браузерный/computer-use инструмент и правит на живом превью — приём тот же, гейтом остаётся скриншот-сравнение.
- По одному экрану с апрувом. «Сначала первый экран 1:1, покажи скрин, дождись ОК — потом следующий». Меньше расфокуса на длинном цикле.
- Не сайт, а блок. Тот же loop для одного компонента/дашборда/письма — «подгони этот блок под референс».
- Сначала токены, потом вёрстка. Первым шагом вытащи из референса палитру, шрифты и шкалу отступов в дизайн-токены, верстай по ним — точнее, чем подгонять «на глаз». Стартовую генерацию сайта см. в карточке про MotionSites, дальше догоняй этим промтом.
Про-советы
- Дай измеримый критерий, иначе это ADVISORY.
/goal-судья — это отдельная модель (по умолчанию Haiku), которая читает транскрипт и решает «цель достигнута?». Важно (по офиц. докам): судья сам не запускает команды и не читает файлы — он верит тому, что агент уже вывел в переписку, поэтому доказательство должен предъявить сам агент. Про «выглядит один в один» он ответит по vibe-оценке скрина, а не по объективному диффу. Хочешь ближе к настоящему drive-to-done (см. «гейт 10/10») — вшивай в DONE выполняемые доказательства:npm run build= 0, наличие конкретных элементов, а лучше pixel-diff референса и скрина. Без выполненного доказательства критерий не закрыт. - Не клонируй чужой бренд 1:1. Копия логотипа, текстов, фирменных иллюстраций референса — юридический риск. Совпадай по структуре и ощущению, наполняй своим контентом.
- Скриншот — это глаза агента. Без Playwright/Chrome MCP или computer-use он «сравнивает» по коду, а не по картинке, и легко решит, что готово. Подключи инструмент скриншотов и требуй прикладывать их.
- Цель как результат + границы и лимит. Как в карточке «Бриф для ИИ-агента»: скажи, что нельзя трогать, и поставь потолок итераций — длинный автономный
/goal-цикл жжёт токены/лимиты и может закопаться в одну секцию. - Референс давай как скриншоты конкретных экранов, а не «сделай красиво как у них»: модель точнее подгоняет то, что видит рядом с результатом.
- Стоит честно и что нужно:
/goal— штатная бесплатная команда Claude Code (по офиц. докам — начиная с версии v2.1.139); отдельно за неё платить не нужно. Но: нужен сам Claude Code и инструмент для скриншотов; команда работает только в доверенном workspace и построена на системе хуков — при отключённых хуках (disableAllHooks/allowManagedHooksOnly) она недоступна; долгий автономный цикл расходует лимиты/токены.