Free tailor website template

Live demo Download ZIP Build without code GitHub

Edit it by hand: it is one index.html with no build step, so you can open it in any text editor, change the words and photos, and upload it to any static host. Not a coder? Describe your business in one sentence to 8B's AI website builder and it designs a new site for you, with more pages when you need them. Designing is free; publishing with hosting is $9 a month, billed yearly. It also works inside Claude and ChatGPT.

MIT license · Made by 8B, an AI website builder · Plain text: haldane.md, data: haldane.json

Tailor website template: first screen on a phone

About this tailor website template

Tailor website template: one free HTML page for a bespoke tailor or made-to-order clothier, with a cloth library, three fittings, a price list, trunk shows in five cities and a fitting request form. The ground is near-black with bottle green and gold, and the display type is extra-wide. An AI agent can adapt the single file.

At a glance, October 2026. One 99 KB index.html with its CSS and JavaScript inside, 12 sections, 18 Unsplash photos credited in CREDITS.md, Funnel Display, Geist and TikTok Sans from Google Fonts, GSAP 3.13.0 (ScrollTrigger, SplitText); Lenis 1.3.27 smooth scroll loaded from jsDelivr.

A tailor sells trust before cloth, so the page answers in order: how many cloths, what happens at each of three fittings, what a suit costs, where the cutters will be this season. It suits a suit maker, shirtmaker or shoemaker who sells by appointment. Ladies tailoring website templates can start here: a women's atelier needs new copy and photos. As a tailor website template for Claude Code it is one file, with the process story already built.

If you vibe code the site in Claude Code, Cursor or Codex, it goes quickest when the agent gets the facts only the workroom has: prices with weeks and fittings, the deposit, cloth mills and weights, cutters and roles, trunk show dates, hours and legal name. The agent then replaces the brand name everywhere, including the text ring on the gold stamp, and sets --len on the four trait words, the Come in headline and the footer wordmark. The finished file can go live on a free github.io address.

Pick this when the business is a craft sold by appointment, with a long process, fixed starting prices and visits to other cities. A jeweller or goldsmith sells pieces rather than commissions, and the goldsmith template is closer to that. Clothes sold ready-made need a cart, which this lacks. The weak spot is booking: every button jumps to a form that sends nothing, and there is no calendar. If you would rather not edit code at all, 8B also has an AI website builder.

Good for:

Bespoke tailor or suit makerMade-to-order clothier, shirtmaker or shoemakerAtelier or workshop that sells by appointment and travels to clientsAny craft studio that wants a dark, editorial look with a process story

Turn the tailor website template into your site with an AI agent

With an AI coding agent

Files (PowerShell: curl.exe):

curl -LO https://raw.githubusercontent.com/8bsite/tailor-website-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/tailor-website-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/tailor-website-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/tailor-website-template/main/CREDITS.md

Prompt for the agent:

Read AGENTS.md, then edit index.html. Make this the site for <my workroom: name, city, garments and prices, fittings and weeks, deposit, cloth mills, cutters, trunk show cities and dates, hours, address, how people book, legal name>. Replace first the brand name, cloth names, prices, cities, dates, people and the footer line. Keep the section ids, the data-8b-section, data-8b-motion and data-8b-part attributes and the classes AGENTS.md lists, and set each --len to the new text's character count. Ask me for missing facts; never invent prices, dates, hours or contacts.

In a terminal

npx degit 8bsite/tailor-website-template my-site

Tailor website design prompt for any AI tool

Use this to build a bespoke tailor site from scratch in Claude Code, Codex, Cursor, Lovable, v0 or Bolt, or to brief a designer. It is this template's design written as decisions; with the template itself, the short prompt above is enough.

Build a one-page website for a bespoke tailor sold by appointment. Audience: professionals and wedding parties who want a made-to-measure suit and need to trust the workroom before booking. Sections in order: navigation, opening, cloth library, three fittings, cutters, how it is cut, commissions with prices, trunk shows by city, archive, questions, contact form, footer. Type: TikTok Sans 800 in extra-wide uppercase for trait words and the footer wordmark; Funnel Display regular for the opening sentence, headings and prices; Geist for body text, labels, buttons and form fields. Colours: near-black ground #121413, warm white text #f3f2ee, bottle green #1d5a49, gold #e2a73c for small marks only, secondary text #c2c8c4, hairlines #3b403d. Layout: a full-height green opening panel with one long sentence and two small photo pills inside it, hairline dividers, tall pill-shaped photo frames, tilted portrait stickers. No purple gradient, no three icon cards, no centred hero with two buttons. Motion: one idea, swatches and photos opening from slits, with a sideways pinned track for the fittings; respect prefers-reduced-motion. Copy: short and concrete. Ask me for prices, weeks and fittings, deposit, cloth mills, cutters, trunk show dates, hours and legal name; never invent them, leave visible placeholders. One primary action, a fitting request, repeated in the opening and the contact section. Mobile: check 390px, tap targets of 44px, a menu button. Acceptance: no console errors, keyboard focus visible, list every placeholder.

Tailor website design and motion

Palette

#121413 page ground, header bar fill once you scroll, text on the gold stamp, hover fill of the opening button#f3f2ee main text, hairline dashes under the steps, outlines of buttons, the dash in the contact headline#1d5a49 ground of the full-height opening panel, hover fill of most buttons, the green glow under portrait stickers#e2a73c gold: focus outlines, step labels, trunk show outlines and sparkles, the stamp, lit progress sparkles, ring around a sticker on hover#c2c8c4 secondary text: notes, cloth mills, form labels, FAQ answers#3b403d hairlines, price row dividers, the unfilled progress line and its unlit sparkles#1c201e ground behind photos while they load, and the background of the form's select list

Fonts

TikTok Sans: weight 800 only, with a width axis from 75% to 150%: the extra-wide uppercase step and trait words, the Come in headline and the footer wordmark; the header wordmark uses it at normal width
Funnel Display: regular weight: the opening sentence, section headings, menu links, commission names, prices, city names and FAQ questions
Geist: weights 400 to 600: body text, notes, uppercase labels, buttons and form fields

A full-height green panel opens the page; its headline is one long sentence with two small photo pills inside it. Most sections then pair a heading on the left with a short paragraph on the right, above wide content: six tall swatches in a row, a sideways track of four steps, three tilted portrait stickers, four trait words beside one tall photo, hairline price rows and five pill-shaped city rows.

Tailor website design here keeps gold to small marks: the step labels, the outlines of the trunk show rows, the stamp, and sparkles when they light. Fifteen of eighteen photos sit in pills, two inside the opening sentence. Every pill button fills from its left edge on hover.

Every value of this tailor website design, with the type scale, spacing and the motion rules, is in its DESIGN.md file (Google's format), ready for a coding agent or Stitch.

What is on the tailor website page

Navigation
Wordmark, three links and a booking button; a Menu button opens a full-screen overlay with six links, the booking button, address and phone
The header bar hides once you scroll down past 160 px and returns on any scroll up; under 860 px a menu button opens a full-screen overlay.
Every Haldane suit begins as a brown-paper pattern drawn for one body, then is basted, fitted three times and finished by hand.
One large statement as the h1 with two small photo pills inside it, three facts and two links
On load the two photo pills inside the headline open from a slit, one after the other.
Four hundred cloths. One of them is yours.
Six cloth swatches arrive scattered like stickers, straighten into a row and open into tall pill bolts
Pinned for about 1.1 screens: six swatches fly in tilted and scattered, straighten into one row and open from rounded squares into tall pills.
Three fittings, twelve weeks
Four steps as extra-wide words joined by dashes; the track travels sideways while the section is held, photos open as they arrive
Pinned for about three to four screens: the four steps form one sideways track, each dash draws out of its word, each photo opens from a slit, and a progress line fills and lights four sparkles; the scroll length follows the track's width.
Three pairs of hands in every coat
Three portrait stickers with name, role and one line each
A hairline with a sparkle draws, then each portrait rises from below, fades in and settles onto its tilt as it arrives.
The Haldane cut
Four traits of the house cut in extra-wide type that stretches as it rises, beside one portrait
Each trait word widens from the narrowest to the widest setting of the display face as it rises through the lower half of the screen while its sparkle turns, and the portrait drifts down inside its frame.
Commissions
Price list of five garments in hairline rows, with weeks and fittings
A hairline with a sparkle draws above each of the five rows, and the heading rises.
We travel with the cloth
Five trunk-show cities with dates; a gold stamp rolls down beside the list and stamps each city
A gold stamp rolls down beside the list as you scroll, and each city row's outline and sparkle turn from grey to gold as the stamp passes it.
Your pattern stays with us
A photo cut into five bands that slide into register, with a paragraph and three terms
The photo is rebuilt from five horizontal bands that start offset to the left and right and slide into register near mid-screen.
Questions before a first fitting
Five questions and answers (native <details>) with an email link
A hairline draws above the list; opening a question turns its plus into a minus and its sparkle gold.
Come in
"Come in" headline closing onto a dash, workroom address, hours, phone, email, a photo and a fitting request form
Come and in slide in from opposite edges onto the dash while it shrinks from a long stroke to its resting length.
Footer
Hairline with sparkles, workroom, page links, contact links, the wordmark across the width, copyright and the Design: 8B credit
The hairline draws and its two sparkles pop in.

Before you publish the tailor website site

Replace social preview image, favicon, phone number, email address, contact form (sends nothing yet) and social media links and the invented demo facts (prices, dates, addresses). AGENTS.md lists them.
Book a fitting online button in the top bar and the menu lead to #contact (the request form at the bottom) now; point them to your booking page URL (Calendly, Cal.com) if fittings are booked online, or keep it on the form.
Book your first fitting button in the opening lead to #contact now; point them to your booking page URL, or keep it on the form.
Order cuttings by post button in the cloth section lead to #contact now; point them to your cuttings request page or form.
Book a slot links in the trunk shows list (five cities) lead to #contact now; point them to a booking link for each city and date, or the form.
Privacy and Terms links in the footer lead to #privacy and #terms, which do not exist on the page, so the links go nowhere now; point them to your privacy and terms pages.
The Privacy and Terms links in the footer point at anchors that do not exist yet.
The request form sends nothing: it shows the thank-you line after a check, so connect it to Formspree, Netlify Forms or your own endpoint.
The top bar hides while you scroll down and returns on scroll up, also with reduced motion on.
The cloth and fittings sections hold the screen while you scroll: about 1.1 screens for the cloth and about 3.3 to 4.2 screens for the sideways fittings track (measured at 390 to 1920 px wide), which feels long on laptop screens.

Questions about this tailor website template

Is this a free tailor website template, and can I use it for client sites?

Yes. It is a single index.html, a long single scroll, under the MIT license, so a freelancer can ship it for tailors free. GSAP, ScrollTrigger, SplitText and Lenis load from jsDelivr, the fonts from Google Fonts; no build step or CMS. The 18 photos are Unsplash images listed in CREDITS.md.

Can it work for a ladies' tailor, a shirtmaker or a shoemaker?

Yes, after a text pass. The five commission rows, the four fitting steps, the four trait words and the cloth swatches are plain text and photos, so rewrite them for women's suits, shirts or shoes. The demo FAQ already has a question about making for women; keep it or replace it.

Where does the fitting request form send its messages?

Nowhere yet. It requires a name and an email, then shows a thank-you line and clears the fields without sending anything. Connect Formspree or Netlify Forms with the steps in AGENTS.md, or delete the form and keep the email link. Also edit the line that promises a reply within one working day.

How do I hand it to Claude Code, Cursor or Codex, and what must stay?

Put index.html and AGENTS.md in one folder, then paste the prompt above; Codex has its own steps. The agent keeps ids, data-8b attributes and listed classes. Keep the header comment, the 8B meta tag and the Design: 8B footer link unless the owner asks to remove it. No file? Use the tailor website design prompt below in Lovable or Bolt.

Can I get a site like this without editing code?

Yes, with 8B's AI website builder. You describe the site in a sentence and its engine designs a new site, its own design, not this template. Designing is free; publishing with hosting and SSL, full HTML export and AI edits in chat are on Pro at $9 a month billed yearly. It also runs inside Claude and ChatGPT.

What happens on a phone, with reduced motion or with scripts off?

Under 860 px the header links hide behind a menu; under 760 px the swatches sit in two rows of three. With reduced motion the pinned views, scroll animations and smooth scrolling are off and the steps stack. Without JavaScript the menu cannot open, so on a phone only the footer links remain; the questions still open.

Not a tailor website? More free templates