b12-website-editor

Edits live B12 websites through browser automation in Claude Cowork.

10|Updated Feb 5, 2026
One-click install
npx skills add https://github.com/b12io/b12-plugins --skill b12-website-editor-b12io
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: b12-website-editor
Source: https://github.com/b12io/b12-plugins/tree/main/skills/b12-website-editor
Command: npx skills add https://github.com/b12io/b12-plugins --skill b12-website-editor-b12io

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Making design and content changes to a live B12 website normally requires manually navigating the site builder and writing precise instructions for the B12 AI agent. This Skill automates that loop by letting Claude see the site, plan improvements, and drive the B12 editor directly through browser access. ## Core Features & Use Cases - Visual Site Analysis: Takes screenshots and scrolls the full preview to assess the current design before suggesting 3-5 concrete improvements. - Browser-Driven Editing: Clicks the B12 editor's "Ask AI Agent..." input, types focused instructions, and verifies results with follow-up screenshots. - Style Translation: Converts vague style requests (dark, luxury, SaaS, playful) into specific instructions with hex colors, typography, and layout direction. - Use Case: Ask Claude to "make my site look like a premium luxury brand" and it will restyle the hero, apply black and gold colors with serif fonts, add sections, and verify each change in the live preview. ## Quick Start Open your B12 editor tab in Claude Cowork and ask Claude to edit your B12 website, starting with a screenshot review of the current design.

Frequently Asked Questions about b12-website-editor

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I edit my B12 website with Claude?

Open the B12 editor tab in Claude Cowork and invoke the skill. Claude takes a screenshot of your site, suggests improvements or follows your instruction, then types commands into the B12 AI agent input and verifies each change visually.

How to restyle a B12 website to a specific design style?

Describe the style you want, such as dark, minimal, luxury, or SaaS. Claude translates it into concrete instructions with hex color codes, typography choices, and layout changes, then sends them to the B12 agent one to three actions at a time.

Does the B12 website editor skill work outside Claude Cowork?

No, this skill requires browser access and only works in Claude Cowork, the Claude in Chrome extension. The B12 editor tab must be active before invoking the skill so Claude can screenshot, click, and type in the page.

What kinds of sections can Claude add to a B12 site?

Claude can instruct the B12 agent to add heroes, pricing tables, testimonials, navigation bars, footers, forms, and card grids. It can also build web app features like booking forms, dashboards, member areas, and directories.

Why did the B12 agent apply the wrong change to my site?

The B12 agent works best with short, specific instructions of one to three actions. If a change looks wrong, send a correction like "Undo that and try: [clearer version]" and separate style changes from layout changes into different messages.