С чего начать в соцсетях→
Вайбкодинг

Agentation: кликаешь по блоку сайта, Claude правит ровно его

Главная боль сайтов на нейросетях начинается после первой версии. Хочешь поменять одну кнопку, а приходится делать скриншот, объяснять, где она, и надеяться, что нейросеть поймёт. Agentation убирает эту переписку: кликаешь по блоку прямо на сайте, пишешь, что поменять, и Claude Code правит ровно этот элемент. Ниже ссылка, установка по шагам и как работать с правками.

Внутри: что такое Agentation и где его взять, установка в две команды, живая связь с Claude Code, промпт, который всё поставит за тебя, как писать правки и ограничения инструмента.

Что это и где взять

Agentation это панель, которая встраивается в твой сайт на время разработки. Кликаешь по любому элементу, и она собирает для нейросети точное описание: где он в коде, как называется, какой в нём текст.

  1. Сайт проекта: agentation.com. Код на GitHub: github.com/benjitaylor/agentation.
  2. Пользоваться можно бесплатно. Лицензия PolyForm Shield: запрещено только делать на его основе конкурирующий продукт.
  3. Работает с сайтами на React 18 и новее, в браузере на компьютере. На телефоне панели нет.
  4. Подходит любой агент: Claude Code, Codex, Cursor. С Claude Code есть прямая связь, о ней ниже.

Установка за две команды

Открой терминал в папке проекта.

Промпт
npm install agentation -D
  1. Добавь компонент в корень приложения: import { Agentation } from 'agentation' и строку <Agentation /> рядом с остальным содержимым.
  2. Оберни его проверкой режима разработки, чтобы посетители сайта панель не видели.
  3. Запусти сайт локально. Справа снизу появится панель Agentation.
Правила кода можно не запоминать: промпт ниже поручает всю установку Claude Code.

Живая связь с Claude Code

Без связи ты копируешь описание элемента и вставляешь его в чат. Со связью правка из браузера сразу попадает к Claude Code.

Промпт
claude mcp add agentation -- npx -y agentation-mcp server
  1. Выполни команду выше в терминале один раз.
  2. В компоненте укажи адрес связи: <Agentation endpoint="http://localhost:4747" />.
  3. Перезапусти Claude Code. Теперь клик и комментарий в браузере приходят ему напрямую.
С чего начать в соцсетях

Промпт: поставь всё за меня

Открой Claude Code в папке своего сайта и вставь целиком. Если связь выше ещё не подключена, он скажет об этом.

Промпт
Подключи к моему проекту Agentation, чтобы я мог кликать по элементам сайта и отправлять тебе правки. 1. Установи пакет agentation как dev-зависимость. 2. Добавь компонент <Agentation endpoint="http://localhost:4747" /> в корневой компонент приложения так, чтобы он появлялся только в режиме разработки и никогда не попадал в продакшн-сборку. Если проект на Next.js, сделай для него клиентский компонент. 3. Запусти сайт локально и скажи мне адрес. 4. Проверь, что панель Agentation видна в правом нижнем углу. Если проект не на React, скажи об этом сразу и ничего не ставь.

Как писать правки, чтобы попадать с первого раза

Инструмент показывает Claude, где элемент. Что с ним сделать, всё равно решаешь ты, и от формулировки зависит результат.

  1. Одна правка на один клик. «Сделай кнопку зелёной и перенеси выше» лучше разбить на два клика.
  2. Пиши результат, который хочешь увидеть: «кнопка того же цвета, что ссылка в шапке», «заголовок в одну строку на телефоне».
  3. Если правка касается всех похожих блоков, скажи это: «так же поменяй во всех карточках тарифов».
  4. Проверяй сразу после правки и отвечай следующим кликом. Длинная очередь правок без проверки даёт путаницу.

Где Agentation силён

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

Где не поможет

Сайты на конструкторах вроде Тильды и Taplink, сайты без React, правки логики и оплаты, которые на экране не видны.

Следующий шаг
Хочешь так же, но под свой блог и продукт?

Я собрал систему, по которой обычный человек запускает блог с нуля и набирает аудиторию без съёмок, монтажа и команды. Внутри разбор, с которого стартовал сам.

Открыть разбор: с чего начать→