ИИ БАЗАПрямые ссылки, команды и пять подробных промптов. Выбери инструмент под свою задачу, скопируй запрос и проверь результат в браузере.
Ниже собрал ссылки на инструменты, команды и полные промпты.
Нужен новый экран? Начни с брифа и дизайн-правил. Уже собрал страницу? Проверь её в браузере и исправь конкретные ошибки. Интерактивный 3D добавляй только тогда, когда он помогает задаче.
Самый короткий рабочий путь для новой страницы. 3D оставь на конец, если он вообще нужен.
Аудитория, действие, контент и реальные ограничения.
Возьми референсы и конкретные правила дизайна.
Проверь визуальный ритм и работающие состояния.
Скриншоты, мобильная версия, кнопки и формы.
Ссылки ведут на документацию и исходные репозитории. Команду установки или ссылку можно скопировать у каждого инструмента.
Заставляет агента сначала прочитать бриф и выбрать направление, а не по привычке собирать одинаковый SaaS-экран.
Когда братьПеред первой версткой, когда дизайн ещё не определён.
Что проверитьВерсия v2 на сайте помечена экспериментальной. Сохрани свои фирменные ограничения выше правил скилла.
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"Помогает описать правила продукта, найти дизайн-штампы и довести уже собранный интерфейс.
Когда братьПосле первого рабочего экрана, когда есть что критиковать по делу.
Первое действиеУстанови в корне проекта и запусти /impeccable init в своём агенте.
npx impeccable installОткрывает настоящий браузер, делает скриншоты и проверяет сценарии, которые нельзя доказать одним успешным билдом.
Когда братьПосле реализации и после каждой заметной визуальной правки.
Первое действиеНужен Node.js 18+. После установки выполни playwright-cli install --skills.
npm install -g @playwright/cli@latestКоллекция подробных файлов дизайн-систем, разобранных на основе известных сайтов. Используй как референс правил, не как шаблон для копирования бренда.
Когда братьПеред проектированием своей сетки, типографики и ритма секций.
Первое действиеВыбери один подходящий файл DESIGN.md, скопируй в проект и объясни агенту, что именно можно перенять.
https://github.com/VoltAgent/awesome-design-mdВосстанавливает объект с референса как редактируемый процедурный Three.js-код с проверкой результата по изображению.
Когда братьКогда странице действительно нужен интерактивный объект, а не просто картинка.
Что проверитьОдин ракурс не показывает скрытые стороны. Сравни рендер с оригиналом и отдельно отметь приблизительные детали.
git clone https://github.com/img2threejs/img2threejs.git ~/.claude/skills/img2threejsЗаполни поля в квадратных скобках. Агент должен проверить доступную среду и честно сказать, если какой-то инструмент не установлен.
Ты арт-директор, UX-дизайнер и фронтенд-разработчик. Помоги мне сделать страницу, которая решает задачу пользователя и выглядит как продукт с собственной дизайн-системой, а не как типовой ИИ-шаблон. Не начинай с кода, пока не определишь структуру, содержание и визуальное направление.
<бриф>
Продукт: [что продаём или объясняем].
Аудитория: [кто откроет страницу, уровень знаний, устройство].
Главное действие посетителя: [одно действие].
Содержание, которое уже есть: [заголовки, тексты, изображения, логотип, скриншоты].
Референсы: [1-3 ссылки или изображения и что именно в них нравится].
Ограничения: [стек, сроки, фирменные цвета, существующие компоненты].
Страница уже существует: [да/нет, путь к проекту или URL].
</бриф>
<порядок работы>
1. Сначала прочитай текущий проект и его дизайн-токены, если проект существует. Не меняй существующий бренд только потому, что другой сайт кажется красивым. Если бриф неполный, задай не больше трёх вопросов, от которых действительно зависит решение; для остального явно запиши допущения.
2. Опиши задачу одним абзацем: кому страница помогает, что человек должен понять за первые 5 секунд и какое действие сделать дальше. Предложи две визуально разные концепции. Для каждой кратко покажи композицию первого экрана, сетку, типографику, характер изображений, контраст и причину выбора. Не делай две одинаковые раскладки с разными цветами.
3. Если Taste Skill установлен, используй его как проверку от повторяющихся шаблонов, но не подменяй им бриф. Если в проекте есть DESIGN.md или подходящий пример из Awesome DESIGN.md, извлеки из него рабочие правила для своего проекта: размеры, интервалы, состояния и ограничения. Не копируй чужой логотип, текст или узнаваемую композицию.
4. После выбора концепции составь короткую спецификацию: структура разделов, содержание каждого блока, сетка на desktop/mobile, типографическая шкала, цвета в HEX, отступы, радиусы, состояния кнопок и полей. Одна главная кнопка должна быть понятна без чтения всей страницы.
5. Реализуй страницу в текущем стеке. Используй настоящие данные из брифа. Не придумывай отзывы, статистику, цены и обещания. Семантические заголовки, клавиатурная навигация, видимый focus, контраст и режим reduced motion обязательны. Не добавляй градиент и набор одинаковых карточек, если этому нет причины в содержании.
6. Если доступен Impeccable, сделай один проход critique/polish по готовой странице. Исправляй конкретные проблемы и сохраняй выбранный визуальный язык; не запускай бесконечный редизайн.
7. Открой готовую страницу через Playwright CLI или доступный браузер. Сделай скриншоты при ширине 390, 768 и 1440 px. Проверь горизонтальный скролл, переносы, навигацию, кнопки, формы, ошибки и состояние пустых данных. Выпиши пять самых заметных проблем, исправь их и сними кадры повторно.
</порядок работы>
<результат>
Покажи итоговую страницу или путь к файлам, две-три причины основных дизайн-решений, список изменённых файлов, скриншоты трёх размеров и короткую таблицу «проблема до / исправление / как проверено». Если какая-то проверка не состоялась, скажи об этом прямо. Не называй страницу готовой только потому, что сборка прошла без ошибок.
</результат>Ты senior UX-дизайнер и фронтенд-инженер. Проведи предметный аудит моей существующей страницы, затем улучши её без потери смысла, бренда и работающих сценариев. Мне нужен не общий отзыв «сделать современнее», а проверяемые замечания и исправления.
<вход>
Адрес страницы или путь к проекту: [URL / путь].
Для кого она: [аудитория].
Что посетитель должен сделать: [целевое действие].
Что нельзя менять: [логотип, структура, цены, тексты, интеграции].
Что мне сейчас не нравится: [конкретные наблюдения или «оцени сам»].
</вход>
<аудит>
1. Открой текущую страницу и сохрани кадры при ширине 390, 768 и 1440 px до правок. Если открыть её нельзя, остановись и объясни, чего не хватает; не придумывай результаты просмотра.
2. Проверь иерархию первого экрана, последовательность аргументов, ясность кнопки, длину строк, контраст, плотность, выравнивания, состояние на телефоне, формы и клавиатуру. Отдельно ищи ИИ-штампы: одинаковые карточки без причины, случайные градиенты, пустые иконки, абстрактные обещания и шаблонные заголовки.
3. Если Impeccable уже установлен, используй его аудит и критику как дополнительный источник находок. Проверь каждую находку глазами и по реальному интерфейсу. Не объявляй автоматический отчёт истиной без контекста.
4. Составь список максимум из десяти проблем. Для каждой укажи место, почему это мешает посетителю, серьёзность и конкретное исправление. Выдели первые пять по влиянию. Не путай личный вкус с дефектом.
</аудит>
<исправление>
Сначала исправь пять приоритетных проблем в существующих компонентах и токенах. Не собирай параллельную страницу и не меняй рабочие URL или названия полей без необходимости. Сохрани реальный контент, адаптивность и доступность. Если заметил технический баг, зафиксируй шаги воспроизведения и проверь результат после правки.
</исправление>
<проверка>
Через Playwright CLI или обычный браузер пройди сценарий посетителя от первого экрана до целевого действия. Проверь 390, 768 и 1440 px, скриншоты после правок, focus с клавиатуры и reduced motion. Сравни до/после в одинаковом viewport. В ответе дай таблицу «наблюдение / изменение / подтверждение», ссылки на кадры и перечень оставшихся ограничений. Если инструмент или страница недоступны, укажи честную границу проверки.
</проверка>Ты дизайнер интерфейсов. Мне нравится характер нескольких существующих сайтов, но я не хочу копию чужого бренда. Создай для моего проекта компактный DESIGN.md и применимую визуальную систему на основе анализа референсов.
<исходные данные>
Мой продукт: [описание].
Моя аудитория и задача страницы: [описание].
Мой текущий бренд: [логотип, цвета, шрифты, ограничения].
Референсы или файлы из Awesome DESIGN.md: [ссылки и названия].
Что именно нравится: [например: ритм секций, типографика, плотность, работа с изображениями].
Что нельзя заимствовать: [узнаваемые цвета, копирайтинг, иконки, композиция].
</исходные данные>
<анализ>
Прочитай реальные DESIGN.md и открой живые сайты, если они доступны. Отдели проверенные наблюдения от предположений. Для каждого референса выпиши до пяти переносимых правил: сетка, шкала шрифтов, интервалы, состояние кнопок, цвета, адаптивное поведение. Не собирай усреднённый коллаж. Выбери одно основное направление и объясни, какие два-три правила из другого референса можно добавить без конфликта.
</анализ>
<создание системы>
Создай в моём проекте DESIGN.md с конкретными токенами и примерами применения: фон, поверхности, текст, акцент, радиусы, интервалы, типографика, контейнер, сетка, кнопка, поле ввода, карточка, мобильная версия, focus и reduced motion. Для каждого спорного решения коротко напиши «почему». Если данных недостаточно для точного цвета или шрифта, предложи вариант и пометь его как гипотезу, а не как факт из чужого сайта.
Затем собери один представительный экран моего проекта по этой системе. Не подменяй настоящее содержимое декоративным lorem ipsum. Проверь его при 390 и 1440 px. Сравни результат с DESIGN.md: найди расхождения и исправь их. В финале дай файл системы, экран, скриншоты и список решений, которые требуют моего вкусового выбора.
</создание системы>Ты 3D-разработчик и фронтенд-инженер. Мне нужен редактируемый Three.js-объект по одному изображению, а не красивый скриншот без исходного кода. Используй установленный img2threejs и сначала оцени, насколько исходного изображения достаточно.
<вход>
Путь к референсу объекта: [файл изображения].
Где объект будет использован: [лендинг, каталог, демо, интерактивный блок].
Что важно сохранить: [силуэт, пропорции, детали, материалы, цветовые зоны].
Какие движения нужны: [вращение, открытие части, hover, idle или «без анимации»].
Ограничения: [фреймворк, размер bundle, устройства, прозрачный фон].
</вход>
<этапы>
1. Опиши видимые части объекта и то, что нельзя восстановить по одному ракурсу. Не выдумывай скрытую геометрию как достоверную. Если качество фото или права на него мешают задаче, скажи об этом до генерации.
2. Составь спецификацию силуэта, основных объёмов, деталей и материалов. Расставь приоритеты: сначала узнаваемая форма, потом крупные цветовые зоны, затем мелкие детали. Не трать время на микротекстуры, пока пропорции неверны.
3. Запусти pipeline img2threejs в установленной среде. Собери объект как редактируемый код Three.js с понятными группами и именами частей. Добавь управление камерой только если оно нужно сценарию страницы; не включай тяжёлые эффекты ради эффекта.
4. Покажи рендер рядом с исходным изображением в одинаковом ракурсе. Отметь несоответствия по форме, материалам и цвету. Исправь минимум один проход по этим конкретным отличиям. Для предполагаемых задних и скрытых частей явно укажи степень уверенности.
5. Проверь рендер на desktop и телефоне, плавность движения, освещение, размер bundle и поведение при reduced motion. Предоставь путь к компоненту, способ вставки в мой проект, кадры сравнения и список того, что осталось приблизительным.
</этапы>Заполни поля в квадратных скобках и отправь этот запрос агенту, который умеет читать проект, писать код и открывать страницу в браузере.
Ты отвечаешь за дизайн и реализацию страницы. Сначала пойми задачу, затем предложи визуальное направление и только после этого пиши код. Используй установленные Taste Skill, Impeccable, Playwright CLI и DESIGN.md, когда они реально есть в среде; не притворяйся, что инструмент подключён, если его нет.
<задача>
Продукт: [название и одно предложение о пользе].
Аудитория: [кто эти люди и что им уже известно].
Главное действие: [одно целевое действие].
Тип страницы: [лендинг, каталог, профиль, сервис, внутренний экран].
Что должно быть видно сразу: [обещание, доказательство, кнопка].
Разделы: [перечисли обязательные разделы или разреши предложить структуру].
Готовые материалы: [тексты, изображения, видео, логотип, ссылки].
Референсы: [ссылки и конкретные качества, которые нравятся].
Что запрещено: [визуальные штампы, непроверенные цифры, элементы другого бренда].
</задача>
<технические рамки>
Проект и стек: [путь, фреймворк, библиотека компонентов].
Поддержка экранов: [минимальная ширина, desktop, mobile].
Доступность: контраст, семантика, клавиатура, видимый focus, reduced motion.
Интеграции: [формы, аналитика, API; если пока нет, не имитируй их работу].
Особый объект в 3D: [нет / путь к изображению и зачем 3D нужен].
</технические рамки>
<порядок>
1. Проверь существующий проект и материалы. Запиши допущения.
2. Покажи две разные концепции и аргументируй выбор одной. Для выбранной задай сетку, типографику, цвета, отступы и состояния.
3. Реализуй страницу в существующем стеке. Не придумывай чужие отзывы, результаты и цены.
4. Проверь в браузере на 390, 768 и 1440 px, исправь пять самых заметных проблем и покажи скриншоты до/после.
5. Отдай файлы, инструкции запуска, список проверок и оставшихся ограничений.
</порядок>Агент ускоряет работу. Решение о качестве остаётся за тобой.