Что получает Codex, когда вы кликаете
Кликните любой элемент на странице — появится поле заметки, привязанное к нему. Напишите, что нужно: правку, вопрос, жалобу. Codex получает ваши слова вместе со снимком именно того элемента, по которому вы кликнули. Без селекторов, без «третья кнопка в шапке», без неоднозначности про нужный div.
Можно просить изменения, задавать вопросы или просто оставлять наблюдения. Контекст элемента передаётся автоматически.
Вы делаете
Кликаете элемент. Пишете заметку так, как сказали бы дизайнеру рядом.
Агент делает
Связывает клик с реальным кодом элемента и действует по заметке с этим контекстом.
Это моя первая аннотация на этой странице. Когда она придёт:
1. Скажи, какой элемент ты получил: тег, роль и твоё лучшее описание его роли на странице.
2. Скажи, какой файл и какие строки кода его отрисовывают.
3. Переформулируй мою заметку как изменение, которое собираешься внести, или вопрос, на который собираешься ответить.
4. Если заметку можно понять двумя способами, выбери наиболее вероятный, скажи об этом и продолжай — не стопорись.
Затем сделай это, перезагрузи страницу и скажи, куда смотреть.Механика
Enter отправляет одну заметку. ⌘Enter собирает пачку.
Две клавиши — два режима работы. Одиночные аннотации вмешиваются точечно; собранная пачка приходит как один согласованный набор инструкций.
Одна заметка или пачка
Enter отправляет аннотацию отдельно: она встаёт в очередь или вмешивается в текущий запуск в зависимости от настройки по умолчанию. Это подходит для одной срочной правки.
⌘Enter вместо отправки добавляет аннотацию в пачку: продолжайте кликать, писать заметки и отправьте всё вместе. Пачка важнее, чем кажется: пять связанных заметок приходят как один набор инструкций и реализуются как цельное изменение, а не как пять последовательных правок, где третья случайно отменяет первую. Сначала пройдите страницу, затем отправляйте.
Вы делаете
Разовая правка: Enter. Проверочный проход: ⌘Enter на каждой заметке, затем отправка пачки после обхода.
Агент делает
Обрабатывает пачку как одно рабочее поручение: разрешает конфликты между заметками до правки кода.
Я собираюсь отправить тебе пачку аннотаций после полного обхода страницы. Обработай её как одно рабочее поручение:
1. Перечисли каждую аннотацию в пачке: элемент, заметка, как ты понял намерение.
2. Проверь набор на конфликты и пересечения: заметки к одному компоненту, противоречивые просьбы, изменения, которые должны иметь общую реализацию. Расскажи, что нашёл, до правки кода.
3. Предложи порядок реализации и места для объединения правок: одно CSS-изменение для трёх заметок лучше трёх отдельных патчей.
4. Выполни, затем перезагрузи страницу и дай чеклист: какая аннотация к какому изменению привела, чтобы я проверил их по одной.Знайте настройку по умолчанию: очередь или вмешательство
Когда Codex уже выполняет задачу, отправленная аннотация либо встаёт в очередь и ждёт ближайшей паузы, либо вмешивается в выполнение и меняет направление работы. Поведение Enter задаётся в Settings; если его не знать, аннотации будто пропадают (они ждут в очереди) или длинная задача начинает блуждать (вы постоянно вмешиваетесь).
Перед важным запуском проверьте, что именно делает Enter.
Вы делаете
Проверяете поведение отправки по умолчанию в Settings. Заранее решаете, когда вмешательство в выполнение оправдано.
Агент делает
Объясняет, как обрабатывает ввод во время выполнения, и подтверждает, что случилось с каждой заметкой, отправленной во время его работы.
Объясни, как ты сейчас обрабатываешь ввод, который приходит во время твоей работы.
1. Когда я отправляю аннотацию или сообщение во время выполнения, оно ждёт следующей паузы или сразу вмешивается в работу? Если видишь текущую настройку по умолчанию, назови её и скажи, где её изменить.
2. По этому треду: какие мои сообщения вставали в очередь, а какие вмешивались в выполнение? Восстанови, что произошло с каждым.
3. Дай честную рекомендацию: для пачек аннотаций во время длинных задач лучше очередь или вмешательство? Назови один случай, где нужен другой вариант.Рабочие сценарии
Четыре сценария, ради которых стоит освоить аннотации.
Механика занимает пять минут. Ниже — сценарии, которые превращают её в рабочую привычку: каждый сценарий даёт промпт и способ пройти страницу.
Каждый сценарий соединяет промпт для основного чата (вставьте его первым, он задаёт договорённость) со стилем аннотаций для обхода страницы. Все сценарии рассчитаны на сбор пачки через ⌘Enter.
Поиск визуальных ошибок
Что-то на странице сломано, и вы это видите. Кликните проблемный элемент, опишите, что видите и что ожидали увидеть, и пусть Codex свяжет пиксели с кодом. Для целого класса визуальных ошибок это лучше, чем вставлять ошибки из консоли: проблема видна раньше, чем её можно нормально залогировать.
Вы делаете
Кликаете сломанный элемент. Формат заметки: «Вижу X, ожидал Y, происходит при Z».
Агент делает
Находит код элемента, диагностирует причину, исправляет её и объясняет, как проверить результат после перезагрузки страницы.
Договорённость для поиска визуальных ошибок в следующих аннотациях:
Каждая заметка описывает дефект так: что я вижу / что ожидал увидеть / когда это происходит. Для каждой заметки:
1. Сначала диагностируй, потом исправляй: в одну строку назови причину (специфичность CSS, не обновляется состояние, переполнение макета, устаревшие данные или реальная причина).
2. Исправляй причину, а не симптом. Если честное исправление больше, чем подразумевает аннотация, скажи об этом и спроси перед большим вариантом.
3. После пачки: перезагрузи страницу и проведи меня по каждому дефекту — причина, исправление и точное место, где проверить, что он исчез.Дизайн-проверка
Откройте страницу и пройдите её как дизайнер: сбившиеся отступы, цвета, уходящие от бренда, почти правильная типографика. Соберите всю критику через ⌘Enter и отправьте одним поручением. Это сценарий, где аннотации заменяют отдельный созвон.
Вы делаете
Проходите всю страницу до отправки. Формулируете вкус прямо: «сжать этот зазор», «это должно совпадать с голубым в шапке».
Агент делает
Выполняет критику как один цельный проход полировки и объединяет повторяющиеся замечания в общие исправления.
Договорённость для входящей пачки дизайн-аннотаций:
1. Эти заметки — вкусовые правки, а не баг-репорты. Выполни их как один цельный проход полировки.
2. Если несколько заметок указывают на один базовый токен (единая шкала отступов, цветовая переменная, размер шрифта), исправь токен, а не каждый экземпляр отдельно, и скажи, что сделал именно так.
3. Уважай существующую дизайн-систему: если заметка спорит с закреплёнными паттернами проекта, отметь это вместо молчаливого выполнения.
4. После правок перезагрузи страницу, опиши проход языком дизайна (что сжато, выровнено, унифицировано) и перечисли всё, что спорило с системой.Проверка текста
Текст — часть интерфейса. Кликните каждый заголовок, подпись и кнопку, которые читаются плохо, напишите лучшую версию или просто «неуклюже, улучши» и соберите проход в пачку. Здесь аннотации заметно лучше отдельного документа с текстами: каждая заметка привязана к точному контексту, строке, доступному месту и соседним словам.
Вы делаете
Читаете страницу глазами нового человека. Кликаете всё, на чём спотыкаетесь. Даёте либо точную замену, либо направление.
Агент делает
Точные замены применяет дословно, заметки «улучши это» пишет в голосе страницы и не переписывает текст, по которому вы не кликали.
Договорённость для проверки текста в следующих аннотациях:
1. Заметки с текстом замены в кавычках применяй дословно, ровно как написано.
2. Заметки с просьбой улучшить без готового текста переписывай в существующем голосе страницы: сохраняй регистр соседнего текста и не привноси новый тон.
3. Жёсткое правило: трогай ТОЛЬКО аннотированный текст. Никаких попутных переписываний того, по чему я не кликал.
4. Следи за контейнерами: если новый текст плохо переносится или переполняет блок на мобильной ширине, сократи его и скажи мне.
5. После правок дай таблицу «было / стало» для каждой изменённой строки.Сценарий «объясни этот компонент»
Аннотации нужны не только для правок. Кликните компонент на незнакомой странице — унаследованный проект, интерфейс, который агент собрал без вас, код шестимесячной давности — и спросите, что это, где живёт и зачем нужно. Страница становится кликабельной картой собственной кодовой базы.
Вы делаете
Кликаете непонятный компонент. Задаёте прямой вопрос: «что это, где код, зачем оно здесь?»
Агент делает
Отвечает по реальному исходному коду: назначение компонента, файл, поток данных и контекст, которого вам не хватало.
Следующие аннотации — вопросы, а не просьбы о правках. Для каждого кликнутого элемента:
1. Что это: задача компонента на этой странице простым языком.
2. Где он живёт: файл, ключевые строки и какие данные в него входят.
3. Зачем он здесь: что сломается или ухудшится, если его убрать.
4. Что неожиданного: известные особенности, технический долг или история, видимая в коде или комментариях.
Ничего не меняй. Это экскурсия по коду, а страница — карта.