website-build

---
name: website-build
description: "Builds a site for a studio or small business with an agent, from description to release. A short brief before work (how I understood it, defaults I take, up to 3 questions with ready answers, what the owner may have missed, what I will not do), references and style, the build, a mandatory browser check on phone and desktop, speed and console, a final design audit, site leads to Telegram as a pattern, a release queue in DEPLOY-QUEUE.md and batch release only on the owner's direct word, and a cold self-review by a separate agent at the end. Triggers: 'build a website', 'make a landing page', 'small business site', 'studio website', 'add a section to the site', 'prepare for release'. Triggers (RU): «сделай сайт», «собери лендинг», «сайт для студии», «страница услуг», «переделай сайт», «добавь раздел на сайт», «сайт-визитка», «подготовь к выкату»."
---

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

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

## Зачем

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

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

| Что | Зачем здесь |
|---|---|
| Claude Code или аналог | собирает сайт (React или Next.js) по приёмам, которые уже есть в проекте |
| Встроенный браузер агента | проверка на телефоне и компьютере; если скриншоты выходят чёрными, вёрстку меряют через JavaScript, а владельцу показывают в обычном Chrome |
| Хостинг: Vercel или свой VPS с nginx за Cloudflare | Vercel удобен для Next.js; статический сайт живёт на сервере. На nginx файл `.htaccess` не читается вообще, правила пишутся в конфиг nginx или в Cloudflare |
| Заявки: серверная функция, Telegram и Notion | форма шлёт на функцию, та параллельно пишет в Telegram владельцу и строкой в базу Notion; успех, если дошло хоть куда-то. Токен бота только на сервере |
| Деньги | на Vercel основная часть счёта это сборки, они считаются по процессорному времени, а работа готового сайта почти бесплатна. Поэтому выкат пачкой |
| Владелец | бриф, выбор стиля, слово «выкатывай» |

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

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

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

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

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.