Claude frontend-design skill: a practical guide

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.

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 Low Tide Lab, a marine-science day camp for ages 8–12 at the North Cove field station. Three one-week sessions in July (Week 1 is full, Week 2 has 4 spots left, Week 3 has 9), $340 per week Mon–Fri, groups of 8 with two instructors, 15% sibling discount. Show what kids find at low tide (shore crab, anemone, sea star, limpet), what a typical day looks like, and what to bring. Parents should be able to reserve a week. One self-contained index.html, Google Fonts allowed, no frameworks.

DESIGN PLAN:
# Design plan — Low Tide Lab (frontend-design skill, pass 1 + critique)

**Subject:** a marine-science day camp on a rocky shore, ages 8–12. **Audience:** parents (the kids look over their shoulder).
**Single job:** get a parent to reserve a week.
**The subject's world:** tide charts, tide-pool field guides, specimen cards, rubber boots, buckets, sea glass.

## Tokens
| Role | Name | Hex |
|---|---|---|
| Background | Foam | `#EAF6F3` |
| Ink / deep water | Deep Channel | `#0E3B53` |
| Water | Sea Glass | `#7FC8B8` |
| Accent / action | Coral | `#FF7F6B` |
| Secondary | Kelp | `#3F6B3A` |
| Highlight | Buoy Yellow | `#FFD23F` |

**Type**
- Display: **Bricolage Grotesque** 800 — chunky, a bit playful, still readable for parents.
- Body: **Nunito** 400/700 — round and friendly.
- Utility: **DM Mono** — tide times, dates, specimen numbers.

## Layout
```
[ Low Tide Lab                               weeks · what we find · reserve ]
[ THE BEST CLASSROOM                                                       ]
[ DISAPPEARS TWICE A DAY.     [Reserve a week]                             ]
[ ~~~~~~~~ tide curve across the full width ~~~~~~~~                       ]
[   ▼ Week 1 low 06:12   ▼ Week 2 low 07:40   ▼ Week 3 ...   (sessions sit ]
[   in the troughs of the tide = when camp is on the rocks)                ]
[ FIELD GUIDE: specimen cards (crab, anemone, sea star, limpet) w/ numbers ]
[ A DAY AT CAMP: timeline pinned to the tide (real sequence)               ]
[ reserve card: price, what to bring (boots, bucket), CTA                  ]
```

**Signature:** the tide curve is the schedule — camp weeks sit in the low-tide troughs.

## Critique of pass 1 → revisions
- Pass 1 had a photo-style hero with a gradient overlay and a centered headline → template. **Replaced** by the tide curve.
- Pass 1 palette was navy + gold "premium" → wrong audience. **Changed** to foam / sea glass / coral, with navy only as ink.
- Pass 1 had "01 / 02 / 03" on the field-guide cards → not a sequence. **Changed** to real specimen catalogue numbers (LT-014).
- Kept the day timeline numbered by clock time, because it is a sequence.

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 Kiln & Co, a pottery studio at 9 Mill Yard teaching wheel-throwing to adult beginners. This month: four Thursday classes at 19:00 — Wheel basics (2 spots left), Centering & cylinders (5), Bowls that don't wobble (4), Glazing night (8). Classes are 8 people; $240 for six classes, the card is valid for two months; clay, aprons and firing included. Show what people make in weeks 1, 3 and 6, plus a short FAQ. Goal: book a class. One self-contained index.html, Google Fonts allowed, no frameworks.

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

**Subject:** a small pottery studio teaching wheel-throwing to adult beginners. **Audience:** people who want to do something
with their hands after work. **Single job:** book a spot in a class.
**The subject's world:** glaze test tiles with cone numbers, drips, the wheel, clay-stained aprons, kiln shelves, punch cards.

## Tokens
| Role | Name | Hex |
|---|---|---|
| Background | Celadon Mist | `#E4EEE6` |
| Ink | Iron Oxide | `#2B2724` |
| Glaze 1 | Celadon | `#A7CDB0` |
| Glaze 2 / action | Cobalt | `#2544A8` |
| Glaze 3 | Clay | `#C46E43` |
| Glaze 4 | Tenmoku Honey | `#E3A33B` |

**Type**
- Display: **Syne** 800 — wide, slightly odd, like lettering scratched into clay; headlines only.
- Body: **Manrope** 400/600.
- Utility: **DM Mono** — cone numbers, times, prices.

## Layout
```
[ KILN & CO                                   classes · pricing · [Book a class] ]
[ GET YOUR HANDS            |  (spinning wheel with a pot, top view, CSS rotation) ]
[ DIRTY ON THURSDAYS.       |                                                     ]
[ THIS MONTH'S CLASSES = a shelf of glaze test tiles, each tile = one class:        ]
[  [cobalt drip | Thu 19:00 | Wheel basics | cone 6 | 3 spots]  [clay drip ...]     ]
[ WHAT YOU'LL MAKE: 3 pot silhouettes in the glazes, week 1 / week 3 / week 6       ]
[ PUNCH CARD pricing (6 holes) + FAQ in plain words                                 ]
```

**Signature:** the class schedule is a row of glaze test tiles with real drip shapes and cone numbers.

## Critique of pass 1 → revisions
- Pass 1 was cream background + serif display + terracotta accent → exactly the "warm cream / serif / terracotta" default.
  **Changed** background to celadon mist, display to Syne, and made cobalt the action colour; clay is one glaze among four.
- Pass 1 had an Instagram-style photo grid → no real photos in the brief, and it is template. **Replaced** by the pot progression.
- Pricing was three tier cards → **replaced** by a single punch card, which is how studios actually sell classes.