# Kestrel One

A launch page for a keyboard that explodes into parts as you scroll.

Category: Design to copy

## The brief

Design the launch page for Kestrel One, a premium mechanical keyboard. The brand kit and spec sheet are in `./input/`. The hero is a keyboard you model procedurally in three.js that explodes into its layers (keycaps, switches, plate, PCB, case) as I scroll, then reassembles. Include everything a real product page needs: features, specs, an interactive typing-sound demo, pricing, FAQ and a footer, all fully responsive. Commit to a distinctive, named art direction that fits the brand, and avoid generic SaaS styling.

## The exact prompt every model received

````markdown
Design the launch page for Kestrel One, a premium mechanical keyboard. The brand kit and spec sheet are in `./input/`. The hero is a keyboard you model procedurally in three.js that explodes into its layers (keycaps, switches, plate, PCB, case) as I scroll, then reassembles. Include everything a real product page needs: features, specs, an interactive typing-sound demo, pricing, FAQ and a footer, all fully responsive. Commit to a distinctive, named art direction that fits the brand, and avoid generic SaaS styling.

Input resources for this brief are in `./input/` (`brand/brand.md`, `brand/logo-mark.svg`, `brand/logo.svg`, `specs.md`). Treat them as reference material and copy anything you use into `./site/`.

## House rules (identical for every model)

- Build a website in `./site/`. The entry point is `./site/index.html`. Only `./site/` gets published, so keep scratch files, scripts and tooling outside it.
- It must be fully static: no backend, no server code, no API keys, no logins. It will be served as plain files from a CDN under a sub-path and shown inside an iframe, so use relative URLs only.
- JavaScript libraries and web fonts from public CDNs are fine (cdn.jsdelivr.net, unpkg.com, cdnjs.cloudflare.com, esm.sh, Google Fonts). Nothing else may be fetched at runtime.
- Resources: you may create any media the site needs (images, textures, audio, video, 3D models, data files) and put them in `./site/`. Make them yourself with code or local tools: node, python3 and ffmpeg are installed, and you may `npm install` packages into a folder outside `./site/`. Do not download third-party media. Budget: 40 MB total, 15 MB per file.
- It must work with mouse, keyboard and touch, on screens from 375 px phones to wide desktops, and run smoothly on a mid-range laptop.
- The first 3 seconds matter: it should look impressive immediately.
- Test it. Run `node .prism/check.mjs`: it opens `./site` in a real headless Chromium at desktop (1440×900) and phone (390×844) sizes, prints console errors and failed requests, and saves screenshots to `./.prism/shots/`. Look at the screenshots. Run it as often as you like.
- Work autonomously; nobody will answer questions. You have up to 60 minutes.
- When you are done, write `./NOTES.md` (outside `./site/`) covering what you built, your key decisions, and known issues.
````

## Artifacts

- **Haiku 4.5** (`claude-haiku-4-5-20251001`, 5m 56s): live https://prism-artifacts.berrocal.xyz/kestrel-one/haiku-4-5/site/index.html · replicate https://prism.berrocal.xyz/i/kestrel-one/haiku-4-5/index.md · pack https://prism-artifacts.berrocal.xyz/kestrel-one/haiku-4-5/pack.zip

Input resources: https://prism-artifacts.berrocal.xyz/inputs/kestrel-one/resources/brand/brand.md, https://prism-artifacts.berrocal.xyz/inputs/kestrel-one/resources/brand/logo-mark.svg, https://prism-artifacts.berrocal.xyz/inputs/kestrel-one/resources/brand/logo.svg, https://prism-artifacts.berrocal.xyz/inputs/kestrel-one/resources/specs.md