- agentation
- claude-code
- ai
- web-development
- developer-tools
- automation
Agentation: Click to Edit Your Website with Claude Code
Agentation lets you click any element on your site, leave a note, and let Claude Code make the change — no lengthy descriptions needed.
Watch on Instagram
Explaining a small website change to an AI can sometimes take longer than the change itself. Describing which element, on which page, in which exact position often leads to back-and-forth that eats up time. Agentation is a tool that approaches this problem differently.
What Is Agentation?
Agentation is a helper repository that lets you click directly on any element of your website and leave a short note about what you want changed. Instead of writing a long textual description, you point at the element and annotate it. The tool then converts your notes into a compact, precise prompt that Claude Code can act on immediately.
How It Works
Installation starts from the GitHub repository. You copy the repo link, bring it into Claude, and let it handle the setup. Once installed, a button appears on the right side of your browser. Clicking it activates element-selection mode, where you can browse your site and click on any CSS element you want to modify.
After selecting an element, you write a brief note describing the change. You can select multiple elements and leave multiple notes in a single session. When you are done, you click the Copy Feedback button at the bottom. This compiles all your notes and the position data for each selected element into a single, ready-to-use prompt.
You then paste that prompt into Claude. Because the prompt already contains precise location and context information, Claude Code knows exactly where to intervene and makes the changes without guesswork.
A Real Example
To test the workflow, three separate notes were left on a live site:
- Align the navigation menu to the left
- Replace a specific area with country flags
- Stretch the header title across the full width of the row
Claude Code completed all three changes in roughly a minute and a half. Checking the result showed the menu aligned left, the flags in place, and the title spanning the full row.
Why This Approach Works
Describing a UI element in plain text is inherently ambiguous. Phrases like "the button on the top right" or "the logo in the nav" can be interpreted in multiple ways. The prompt Agentation generates includes the element's exact position, CSS properties, and surrounding context, giving Claude a much clearer instruction to work from.
This makes the tool especially practical for developers and content managers who regularly make small visual tweaks but want to avoid writing lengthy explanations every time.
A full step-by-step walkthrough of the installation and workflow is available on YouTube. Agentation is a focused, lightweight tool that reduces the communication overhead between you and your AI coding assistant, making small site edits noticeably faster.