Как я выбираю дизайн-скиллы под задачу сайта

Вы просите ИИ сделать сайт своего продукта. Даёте референсы, объясняете, что хотите получить. На странице появляются огромный заголовок, курсив, акцентные плашки и анимация. Всё оформлено, но предложение трудно прочитать, а куда нажать, приходится искать.

Я строю с агентами свой продукт, сайты и ботов. В работе использую несколько дизайн-скиллов. Каждый помогает со своей частью задачи, но выбрать подходящий по названию непросто. Запрос «сделай дорого» не объясняет, нужно ли менять композицию страницы, исправлять форму или настраивать движение панели.

Я собрал Design Router. Вы даёте ему задачу, ссылку или проект. Агент разбирает исходники, предлагает направление, объясняет выбор инструментов и согласует ближайшую работу. Дальше можно применять нужные скиллы в этом же контексте.

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

Сначала решаем, что человек должен сделать

У страницы услуги и у рабочего кабинета разные задачи.

На странице услуги посетитель должен понять предложение, оценить, подходит ли оно ему, и записаться. В рабочем кабинете ему может понадобиться найти заявку, изменить статус и отправить ответ. Одному важны аргументы и примеры работы, другому нужно быстро разобраться в данных и действиях.

Поэтому перед выбором стиля я выясняю:

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

Так появляется задача, с которой можно работать. Например: «Посетитель должен увидеть, чем отличается услуга, узнать стоимость и отправить заявку с телефона». Теперь можно проверить, помогают ли этому заголовок, порядок блоков, изображения и форма.

Как я распределяю роли скиллов

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

Выбрать оформление новой страницы по её предмету

frontend-design. Связать структуру, шрифты, цвет и изображения с брифом

Пройти полный авторский процесс Taste

Taste Skill. Выбрать этот подход вместо другого ведущего визуального процесса

Улучшить UX, иерархию или мобильную версию

Impeccable. Выбрать подходящую команду для наблюдаемой проблемы

Исправить читаемость, переносы и размеры текста

better-typography. Проверить текст в существующей системе стилей

Сделать жест или переход отзывчивым

Apple Design, авторская адаптация подхода Apple. Настроить обратную связь и движение конкретного взаимодействия

Согласовать темы и общие компоненты

design-system-patterns. Привести токены и компоненты к принятой системе

Проверить код перед передачей результата

web-design-guidelines. Найти нарушения по свежим правилам; затем проверить страницу в браузере

frontend-design, Taste и полный процесс Impeccable предлагают собственный порядок работы. Я выбираю один ведущий подход для конкретной поверхности, а помощнику отдаю ограниченную задачу. Так, исправление переносов не превращается в смену оформления всего сайта.

Для специальных задач есть дополнительные варианты. UI/UX Pro Max даёт поиск по каталогу рекомендаций. review-animations предназначен для явного запроса на ревью движения. design-md извлекает язык уже существующего проекта Google Stitch. Они перечислены в каталоге Router вместе с требованиями к среде.

Apple Design здесь означает авторские правила на основе подхода Apple. Это не официальный продукт Apple. Первичный разбор — Designing Fluid Interfaces на WWDC. Если у вас уже установлен скилл с таким именем, Router читает его содержание, а не предполагает совпадение версий.

Что делает Design Router

Маршрутизатор начинает с вашего запроса и доступных материалов. По существующему проекту изучает его правила и интерфейс. По описанию нового проекта помогает составить бриф.

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

Когда направление не определено, агент предлагает 2–3 варианта. У каждого должны различаться идея и структура, а не только цвет кнопки. Например, страницу продукта можно построить вокруг демонстрации его работы, вокруг конкретного сценария клиента или вокруг авторской практики. Выбор зависит от того, какие аргументы и материалы у вас действительно есть.

Вы получаете рекомендацию, роли скиллов и критерии проверки. После выбора агент выполняет согласованную работу.

Скопируйте этот промпт

Для начала достаточно описания проекта. Если хотите применить результат к коду, используйте агента с доступом к файлам проекта, например Claude Code или Codex. Для проверки интерфейса ему понадобится браузер. В обычном чате тоже можно разобрать задачу и получить направление, но проверить работающий сайт такой ответ не заменяет.

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

Мой проект: [что делаете и для кого].
Нужный результат: [какое действие должен совершить посетитель или пользователь].
Исходник: [описание, ссылка, скриншот или папка проекта].
Что уже задано: [стиль, цвета, шрифты, ограничения; можно оставить пустым].

Если в твоей среде доступен Design Router, прочитай его SKILL.md и примени к этой задаче. Если его нет, начни по инструкции ниже.

Сначала изучи доступные материалы и правила проекта. Отдели факты от предположений. Определи, это страница для чтения и принятия решения или интерфейс для выполнения работы. По одному скриншоту не делай выводов о работающей форме или поведении анимации.

Задай только вопросы, ответы на которые меняют решение. У каждого вопроса предложи рекомендуемый ответ. Факты, которые можно найти в проекте, найди сам.

Распакуй пожелания о стиле в конкретику: структура первого экрана, порядок аргументов или действий, иерархия текста, принцип цвета, изображения и роль движения. Сохрани явно заданный стиль и рабочие функции. Если направления ещё нет или я прошу редизайн, предложи 2–3 различающихся варианта и рекомендуй один. При локальной правке сохраняй существующее направление.

Установи, какие скиллы действительно доступны, прочитай выбранные инструкции и проверь зависимости. Для нового визуального направления выбери один ведущий подход: frontend-design, Taste Skill или полный процесс Impeccable. Для узкой проблемы рассматривай better-typography, Apple Design или design-system-patterns; для проверки кода — web-design-guidelines со свежими правилами. Не запускай все полные конвейеры вместе. Скиллы с запретом автоматического вызова только предложи для моего явного выбора. Если нужного инструмента нет, назови недостающую роль и доступный следующий шаг; не называй отсутствующий скилл запущенным.

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

После согласования работай в выбранном объёме. Проверь результат в браузере на компьютере и телефоне, включая главное действие. Исправь найденные проблемы и подтверди результат в пределах общего лимита проверки выбранных скиллов. Не запускай бесконечную полировку. В конце покажи, что изменилось, что проверено и что осталось непроверенным.

Если уже подключён ключ клуба и я продолжаю материал «Свой сайт с агентом», прочитай мой план и урок first-slice с product site-development. Используй уже согласованные направление и рекомендации, добавь их в карточку ближайшей задачи и продолжи существующий проект. Без ключа не утверждай, что прочитал закрытые уроки: бесплатного разбора достаточно, чтобы выбрать направление.

Скачать промпт отдельным файлом.

В Design Router разбор задачи и проверка расписаны подробнее. Его можно сохранить для следующих запусков: скачать Design Router. Внутри сам маршрутизатор, каталог скиллов со ссылками на авторов и инструкция подключения.

Как подключить нужные скиллы

Для первого разбора достаточно промпта. Для работы с новым сайтом можно подключить frontend-design и web-design-guidelines. Первый ведёт оформление, второй проверяет код после реализации.

Команды устанавливают только указанные скиллы для Claude Code и Codex в общий каталог. Понадобятся Node.js и доступ к GitHub. Если нужный скилл уже установлен, сначала проверьте его версию: повторная установка может её заменить.

npx skills add https://github.com/anthropics/skills --skill frontend-design -g -a claude-code -a codex -y
npx skills add https://github.com/vercel-labs/agent-skills --skill web-design-guidelines -g -a claude-code -a codex -y

Остальное подключайте по задаче. Для переносов — better-typography; для тем и общих компонентов — design-system-patterns; для жестов — Apple Design. Команды и требования собраны в references/setup.md внутри архива. Саму папку design-router с её справочниками нужно сохранить в каталог скиллов агента, затем обновить его сессию.

У инструментов разные требования. Taste использует скрипты и браузер, web-design-guidelines загружает свежие правила из сети. Актуальный Impeccable использует бинарный launcher и внешний API в процессе выбора нового направления. Stitch нужен только для его отдельных маршрутов. Router должен проверить эти условия, прежде чем обещать полный результат.

Skills.sh помогает найти кандидатов. Число установок не показывает, какой сайт получится на выходе, а карточка может отставать от исходника. Например, классический stitch-design-taste переехал в taste-skill-classics. И не всё со словом design подходит для внешнего вида: design-an-interface Matt Pocock проектирует API программных модулей.

В архиве распространяется мой Router и его справочники. Авторские скиллы устанавливаются из их репозиториев. Подбор проверен по инструкциям; сравнительного испытания готовых сайтов здесь пока нет.

Как выглядит полезная рекомендация

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

Агент может предложить показать работу продукта уже на первом экране: пример запроса, ответ бота и следующее действие. Затем объяснить, какие заявки он принимает, как подключается и что потребуется от владельца. Демонстрационный диалог нужно подписать как пример, а реальные результаты показывать только при наличии данных.

Для визуального направления можно выбрать frontend-design. После реализации web-design-guidelines проверит код. Если в демонстрации дёргается выдвижная панель, отдельную задачу получит Apple Design. Полный процесс Taste или Impeccable можно выбрать ведущим вместо frontend-design, если он лучше подходит проекту.

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

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

Так я и выбираю скиллы: называю работу, которую нужно выполнить, и проверку, которая покажет результат.

Как продолжить после рекомендации

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

Смотрите на саму страницу. Проверьте текст, порядок аргументов и действие кнопки. Если агент не смог открыть браузер или отправить форму, эту часть нужно проверить отдельно.

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

Уже работаете над сайтом в клубе?

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

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