How to Use Claude to Build a Squarespace Website (Step by Step)

Be specific. Anthropic’s guidance for Claude is that the more precisely you explain what you want, the better the result, and design work is no exception.

Load the brief with everything about the business: who it serves, what it sells, what’s going on the page, where the site will live, how you want someone to feel when they land on it. Claude uses all of it.

Then stop short of the decisions you’re hiring it to make. The typefaces, the type scale, the palette, the spacing, the layout. Each one you fix in advance is one Claude no longer makes, so the design comes out capped at whatever you’d have picked yourself. If you already know you want a centered hero in Inter with a green accent, write that down and you’ll get it. You’re just not asking for design help at that point.

Collect three reference sites first

Describing a mood in words is hard work. Showing Claude three sites you already like takes a minute and gives it more to work with.

You can pull references from our inspiration galleries, which are organized by industry, platform, style, page type, etc. The sites are live, so click into a few and see how they behave.

Pick from outside your own industry. Send ten photographer sites, and Claude gives back the centered hero and three-column grid that every photographer already has. It’s not necessarily bad; in fact, being obvious is even preferable. But you can play with a combination of one photographer site, one architecture studio site, and one magazine site for a more distinct o.

Say what you like about each one. Telling Claude “I like this site” doesn’t give it much. Telling it “the work sits in a full-bleed grid, and the captions only appear on hover” does. If a reference is slow or sits behind a login, screenshot the section you mean and paste the image in.

Write the brief

A brief that works names the business, the audience, the feeling, and where the site will live.

Here’s the prompt that started the FIELDWORK build: “Design a website for an independent brand studio that I’ll build in Squarespace. Confident and editorial, with the work front and center. Make real design decisions, don’t play it safe.”

What came back was a fully responsive single-page design: kinetic hero, editorial services list, a dark “selected work” gallery, a numbered process, a testimonial and a contact section, all in HTML I could open straight away.

Claude comes back with decisions already made. For FIELDWORK it picked:

• Type: Bricolage Grotesque for display, Hanken Grotesk for body, Space Mono for labels.
• Color: a cool gallery-white, a near-black ink, and a single ultramarine used on roughly one element in ten.
• One signature moment: a headline that reveals line by line on load, with everything else kept calm.

Go through them and decide which ones you’d defend. For anything you wouldn’t, describe the change instead of editing the file yourself: “make the work section darker,” “the hero feels too tall on mobile,” “give me a second, more expressive option.” Send one change per message, so you can tell which edit caused what.

Ask Claude to document the design before you open Squarespace. The rebuild means re-entering every one of its decisions by hand, and you want them as values you can copy rather than pixels you’re estimating off a screenshot.

Just ask, “Give me a brand style guide,” and Claude will make it for you.

A snapshot from the guideline page Claude made for FIELDWORK

For FIELDWORK that produced color values in HEX, RGB, and HSL with usage ratios and contrast checks; the type families with a full scale of sizes, weights, tracking, and leading; spacing and grid rules; motion principles; imagery direction; and a voice and tone section.

It keeps paying out after launch. Six months from now, when you add a page, the guide tells you what size the heading should be and which blue to use.

A layout isn’t a website. Ask for everything else while the style guide is still in the session, so it all comes back using the decisions you just locked down.

Start with the words and the rebuild instructions:

“Write the real copy for every section in the voice from the style guide: hero headline and subhead, service descriptions, about text, and the contact call to action. No placeholder text.

Then map the design to Squarespace. For each section, tell me the section type, which native blocks to use, the theme color to assign, and anything that needs CSS or a Code Block.”

Then the logo. Not every site needs a drawn one, and a well-set wordmark in your display face is enough for most businesses. If you do want files, ask here so they pick up the same type and color decisions.

This is where Claude refused my request, which turned out well. It ran in a sandbox that didn’t have the brand font installed, so any PNG it generated would have come out in the wrong typeface. Instead of handing over a broken file, it built me an export tool: a page that loads the real font in my browser and saves transparent PNGs of every logo variant at any size. Big 👍

The HTML is your visual blueprint. You recreate it with Squarespace’s own building blocks.

5a. Pick your plan

Check what each plan allows before you buy one.

Squarespace code features by plan, September 2026. Sources: Add custom code to your site and Code blocks.

So Basic can carry Claude’s fonts, colors and spacing. The CSS editor accepts a @import line, which is the normal way to load a Google font, though a few newer ones won’t come through, and Claude’s CSS goes underneath it. You won’t match the HTML character-for-character, since native blocks have their own spacing. What Basic can’t run is JavaScript, so you lose the headline reveal and the scrolling strip.

Take Basic ($16/month billed annually, $192/year) if you’re happy with a still site. Take Core ($23/month, $276/year) for the motion, tracking pixels, deeper analytics, or to drop Basic’s 2% fee on physical products. Basic already reports traffic and geography, so what Core adds is the conversion and funnel data. Pay annually either way: 36% cheaper than monthly, and it’s what gets you the free first-year domain.

5b. Set your fonts and theme colors

All native, no code needed. In the design panel, set your display and body fonts from the built-in library. If your display font isn’t there, either load the real one with the CSS editor @import from 5a, or pick the nearest match in the same class. The pairing and the size relationships carry more of the look than the exact face does.

Then set your theme colors to the palette in the style guide: paper, ink, and the single accent. Squarespace applies these across the whole site, so every heading, button and link stays consistent.

5c. Rebuild the page as sections

Squarespace is section-based, which maps almost perfectly onto how Claude structured the design. Build the sections in order and use native blocks for straightforward content: headings, text, buttons, image grids.

The FIELDWORK section order and color rhythm, and which parts need the optional code layer from 5f.

Pay attention to the color column. Most of the site sits quietly on paper with one loud ultramarine block, and that decision does more for the brand than anything else on the page.

Some of what Claude designed won’t come across with native blocks alone. The headline that reveals on load, the scrolling capabilities strip, and the expanding services list all need the optional code layer in 5f. Build the still version first and decide afterward whether any of them is worth the code.

5d. Swap in real images

The design uses CSS color fields as placeholders. Swap them for real photos in image and gallery blocks, then apply the duotone treatment from the style guide. A two-tone overlay makes a mismatched set of photos look like one brand, and Squarespace can do the tint natively.

5e. Check it on mobile

Sections are responsive by default, but preview on a real phone anyway and adjust the spacing or font sizes wherever things feel tight. On a native build, there are no scripts to break, so you’re only checking the layout.

5f. Optional: add the custom-code layer

Everything above gets you a clean, on-brand site. The flourishes (the headline reveal, the scrolling strip) sit on top as a separate layer. Ask Claude to split the code three ways, then sort it:

• Fonts and global styles → the CSS editor. The @import and everything after it. Works on every plan.
• Per-section HTML and CSS → a Code Block in the section where it lives. Every plan, as long as the CSS sits inside <style> tags.
• JavaScript → Footer Code Injection for shared scripts, Code Blocks for per-section ones. Core or higher only.

Test every snippet on the published page or in Preview in Safe Mode, not in the editor. Squarespace withholds code from logged-in users as a security measure, so a snippet that looks broken to you may be rendering correctly for everyone else.

Skip all of this if you don’t want the motion. The site works without it.

• Connect your domain. Annual plans include one free for the first year, then $20/year for common TLDs.
• Set each page’s SEO title and description, and add alt text to every image.
• Check contrast on the real build. The style guide gives you the ratios, but accent-on-ink and light text over photos are where it tends to fail.
• Send yourself a test form submission.
• Run a final mobile pass, then publish.

Our version of Claude to Squarespace for reference. It looks pretty identical.