Как дать агенту вкус, а не просто задачу.

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

Рабочая схема

1. Сначала — референс и правила. Перед задачей агенту нужны не только тексты и функциональность, но и ориентиры: характер бренда, типографика, плотность, палитра, примеры подходящих интерфейсов.
2. Потом — дизайнерская оптика. Скиллы для дизайна помогают не забыть про иерархию, отступы, контраст, ритм и состояние интерфейса — вещи, которые обычно ломают впечатление от «почти готового» сайта.
3. Затем — браузерная проверка. Агент открывает собранную страницу, делает скриншоты, видит ошибки в композиции и повторяет цикл правок.
4. Только после этого — публикация. Сначала preview, затем просмотр на телефоне и десктопе, и лишь потом основная ссылка.

Минимальный стек

Карта источников: что брать и где

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

Что собрать до первого промпта

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

Шрифты и иконки стоит брать из библиотек с понятной лицензией. Готовую дизайн-систему можно использовать как основу или изучать как пример, но не переносить чужую айдентику или интерфейс один в один.

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

Промпт, который запускает правильный цикл

Собери страницу по этому ТЗ.
Используй приложенный визуальный референс только как ориентир по плотности,
иерархии и качеству — не копируй его буквально.
После реализации открой страницу в браузере, проверь desktop и mobile,
сделай скриншоты и исправляй композицию, пока результат не станет цельным.
Сначала пришли preview-ссылку.

Вывод

Главная идея не в том, чтобы «оставить Claude на ночь». Ценность — в замкнутом цикле: референсы и система → реализация → визуальная проверка → итерация. Тогда агент не просто генерирует страницу, а доводит её до результата, который можно спокойно показать людям.