---
name: website-craft
description: Builds websites that look designed, not generated: a clear story, real copy, a strict type scale and generous spacing. Use for landing pages, product sites, portfolios and marketing sites in HTML or React.
---
# Website craft

## Read first
Brief.md for the product, the audience, the pages and the voice; the design reference, hero image and any logo wired in.

## Story
- The hero says what it is and who it's for in under ten words, with one primary button.
- Then proof (numbers, logos or a quote), then three to five sections that each answer one question, then a closing call to action and a footer.
- Real copy from the brief, never lorem ipsum; short sentences, specific nouns.

## Look
- Follow the wired reference's layout, spacing and mood without copying its brand.
- Two typefaces at most, a clear scale (e.g. 64 / 40 / 24 / 16), line length under 70 characters.
- One accent colour from the brief, used for buttons and highlights only.
- Wired images where they belong: the hero image large in the hero, every other wired picture in the section its name says, never stretched or cropped awkwardly. No section that wants a picture is left as an empty box.
- Responsive from 360 px wide, with focus styles and alt text. On phones the nav becomes a menu button, and words over a photo sit on a scrim or a calm part of it.
- Every pricing plan has its button; contact details are a form or a link, never a placeholder address (example.com).

## Avoid
Generic gradients, emoji as icons, centred walls of text, fake testimonials with stock names, and more than one primary button per screen.