跳到正文
Hacker News· mintone·· 9 天前AI 评分62

CircleIt 发布 Chrome 扩展:在网页上圈选标注,Claude Code 或 Codex 直接改代码

Show HN: CircleIt – Circle something on a web page, your coding agent fixes it

AI 导读

CircleIt 发布 Chrome 扩展,用户在任意网页上圈选元素并写下修改要求,运行中的 Claude Code 或 Codex 会话会收到截图和标注元素,改完代码后回报结果。

正文 · 原文

Circle it. Say it. Your agent fixes it.

Mark up any web page in Chrome and press Send. Your running Claude Code or Codex session wakes up with the screenshots and the exact elements you marked, makes the change, and tells you what it did.

A product page for the Everyday Mug, a $42 speckled stoneware mug from a small ceramics shop, is marked up in Chrome: a circle around its Bestseller badge with the comment "Remove this badge", a box around the price with "Make the price bigger", and a pin on the main photo, which shows the mug on a breakfast table, with "Wrong image, use the front shot". After Send, a Claude Code session in ~/Herd/kilnworth receives feedback #42, opens it, edits Show.vue, Gallery.vue and Price.vue, and resolves it: "Removed the Bestseller badge, made the price 28px semibold and opened the gallery on the front shot." The page reloads with all three changes.

No screenshots pasted into chat. No describing which button you mean.

You point at the thing on the page. Your agent gets exactly that thing.

  1. Circle it.

    Open the extension on any page: localhost, staging or live. Draw around something, drag a box, point at one element, or select words and rewrite them. The page still scrolls and your marks stay put.

  2. Say it.

    Type what should change next to each mark and press ⌘↵. Before it goes, you can see which project, folder and branch it is going to.

  3. Your agent fixes it.

    Your session picks it up, even if it was sitting idle. It reads your marks, edits the code and reports back, and the status updates in your browser as it goes.

Works inside the agent you already use.

Claude Code

The plugin’s monitor wakes an idle session within seconds of you pressing Send. You do not have to keep a prompt running.

/plugin marketplace add circleit-ai/circleit-plugin

/plugin install circleit@circleit

Codex

Feedback is queued to your Codex thread, and an idle thread picks it up within about ten seconds. Approve the plugin’s hooks once in /hooks.

codex plugin marketplace add circleit-ai/circleit-plugin

codex plugin add circleit@circleit

Using another agent? Every item in your inbox has Copy as prompt, which gives any agent the same brief. Its screenshot links open for people in your team signed in to CircleIt.

Let clients mark up staging themselves.

Clients and teammates are free: invite them to your team, and they install the extension, circle what they want changed and press Send. No terminal, no tickets, no annotated PDFs.

  • It waits for your agent. If nothing is running, feedback stays pending until the next session starts in that project.
  • They see it land. Delivered, in progress, resolved: with your agent’s note, written for them.
  • Everyone stays in their lane. People only see the projects and feedback of teams they belong to.

Pay for the developer. Everyone else is free.

Plans from $9 a month, for the person whose Claude Code or Codex makes the changes. Clients and teammates who send feedback are free.

How pricing works

Questions

Does it work on localhost and staging?

Yes. The extension runs in your own browser, so it works on any page you can open there: localhost, .test domains, and staging sites behind a login. No browser lets an extension run on its own settings pages or on the Chrome Web Store.

Do my clients need Claude Code or Codex?

No. They need Chrome or Edge on a computer, the CircleIt extension and an invitation to your team. What they send goes to your developer’s Claude Code or Codex.

What does it cost?

Personal is $79 a year or $9 a month, just for you. Team is $225 a year or $25 a month and includes 1 developer; clients and teammates are free. Your first 10 changes are free, no card needed.

What counts as a change?

Each press of Send is one change, whether it has one mark or 50. Your agent’s replies and status updates don’t count.

What happens if no agent is running?

The feedback waits in your inbox. The next time you open that project in Claude Code or Codex, it picks the feedback up. You can also copy any item as a prompt and paste it into another agent.

Can I check feedback before my developer gets it?

Yes. Set a person or a site to Needs approval. Their feedback waits until the owner or an approver approves it. Approvers can edit a comment, take a mark out, or reject it with a note.

How does feedback find the right project?

Each project has a list of site addresses. When Claude Code or Codex starts in a project, it adds the addresses it finds: the APP_URL in the .env file, Herd and Valet .test domains, and local dev-server ports. You add staging and live addresses on the Projects page. The extension matches the page you are on to the project with that address.

What exactly does my agent receive?

A brief with the page address and your comments. For each mark it lists the elements under it: CSS selector, text, styles, HTML and the source file where it can tell. For a text edit it gives the exact words and what to change them to. Then come the screenshots, cropped, with your marks drawn on.

Which browsers are supported?

Chrome and Microsoft Edge on a computer, and other browsers built on Chrome, such as Brave and Arc. All of them install it from the Chrome Web Store; Edge asks you to allow extensions from other stores first. Safari, Firefox and phones aren’t supported.

Stop describing it. Circle it.

Start free

Your first 10 changes are free. No card needed.

来源:Hacker News · circleit.ai