Workbench overview
Orientation, intake wizard, layout, page tabs, brief editor, and chat panel.
Web Design is a complete HTML / CSS / JavaScript site builder with Claude wired into every surface. You describe what you want, the workbench writes it, and you can keep refining by chat, by click, or by editing the code directly. Every site you build can be previewed instantly and published to a freeyour-slug.itzseo.com subdomain or your own custom domain.
Creating your first site
Open Web Design from any project sidebar. On the index page click + New site. By default this opens the 3-step intake wizard — a guided brief that produces a much stronger first build than free-text alone.
- Step 1 — Basics. Site name, business name, one-line purpose, and the primary visitor goal (book a call, shop, sign up, etc.).
- Step 2 — Brand. Tone (formal, friendly, playful), color preference (or a hex), font preference, and a few competitor or inspiration URLs.
- Step 3 — Pages & sections. Pick the pages you want and the sections each should contain (hero, services, pricing, testimonials, FAQ, contact, etc.). The wizard pre-selects sensible defaults from your purpose.
Prefer to skip the questions? Click Skip wizard inside step 1 to drop into a single free-text box where you describe the site in your own words. The wizard saves a structured brief that the workbench keeps using for every subsequent edit, so we strongly recommend running through it at least once.
The site picker
The Web Design index always shows the picker, even when you have only one site. Each card shows the site name, purpose, and last-updated date. Click any card to enter the workbench. To create another site for the same project, use the + New site button at the bottom of the page — the wizard or skip flow runs again. There is no limit on how many sites a project can hold; only the count ofpublished sites is plan-limited.
Workbench layout
The workbench is split into three regions:
- Top bar. Site name, viewport toggle (desktop / tablet / mobile), Preview button, Publish button, history (↶ Undo opens the revisions drawer), Brief (re-opens the structured brief), and the page tabs.
- Centre stage. Three switchable views controlled by the segmented control at top: Preview (live iframe of the active page), Code (HTML / CSS / JS panes you can edit directly), and Chat on mobile.
- Right rail (chat panel). Conversation with Claude scoped to the active site. Every message you send here is interpreted as a change request for the current page. Token / credit cost shows under the input.
Pages
Each site can have any number of pages. Use the page tabs at the top of the workbench to switch between them. To add a page, click the + button next to the last tab and describe it (for example "About — team bios + our story"). Right-click any tab for Rename, Duplicate, and Delete.
Page URLs are slug-based, not file-based. The home page lives at /; an "About" page lives at /about (no .html extension). Older sites with .html URLs in their navigation still work — visitors are 301-redirected to the canonical slug URL.
The brief editor
The structured brief from the intake wizard is editable any time — click Brief in the top bar to open the drawer. Update tone, color, typography, sections, or any other field, then click Save brief. From that point on, every chat message and every inline edit uses the new brief as context, so you stay on-brand without repeating yourself in every prompt.
The chat panel
The chat panel is the fastest way to make whole-page or structural changes. Type things like:
- "Add a pricing section with 3 tiers under the services block"
- "Make the hero more energetic and replace the photo"
- "Switch the entire palette to warm earth tones"
- "Add a sticky header that shrinks on scroll"
Each turn streams Claude's reply directly into the preview — you'll see the page rebuild live. If the build is taking too long or you want to bail, click Cancel beside the input. Every conversation turn costs credits (tokens used × your plan's credit rate); the running cost is shown under the input.
For surgical edits to one element — change just this headline, recolor only this button — use the click-to-edit flow instead (see the editing article). It's faster, cheaper, and won't accidentally touch other parts of the page.