# 5 навыков для дизайна сайтов

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

## Пять инструментов из подборки

- [ ] [Taste Skill](https://github.com/leonxlnx/taste-skill) - помогает собрать визуальное направление под конкретный продукт, а не выдавать случайный «современный» интерфейс.
- [ ] [Web Design Guidelines](https://github.com/vercel-labs/agent-skills/tree/main/skills/web-design-guidelines) - правила для проверки доступности, фокуса, размеров текста, адаптива и поведения интерфейса.
- [ ] [awesome-design-md](https://github.com/VoltAgent/awesome-design-md) - библиотека готовых `DESIGN.md` с разными визуальными системами. Например, [вариант в стиле Notion](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/notion/DESIGN.md).
- [ ] [image-to-code](https://github.com/leonxlnx/taste-skill/tree/main/skills/image-to-code-skill) - навык из Taste Skill для переноса визуального референса в интерфейс.
- [ ] [Playwright](https://playwright.dev/) - управляет браузером и помогает проверить реальный результат. Для тренировки можно открыть [демо списка задач](https://demo.playwright.dev/todomvc/).

## Рабочая последовательность

## 1. Зафиксируй задачу страницы

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

## 2. Задай визуальное направление

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

Пример запроса:

```text
Собери визуальное направление для сайта [продукт].
Аудитория: [кто]. Главное действие: [действие].
Нужный характер: [3 свойства].
Сначала дай дизайн-систему и структуру экранов, затем предложи реализацию.
Не используй шаблонный hero, декоративные градиенты и случайные карточки.
```

## 3. Преврати вкус в проверяемые правила

- [ ] Подключи Web Design Guidelines.
- [ ] Попроси агент проверить контраст, читаемость, заметный фокус с клавиатуры, размеры кликабельных элементов и адаптив.
- [ ] Выбери один `DESIGN.md` из awesome-design-md и попроси перечислить правила, которые агент применил.
- [ ] Оставь право отклониться от референса, если он мешает цели продукта или доступности.

## 4. Используй референс как входные данные

Image-to-code нужен, когда у тебя есть конкретный скриншот или макет. Приложи изображение, назови экран и ограничения: какой файл менять, какой стек уже есть, какие элементы нельзя трогать.

Пример запроса:

```text
Возьми прикреплённый референс как ориентир для [страница].
Сохрани структуру проекта и измени только [файлы].
Повтори иерархию, отступы и характер типографики, но не копируй логотипы, текст и изображения.
Сначала покажи план, затем собери адаптивную версию.
```

## 5. Проверь не код, а опыт пользователя

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

## Быстрый список качества

| Проверка | Готово, если... |
|---|---|
| Иерархия | за несколько секунд понятно, что предлагают и куда нажимать |
| Типографика | заголовки не спорят с текстом, строки не слишком длинные |
| Цвет | контраст достаточный, цвет не единственный способ передать смысл |
| Интерфейс | кнопки, поля и состояния предсказуемы |
| Мобильный вид | текст не наезжает на элементы, действия доступны большим пальцем |
| Результат | сценарий прошёл в настоящем браузере, а не только по коду |

## Красные флаги

- [ ] Агент начал с кода, не выяснив задачу страницы.
- [ ] Референс скопирован буквально вместе с чужими логотипами или контентом.
- [ ] На десктопе красиво, но на телефоне кнопка или текст не помещаются.
- [ ] Визуальный стиль держится только на градиентах, тенях и больших карточках.

## Что сделать сегодня

1. [ ] Выбери одну страницу, которую давно хочется сделать менее шаблонной.
2. [ ] Подготовь три свойства бренда и два референса.
3. [ ] Прогони страницу через Web Design Guidelines и проверь её в браузере через Playwright.

## Что проверить вручную

- [ ] Актуальные инструкции установки навыков в выбранном клиенте.
- [ ] Лицензии и права на используемые изображения и референсы.
- [ ] Что агент не заменил существующую дизайн-систему без согласования.
- [ ] Что финальный экран соответствует цели страницы, а не только референсу.

---

Источник: https://localhost:3000/m/5-navykov-dlya-dizayna-saytov