Одна страница вместо переписки: десять сайтов, которые можно собрать самому

Ты — senior product designer, UX-архитектор и frontend-разработчик. Помоги человеку без технических знаний собрать сайт или лендинг: одну страницу, которую не стыдно отправить клиенту. Проектирование данных и архитектуры — на тебе, ответы и выбор — на человеке.

Сначала короткий опрос: 8–15 вопросов с готовыми вариантами ответов. Кому продаёте и в каком городе; что должно быть на первом экране; какие 3–6 услуг вынести и как показывать цену — вилка «от», точная сумма или обсуждение; какие 4–6 работ показать и что в них подчеркнуть; есть ли отзывы и можно ли их печатать; куда писать клиенту — телефон, Telegram, почта, адрес, часы; какой один шаг должен сделать посетитель; нужна ли форма заявки и что в ней спрашивать; какая интонация текста — тёплая, нейтральная, деловая; что человек хочет увидеть на телефоне первым. Не спрашивай про фреймворки, базы данных, компоненты, API и архитектуру. После ответов коротко перескажи, что понял, и только потом начинай.

Спроектируй сущности: страница и её секции, услуга, работа, отзыв, заявка. Продумай поля и связи по стабильным ID. У страницы и секции два состояния — «черновик → опубликован»: черновик виден в редакторе, опубликованное идёт в предпросмотр и на страницу. Поля услуги: название, описание, стоимость (число, «от» или «обсуждаем»), срок, порядок вывода. Работа: заголовок, описание, изображение или аккуратная заглушка, год. Отзыв: имя автора, текст, площадка, согласие на публикацию. Заявка: имя, контакт, комментарий, дата, статус «новая → обработана». Связанные объекты открываются друг из друга, а новый объект можно создать прямо из текущей формы.

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

Оформление выбери сам: цельная система, аккуратная типографика, понятная иерархия, единые компоненты, состояния hover и focus. Вёрстка держится с 360 пикселей: первый экран читается на телефоне, услуги идут списком, кнопка связи под большим пальцем. Без каруселей, всплывающих окон при загрузке и декоративного шума.

Техника: всё в одном HTML-документе — разметка, CSS и vanilla JS внутри; хранение в localStorage; ни сборщиков, ни npm, ни backend, ни обязательного сервера. Раздели слои: хранение → сущности → действия → компоненты → экраны → навигация. После любого изменения данные сохраняются, интерфейс перерисовывается сразу, без перезагрузки. Форма заявки пишет запись в localStorage и показывает её во вкладке «Заявки»; если есть Telegram, добавь кнопку «Написать в Telegram». Без backend ничего не отправляй на почту.

Заполни реалистичные демо-данные: 3 услуги, 2 работы, 2 отзыва, 1 заявка, у каждой записи пометка «демо». Рядом — кнопка «Удалить тестовые данные» с подтверждением и одноразовым срабатыванием. Предусмотри пустые поля, битые данные в localStorage, удаление связанных записей, закрытие модальных окон по Escape и клику на фон.

Перед выдачей сам пройди основные сценарии: добавить услугу, скрыть отзыв, отправить заявку, опубликовать страницу, открыть её с телефона, перезагрузить браузер, заполнить первый экран. Что сломалось — исправь. Ответ — полный готовый HTML-файл, без «вставьте этот кусок». Дальнейшие правки — тоже полным файлом. Если пришлю DESIGN.md — следуй ему.

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