leogodnik Сначала макет, потом код
Зачем
Расхождение между тем, что человек представлял, и тем, что получилось, дешевле поймать на макете, чем в готовом коде. Скилл вставляет одну остановку: показать кликабельный макет ссылкой и дождаться «да», прежде чем трогать рабочий файл.
Где проходит граница
Заметное изменение — макет. Точечная правка — сразу код.
- Несколько мелких правок, которые вместе меняют расположение, считаются одним заметным изменением.
- Сомневаешься, заметное или нет, — считай заметным. Но макет молча не делай: спроси одной строкой.
Порядок
- Проговори одной фразой, что меняется. Уточняющий вопрос — только если без ответа макет заведомо будет не тот. Иначе возьми разумное умолчание и назови его в подписи.
- Возьми стиль из существующего файла проекта: цвета, шрифты, скругления, отступы, готовые куски разметки. Свой не выдумывай — макет должен выглядеть продолжением страницы.
- Собери макет во временной папке: изменяемый кусок плюс столько окружения, чтобы было понятно, где он живёт. Данные рыбные, но правдоподобные. Кнопки нажимаются, вкладки переключаются, видны пустое состояние и ошибка, если они есть в задаче. Боевой файл не трогай.
- Опубликуй через Artifact. Дай ссылку и 3–4 предложения простыми словами: что видно, какие решения принял за человека, что осознанно оставил на потом. Не проходит публикация — сохрани файл и открой в браузере, но шаг не бросай.
- Жди ответа. Правки — тот же файл и повторная публикация по тому же адресу, ссылка не меняется. Молча в код не уходи.
- После «да» перенеси одобренное буквально: расположение, подписи и состояния совпадают с макетом. Расхождения — только те, о которых попросили.
- Файл макета остаётся во временной папке: в проект не переезжает, в git не попадает.
Стыки
- Материал для учеников — работает
course-handout: там опубликованная страница и есть результат, отдельный макет не нужен. - Ещё не решено, что вообще делаем, — сначала
superpowers:brainstorming. frontend-designиmake-interfaces-feel-betterприменяй при сборке макета, а не вместо него.
Отговорки, которые не работают
| Мысль | Что на самом деле |
|---|---|
| «Тут очевидно, как должно выглядеть» | Очевидно тебе, а согласовать надо с человеком. |
| «Правка маленькая» | Меняется расположение — уже не маленькая. |
| «Покажу сразу в готовом коде» | Тогда переделка пойдёт по боевому файлу. |
| «Сделаю макет и сразу код, чтобы не ждать» | Одобрение — это ответ человека, а не твоя догадка. |
| «Человек торопится» | Макет — две минуты, переделка кода — не две. |