Скилл для прототипа интерфейса на Tailwind

Ты просишь агента «сделай экран каталога на Tailwind», а получаешь каждый раз разное: то новые цвета мимо твоих, то вёрстку, которая на телефоне уезжает вбок, то кнопки, которые никуда не ведут. Каждый раз объяснять одно и то же надоедает.

Скилл — это файл с правилами, который агент подхватывает сам, когда задача похожа на описанную. Ниже готовый SKILL.md для прототипа интерфейса на Tailwind: агент сначала смотрит твой проект, потом собирает экран от телефона к десктопу, делает пустые и ошибочные состояния и в конце отчитывается, что проверил.

Что внутри

• 📄Полный SKILL.md

  На русском, с описанием, по которому агент понимает, когда его применять, и порядком работы из семи шагов.

• 📱Мобильная вёрстка первой

  Агент собирает экран на 360 пикселей и только потом расширяет до планшета и десктопа.

• 🧱Четыре состояния

  Загрузка, пусто, ошибка, данные. Без них прототип выглядит готовым только на демо.

• ✅Отчёт вместо «готово»

  Какие файлы изменены, что проверено, что не получилось.

Как использовать

1. 1Создай файл скилла

   В Claude Code: папка .claude/skills/tailwind-prototype/ в корне проекта, внутри файл SKILL.md. В другом агенте положи текст в его папку правил или вставь в начало задачи.

2. 2Вставь текст ниже

   Скопируй блок SKILL.md целиком и сохрани. Перезапусти сессию агента, чтобы он увидел новый скилл.

3. 3Подготовь бриф

   Что за экран, какие блоки, какие данные в карточках, что должно происходить по кнопкам. Скриншот-референс — по желанию.

4. 4Запусти командой

   Команда агенту — в разделе «Промпт». Агент сначала задаст вопросы, если бриф неполный.

5. 5Проверь руками

   Открой экран, сузь окно до телефона, пройди Tab по всем кнопкам, включи пустой список.

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

Рядом по теме: Свой скилл переупаковки: одна статья — пять форматов, Хватит повторять одно и то же: сделай скилл, Скилл Claude Code для безопасного рефакторинга, статья «Cursor или Claude Code» и 12 модов Claude Code для вайбкодера (490 ₽).

Что дальше

Когда прототип собран, прогони его через скилл для проверки интерфейсов после вайбкодинга, а если цвета и отступы уже расползлись по проекту, наведи порядок с мини-дизайн-системой. Пройти путь от идеи до первого рабочего экрана с агентом по шагам помогает система Первый экран — 990 ₽.