# Из референса в рабочий интерфейс

## Результат

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

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

## Шаги

1. Выберите один экран и один пользовательский сценарий: открыть материал, отфильтровать галерею или перейти к следующему уроку.
2. Нарисуйте в заметке порядок областей: навигация, заголовок, главный блок, действие, вторичный контент. Подпишите, что пользователь должен понять в каждой области.
3. Выпишите три наблюдаемых правила: например, максимальная ширина текста, повтор карточки, один акцентный цвет. Не переносите логотипы, иллюстрации и тексты из референса.
4. Соберите собственный статичный вариант в существующих Blade-шаблонах и CSS. Сначала проверьте иерархию на узком экране.
5. Добавьте одно действие и его видимый результат. Движение и декоративные эффекты оставьте на следующий проход.

## Применимый prompt

```text
Составь карту экрана для личной библиотеки: цель пользователя, порядок блоков, одно главное действие и три правила визуального ритма. Не копируй тексты и брендинг референса.
```

## Критерий проверки

Без внешнего сайта можно объяснить назначение каждого блока, пройти выбранный сценарий и отличить свой контент от вдохновения референсом.

### Источники

- [Blocks — shadcn/ui](https://ui.shadcn.com/blocks)
- [Components — shadcn/ui](https://ui.shadcn.com/docs/components)

## Следующий шаг

Выберите один существующий экран проекта и подготовьте карту из пяти областей до изменения его оформления.

Источник: https://ui.shadcn.com/blocks