Recorded on desktop
This one is built to be scrolled with a mouse on a wide screen. Here is what it does.
Open the live demo anywayLen Ashby
A live pianist and singer for care homes, celebrations and tea dances, booked through WhatsApp
Specification
| Engine | Finished page, plain HTML, CSS and JavaScript |
| Renders | video-loop |
| Build step | None: open it or serve the folder |
Measured
| LCP | 0.3s |
| GLB | 0.0 MB |
| JS | 2 KB |
In the zip
- .cursor/rules/motion.mdc
- AGENTS.md
- CLAUDE.md
- GUIDE.md
- LICENSE.txt
- START-HERE.md
- assets/poster.webp
- prompts/chatgpt-sites.md
- prompts/claude-code.md
- prompts/cursor.md
- prompts/lovable.md
- prompts/replit.md
- reference/tokens.json
- site/assets/app.js
- site/assets/hero-loop.mp4
- site/assets/hero-loop.webm
- site/assets/newsreader-latin-wght-italic.woff2
- site/assets/newsreader-latin-wght-normal.woff2
- site/assets/poster.webp
- site/assets/schibsted-grotesk-latin-wght-normal.woff2
- site/assets/stage-keys.jpg
- site/assets/style.css
- site/favicon.svg
- site/index.html
- site/package-lock.json
- site/package.json
- site/prebuilt
- site/spec.json
- site/src/main.ts
- spec.json
Works with
| Tool | Tested with |
|---|---|
| ChatGPT Sites | Set in config |
| Claude Code | Set in config |
| Cursor | Set in config |
| Lovable | Default agent |
| Replit | Default agent |
Licence
One end product per kit on Free, Single and Builder. Agency licence on Studio and Lifetime. No redistribution of prompts or assets. Full terms.
Start here
The readme that ships in the zip.
The short way
Drag this folder into Claude Code, Codex, Cursor or whichever coding agent you use, and say:
Build this site
That is it. The agent reads AGENTS.md and CLAUDE.md in this folder on its own, finds the finished page in
site/, and gets on with it. Drag the folder rather than the zip: most agents will not look inside a zip.
To make it yours, say what you want in the same breath: "Build this site, call it Halden Joinery, and make the accent colour a deep green." It will change the copy and the colours for you.
If you would rather do it by hand
The page is plain HTML, CSS and JavaScript with no build step. Run cd site && npm run dev and open
http://localhost:5173, or open site/index.html in a browser. GUIDE.md says where each thing on the page is
changed.
Tool specific prompts, if you want more control
| Tool | File | Where to paste | Recommended model |
|---|---|---|---|
| ChatGPT | prompts/chatgpt-sites.md | Codex or ChatGPT Work, not the plain chat window | Set in config |
| Claude Code | prompts/claude-code.md | Terminal in this folder | Set in config |
| Cursor | prompts/cursor.md | Agent panel, this folder open | Set in config |
| Lovable | prompts/lovable.md | Knowledge file first, then chat | Default agent |
| Replit | prompts/replit.md | Agent, after uploading the folder | Default agent |
Copy: written for a fictional business as a demonstration. Replace every name, headline and figure with your own before launch. Licence: see LICENSE.txt. One end product per licence. Do not redistribute the prompts or assets.
The prompt
The opening of the prompt. The full text, with the assets it refers to, comes with the download.
# ChatGPT (Codex or ChatGPT Work with Sites) Paste this into Codex or ChatGPT Work, not the plain chat window. Sites needs the agent runtime. Open or upload this kit folder first. Recommended model: Set in config. @Sites Publish the finished page in site/ as a static website. Publish visibility: anyone with the link. Keep site/assets beside index.html and reference it relatively. Then apply the brief below. PROJECT This kit is a finished single page for "Len Ashby": a live pianist and singer for care homes, celebrations and tea dances, booked through WhatsApp. It is plain HTML, CSS and JavaScript in site/, with no framework and no build step. site/index.html is the page and everything it loads is in site/assets/. Adapt it; do not rebuild it in another stack unless you are asked to. This brief is written for a coding agent, and the DO NOT ADD list is not negotiable. FILES - site/index.html: the page, its copy and its structure - site/assets/app.js: the page's behaviour - site/assets/hero-loop.mp4: a film the page plays - site/assets/hero-loop.webm: a film the page plays - site/assets/newsreader-latin-wght-italic.woff2: a self-hosted font face, declared with @font-face in the stylesheet - site/assets/newsreader-latin-wght-normal.woff2: a self-hosted font face, declared with @font-face in the stylesheet - site/assets/poster.webp: the still used for the gallery and for link previews - site/assets/schibsted-grotesk-latin-wght-normal.woff2: a self-hosted font face, declared with @font-face in the stylesheet