You create variants in a Chrome extension, and your team finds them again in a web app. The code is written by Claude, Anthropic's AI model, and applied in your own browser.
The two parts#
| Part | Where | What you do there |
|---|---|---|
| Chrome extension | A side panel next to the page you are viewing | Select elements, describe changes, see them applied live, ask for ideas, export the code. |
| Web app | variant.henkanpartners.ai | Browse your workspace's variants, compare before and after, read steps and code, set statuses, keep notes, manage tokens, team and usage. |
The extension does nothing on a page until you open the panel and make a request.
What happens when you make a request#
- You describe the change In the side panel, select an element or circle an area, then type or dictate what you want. You can attach a Figma mockup.
- The extension gathers context It collects the page's URL and title, a description of its visual design, a screenshot of the visible tab, your request and any mockup images.
- Claude writes the change The request goes to Claude, which writes the CSS and JavaScript for the change in your site's design.
- Variant applies and checks it The code runs in your browser, so you see the result at once. Variant then checks its work visually and corrects what it missed, marking the step Corrected after visual review in the web app.
- The variant is saved With a personal token, the steps, conversation, code and before/after screenshots are synced to your workspace.
The design description covers CSS variables, fonts, colours, the structure of the visible page and the HTML of the elements you selected. When a request is ambiguous, Variant can first ask a Clarification question with suggested answers.
Two ways to connect the extension#
| Mode | How requests reach Claude | Saved in the web app | Counts towards workspace quotas |
|---|---|---|---|
| Personal token (recommended) | Through the Henkan Variant app | Yes | Yes |
| Your own Anthropic API key | Directly from the extension to Anthropic | No | No |
With a personal token, you never need a Claude API key and your whole team sees your variants. See Connect the extension.
Which model does which job#
With a personal token, Variant picks the Claude model that fits each job in the web app:
| Job | Model |
|---|---|
| A step in the Studio's Build side, Convert to code, idea series | Claude Opus |
| The three proposals and the visual check | Claude Sonnet (Claude Opus for the last correction) |
| A site's short style brief, labels and other short tasks | Claude Haiku |
| Studio versions, image concepts and idea visuals | OpenAI's image model |
In the Studio, a request that meets a busy AI service is retried once by itself. Your requests count the same whatever the model.
From variant to A/B test#
Each variant ends as one JavaScript snippet that bundles all its steps. Paste it into the variation code of your testing tool, such as Kameleoon, AB Tasty, Optimizely or VWO.
Variant does not connect to these tools directly. See Export the code.