Sketch:
нарисуйте это, и агент увидит, что вы имеете в виду
Sketch: холст для рисования, встроенный прямо в композер AI-агента. Откройте пустой холст, чтобы набросать макет или диаграмму, или откройте скриншот, чтобы его аннотировать. Обведите баг, нарисуйте стрелку, выделите область, добавьте заметку. Рисунок прикрепляется к вашему сообщению и отправляется вашему AI-агенту для кодинга.
Картинка стоит тысячи слов, и для AI-агента это вдвойне так. Вместо того чтобы писать «кнопка в правом верхнем углу модального окна слишком близко к краю», вы её обводите. Рисунок ложится рядом с вашим промптом, агент получает визуальную обратную связь за один раз, и вы ни разу не покинули терминал.
Sketch в действии: откройте холст из композера, обведите визуальный баг на скриншоте, прикрепите рисунок, отправьте его агенту.
Вот проблема, которую решает Sketch. Вы занимаетесь vibe coding с AI-агентом, и что-то выглядит на экране не так. Карточка переполняется, кнопка сидит на пару пикселей не там, отступы в одной строке сломаны. Чтобы агент это починил, вам приходится описывать визуальную проблему словами. «Вторая карточка в центральной колонке, та, что с аватаром, у неё отступ справа слишком тесный». Вы пишете три предложения, агент гадает, чинит не тот элемент, вы пишете ещё три.
Sketch убирает гадание. Вы делаете скриншот, открываете его на холсте Sketch, рисуете красный круг вокруг сломанной карточки, добавляете стрелку и слова «здесь слишком тесно» и прикрепляете это к сообщению. Агент больше не интерпретирует абзац. Он смотрит на рисунок. Визуальная обратная связь однозначна, потому что она визуальна.
Sketch работает и в обратную сторону. Начните с пустого холста и набросайте то, что хотите, прежде чем агент это построит: грубый макет экрана, вайрфрейм вёрстки, быструю диаграмму процесса. Рисунок от руки задаёт агенту рамки лучше, чем стена текста. Вы рисуете прототип, агент его кодит.
Холст Sketch, открытый из композера: аннотируйте скриншот, рисуйте фигуры и стрелки, затем прикрепите рисунок к сообщению, отправляемому вашему агенту.
Почему Sketch нужен в вашем рабочем процессе с агентом
Точность. Круг на скриншоте указывает на один точный элемент. Предложение указывает на догадку. Когда вы рисуете проблему, агент чинит именно ту вещь, которую вы имели в виду, а не ту, что рядом. Больше никаких «нет, другая кнопка, та, что ниже».
Скорость. Нарисовать прямоугольник вокруг области занимает три секунды. Описать ту же область словами занимает три предложения, и предложения всё равно двусмысленны. Sketch превращает аннотирование визуального бага из рутины в рефлекс.
Выразительность. Некоторые идеи: формы, а не предложения. Вёрстка, процесс, экран. С Sketch вы рисуете макет или диаграмму напрямую, от руки или фигурами и стрелками, и передаёте рисунок агенту как спецификацию.
Поток. Sketch живёт внутри композера. Вы не открываете отдельное приложение для рисования, не экспортируете файл, ничего не перетаскиваете. Рисунок и ваш письменный промпт едут вместе в одном сообщении, так что агент получает весь контекст разом.
Как Sketch работает от начала до конца
От кнопки Sketch в композере до рисунка, прикреплённого к сообщению агента.
Откройте Sketch из композера
У каждого композера агента есть кнопка Sketch. Кликните её, и откроется полноэкранный холст для рисования, готовый к работе, с уже активным инструментом прямоугольника, так что вы можете обводить элементы сразу.
Рисуйте на пустом холсте или аннотируйте изображение
Начните с пустого холста, чтобы набросать макет, вайрфрейм или диаграмму. Или откройте существующее изображение: бросьте скриншот в композер, затем кликните по карандашу на его миниатюре (или «Аннотировать» в предпросмотре файла), чтобы рисовать поверх него.
Рисуйте, обводите, ставьте стрелки, выделяйте, печатайте
Холст даёт вам рисование от руки, прямоугольники, эллипсы, стрелки, линии и текст. Обведите сломанный элемент, направьте на него стрелку, выделите зону, напишите рядом короткую заметку. Всё, что делает визуальную обратную связь очевидной.
Прикрепите рисунок к сообщению
Кликните «Прикрепить к сообщению». Холст экспортируется как PNG и добавляется миниатюрой в композер, ровно как брошенный файл. Когда вы аннотируете существующее изображение, аннотированная версия заменяет исходную миниатюру, так что агент никогда не получает обе.
Отправьте его агенту
Напечатайте промпт как обычно и отправьте. PNG прикрепляется к сообщению через тот же конвейер, что и любой другой файл. Рисунок и ваш текст достигают агента вместе, за один ход.
Агент читает рисунок
Ваш AI-агент для кодинга получает рисунок как вложение-изображение. Пока его модель поддерживает изображения на вход, он видит ровно то, что вы обвели, на что направили стрелку и что выделили, и действует по визуальной обратной связи, а не разбирает описание.
Два способа использовать Sketch
Начните с нуля или рисуйте поверх того, что уже есть.
Пустой холст: набросайте макет
Откройте пустой холст и нарисуйте то, что хотите, чтобы агент построил. Грубый макет экрана, вайрфрейм вёрстки, прототип компонента, диаграмму потока данных. Штрихи от руки, прямоугольники, стрелки и текстовые подписи. Рисунок от руки: спецификация, которой агент может следовать без единого вашего абзаца с описанием UI.
Аннотируйте: рисуйте на скриншоте
Загрузите скриншот или любое изображение на холст и разметьте его. Обведите съехавший элемент, нарисуйте стрелку на переполнение, выделите неправильный цвет, напишите «исправь это» рядом с багом. Холст Sketch открывается с вашим изображением как фоновым слоем, вы рисуете поверх, и аннотированный скриншот уходит прямо к агенту как визуальная обратная связь.
Чем на самом деле является Sketch
Sketch: полноценный холст для рисования, встроенный в десктоп-приложение AgentsRoom, открываемый из композера любого AI-агента. Это не просмотрщик скриншотов с маркером сверху. Вы получаете настоящие инструменты рисования: перо от руки, прямоугольники, эллипсы, стрелки, линии и текст, тот же набор, который вы ожидаете от настоящей поверхности для набросков.
Холст работает в двух режимах. Пустой режим даёт вам чистую поверхность для макетов, вайрфреймов и диаграмм. Режим аннотации загружает существующее изображение как фон и позволяет рисовать поверх него. Вы попадаете в режим аннотации из миниатюры любого изображения, уже прикреплённого к композеру, или из кнопки «Аннотировать» в предпросмотре файла.
Когда вы прикрепляете рисунок, Sketch экспортирует холст в PNG на белом фоне, чтобы каждый штрих оставался читаемым, затем кладёт файл в лоток вложений композера. Дальше рисунок идёт обычным путём: едет вместе с вашим промптом и отправляется агенту как изображение. Sketch не добавляет нового механизма отправки, он подключается к тому, который уже есть.
Всё остаётся на вашей машине. Наброски сохраняются локально на диск и не коммитятся в репозиторий и не отправляются на какой-либо сторонний сервис. По задумке они временные: рисунок: контекст для одного сообщения, а не файл, которым нужно управлять. Sketch локален, приватен и провайдер-независим: он работает с любым агентом, чья модель принимает изображение, так что конфигурации Claude Code и Codex обе получают один и тот же процесс «от рисунка до агента».
Что люди рисуют в Sketch
Три паттерна, которые превращают рисунок в самый быстрый способ говорить с агентом.
Сообщить о визуальном баге
Сделайте скриншот сломанного UI, обведите элемент, поставьте стрелку на переполнение, выделите неправильный отступ. Агент видит визуальный баг, а не расшифровывает ваше описание. Единственный самый быстрый способ сообщить о регрессии UI AI-агенту.
Набросать макет или вайрфрейм
Нарисуйте экран, прежде чем агент его построит. Грубый вайрфрейм, набросок вёрстки, низкодетализированный макет компонента. Передайте рисунок агенту как бриф и дайте ему превратить ваш набросок в код.
Нарисовать диаграмму или процесс
Некоторые объяснения: диаграммы. Поток данных, конечный автомат, структура страницы, как два компонента общаются. Набросайте это прямоугольниками и стрелками и отправьте диаграмму агенту как контекст.
Описать словами или нарисовать
Та же визуальная обратная связь, тот же агент. Один путь медленный и двусмысленный, другой: набросок.
Без Sketch
- : Вы описываете визуальную проблему словами и надеетесь, что агент представит то же самое.
- : Вы пишете три предложения, чтобы указать на один элемент, и это всё равно двусмысленно.
- : Чтобы нарисовать макет, вы открываете отдельное приложение, экспортируете файл, потом перетаскиваете его в композер.
- : Переключение контекста ломает ваш поток и разговор с агентом.
- : Агент чинит не тот элемент, вы объясняете заново, цикл тянется.
С Sketch
- : Вы обводите элемент на скриншоте, и обратная связь однозначна.
- : Рисунок заменяет три предложения описания, за три секунды.
- : Холст в композере: никакого отдельного приложения, никакого экспорта, никакого drag and drop.
- : Вы никогда не покидаете терминал и никогда не прерываете нить разговора с агентом.
- : Агент видит ровно то, что вы имели в виду, и чинит это с первого раза.
Sketch: кратчайший путь между визуальной проблемой и AI-агентом, который её понимает.
FAQ
Что такое Sketch в AgentsRoom?
Sketch: холст для рисования, встроенный в композер AI-агента. Вы открываете его из композера, рисуете набросок на пустом холсте или аннотируете существующий скриншот, и рисунок экспортируется как PNG и прикрепляется к сообщению, которое вы отправляете вашему AI-агенту для кодинга. Он превращает визуальную обратную связь в то, что вы рисуете, а не описываете.
Как отправить рисунок AI-агенту?
Кликните кнопку Sketch в композере агента, нарисуйте на холсте, затем кликните «Прикрепить к сообщению». Рисунок становится PNG-миниатюрой в композере. Напишите промпт и отправьте: набросок прикрепляется к сообщению и достигает агента вместе с вашим текстом.
Могу ли я аннотировать скриншот?
Да. Бросьте скриншот в композер, затем кликните по карандашу на его миниатюре или откройте предпросмотр файла и кликните «Аннотировать». Холст Sketch открывается с вашим скриншотом как фоновым слоем, чтобы вы могли рисовать поверх: обвести баг, добавить стрелку, выделить область, написать заметку. Аннотированный скриншот заменяет исходный, когда вы его прикрепляете.
Что я могу рисовать в Sketch?
Холст даёт вам рисование от руки, прямоугольники, эллипсы, стрелки, линии и текст. Вы можете набросать макет, нарисовать вайрфрейм, выложить диаграмму или разметить скриншот кругами, стрелками и выделениями. Инструмент прямоугольника активен по умолчанию, так что вы можете обвести элемент в тот же момент, как открывается холст.
Действительно ли AI-агент видит мой набросок?
Рисунок прикрепляется к вашему сообщению как изображение PNG. Пока модель агента поддерживает изображения на вход, она видит набросок и действует по нему. Claude и модели класса GPT-4, которые питают Claude Code и Codex, читают изображения, так что агент получает вашу визуальную обратную связь напрямую.
Какие агенты и провайдеры работают с Sketch?
Sketch прикрепляет стандартное изображение PNG, так что он провайдер-независим. Работает любой агент, чья модель принимает изображение на вход: Claude Code, Codex и другие CLI, которые поддерживает AgentsRoom. Никакой настройки под конкретного провайдера.
Нужно ли мне отдельное приложение для рисования или доска?
Нет. В этом и смысл Sketch. Холст для рисования внутри композера. Вы не открываете Excalidraw, Figma или аннотатор скриншотов в другом окне, не экспортируете файл, не перетаскиваете его обратно. Sketch держит весь цикл «нарисовать и отправить» в терминале.
Где сохраняются мои наброски? Приватны ли они?
Наброски сохраняются локально на вашей машине. Они не коммитятся в ваш git-репозиторий и не загружаются на какой-либо сторонний сервис. Они временные: набросок: контекст для одного сообщения, и старые наброски очищаются автоматически.
Могу ли я переотредактировать или переаннотировать набросок?
Да. Любое изображение в композере, включая скриншот, который вы уже аннотировали, можно снова открыть на холсте Sketch, чтобы порисовать на нём ещё. Когда вы прикрепляете новую версию, она заменяет предыдущую миниатюру, так что агент никогда не получает одно изображение дважды.
Зачем рисовать баг, а не описывать его?
Потому что описание: догадка, а рисунок, нет. Когда вы пишете «кнопка справа сверху съехала», агенту приходится реконструировать экран у себя в голове. Когда вы обводите кнопку на скриншоте, реконструировать нечего. Картинка стоит тысячи слов, а для визуальной обратной связи AI-агенту она стоит ещё и нескольких потраченных впустую ходов.
Хорошо сочетается с
Автоматизация браузера
Ваш QA-агент управляет настоящим браузером и делает скриншоты. Sketch: то, чем вы аннотируете один из этих скриншотов и отправляете размеченную обратную связь обратно.
Scratchpad
Блокнот для промптов и заметок внутри AgentsRoom. Scratchpad берёт на себя слова, Sketch берёт на себя рисунок: оба питают один и тот же композер агента.
Ревью vibe coding
Наблюдайте за каждым файлом, который меняет агент, в реальном времени. Когда изменение выглядит на экране неправильно, Sketch, самый быстрый способ указать на это.
Figma для AI-агентов
Внесите дизайн Figma в рабочий процесс с агентом. Sketch, его более грубый, более быстрый родственник: рисунок от руки прямо в композере, когда вам не нужен полноценный файл дизайна.
Хватит описывать баг. Нарисуйте его.
Скачайте AgentsRoom и используйте Sketch: холст для рисования в композере агента, чтобы набрасывать макеты и аннотировать скриншоты, затем отправлять рисунок вашему AI-агенту для кодинга, ни разу не покидая терминал.
Приложение-компаньон: следите за агентами на ходу
Используйте Claude, Codex, Antigravity CLI или другого поставщика AI.
Отправляйте баги и запросы прямо в ваш публичный бэклог.
Взгляд на AgentsRoom в действии.