Learn · Build · Make it yours

Free bike repair shop website template

Independent bike repair shops and mobile bike mechanics that take drop-offs and bookings

What is included

Bike repair shop / bicycle service workshop

  • Signage strip with live opening status
  • Hero with a hanging repair ticket
  • Services and prices on parts-drawer labels
  • How it works in three steps
  • Enamel OPEN sign with opening hours
  • Drop-off slot booking (take a number)
  • Footer with address and phone

Get the full frontend-design workflow

Bicycle repair workshop

Spoke & Chain — with the skill

Same brief, skill on. The page hands you a repair ticket hanging on a hook over a pegboard wall; prices live on parts-drawer labels.

Spoke & Chain — with the skill — 9-second scroll preview

Signature: A manila repair ticket on a hook

Palette
  • Pegboard #E9ECEF
  • Workshop Green #1E5A47
  • Ticket Manila #F2D680
  • Grease #191A17
  • Chrome #D5D9DE
  • Signal Orange #FF6B1A
Fonts
  • Display: Big Shoulders Display
  • Body: IBM Plex Sans
  • Utility: IBM Plex Mono

Download this folder (1.13 MB)

The easy way

Download a demo folder, give it to Claude (drop the zip into a chat or open the folder in Claude Code) and write: make this site. Claude follows START_HERE.md.

Pinned prompt
Pinned prompt for Spoke & Chain — with the skill
Use the frontend-design skill. Build this brief exactly from the design plan below. Do not change the palette, fonts,
layout or signature element.

BRIEF:
Build a one-page website for Spoke & Chain, a small bicycle repair workshop at 14 Foundry Lane. Services and prices: tune-up $65 (about 2 days), wheel truing $30 per wheel (next day), e-bike check from $90 (3 days), flat fix $15 (while you wait). Hours: Mon–Fri 09:00–19:00, Sat 10:00–17:00, Sun closed. The page must let people book a drop-off slot. One self-contained index.html, Google Fonts allowed, no frameworks.

DESIGN PLAN:
# Design plan — Spoke & Chain (frontend-design skill, pass 1 + critique)

**Subject:** a neighbourhood bicycle repair workshop. **Audience:** commuters whose bike just broke.
**Single job of the page:** get them to book a drop-off slot.
**The subject's world:** pegboard walls, hooks, paper repair tickets on string, parts drawers with label cards,
enamel OPEN signs, "take a number" dispensers, grease and chrome.

## Tokens
| Role | Name | Hex |
|---|---|---|
| Background | Pegboard | `#E9ECEF` (+ hole pattern) |
| Primary | Workshop Green | `#1E5A47` |
| Paper | Ticket Manila | `#F2D680` |
| Ink | Grease | `#191A17` |
| Metal | Chrome | `#D5D9DE` |
| Action | Signal Orange | `#FF6B1A` |

**Type**
- Display: **Big Shoulders Display** 800, uppercase — workshop signage; used only for headlines.
- Body: **IBM Plex Sans** 400/500.
- Utility: **IBM Plex Mono** — ticket fields, prices, hours.

## Layout
```
[ signage strip: SPOKE & CHAIN · BICYCLE REPAIR · 14 FOUNDRY LANE      ● open until 19:00 ]
[ BROKEN BIKE?                       |      (hook)                              ]
[ HANG IT ON OUR HOOK.               |   ┌ REPAIR TICKET No.0417 ┐  <- manila,   ]
[ drop off before 10, ride after 5   |   │ [x] flat  [x] brakes  │     rotated,  ]
[ [Book a repair slot]  see prices → |   │ READY BY 17:30 (stamp)│     on string ]
[                                    |   └ - - stub 0417 - - - ┘                ]
[ PARTS DRAWERS: 4 metal drawer fronts, each a label card with service + price + time ]
[ HOW IT WORKS: drop off → we call with a quote → ride home  (real sequence, numbered) ]
[ enamel OPEN sign with hours        |  TAKE A NUMBER: tear-off slot stubs          ]
```

**Signature:** the repair ticket hanging on a hook — the page literally hands you your ticket.

## Critique of pass 1 → revisions
- Pass 1 had a big "5,000+ bikes repaired / 4.9★" stats row → that is the template answer. **Cut.**
- Pass 1 used a dark hero with an orange accent → too close to the "near-black + one bright accent" default.
  **Changed** to a light pegboard wall; orange is only for actions and the stamp.
- Numbered steps kept only for "how it works", because it is a real sequence.
- Removed decorative gradients; texture comes from the pegboard holes and paper, not from gradients.

Template FAQ

Can I use this template for client or commercial work?

Free for personal and commercial use, including client work; modify freely; attribution appreciated, not required; do not resell the templates as-is.

Read LICENSE.md

A starting point for a working repair shop

Spoke & Chain is a website starting point for an independent bicycle workshop, a neighborhood mechanic or a mobile repair business. Its job is to help a rider understand what you repair, how a drop-off works and how to contact you. The example focuses on servicing bicycles rather than selling a catalog of bikes and accessories. Use it when your most useful next action is an enquiry or a repair booking.

Let the workshop shape the page

The hanging repair ticket gives the opening section a recognizable workshop reference. Parts-drawer labels organize services and example prices, while the opening sign gives practical information a distinct place in the layout. The short process section can explain what happens between bringing a bicycle in and collecting it. Replace every sample price, address and opening time with information you can maintain. Treat any opening-status or booking interaction as demonstration behavior until connected and tested against your real operations.

Adapt the files with Claude

Download the folder and start with START_HERE.md. Give Claude your workshop name, location, service list, actual prices and preferred contact method. Ask it to read plan.md before changing index.html so the service hierarchy and visual direction stay consistent. Make one change at a time, then inspect both desktop and phone layouts. Ask Claude to explain how each contact or booking control works; a button that looks complete is not evidence of a working booking service.

Understand what you are downloading

This download includes an HTML example, its design plan and the prompts behind it. Compared with choosing a template only from a marketplace preview, you can inspect the design instructions and use them to guide further edits. It is a starting point to review and adapt, not an installed WordPress theme or a managed ecommerce service. The scrolling previews show the supplied example; interactive HTML is inside the ZIP. Read the included license, replace demonstration content and test the finished site before sharing it with customers.

Build something for your business

Want this for your business? Tell us what you are building.

frontend-design is an Anthropic skill (see its LICENSE). Demo sites, plans, prompts and previews © AxionAI.