Урок 4.1 — Дизайн-бриф: референс, цвета, структура
Зачем: Claude не знает как должен выглядеть твой сайт. Без дизайн-брифа он угадывает — и угадывает по-среднему. Правильный бриф в начале = результат который нравится с первого раза.
Три составляющих дизайн-брифа
1. Референс — покажи похожий сайт
Claude Code умеет читать HTML/CSS реальных сайтов. Это самый быстрый способ передать стиль.
Как это работает:
- Найди сайт с похожим стилем который тебе нравится
- Открой в браузере → правая кнопка → «Сохранить как» → HTML-файл
- Или просто дай ссылку — Claude Code может прочитать структуру
В промте пиши так:
"Посмотри на структуру и стиль этого сайта: [ссылка или HTML].
Возьми общий layout и подход к типографике — но не копируй контент."
Где искать референсы
- dribbble.com — дизайн-идеи
- land-book.com — лендинги
- awwwards.com — нестандартные сайты
- Просто сайты конкурентов которые нравятся
2. Цвета — точно и конкретно
Не пиши «сделай в фиолетовых тонах». Давай HEX-коды.
Цвета бренда:
Primary: #6F23EE (фиолетовый)
Accent: #E59E30 (оранжевый)
Background: #FFFFFF
Text: #2b2b2b
Принцип: фиолетовый — для кнопок и заголовков,
оранжевый — только для акцентов и иконок.
3. Структура — скажи что на странице
Страница состоит из:
1. Hero: заголовок + подзаголовок + кнопка CTA
2. Три карточки с преимуществами
3. Таблица сравнения с конкурентами
4. Footer с контактами
Никакого меню — одна страница, скролл.
Полный шаблон дизайн-брифа
Создай [тип страницы] для [что это / зачем].
РЕФЕРЕНС:
Стиль похож на [ссылка или описание]. Возьми layout,
не копируй контент.
ЦВЕТА:
Primary: #6F23EE
Accent: #E59E30
Background: #FFFFFF
Text: #2b2b2b
ТИПОГРАФИКА:
Заголовки — Poppins SemiBold
Текст — Source Sans Pro Regular
СТРУКТУРА:
- Hero секция: [что]
- [Секция 2]: [что]
- [Секция 3]: [что]
- Footer: [что]
СТЕК: Next.js + Tailwind CSS
ВАЖНО: мобильная адаптация обязательна
Spot the Mistake
Сделай красивый современный сайт для нашего бренда. Используй наши корпоративные цвета.Проблемы: что значит «красивый»? какие цвета — Claude не знает. Нет структуры страницы, нет референса, нет стека. Claude придумает что-то случайное и переделывать придётся долго.
Проверь себя
Закрой страницу и ответь
- Из каких трёх частей состоит дизайн-бриф?
- Как передать Claude стиль понравившегося сайта?
- Почему нельзя писать «используй корпоративные цвета»?
Действие
Для своего следующего проекта заполни шаблон дизайн-брифа выше. Найди один референс-сайт.