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.
Signature: A manila repair ticket on a hook
- Palette
- Pegboard
#E9ECEF - Workshop Green
#1E5A47 - Ticket Manila
#F2D680 - Grease
#191A17 - Chrome
#D5D9DE - Signal Orange
#FF6B1A
- Pegboard
- 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
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.