Сайт для студии или маленького бизнеса

Instructions are in Russian. Respond in the user's language.

Зачем

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

На чём работает

Когда включать

• Новый сайт или лендинг для студии, мастера, кафе, школы, частной практики.
• Новый раздел или страница на уже живом сайте.
• Переделка внешнего вида существующего сайта.
• Подготовка накопленных правок к выкату.

Не включай на узкую правку (цвет кнопки, опечатка, один баг): там бриф и холодная проверка дороже самой правки. Просто сделай и проверь.

Порядок работы

1. Молча собрать контекст. Правила проекта (CLAUDE.md, AGENTS.md), DEPLOY-QUEUE.md, свежие изменения (git log -5, git status), как уже сделаны соседние страницы. Вопрос, ответ на который лежит в файле, задавать нельзя.
2. Бриф по шаблону templates/brief.md, не длиннее одного экрана.
3. Референсы и стиль. 3-5 живых сайтов того же жанра, из них берётся композиция, ритм и палитра, а не вёрстка целиком.
4. Сборка. Повторяй то, что уже есть в проекте, прежде чем изобретать.
5. Проверка в браузере: телефон, компьютер, скорость, консоль.
6. Финальный дизайн-аудит по чек-листу ниже, самые заметные находки исправить до сдачи.
7. Запись в очередь выката DEPLOY-QUEUE.md. Не выкатывать.
8. Холодная проверка себя отдельным агентом с чистым контекстом.
9. Отчёт владельцу: что сделано, скриншоты, что проверил, что осталось под вопросом.

Шаг 2. Бриф

Пять блоков, простыми словами:

• Понял так: одно-два предложения о том, что получится в итоге.
• Беру по умолчанию: 3-6 допущений, у каждого причина в полслова. Владелец отвечает «ок» или правит одно.
• Спрошу (максимум 3): только то, без чего работа уйдёт не туда: деньги, необратимое, выкладка наружу, выбор между разными продуктами. У каждого вопроса готовый рекомендованный ответ.
• Что ты мог упустить: 2-4 пункта из контекста, не общие слова. Куда смотреть: другие языки сайта, мобильная версия, юридические страницы (политика данных, если есть форма), что сломается рядом, стоимость хостинга и сборок.
• Не буду делать: что сознательно оставляю за рамками.

Правило ожидания:

• Блокирующих вопросов нет: показать бриф и сразу начать с фразой «стартую, скажи, если что-то не так».
• Есть блокирующий вопрос: остановиться и ждать ответа.

Чего не делать в брифе: допрос из десяти вопросов, вопросы без готового ответа, пересказ владельцу его же слов как «уточнение».

Шаг 3. Референсы и стиль

• Ищи живые сайты того же жанра и масштаба: студия видео смотрит на студии, кофейня на кофейни. Сайты крупных корпораций дают ложную планку.
• Из референса бери палитру, композицию, ритм отступов, подачу фото. Не копируй тексты, логотипы и вёрстку целиком.
• Запиши в бриф одной строкой: «Стиль: <что взял> из <какого типа референса>». Владелец видит, откуда решение.
• Фото и картинки для сайта: лучше реальные кадры владельца. Если нужна генерация, подключай film-look (единый лук без пластика) и article-cover для обложек статей.

Запрет студии: никаких моноширинных шрифтов и «терминального» стиля. Ни в заголовках, ни в метках, ни в ценах, датах и цифрах. Никаких ASCII-текстур, пиксельных шрифтов, точек-префиксов у пунктов меню, стилизации под консоль или приборную панель. Цифры и таблицы набирай обычным сансом с font-variant-numeric: tabular-nums (Inter, Manrope и похожие это умеют). Если референс построен на моноширинной типографике, бери из него палитру и композицию, шрифт меняй на санс и скажи об этом владельцу.

Шаг 4. Сборка

• Сначала посмотри, как сделаны соседние страницы и компоненты, и повтори их приём. Новый приём только если старый не подходит, и одной строкой в отчёт, почему.
• Маленькие файлы по смыслу, а не одна страница на тысячу строк.
• Тексты для людей: конкретно и просто. Никаких «уникальных решений» и «индивидуального подхода». Цифры на сайте (сколько работ, сколько лет) только реальные, со слов владельца.
• Светлая и тёмная тема, если они есть: картинки и логотипы должны читаться на обеих.
• Заменил картинку: меняй имя файла, иначе кэш покажет старую.
• Ключи и токены только в переменных окружения, никогда в коде. Перед выкатом прогони security-check.

Заявки в Telegram (схема)

Самый простой путь для маленького бизнеса: форма на сайте отправляет заявку в Telegram владельцу, где он и так сидит. Кода здесь нет, только схема:

1. Посетитель заполняет форму (имя, контакт, что нужно).
2. Форма отправляет данные на свой сервер, а не напрямую из браузера в Telegram: токен бота в браузере увидит любой.
3. Серверная функция проверяет поля, режет слишком длинный текст, ставит лимит частоты (защита от спама) и пересылает сообщение боту.
4. Бот присылает владельцу заявку в личный чат или в закрытую группу.
5. Посетитель видит понятное «заявка отправлена, ответим в течение дня» и запасной контакт, если отправка не прошла.

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

Шаг 5. Проверка в браузере (обязательна)

Код собрался ещё не значит, что сайт работает. Открой локальную версию в браузере и пройди четыре пункта:

• Телефон (ширина около 375 пикселей): ничего не уезжает вбок, нет горизонтальной прокрутки, кнопки нажимаются пальцем, текст читается без зума, меню открывается и закрывается.
• Компьютер (1280-1440 пикселей): строки текста не тянутся на всю ширину, картинки не мыльные, сетка не разваливается.
• Скорость: главная картинка весит разумно (webp, ширина под вёрстку, не 4K), шрифтов не больше двух семейств, страница не прыгает при загрузке.
• Консоль: ни одной красной ошибки, нет битых ссылок на картинки и скрипты (вкладка сети, ответы 404).

Сделай скриншоты телефона и компьютера и приложи к отчёту. Если скриншот выходит пустым или чёрным, проверь вёрстку замерами через JavaScript (ширина документа против ширины окна, размеры ключевых блоков).

Шаг 6. Финальный дизайн-аудит

Пройди глазами и исправь самое заметное до сдачи:

• Иерархия: главное считывается за 3 секунды, одна главная кнопка на экран.
• Контраст текста достаточный, серый на сером не прячет смысл.
• Отступы ритмичные, одинаковые блоки выглядят одинаково.
• Шрифты без моноширинных, цифры сансом с tabular-nums.
• У картинок есть alt, у кнопок понятные подписи.
• Фокус с клавиатуры виден, форма понятна без подсказок.
• Нет заглушек «Lorem ipsum», пустых ссылок и кнопок в никуда.
• Цены, телефоны, адреса совпадают со словами владельца.

Если в наборе инструментов есть чек-лист веб-интерфейсов или скилл аудита дизайна, прогони им и приложи главные находки.

Шаг 7. Выкат: только по прямому слову владельца

• Выкат на хостинг, отправка в ветку с автовыкатом, запись в боевую базу, правка переменных окружения на проде: только по прямому слову владельца «выкатывай» или «деплой» в этом разговоре. «Ок», «давай», «продолжай» командой не считаются.
• Не спрашивай «выкатывать?» после каждой пачки правок. Агент делает, проверяет локально, показывает скриншоты и кладёт пункт в очередь.
• Правки копятся в DEPLOY-QUEUE.md по шаблону templates/deploy-queue.md. Выкат одной пачкой, не чаще раза в несколько дней на проект.
• Почему так: каждая сборка на хостинге стоит денег или съедает бесплатный лимит, а частые выкаты мелочей засоряют историю и прод. Лишний выкат это ошибка агента, а не ускорение.
• После выката проверь живую версию: открывается ли новая страница, видна ли свежая правка (иногда хостинг собирает версию, но не делает её основной). Отметь пункты в очереди как выкаченные с датой.

Шаг 8. Холодная проверка себя

Задача на несколько файлов или новый раздел: запусти отдельного агента с чистым контекстом, который не видел ход работы. Дай ему три вещи: слова владельца дословно, бриф, список изменённых файлов. Попроси найти:

1. что просили, но не сделано или сделано иначе;
2. допущения из брифа, которые не подтверждены проверкой;
3. что агент решил за владельца и не сказал;
4. отступления от правил проекта;
5. что владельцу стоит знать, хотя он не спрашивал (риск, цена, срок).

Ответ не длиннее 8 пунктов, у каждого доказательство: файл, строка, команда. Придирки к стилю кода не нужны.

Задача маленькая: пройди эти пять пунктов сам.

В отчёте два коротких блока: «Что проверил» и «Что осталось под вопросом». Находки не прятать и не раздувать.

Пример брифа (сокращённо)

Владелец написал: «Сделай сайт для моей студии керамики, дай волю».

• Понял так: одностраничник: кто мы, мастер-классы с расписанием, галерея работ, форма записи с заявкой в Telegram.
• Беру по умолчанию: один язык, русский (аудитория местная); светлая тема (керамика лучше смотрится на светлом); фото из папки владельца, без генерации; шрифт санс плюс один акцентный для заголовков.
• Спрошу: 1) Цены показывать на сайте? Рекомендую да, «от»: это снимает половину вопросов в личке. 2) Заявки в личку или в группу? Рекомендую закрытую группу, чтобы потом добавить помощника.
• Что ты мог упустить: форма собирает телефон, значит нужна страница про обработку данных; расписание меняется, его удобнее держать в одном файле данных, а не в вёрстке.
• Не буду делать: онлайн-оплату, личный кабинет, блог.

Типичные ошибки

• Сдать сайт, который не открывали на телефоне. Половина посетителей маленького бизнеса приходит с телефона.
• Моноширинный шрифт «для стиля» в ценах или метках. Запрещено.
• Токен бота в коде страницы. Его вытащит любой и начнёт слать спам.
• Выкат после каждой правки и вопрос «выкатывать?» каждые десять минут.
• Выдуманные цифры и отзывы на сайте («500 довольных клиентов»).
• Бриф на три экрана и десять вопросов вместо одного экрана и трёх.
• Холодную проверку делает тот же агент, который всё собирал: он не видит своих слепых пятен.

Чек-лист перед сдачей

• Бриф показан, блокирующие вопросы закрыты.
• Стиль записан одной строкой с источником.
• Проверено в браузере: телефон, компьютер, скорость, консоль чистая.
• Скриншоты телефона и компьютера в отчёте.
• Дизайн-аудит пройден, самое заметное исправлено.
• Нет моноширинных шрифтов, цифры сансом с tabular-nums.
• Ключи не в коде, security-check пройден, если есть форма или база.
• Пункт записан в DEPLOY-QUEUE.md, выкат не делался без слова.
• Холодная проверка сделана, находки в отчёте.

Связи с другими скиллами набора

• security-check: проверка безопасности перед выкатом.
• film-look: единый лук для генерируемых фото сайта.
• article-cover: обложки статей, если на сайте есть блог.
• blog-article: статьи для блога сайта.

Что устаревает первым

Названия хостингов и их бесплатные лимиты, как именно хостинг делает новую сборку основной, ограничения Telegram Bot API. Порядок работы и правило выката по слову владельца не устаревают. Проверено на октябрь 2026.

Глубже

Полные шаблоны брифов, разборы реальных сайтов и настройку этого порядка под вашу команду студия AIVFX показывает в работе и в обучении: https://aivfx.ru.