Видео этого урока скоро появится
Конспект урока доступен ниже
Pro-подход: собираем интерфейс по референсу
Вводный урок о том, чем работа профи отличается от «напиши мне сайт». Возьмёшь понравившийся сайт, разложишь его на структуру, сетку и цветовую систему и воссоздашь в Cursor по скриншотам. Научишься добиваться точного попадания в стиль короткими итерациями.
Конспект урока
- 1
Разбираем референс на части
До первого промпта выпиши: число колонок и максимальную ширину, шаг отступов, палитру, пару шрифтов и размеры заголовков. Этот список и есть техзадание для модели.
- 2
Скриншоты по блокам
Прикладывай не одну картинку всей страницы, а три-четыре снимка отдельных блоков крупным планом. На общем скриншоте модель не различает отступы и толщину шрифта.
- 3
Сетка, потом типографика, потом цвет
Первая итерация только структура и расположение блоков без оформления. Дальше шрифты и размеры, потом цвета и тени, и только в конце движение.
- 4
Сверка через свой скриншот
Сними экран получившейся страницы, приложи вместе с референсом и попроси перечислить расхождения списком. Правь по этому списку, а не по ощущению.
- 5
Переменные вместо случайных чисел
Собери цвета, отступы и радиусы в переменные и требуй использовать только их. Тогда смена акцентного цвета это правка одной строки, а не поиск по всему проекту.
- 6
Где пора остановиться
Попадание пиксель в пиксель нужно редко. Договорись о критерии заранее: совпали сетка, типографика и палитра, значит готово.
Практика
Выбери сайт, который тебе нравится, и воспроизведи его первый экран за три итерации: сетка, типографика, цвет. Сравни скриншоты и выпиши оставшиеся расхождения.
Сделал? Отметь урок пройденным и переходи дальше