ГлавнаяМатериалы из Reels/ShortsЧек-лист
Чек-лист
кодовое словоДизайн

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

Содержание11 глав
  1. 01Пять инструментов из подборки
  2. 02Рабочая последовательность
  3. 031. Зафиксируй задачу страницы
  4. 042. Задай визуальное направление
  5. 053. Преврати вкус в проверяемые правила
  6. 064. Используй референс как входные данные
  7. 075. Проверь не код, а опыт пользователя
  8. 08Быстрый список качества
  9. 09Красные флаги
  10. 10Что сделать сегодня
  11. 11Что проверить вручную

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

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

  • Taste Skill - помогает собрать визуальное направление под конкретный продукт, а не выдавать случайный «современный» интерфейс.
  • Web Design Guidelines - правила для проверки доступности, фокуса, размеров текста, адаптива и поведения интерфейса.
  • awesome-design-md - библиотека готовых DESIGN.md с разными визуальными системами. Например, вариант в стиле Notion.
  • image-to-code - навык из Taste Skill для переноса визуального референса в интерфейс.
  • Playwright - управляет браузером и помогает проверить реальный результат. Для тренировки можно открыть демо списка задач.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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