# ИИ-конвейер вёрстки и размещения сайтов для дизайнера — минуты вместо недель

## Зачем это дизайнеру

Вы нарисовали макет. Он вам нравится, сетка выверена, отступы на месте. Дальше начинается знакомое: заказчик смотрит на картинку в Фигме и говорит «ну… наверное, нормально», потому что не умеет читать макеты. Он не видит, как страница поведёт себя на его телефоне, что будет при нажатии на кнопку и как всё это выглядит, когда текста не идеальные три строки, а девять.

А вы не видите этого сами. Макет — это неподвижная картинка. Проверить его можно только сверстав, а верстальщик появляется уже после согласования, когда переделывать поздно и дорого.

### Что меняется

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

- Заказчику вы отправляете ссылку, а не файл. Он открывает её на своём телефоне, листает, тыкает — и наконец понимает, что вы ему предлагаете. Обсуждение из «мне кажется, тут пусто» превращается в конкретные правки.
- Вы отлаживаете макет на реальном материале. Видно, где длинное название товара ломает карточку, где на узком экране колонки наезжают друг на друга, где шрифт, красивый в Фигме, нечитаем на настоящем экране. Эти вещи всплывают сразу, а не через месяц у верстальщика.
- Правки идут кругами по пять минут. Написали «сделай карточки крупнее и убери тень» — через несколько минут смотрите результат по той же ссылке. Не через неделю и не через подрядчика.
- В конце заказчик получает архив. Zip с готовыми файлами сайта, который его собственный технический специалист разворачивает на боевом хостинге как есть. Вы отдаёте не картинку и не обещание, а работающий продукт.
### Что это не заменяет

Честно о границах. Это отличный прототип и витрина — лендинг, промо-страница, каталог, сайт-визитка. Здесь не появятся сами по себе приём оплаты, личные кабинеты с настоящей регистрацией, связь с базой товаров и складом. Для этого нужен разработчик.

Но до разработчика дело часто и не доходит: значительная часть заказов — это как раз красивый рабочий сайт без сложной начинки. А там, где разработчик нужен, ваш прототип становится для него понятным техническим заданием — гораздо более внятным, чем набор картинок.

### Из чего это собрано

Всего два инструмента, оба вам, скорее всего, уже знакомы хотя бы по названию.

- Vtorum — рабочее пространство с заметками и таблицами: здесь вы ставите задачи и следите за их выполнением. Как система управления задачами используется бесплатно.
- Claude — помощник от Anthropic, который умеет не только отвечать, но и работать с файлами и командами: он и будет верстать сайты и выкладывать их.
Всё остальное — сервер, домен, веб-сервер — это места, где они работают, а не отдельные программы, которые придётся осваивать.

> Коротко: вы продолжаете делать то, что умеете, — рисовать. Просто теперь между вашим макетом и тем, что видит заказчик, не стоит очередь из людей и недель ожидания.

---

> Эта инструкция для тех, кто не программирует. Всю техническую работу сделает Claude — вам нужно завести пару учётных записей, понажимать кнопки в Vtorum и сказать Claude нужные слова. Готовые фразы приведены дословно: их можно копировать целиком.

## Самый простой способ пройти эту инструкцию

Читать её целиком не обязательно. Отдайте эту страницу самому Claude и попросите провести вас по шагам — он спросит то, что нужно именно вам, дождётся ответа и сделает всё сам, а вам останется нажимать кнопки в Vtorum и подтверждать покупки.

Скопируйте ссылку на эту страницу (или её текст) и напишите Claude:

```markdown
Вот инструкция, как собрать автоматического помощника по вёрстке сайтов:
<вставьте сюда ссылку на эту страницу или её текст>

Проведи меня по ней по шагам. Правила такие:
— Веди по одному шагу за раз, не вываливай всё сразу.
— Перед каждым шагом объясни простыми словами, что мы сейчас делаем и зачем.
— Спрашивай у меня то, что знаю только я: какой у меня домен, какой сервер,
  какие ссылки на таблицы, какой токен.
— Всё, что можно сделать самому, делай сам и показывай результат.
— Если я где-то должен нажать кнопку в интерфейсе — скажи точно, где именно.
— Дождись от меня подтверждения, прежде чем идти дальше.

Начни с того, что помоги мне выбрать: способ 1 (отдельный сервер)
или способ 2 (на моём компьютере). Задай нужные вопросы и посоветуй.
```

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

> Даже если пойдёте по инструкции сами, читать её от корки до корки незачем. Дойдите до раздела «Два способа», выберите свой — и дальше идите по шагам. Всё остальное можно смотреть по мере надобности.

---

## Что получится в итоге

Вы ставите задачу в таблицу: «сделай страницу контактов, вот макет». Через пять минут её забирает Claude — верстает сайт, выкладывает в интернет, проверяет, как он выглядит на телефоне и на компьютере, прикладывает архив с файлами и возвращает задачу с пометкой «готово, проверьте».

Ваш компьютер при этом может быть выключен. Всё происходит на сервере, который работает круглосуточно.

![Всё живёт на одном сервере: помощник, файлы сайтов и стенд, где они открываются](https://notes.vtorum.net/api/public/web/%D1%81%D0%B2%D0%BE%D0%B8-%D0%BF%D0%BE%D0%BC%D0%BE%D1%89%D0%BD%D0%B8%D0%BA-%D0%BF%D0%BE-%D1%81%D0%B0%D0%B8-%D1%82%D0%B0%D0%BC-%D0%BF%D0%BE%D1%88%D0%B0%D0%B3%D0%BE%D0%B2%D0%B0%D1%8F-%D0%B8%D0%BD%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%86%D0%B8%D1%8F-4dcf982a/assets/72e2a6b2-16f6-4138-9404-52f7c9bf5d0d/raw)

## Два способа: с сервером и без

Всё, что описано дальше, строится вокруг отдельного сервера — это способ 1. Но есть и упрощённый путь, способ 2, без сервера вообще. Выберите сразу: от этого зависят и дальнейшие шаги, и расходы.

### Способ 1. Отдельный сервер — то, что описано в этой инструкции

Помощник живёт на арендованном сервере и работает круглосуточно. Ваш компьютер нужен только чтобы ставить задачи — можно закрыть ноутбук, уехать, лечь спать: задачи всё равно будут делаться.

- Плюс: работает само, без вашего участия.
- Плюс: сайты открываются с того же сервера, отдельный хостинг не нужен.
- Минус: сервер стоит около 2000–2500 ₽ в месяц.
- Минус: настройка занимает пару часов.
### Способ 2. Без сервера, на своём компьютере

Claude работает прямо на вашем компьютере и запускается по расписанию. Сервер арендовать не нужно — но нужно место, куда выкладывать готовые сайты: подойдёт любой обычный хостинг, к которому у вашего компьютера есть доступ. Это может быть самый дешёвый тариф за 200–300 ₽ в месяц, лишь бы у него был доступ по SSH или FTP и своё доменное имя.

- Плюс: дешевле и настраивается быстрее — шаги про сервер и стенд пропускаются.
- Плюс: всё под рукой, файлы сайтов лежат в обычной папке на вашем диске.
- Минус, главный: компьютер должен быть включён и не спать. Закрыли крышку — помощник остановился до следующего открытия.
- Минус: перезагрузка ради обновлений, поездка, разрядившийся ноутбук — всё это паузы в работе.
- Минус: пока помощник работает, компьютер занят и может ощутимо шуметь вентилятором.
> На ноутбуке придётся отдельно запретить уход в сон при закрытой крышке или при простое — иначе расписание будет срабатывать через раз, и вы решите, что помощник сломался. На macOS это делается в настройках экономии энергии, на Windows — в схеме электропитания. Claude подскажет точные шаги для вашей системы, если спросить.

### Что меняется в способе 2

Инструкция дальше остаётся той же по смыслу, отличий немного:

1. Шаги 1 и 2 пропускаете — сервер не арендуете, Claude у вас уже установлен на компьютере.
1. Шаг 3 заменяете покупкой обычного хостинга: домен и сертификат там обычно настраиваются кнопками в панели, а адреса сайтов будут вида https://мойдомен.ру/магазин.
1. Шаги 4 и 5 — без изменений: таблицы и пропуск для помощника нужны одинаково.
1. На шаге 6 говорите Claude, что помощник живёт на этом же компьютере, и указываете доступ к хостингу вместо сервера.
Готовая фраза для способа 2:

```markdown
Собери на моём компьютере автоматического помощника по вёрстке сайтов.
Отдельного сервера нет — всё работает здесь.

Данные:
— Vtorum: https://мой-vtorum.ру, токен системного пользователя vtorum_XXXX
— Таблица задач: <ссылка>
— Таблица сайтов: <ссылка>
— Хостинг для сайтов: <адрес, логин и способ доступа>, домен https://мойдомен.ру
— Файлы сайтов держим в папке: <путь к папке на моём компьютере>

Работать должен так же, как если бы стоял на сервере: раз в пять минут
смотрит задачи через API Vtorum, берёт одну в статусе todo, верстает,
проверяет вёрстку браузером, выкладывает на хостинг, прикладывает zip
к задаче и ставит статус test.

Настрой запуск по расписанию средствами моей системы и объясни, как
запретить компьютеру уходить в сон, иначе расписание будет пропускаться.
```

> Начать можно со способа 2, а перейти на способ 1 позже: таблицы, пропуск и правила работы останутся теми же, переносить придётся только сам запуск и файлы сайтов. Так что если сомневаетесь — пробуйте на своём компьютере, а сервер арендуете, когда убедитесь, что это вам подходит.

---

### Сколько это стоит

Считаем по двум статьям — подписка Claude и место, где всё работает. Цены на подписку приведены на сентябрь 2026, актуальные всегда на claude.com/pricing.

Vtorum — бесплатно

Как система управления задачами Vtorum ничего не стоит. Заводите таблицы, ведёте задачи, выпускаете пропуск для помощника — всё это в бесплатном использовании. Отдельно платить за то, чтобы этот конвейер работал, не нужно.

Подписка Claude

Минимальный тариф, в котором есть работа в терминале, — Pro: 20 $ в месяц (или 17 $ при оплате за год). В бесплатном тарифе терминала нет, поэтому совсем без подписки не обойтись.

Дальше расчёт зависит от того, какой способ вы выбрали:

- Способ 1, сервер — закладывайте Max, от 100 $ в месяц. Помощник просыпается каждые пять минут круглосуточно, и даже холостые проверки расходуют лимит. На Pro такой режим упрётся в ограничения довольно быстро: у него есть предел и на пятичасовую сессию, и на неделю. Max даёт в 5 или в 20 раз больше — какой из вариантов нужен, зависит от того, сколько задач вы реально ставите.
- Способ 2, свой компьютер — обычно хватает Pro за 20 $. Помощник работает, только пока компьютер включён, то есть в ваши рабочие часы. Расход выходит соразмерным обычной работе с Claude.
> Начните с Pro в любом случае. Если упрётесь в лимиты — это будет видно сразу, помощник просто перестанет отвечать и напишет об этом в журнале. Тогда и переходите на Max: тариф меняется в любой момент, а переплачивать заранее незачем.

Где всё работает

- Аренда сервера — примерно 2000–2500 ₽ в месяц. Только для способа 1.
- Обычный хостинг — 200–300 ₽ в месяц. Только для способа 2, чтобы сайты где-то открывались.
- Домен — около 1000 ₽ в год, если своего ещё нет. Нужен в обоих случаях.
Итого

- Способ 1, сервер: 20–100 $ подписка плюс 2000–2500 ₽ за сервер. Дороже, но работает само, пока вы спите. Настройка — 2–4 часа.
- Способ 2, свой компьютер: около 20 $ подписка плюс 200–300 ₽ за хостинг. Самый дешёвый вход. Настройка — около часа.
В обоих случаях бо́льшая часть времени настройки — это ожидание, пока Claude что-то устанавливает; вашего участия там немного.

## Как разговаривать с Claude

Claude работает в терминале — это чёрное окно, где вместо кнопок текст. Пугаться не нужно: вы пишете обычными словами, что нужно сделать, а он делает и рассказывает, что получилось.

Три правила, которые сильно облегчат жизнь:

1. Говорите, что хотите получить, а не как это сделать. «Настрой сервер, чтобы там работал агент» — правильно. Команды он подберёт сам.
1. Если чего-то не поняли — спрашивайте прямо там же. «Объясни простыми словами, что ты сейчас сделал» — нормальный вопрос.
1. Если что-то сломалось — покажите ошибку. Скопируйте текст ошибки и вставьте с фразой «вот что выдало, разберись».
> Claude никогда не спишет деньги и не купит сервер за вас — покупки вы делаете сами. Он также спросит разрешения перед всем, что трудно отменить.

---

## Шаг 1. Сервер

Сервер — это компьютер, который всегда включён и стоит в дата-центре. Именно на нём будет жить ваш помощник.

### Что заказать

У любого хостинг-провайдера возьмите VPS (виртуальный сервер) с такими параметрами:

- 4 ядра процессора, 8 ГБ оперативной памяти, 60 ГБ диска — этого хватит с запасом;
- операционная система — Ubuntu последней версии;
- страна размещения — важный момент, см. предупреждение ниже.
> Claude доступен не во всех странах. Перед оплатой уточните у провайдера, из какой страны будет ваш сервер, и выберите ту, где сервис работает. Если ошибиться, ничего не заработает, а деньги уже уйдут.

После оплаты провайдер пришлёт вам три вещи: адрес сервера (набор цифр вроде 203.0.113.10), логин (обычно root) и пароль. Сохраните их — сейчас понадобятся.

### Что сказать Claude

Откройте Claude на своём компьютере в папке, где вам удобно, и напишите:

```markdown
У меня новый сервер: адрес 203.0.113.10, логин root, пароль я введу сам.
Проверь, что он подходит для работы Claude Code: посмотри модель процессора
и доступность api.anthropic.com. Если что-то не так — скажи, что просить
у хостера. Если всё хорошо — настрой вход по ключу, чтобы пароль больше
не спрашивался, и поставь всё нужное: git, tmux, rsync, zip и Node.js.
```

Claude проверит сервер и скажет, годится он или нет. Это самая важная проверка: бывает, что провайдер выдаёт слишком старый процессор, и тогда ничего работать не будет. Лечится письмом в поддержку — Claude подскажет, что именно попросить.

### Как вы будете входить на сервер

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

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

> Пароль от сервера вводите только вы сами и только в окно подключения. Не пишите его в переписке с Claude — он попросит, чтобы вы ввели его лично, и правильно сделает. Пароль в истории чата живёт дольше, чем нужно.

Почему ключ лучше пароля, а не просто «удобнее»:

- пароль можно подобрать перебором, ключ — практически нет;
- помощник работает сам, без вас: спрашивать пароль ему было бы не у кого;
- ключ нигде не всплывает в переписке и в журналах.
### Ярлык, чтобы не запоминать команды

Заходить на сервер время от времени всё-таки придётся — посмотреть, чем занят помощник, или что-то поправить. Чтобы не вспоминать каждый раз длинную команду, попросите сделать ярлык:

```markdown
Сделай мне на рабочем столе ярлык для входа на сервер: чтобы по двойному
щелчку открывался терминал, подключался по ключу без пароля и сразу
запускал Claude в рабочей папке. Объясни, как из него выйти.
```

Дальше вход на сервер — это двойной щелчок по значку, как по любой программе.

> Попросите настроить ярлык так, чтобы работа продолжалась на сервере даже после закрытия окна. Тогда можно закрыть терминал посреди долгой задачи, вернуться через час и увидеть всё на том же месте — а не начинать заново. Claude знает, как это делается, и покажет сочетание клавиш для выхода.

---

## Шаг 2. Claude на сервере

Теперь нужно, чтобы Claude жил не только на вашем компьютере, но и на сервере — иначе он не сможет работать, пока вы спите.

```markdown
Установи Claude Code на сервер и подготовь всё для входа:
запусти авторизацию в сессии tmux и дай мне ссылку для входа в браузере.
```

Claude пришлёт вам длинную ссылку. Откройте её в браузере, войдите в свою учётную запись — там появится код.

> Код вставляйте сами, не пересылайте его в переписку. Claude подскажет команду, которой вы подключитесь к серверу и введёте код напрямую. Этот код — временный ключ от вашей учётной записи, и в истории чата ему не место.

Дальше попросите проверить, что всё живо:

```markdown
Проверь, что Claude на сервере работает: задай ему какой-нибудь простой
вопрос и покажи ответ.
```

---

## Шаг 3. Домен и стенд для сайтов

Сайты, которые сделает помощник, должны где-то открываться. Отдельный хостинг для этого не нужен — они будут жить на том же сервере, каждый в своём подкаталоге. Получится стенд: адрес, по которому вы и заказчик смотрите свежие версии.

Выглядеть это будет так: https://мойдомен.ру/магазин, https://мойдомен.ру/лендинг, https://мойдомен.ру/визитка — по одному подкаталогу на сайт.

### Домен

Нужен любой домен — можно самый дешёвый, он же не для публики, а для показа работ. Если своего нет, купите у любого регистратора, это около 1000 ₽ в год.

После покупки домен нужно направить на сервер. В панели регистратора найдите управление DNS и создайте запись типа A, указав в ней адрес вашего сервера (те самые цифры вида 203.0.113.10). Если не разберётесь — это как раз тот случай, когда стоит спросить Claude: он объяснит на примере вашего регистратора.

> Изменения DNS расходятся по интернету не мгновенно — обычно от нескольких минут до пары часов. Если сразу после настройки домен «не работает», это нормально: подождите и проверьте снова.

### Что сказать Claude

```markdown
Настрой на сервере веб-сервер для стенда с сайтами.

Домен: мойдомен.ру, он уже направлен на этот сервер A-записью.

Нужно:
— поставить nginx и настроить его на папку, где будут лежать сайты;
— каждый сайт открывается своим подкаталогом: мойдомен.ру/имя-сайта;
— выпустить бесплатный сертификат Let's Encrypt, чтобы работал https,
  и настроить автоматическое продление;
— перенаправлять http на https;
— проверить, что всё поднялось, и показать мне результат.

Потом положи туда простую заглушку и дай ссылку, чтобы я убедился,
что открывается.
```

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

> Сертификат нужен не для красоты. Без https браузеры показывают предупреждение «сайт не защищён», а некоторые возможности вёрстки просто не работают. Заодно ссылку на стенд будет не стыдно отправить заказчику.

### Про порядок

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

## Шаг 4. Таблицы в Vtorum

Здесь начинается ваша часть — та, где всё наглядно. Нужно завести две таблицы: справочник сайтов и список задач. Есть два пути: создать их руками или поручить Claude.

### Быстрый путь: пусть таблицы создаст Claude

Весь этот шаг можно не делать руками. Если дать помощнику доступ к странице, внутри которой должен жить конвейер, он создаст обе таблицы со всеми столбцами сам — с правильными типами, вариантами статуса и связью между ними.

> Тогда порядок шагов меняется местами: сначала делаете шаг 5 (выпускаете пропуск), потом возвращаетесь сюда. Доступ при этом даёте не двум таблицам — их ещё нет, — а странице, внутри которой они появятся, и обязательно с распространением на вложенное содержимое.

Порядок такой:

1. Создайте в Vtorum обычную страницу — она будет папкой для конвейера. Назовите как удобно, например «Сайты и задачи».
1. Сделайте шаг 5: выпустите системного пользователя и скопируйте токен.
1. Откройте созданную страницу, нажмите «Доступ», добавьте системного пользователя с правом редактирования и включите распространение на вложенные страницы.
1. Скопируйте ссылку на эту страницу и отдайте Claude фразу ниже.
```markdown
Создай в Vtorum две связанные таблицы для конвейера вёрстки сайтов.

— Vtorum: https://мой-vtorum.ру, токен vtorum_XXXX
— Родительская страница: <ссылка на страницу>
  (доступ системному пользователю к ней уже выдан)

Таблица «Сайты»:
— Название — заголовок
— путь — текст (сюда потом впишешь путь сам, пока пусто)
— web — URL, адрес сайта на стенде

Таблица «Задачи»:
— Задача — заголовок
— status — выбор, ровно пять вариантов латиницей:
  todo, in progress, test, done, cancel
— сайт — связь с таблицей «Сайты»
— url — поле связанной записи: тянет «web» из связанного сайта
— DEV · Последняя ошибка — текст
— DEV · Обновлено — дата

Создавай через API Vtorum (/v2, документация на /doc этого же Vtorum).
Потом покажи ссылки на обе таблицы и проверь, что связь работает.
```

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

> Пройти шаг руками тоже полезно — так вы поймёте, как всё устроено, и потом сможете менять таблицы под себя. Описание ниже остаётся: читайте его как объяснение, что именно создал помощник и зачем нужен каждый столбец.

### Обычный путь: создаём руками

### Как создать таблицу

Откройте страницу, где будет жить ваш конвейер. Поставьте курсор на пустую строку, наберите / и выберите в появившемся меню «База данных». Сразу дайте ей название.

![Меню вставки блока — выберите «База данных»](https://notes.vtorum.net/api/public/web/%D1%81%D0%B2%D0%BE%D0%B8-%D0%BF%D0%BE%D0%BC%D0%BE%D1%89%D0%BD%D0%B8%D0%BA-%D0%BF%D0%BE-%D1%81%D0%B0%D0%B8-%D1%82%D0%B0%D0%BC-%D0%BF%D0%BE%D1%88%D0%B0%D0%B3%D0%BE%D0%B2%D0%B0%D1%8F-%D0%B8%D0%BD%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%86%D0%B8%D1%8F-4dcf982a/assets/2afeb138-379f-4be3-b912-cebc580fcbd8/raw)

### Таблица «Сайты»

Это справочник: один сайт — одна строка. Кроме названия нужны два столбца:

- путь — где файлы сайта лежат на сервере. Заполнит Claude, вам вписывать не нужно;
- web — тип «URL». Адрес, по которому сайт открывается на вашем стенде, например https://мойдомен.ру/магазин. Последнее слово в адресе станет именем подкаталога на сервере. Тип именно URL, а не текст: тогда адрес кликается.
> Если оставить «путь» пустым — это команда «сайта ещё нет, создай его с нуля». Так вы заводите новый сайт: просто добавляете строку с адресом и ставите задачу.

### Таблица «Задачи»

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

- Задача — название, оно уже есть по умолчанию;
- status — тип «Выбор». Главный переключатель, о нём ниже;
- сайт — тип «Связь», указывает на таблицу «Сайты». Без него задача не возьмётся;
- url — тип «Поле связанной записи». Показывает адрес сайта прямо в строке задачи, чтобы открывать результат одним щелчком. Заполнять его не нужно — он подтягивает web из связанного сайта сам;
- DEV · Последняя ошибка — тип «Текст». Сюда Claude напишет, если не справился;
- DEV · Обновлено — тип «Дата». Отметка времени, заполняется сама.
> Столбец «url» настраивается так: тип «Поле связанной записи», затем выбираете связь «сайт» и в ней поле «web». Ничего дублировать не придётся — адрес хранится в справочнике сайтов в одном месте, а в задаче просто показывается.

> Отдельных полей под описание и файлы нет намеренно. Тело записи — это полноценный документ: пишите абзацами, вставляйте скриншоты и макеты прямо в текст, разбивайте на пункты. Помощник читает его целиком и связывает каждую картинку с текстом, который стоит перед ней.

### Столбец «status» — ваш пульт управления

Создайте столбец типа «Выбор» и добавьте в него ровно шесть вариантов. Названия пишите латиницей, точно как здесь:

```plain text
todo
in progress
test
done
cancel
```

![Столбец status: тип «Выбор», пять вариантов латиницей](https://notes.vtorum.net/api/public/web/%D1%81%D0%B2%D0%BE%D0%B8-%D0%BF%D0%BE%D0%BC%D0%BE%D1%89%D0%BD%D0%B8%D0%BA-%D0%BF%D0%BE-%D1%81%D0%B0%D0%B8-%D1%82%D0%B0%D0%BC-%D0%BF%D0%BE%D1%88%D0%B0%D0%B3%D0%BE%D0%B2%D0%B0%D1%8F-%D0%B8%D0%BD%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%86%D0%B8%D1%8F-4dcf982a/assets/60abcaf2-d4e8-473a-b44b-5eb87b45ae96/raw)

Что они значат:

- todo — «берись в работу». Единственный статус, по которому Claude начинает делать;
- in progress — «взял, работаю». Ставит сам Claude;
- test — «сделал и выложил, посмотрите». Ставит сам Claude, когда закончил;
- done и cancel — закрытые задачи, их он не трогает;
> Отдельного статуса на публикацию нет намеренно. Помощник выкладывает сайт сразу, как закончил вёрстку, — стенд всегда показывает последнее состояние. Статус test означает «уже опубликовано, посмотрите глазами», а не «ждёт вашей команды».

> Не переименовывайте эти варианты и не переводите их на русский. Claude ищет их по названию — переименуете, и он просто перестанет видеть задачи, без всякой ошибки.

### Столбец «сайт»

Создайте столбец типа «Связь» — Vtorum спросит, с какой таблицей связывать, выберите «Сайты». Теперь в каждой задаче можно будет выбрать сайт из списка.

![Столбец «сайт»: тип «Связь» с таблицей «Сайты»](https://notes.vtorum.net/api/public/web/%D1%81%D0%B2%D0%BE%D0%B8-%D0%BF%D0%BE%D0%BC%D0%BE%D1%89%D0%BD%D0%B8%D0%BA-%D0%BF%D0%BE-%D1%81%D0%B0%D0%B8-%D1%82%D0%B0%D0%BC-%D0%BF%D0%BE%D1%88%D0%B0%D0%B3%D0%BE%D0%B2%D0%B0%D1%8F-%D0%B8%D0%BD%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%86%D0%B8%D1%8F-4dcf982a/assets/7669e9f3-d543-4fb7-b484-c27519ca8730/raw)

### Где взять ссылки на таблицы

На следующем шаге эти ссылки понадобятся, чтобы помощник знал, куда ходить. Взять их можно двумя способами.

1. Через меню таблицы — надёжнее. Откройте таблицу, нажмите «···» («Ещё действия») справа от её названия и выберите «Скопировать ссылку». Ссылка окажется в буфере обмена.
1. Из адресной строки браузера — просто откройте таблицу и скопируйте адрес целиком.
![Ссылка на таблицу: из адресной строки или через меню «···»](https://notes.vtorum.net/api/public/web/%D1%81%D0%B2%D0%BE%D0%B8-%D0%BF%D0%BE%D0%BC%D0%BE%D1%89%D0%BD%D0%B8%D0%BA-%D0%BF%D0%BE-%D1%81%D0%B0%D0%B8-%D1%82%D0%B0%D0%BC-%D0%BF%D0%BE%D1%88%D0%B0%D0%B3%D0%BE%D0%B2%D0%B0%D1%8F-%D0%B8%D0%BD%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%86%D0%B8%D1%8F-4dcf982a/assets/e15aed38-f348-4c75-b160-2757e9305b98/raw)

Ссылка выглядит так: https://ваш-vtorum.ру/#/database/292cfe11-ceb1-4390-a198-9e7880386a7c. Длинный набор букв и цифр в конце — это и есть опознавательный знак таблицы. Копируйте ссылку целиком, разбирать её не нужно: Claude сам возьмёт из неё что требуется.

> Соберите обе ссылки заранее — на таблицу «Сайты» и на таблицу «Задачи» — и положите рядом с токеном. На шаге сборки помощника они понадобятся вместе.

### Удобный вид — доска

Работать со списком неудобно. Нажмите «Новое представление», выберите «Доска» и сгруппируйте по столбцу status. Получатся колонки, между которыми задачи перетаскиваются мышью.

![Доска задач: перетащили в todo — помощник начал работать](https://notes.vtorum.net/api/public/web/%D1%81%D0%B2%D0%BE%D0%B8-%D0%BF%D0%BE%D0%BC%D0%BE%D1%89%D0%BD%D0%B8%D0%BA-%D0%BF%D0%BE-%D1%81%D0%B0%D0%B8-%D1%82%D0%B0%D0%BC-%D0%BF%D0%BE%D1%88%D0%B0%D0%B3%D0%BE%D0%B2%D0%B0%D1%8F-%D0%B8%D0%BD%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%86%D0%B8%D1%8F-4dcf982a/assets/349cb167-4bfb-4fae-94bb-ba1063e716e3/raw)

Перетащили карточку в колонку todo — Claude начал работать. Перетащили обратно — остановился. Это и есть всё управление.

---

## Шаг 5. Пропуск для помощника

Claude на сервере — отдельный «сотрудник», и ему нужен свой пропуск в ваши таблицы. Пароль от вашей учётной записи для этого не используется и не должен нигде появляться.

### Выпустите системного пользователя

1. Откройте в Vtorum Настройки → Системные пользователи.
1. Нажмите создать, назовите понятно — например «Агент сайтов».
1. Vtorum покажет токен — длинную строку, начинающуюся с vtorum_. Скопируйте её сразу: второй раз она не покажется.
> Токен — это пропуск. Кто им владеет, тот может читать и менять то, к чему вы дали доступ. Храните его как пароль. Если он куда-то утёк, в тех же настройках есть кнопка выпустить новый — старый сразу перестанет работать.

### Дайте доступ к таблицам

Токен сам по себе ничего не открывает — доступ выдаётся отдельно, к каждой таблице. Откройте таблицу «Сайты», нажмите «Доступ», найдите в списке вашего системного пользователя и дайте ему право редактирования. Повторите для таблицы «Задачи».

Так помощник видит ровно две таблицы и ничего больше — остальные ваши страницы для него закрыты.

> Если вы пошли быстрым путём и таблицы создавал Claude, доступ вы уже выдали — на родительскую страницу, с распространением на вложенное. Отдельно по таблицам его выдавать не нужно.

---

## Шаг 6. Собрать помощника

Теперь самое главное — и одновременно самое простое для вас. Всю сборку сделает Claude, вам нужно дать ему исходные данные.

Скопируйте фразу ниже, подставьте свои адреса и токен, и отправьте её Claude:

```markdown
Собери на сервере автоматического помощника по вёрстке сайтов.

Данные:
— Vtorum: https://мой-vtorum.ру, токен системного пользователя vtorum_XXXX
— Таблица задач: <ссылка на страницу таблицы>
— Таблица сайтов: <ссылка на страницу таблицы>
— Стенд с сайтами уже настроен на этом же сервере, домен https://мойдомен.ру.
  Каждый сайт открывается подкаталогом: https://мойдомен.ру/имя-сайта

Как он должен работать:
1. Раз в пять минут смотрит таблицу задач через API Vtorum (/v2, токен в
   заголовке Authorization: Bearer). Документация API — на /doc в самом Vtorum.
2. Берёт ОДНУ самую старую задачу в статусе todo и переводит её в in progress.
3. Читает тело задачи целиком: текст и вставленные в него картинки —
   это и есть задание. Макеты скачивает и смотрит.
4. Проверяет вёрстку headless-браузером на ширине компьютера и телефона,
   смотрит снимки сам и чинит найденное.
5. Выкладывает сайт и проверяет его уже по живому адресу — тому,
   что указан в поле web у сайта.
6. Дописывает в конец задачи блок с коротким отчётом по-русски:
   что сделано, что не получилось, на что обратить внимание.
   Отчёт пишется всегда, даже если задача не выполнена.
7. Собирает zip с файлами сайта и прикладывает последним блоком к задаче.
8. Ставит статус test. Отдельной команды на публикацию нет:
   выкладка — обязательная часть выполнения задачи.

Важные правила:
— Взяв задачу и поставив in progress, закрывай её на замок:
  PATCH /v2/pages/<id задачи> с телом {"locked": true}.
  Снимай замок обязательно при любом выходе — и когда закончил,
  и когда не справился, и когда встал на паузу — запросом,
  в теле которого нет ничего, кроме {"locked": false}.
  Заблокированная запись отвечает 423 на любые другие изменения,
  поэтому снимай замок ДО того, как менять статус.
— Если статус задачи перестал быть todo или in progress — немедленно
  остановиться, снять замок и ничего больше не менять.
— Не брать задачу, которую правили меньше пяти минут назад.
— Если не справился: вернуть статус todo и написать причину по-русски
  в поле «DEV · Последняя ошибка». Это способ задать мне вопрос.
— Задание всегда искать в теле записи, а не в названии: название — только
  ярлык. Картинки в теле связаны с текстом, который идёт перед ними.
— Если у сайта пустое поле «путь» — создать репозиторий самому
  и вписать путь обратно в таблицу «Сайты».
— Перед выкладкой убедиться, что выкладывается именно папка сайта.

Поставь всё нужное, напиши инструкцию помощнику, настрой запуск раз в пять
минут, проверь вхолостую и покажи, что получилось.
```

Claude поставит браузер для проверки вёрстки, напишет инструкцию помощнику, настроит расписание и прогонит вхолостую. Это займёт минут двадцать, большая часть — установка.

Когда закончит, попросите объяснить, что где лежит:

```markdown
Расскажи простыми словами, где что находится: где инструкция помощника,
где смотреть его отчёты, как остановить и как запустить заново.
```

---

## Шаг 7. Первая задача

Начните с чего-нибудь маленького — так вы увидите весь цикл целиком, а цена ошибки будет невелика.

1. В таблице «Сайты» добавьте строку: название и адрес в поле web. Поле «путь» оставьте пустым — пусть создаст сам.
1. В таблице «Задачи» создайте запись и откройте её. Прямо в теле опишите обычными словами, что нужно сделать, и вставьте туда же макеты и скриншоты — так же, как написали бы это коллеге.
1. Выберите сайт в столбце сайт.
1. Поставьте статус todo и закройте ноутбук.
Через пять минут задача перейдёт в in progress, а ещё через некоторое время — в test, с готовым сайтом и приложенным архивом.

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

---

---

## Как писать задачи

Это главный навык во всей затее. Помощник сделает ровно то, что понял из вашего текста, — и чем точнее вы пишете, тем меньше кругов правок. Ниже — приёмы, которые сложились на практике.

### Главное правило: фраза — и сразу под ней картинка

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

Выглядит это так:

```plain text
убери салатный овал из заголовка
[скриншот заголовка]

растяни картинку на ширину баннера, чтобы не было видно границ
[скриншот баннера]

все иконки в этих карточках увеличь в 1,7 раза
[скриншот карточек]
```

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

### Первая строка задаёт рамку

Начните с фразы, которая говорит, что вообще происходит. От неё зависит, как помощник прочитает всё остальное.

- Правки существующего: «внеси правки к этому сайту https://мойдомен.ру/магазин»
- Новый сайт по образцу: «на основе сайта https://мойдомен.ру/магазин создай новый с такими корректировками:»
- Почти копия: «сделай точно такой же сайт https://мойдомен.ру/магазин, но изменения будут только в главном баннере»
- С нуля по макетам: «свёрстай сайт по макетам ниже» — и дальше макеты по разделам, сверху вниз.
### Обозначайте границы

Самая полезная строчка в конце задачи — та, что говорит, чего не трогать: «Остальные блоки оставь без изменений». Без неё помощник может решить, что заодно стоит подтянуть и соседние места, и вы получите правки там, где не просили.

То же и про мобильную версию: если правка касается только телефона, скажите об этом заголовком — «в мобильной версии» — и соберите такие пункты вместе.

### Как формулировать сами правки

Работают четыре приёма, все проверены на практике.

- Глагол + что + где. «Убери салатный овал из заголовка», «поменяй подвал», «растяни картинку на ширину баннера». Коротко и однозначно.
- Числа вместо «покрупнее». «Увеличь иконки в 1,7 раза» помощник выполнит точно, «сделай побольше» — как получится. Если точного числа нет, скажите хотя бы «примерно вдвое».
- Сравнение с тем, что уже есть. «Синяя кнопка должна быть такого же цвета, как форма подписки», «углы у карточек такие же, как в первом блоке». Это надёжнее, чем называть цвет на глаз.
- Описание поведения, а не только вида. Движение и реакции макетом не покажешь, их нужно проговорить: «верхняя строка картинок медленно движется слева направо, зациклённо», «фотографии идут каруселью без остановки».
### Называйте блоки так, как они выглядят

Помощник видит страницу целиком, поэтому понимает обиходные названия: «главный баннер», «второй блок новинки-хиты», «третий блок коллекции», «блок с соцсетями», «подвал», «карточки в каталоге». Не выдумывайте технических имён — пишите так, как назвали бы это коллеге.

Если блоков много и легко перепутать, помогает нумерация сверху вниз: «второй блок», «третий блок». Именно так и делают в живых задачах.

### Чего лучше не делать

- Не сваливайте десять правок в один абзац. Разбейте на пункты — так их и выполнят по одной, ничего не потеряв.
- Не пишите «сделай красиво» и «мне не нравится». Помощник не угадает, что именно; получите случайный результат и лишний круг.
- Не полагайтесь на название задачи. Оно только ярлык для доски. Всё существенное — в теле.
- Не дописывайте задачу после того, как поставили `todo`. Помощник может уже взять её в работу. Сначала допишите, потом переводите.
### Пример целиком

Так выглядит обычная задача на правки — короткая, с картинками между пунктами и с границей в конце:

```plain text
внеси правки к этому сайту https://мойдомен.ру/магазин

второй блок «новинки / хиты» должен быть на белом фоне,
карточки — с острыми углами, без скругления
[скриншот блока]

блок 3 «коллекции» — вот так
[макет коллекций]

синяя кнопка должна быть такого же цвета, как форма «подписаться»
[скриншот кнопки]

── в мобильной версии ──

убери салатный овал из заголовка
[скриншот на телефоне]

Остальные блоки оставь без изменений.
```

> Обратите внимание, насколько это короткий текст. Развёрнутых описаний не нужно: пара слов и картинка работают лучше, чем абзац рассуждений. Пишите так, как объяснили бы правку живому верстальщику, стоя рядом с экраном.

## Как этим пользоваться каждый день

### Поставить задачу

Откройте запись и опишите правки в её теле — как показано в разделе «Как писать задачи» выше. Выберите сайт, поставьте todo и закройте ноутбук.

### Остановить работу

Перетащите задачу из колонки todo в любую другую. Помощник остановится на ближайшем шаге сам — никаких кнопок «стоп» не нужно.

### Задача запирается на время работы

Пока помощник занят задачей, он закрывает её на замок: запись видно, но править нельзя — в интерфейсе появляется значок замка и надпись «Заблокировано». Как закончит, замок снимается сам.

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

- Хотите что-то дописать — сначала переведите задачу из in progress в любой другой статус. Помощник остановится на ближайшем шаге и снимет замок.
- Замок остался, а помощник давно закончил — такое бывает, если прогон оборвался. Снимите замок сами: щёлкните по значку замка в записи.
> Замок ставится только на ту задачу, которую помощник взял в работу. Остальные записи, справочник сайтов и прочие ваши страницы он не трогает.

### Понять, почему не сделано

Загляните в поле «DEV · Последняя ошибка». Там будет написано по-русски: не хватило макета, непонятно требование, не указан сайт. Это его способ задать вам вопрос — допишите недостающее и верните статус todo.

### Что помощник пишет в конце

Закончив, помощник добавляет в конец задачи блок с коротким отчётом — чтобы вы открыли запись и сразу поняли, что произошло, не разбираясь в журналах. Отчёт из трёх частей:

- Что сделано — конкретно, по пунктам: какие разделы правил, куда выложил.
- Что не получилось — честно: какой пункт не удалось выполнить и почему, где пришлось отступить от макета.
- На что обратить внимание — то, что вы иначе пропустите: сделанные допущения, временные решения, тексты-заглушки вместо настоящих, места, где нужно ваше решение.
Отчёт появляется всегда — даже когда задача не выполнена и вернулась в todo. Тогда в нём написано, что успел сделать и что помешало. Это и есть основной способ понять, чего от вас ждут.

> Читайте третий пункт внимательнее остальных. Именно там всплывают вещи, которые вы бы обнаружили только через неделю: что помощник подставил образец текста вместо настоящего, что решил спорный момент по-своему или что правка задела соседний блок.

### Забрать готовый сайт

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

### Заглянуть внутрь

Если хочется посмотреть, чем помощник занят прямо сейчас, попросите Claude:

```markdown
Посмотри, что сейчас делает помощник на сервере и как дела с последними
задачами. Объясни своими словами.
```

---

## Если что-то пошло не так

Почти всё чинится одной фразой Claude. Ниже — что говорить в типичных случаях.

### Задачи стоят в todo, ничего не происходит

```markdown
Помощник не берёт задачи из todo. Проверь, работает ли расписание,
смотри его журнал и скажи, в чём дело.
```

Чаще всего причина простая: варианты статуса переименовали, или расписание не включилось после перезагрузки сервера.

### Сайт выложился, но выглядит криво

Опишите проблему обычной задачей в таблице и приложите скриншот. Это не поломка, а обычная правка.

### Всё внезапно перестало работать после смены тарифа

```markdown
После смены конфигурации сервера всё сломалось. Проверь модель процессора
и доступность API, скажи, что просить у хостера.
```

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

### Хочу поменять правила работы помощника

```markdown
Поправь инструкцию помощника: <опишите словами, что изменить>.
Покажи, что получилось, и перезапусти.
```

### Хочу временно всё выключить

```markdown
Останови помощника, чтобы он не запускался. Напомни потом, как включить обратно.
```

---

## Чеклист

- [ ] Выбран способ: с отдельным сервером или на своём компьютере
- [ ] Куплен сервер, страна размещения подходит
- [ ] Claude проверил сервер и сказал, что процессор годится
- [ ] Вход на сервер работает по ключу, без пароля; ярлык на рабочем столе открывается
- [ ] Claude установлен на сервер и авторизован
- [ ] Домен направлен на сервер, стенд открывается по https
- [ ] Созданы таблицы «Сайты» и «Задачи» с нужными столбцами
- [ ] Столбец status содержит ровно шесть вариантов латиницей
- [ ] Столбец «сайт» связан с таблицей «Сайты»
- [ ] Сделано представление «Доска» с группировкой по статусу
- [ ] Выпущен системный пользователь, токен сохранён в надёжном месте
- [ ] Системному пользователю дан доступ к обеим таблицам
- [ ] Claude собрал помощника и прогнал его вхолостую
- [ ] Первая маленькая задача прошла весь путь до статуса test
---

> Если на каком-то шаге непонятно — не гадайте. Скопируйте нужный кусок этой инструкции в Claude и попросите объяснить простыми словами или сделать за вас. Он для этого и нужен.