# Mockup First

> Используй, когда просьба меняет вид или устройство интерфейса — новый экран, блок, форма, таблица, карточка, график; другое расположение элементов; новое состояние экрана (пусто, ошибка, загрузка, превышен лимит); «сделай красиво», «поменяй оформление», «переделай страницу». Не используй для точечных правок цвета, размера, отступа, шрифта или текста, для починки сломанного вида и когда сказано «сразу делай, без макета».

- Skill: `leogodnik/mockup-first` (Agent Skill, multi-file: 4 files)
- Install (CLI): `npx skillmds@latest add leogodnik/mockup-first`
- Raw SKILL.md: https://api.skillmd.com/api/skills/leogodnik/mockup-first/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: leogodnik (https://skillmd.com/u/leogodnik)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/leogodnik/mockup-first

---


# Сначала макет, потом код

## Зачем

Расхождение между тем, что человек представлял, и тем, что получилось, дешевле поймать
на макете, чем в готовом коде. Скилл вставляет одну остановку: показать кликабельный
макет ссылкой и дождаться «да», прежде чем трогать рабочий файл.

## Где проходит граница

Заметное изменение — макет. Точечная правка — сразу код.

- Несколько мелких правок, которые вместе меняют расположение, считаются одним
  заметным изменением.
- Сомневаешься, заметное или нет, — считай заметным. Но макет молча не делай:
  спроси одной строкой.

## Порядок

1. Проговори одной фразой, что меняется. Уточняющий вопрос — только если без ответа
   макет заведомо будет не тот. Иначе возьми разумное умолчание и назови его в подписи.
2. Возьми стиль из существующего файла проекта: цвета, шрифты, скругления, отступы,
   готовые куски разметки. Свой не выдумывай — макет должен выглядеть продолжением
   страницы.
3. Собери макет во временной папке: изменяемый кусок плюс столько окружения, чтобы было
   понятно, где он живёт. Данные рыбные, но правдоподобные. Кнопки нажимаются, вкладки
   переключаются, видны пустое состояние и ошибка, если они есть в задаче. Боевой файл
   не трогай.
4. Опубликуй через Artifact. Дай ссылку и 3–4 предложения простыми словами: что видно,
   какие решения принял за человека, что осознанно оставил на потом. Не проходит
   публикация — сохрани файл и открой в браузере, но шаг не бросай.
5. Жди ответа. Правки — тот же файл и повторная публикация по тому же адресу, ссылка не
   меняется. Молча в код не уходи.
6. После «да» перенеси одобренное буквально: расположение, подписи и состояния совпадают
   с макетом. Расхождения — только те, о которых попросили.
7. Файл макета остаётся во временной папке: в проект не переезжает, в git не попадает.

## Стыки

- Материал для учеников — работает `course-handout`: там опубликованная страница и есть
  результат, отдельный макет не нужен.
- Ещё не решено, что вообще делаем, — сначала `superpowers:brainstorming`.
- `frontend-design` и `make-interfaces-feel-better` применяй при сборке макета, а не
  вместо него.

## Отговорки, которые не работают

| Мысль | Что на самом деле |
|---|---|
| «Тут очевидно, как должно выглядеть» | Очевидно тебе, а согласовать надо с человеком. |
| «Правка маленькая» | Меняется расположение — уже не маленькая. |
| «Покажу сразу в готовом коде» | Тогда переделка пойдёт по боевому файлу. |
| «Сделаю макет и сразу код, чтобы не ждать» | Одобрение — это ответ человека, а не твоя догадка. |
| «Человек торопится» | Макет — две минуты, переделка кода — не две. |