The Workshop · features

What the Workshop does

Everything here is in the Workshop now, grouped the way you meet it: sections and templates, the brief builder, editing, phones and tablets, and publishing.

Sections and templates

Pages are built from sections that already fit together.

A section for every part of a page: Navigation, hero, introduction, services, work, process, your reviews, about, areas, prices, questions, calls to action, contact and footer, each in several styles.
Drawn in your brand: Every colour, typeface, corner and gap in a section comes from the site’s brand. A section added later matches, and a change to the brand reaches every page.
Swap in place: Click a section and the Sections panel lists every other style for that part of the page, in your brand and your words. Click one to put it in place; [ and ] step through them.
Trade templates: Whole sites to start from, each with its own pages and brand: roofer, builder, decorator, landscaper, electrician, kitchens and bathrooms, plumbing and heating, tree surgery, driveways and joinery. There is an operations dashboard too.
Your own templates: Import a site you already have, as a folder, a zip or its .html files, and keep it as a template. Switch it on and its sections join the brief builder’s library for that trade.
One header and footer: Set a navigation or footer to appear on every page. Saving copies it across, and new pages start with it.

Build from a brief

A whole site, written from what you tell it.

Written from your details: Name the trade, the business and the town, and add what you like: services, towns covered, emergency call-outs, a colour. The words are written from that by fixed rules, so the same brief always builds the same site.
Nothing made up: Years trading, a guarantee, accreditations, insurance and free quotes appear only when the brief says them. Anything else is left as a [bracketed] gap for you to fill.
Shuffle and New words: Shuffle tries another arrangement of sections. New words rewrites the text and keeps the layout.
Change it before it is created: In the preview, hover a section and choose Try another, click any words to retype them, or give one page a new layout.
Checked before you see it: Each section is checked as it is chosen, the whole site once it is built, and every page at phone and desktop width. A section that breaks the layout is replaced.
A dashboard as well: Ask for a dashboard and you also get admin screens in the same brand, marked as sample data.

Editing

The tools you use on every page.

Words in place: Double-click a heading or paragraph and type. Bold, italic and links sit on a small bar under the text, with ⌘B, ⌘I and ⌘K. Pasted text arrives as plain words.
Media library: Your uploads in one place, with search. Click a photo to place it or to replace the selected image, drag it onto the page, or drop files straight from your computer. Every image asks for alt text.
Brand: Seven colours, a heading and a body typeface, type scale, corner radius, content width and spacing, set once for the whole site. Presets drawn for different kinds of business are each contrast-checked.
Style and Effects: The Style tab sets an element’s layout, spacing, type and background. Effects adds transforms, filters, opacity and blend modes.
Alignment guides: Dragging an element snaps it to the edges and centres of the elements beside it, and shows the line it snapped to. Hold ⌘ to place it freely.
Undo and versions: One undo step is one thing you did. Each page keeps versions as you save, at most every five minutes, and before anything that rewrites it. A restore can be reversed.

Phones and tablets

Smaller screens are worked out from the desktop design.

Automatic layouts: Grids of three or more columns become two on a tablet and one on a phone, rows wrap, large type and padding scale down, and fixed widths stop at the edge of the screen.
The same rules everywhere: The canvas draws tablet and phone with the rules the published site uses, so what you check is what visitors get.
Your values win: Change a style while viewing Tablet or Phone and it applies at that width only, over the automatic layout.
Three widths: Switch the canvas between desktop at 1280 pixels, tablet at 768 and phone at 375.

Publishing and code

Put the site live, or take it with you.

Publish: Each publish compiles every page and is kept as its own numbered version, so rolling back puts an earlier version’s files live again.
Ready for search and sharing: Every page gets a title and description, and the site gets a sitemap.xml, a robots.txt, sharing cards and a 404 page. CSS, JavaScript and HTML are minified.
Form submissions: Forms on the published site are stored, and each entry arrives in the Workshop’s Form submissions inbox. A hidden spam trap and a flood limit are built in.
Export: Download a zip of every page with one stylesheet, one script and a README. Elements that look the same share a class, so the CSS stays small.
A CLAUDE.md for finishing: The export includes a CLAUDE.md: the brand as CSS variables, every page’s sections, and a list of what is still a stand-in. Open the folder in Claude Code and ask it to finish the site.
Forms that do not pretend: An exported form sends nothing until it is pointed somewhere, and says so, rather than showing a message that it was sent.

How each part works

The guide takes these in order, from starting a site to publishing it, with the names of the buttons you will press.

Get started Read the guide