Расширение Chrome · для ИИ-разработки

Кликните элемент —
скажите ИИ, что чинить.

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

Установить в Chrome — 7 дней бесплатно Как это работает

Chrome 116+ · работает в Edge · $6.43 один раз, без подписки

Работает с Claude CodeCursorGitHub Copilot WindsurfCodex — и всем, куда можно вставить текст.

Как это работает

Три клика от «бесит» до диффа.

1

Вызовите панель

Нажмите Alt+Shift+A (Mac: ⌥⇧A) в работающем приложении или кликните иконку на панели инструментов. На localhost загружается сам.

2

Отметьте, что мешает

Прикрепите Note к любому элементу, растяните Frame вокруг области или набросайте Pen. Опишите правку обычными словами.

«Сделай эту кнопку больше и зелёной, как в шапке»
3

Copy for AI → вставить

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

Метки

Четыре способа указать. Один точный бриф.

1NOTE кликните элемент · опишите правку

Укажите на место. Скажите, что нужно.

Выберите Note и кликните — на элемент садится нумерованный пин, вы пишете правку. Растяните Frame вокруг области или почеркайте Pen.

Прикладывайте чистые скриншоты к каждой метке и ставьте @ссылки на другие элементы — «сделай как @Heading».

Панель Notepix с двумя метками и инструкциями обычными словами: приглушить кнопку апгрейда, выровнять отступы между карточками статистики
2SOURCE src/demo/components/UpgradeButton.jsx:6:25

Каждая метка знает код за собой.

Не div.css-1q2w3e, а <button> in UpgradeButton — src/components/UpgradeButton.jsx:6. React 18/19, Vite, Next.js, CRA. Агент открывает нужный файл вместо поиска грепом.

Каждая метка также сохраняет вычисленные стили и список классов элемента. Страница не на React? Будет точный CSS-селектор.

Заметка в плавающем редакторе и красный круг от руки на графике; подпись: каждая метка знает React-компонент и файл за собой
3MEASURE font 14px · pad 18 20 · gap ←18 →18

Реальные пиксели, а не ощущения.

При наведении — отчёт уровня DevTools: padding, margin и измеренный зазор до каждого соседа — реальные отрендеренные пиксели.

Заметка может сказать «между ними 24px — сделай 8», не открывая DevTools.

При наведении на карточку статистики видны подпись компонента, кольцо padding и измеренные зазоры 18 пикселей до соседних карточек, с чипом font 14px, pad 18 20, gap 18
4BRIEF markdown · plain text · JSON · Claude in Chrome · MCP

Один клик. Один бриф, понятный любому агенту.

Copy for AI собирает каждую открытую метку — элемент, исходник, стили, инструкцию — в одну вставку. Пять форматов, включая промпт передачи для Claude Code через Claude in Chrome.

Скриншоты уходят со штампом #id своей метки — картинки и инструкции не разлучаются.

Цикл

Пин. Агент чинит. Карточка отмечается сама.

✓LIVE npx -y notepix-mcp setup · иконка вилки → зелёная

Пропустите буфер: агент читает метки сам.

Одна команда регистрирует локальный сервер Notepix у каждого кодинг-агента на вашей машине. Агент забирает каждую метку прямо из браузера и на ваших глазах переводит её карточку в DONE, пока чинит.

Скажите «чини каждую метку, как только я её ставлю» и продолжайте кликать по приложению, пока приезжают диффы. Всё на 127.0.0.1.

Панель Notepix с зелёной иконкой вилки; метка номер один переведена в DONE с зачёркнутым текстом — отмечена вживую подключённым ИИ-агентом через MCP

Детали

А ещё в коробке.

Сначала клавиатура

Alt+Shift+N ставит заметку, не открывая панель. Внутри неё N F D S переключают режимы.

Чистые кадры скриншотов

📷 вырезает ровно этот компонент — пины самого Notepix убираются заранее.

Понимает SPA, по страницам

Каждый маршрут хранит свои метки; панель следует за клиентской навигацией.

Экспорт / импорт

JSON туда, JSON обратно — объедините метки коллеги или переезжайте на другую машину.

Чистая страница по умолчанию

Пины рисуются, только пока вы размечаете. Скройте панель — и приложение снова презентабельно.

Картинки, которые связывают себя сами

Каждый скриншот проштампован #id своей метки — агенты сопоставляют картинку с инструкцией по бейджу, а не по порядку вставки.

Цикл, а не один выстрел

Отметьте метку ✓ — она останется для справки, но выпадет из следующей копии. Каждое удаление предлагает Undo.

Не путается под руками

Режим Ghost прячет панель, пока вы не наведёте курсор. Тащите её куда угодно, растягивайте за любой край.

Помощь — это один ?

Знак ? снова открывает 30-секундный гид. Шорткаты меняются в chrome://extensions/shortcuts.

Приватность по умолчанию

Ваше приложение не покидает вашу машину.

Ни сервера, ни аккаунта

Никакого бэкенда. Заметки, скриншоты и пути к исходникам живут в локальном хранилище Chrome на вашей машине — и больше нигде.

Никакого трекинга

Ни аналитики, ни телеметрии, ни крэш-репортов. Что вы аннотируете — ваше дело.

Один сетевой вызов, и только

Ноль запросов, пока вы не введёте лицензионный ключ — затем ровно один вид: его проверка у Gumroad. Никогда — ваши страницы или заметки.

Цена

Бесплатно 7 дней. Потом $6.43. Один раз.

$6.43 разово · ваш навсегда

На проверке в Chrome Web Store — кнопка установки заработает вместе с публикацией.

Оплата через Gumroad · ключ на почту · разблокировка в панели

  • 7 дней, все функции — без аккаунта, без карты, без регистрации.
  • Один платёж — навсегда — без подписки и подсчёта мест.
  • Заметки не блокируются — просмотр, копирование и экспорт существующих меток работают после триала, платили вы или нет.
  • Переезжает с вами — тот же ключ разблокирует Notepix на новой машине.

FAQ

Вопросы и ответы.

Нужен ли React, чтобы это работало?

Нет — Notepix размечает любую страницу. На dev-сборке React (Vite, Next.js, CRA; React 18 и 19) каждая метка дополнительно записывает имя компонента и исходный файл:строку за элементом. На продакшен-сборках и не-React-страницах используется точный CSS-селектор. Поддержка исходников Vue и Svelte — в планах.

С какими ИИ-агентами это работает?

С чем угодно, куда можно вставить текст: Claude Code, Cursor, GitHub Copilot, Windsurf, Codex, Aider, обычное окно чата. Бриф — это простой текст в буфере обмена, без аккаунта и настройки. Вставку можно и вовсе пропустить, двумя способами: с Claude Code, подключённым через Claude in Chrome (выберите формат передачи — он прочитает метки прямо со страницы), или добавив опциональный MCP-сервер Notepix — одна команда, npx -y notepix-mcp setup, регистрирует его у каждого кодинг-агента на вашей машине — и агент сам забирает метки и скриншоты и отмечает их по мере исправления.

Работает ли это на превью Lovable, Replit, v0 или Bolt?

Да — кликните иконку Notepix на панели инструментов на любой http(s)-странице, включая облачные превью, и размечайте. На localhost-серверах Notepix загружается сам после каждой перезагрузки; автозагрузка в один клик для превью-доменов — следующее запланированное обновление.

Где живут мои заметки?

В локальном хранилище расширения Chrome, отдельно для каждой страницы и каждого SPA-маршрута. На localhost-серверах Notepix загружается сам, так что заметки на месте после каждой перезагрузки. Метки любой страницы можно экспортировать в JSON-файл и импортировать где угодно.

Что Notepix отправляет по сети?

Ничего не покидает ваш компьютер — пока вы не введёте лицензионный ключ. После этого существует ровно один вид интернет-запросов: проверка ключа через API лицензий Gumroad при активации и не чаще раза в неделю. Запрос содержит ключ и id продукта — никогда содержимое страниц, заметки или скриншоты. Если включить опциональное MCP-соединение, оно идёт на 127.0.0.1 — вашу собственную машину — и больше никуда. Полный текст — на странице приватности.

Что будет, когда закончится пробный период?

Создание новых меток попросит разовую разблокировку за $6.43. Всё уже созданное навсегда остаётся доступным для просмотра, копирования, экспорта и удаления — ваши заметки принадлежат вам.

Клавиатурная комбинация ничего не делает?

Alt+Shift может конфликтовать с переключением раскладки клавиатуры, особенно в Windows. Откройте chrome://extensions/shortcuts и переназначьте «Toggle the Notepix panel» на что угодно — иконка на панели инструментов и меню правой кнопки работают в любом случае.

Только Chrome?

Chrome 116+ и Edge на Chromium (протестирован). Публикация в Edge Add-ons и другие браузеры — в планах.