Web Artifacts — Prototyper
"Live web prototypes"
When to use
- An idea needs to be felt, not described — "prototype this so I can click through it".
- A stakeholder demo is imminent — "I need something to show in an hour".
- A flow is contested — "would users even get this? build it and let's see".
- De-risking a real build — "prove the risky interaction before we commit the sprint".
Workflow
- Scope-cut first: what is the ONE interaction to prove? Write it as a sentence — "user
drags expenses into buckets and the summary recalculates live". Everything not serving that
sentence gets faked or cut.
- Choose the thinnest stack that proves it. Default is vanilla HTML/CSS/JS in one file.
Add a CDN library (cdnjs only) solely when the core interaction demands one — charts,
drag-and-drop, markdown rendering.
- Seed believable fake data. 8–15 records with realistic names, amounts and dates, plus at
least one edge case: the too-long string, the zero value, the overdue date. Declare it as
const DATA = [...] at the top of the script so reviewers can tweak it live.
- Build mobile-first. One breakpoint upward if needed; 44px touch targets; the primary
action sticky and reachable by thumb.
- Wire the interactive states. The core interaction genuinely works — click, drag, type,
submit — with visible state change, an empty state, and a success or error state. Zero dead
buttons: stub everything else with a toast ("Not in this prototype").
- Polish for ten minutes, not two hours. One accent color, one font stack, consistent
spacing — enough that the idea is not judged on ugliness. This is not the design system pass.
- Ship. One .html file that opens by double-click or pastes straight into a Claude artifact,
plus the three-line delivery note: proven / faked / test.
Output format
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Prototype — <the one interaction></title>
<!-- CDN deps only if the core interaction needs them:
https://cdnjs.cloudflare.com/ajax/libs/chart.js/4.4.1/chart.umd.min.js -->
<style>/* mobile-first; one accent; system font stack */</style>
</head>
<body>
<main><!-- the ONE interaction, fully wired --></main>
<script>
const DATA = [/* 8-15 seeded records, edge cases included */];
// state -> render() -> delegated event handlers, all inline
</script>
</body>
</html>
Delivery note, always attached:
PROVES: <the one interaction, now working>
FAKED: <auth, persistence, API calls — hardcoded or stubbed>
TEST: <what to watch when a human first touches it>
Quality bar
Example
Invocation: "Prototype a Splitwise-style expense splitter for ski trips."
Produces: expense-splitter.html (~300 lines): six friends and twelve expenses seeded
(including a 0.00 lift-pass refund edge case), an add-expense form with validation states,
per-person balances recomputed live on every change, a settle-up view, an empty state for a fresh
trip — vanilla JS, zero dependencies, opens by double-click. Delivery note: PROVES live balance
math; FAKED persistence; TEST whether users understand "who paid" versus "who owes".
1---2name: web-artifacts3description: Turns any idea into a live single-file HTML prototype in minutes — inline CSS/JS, CDN-only dependencies (cdnjs), mobile-first, seeded with believable fake data, interactive states wired — ready to open in a browser or paste as a Claude artifact. Use when the user says "prototype this", "show me a working demo", "make this idea clickable", "can we test this flow before building it", or needs to feel an interaction instead of reading a spec.4---56# Web Artifacts — Prototyper78> "Live web prototypes"910## When to use1112- An idea needs to be felt, not described — "prototype this so I can click through it".13- A stakeholder demo is imminent — "I need something to show in an hour".14- A flow is contested — "would users even get this? build it and let's see".15- De-risking a real build — "prove the risky interaction before we commit the sprint".1617## Workflow18191. **Scope-cut first: what is the ONE interaction to prove?** Write it as a sentence — "user20 drags expenses into buckets and the summary recalculates live". Everything not serving that21 sentence gets faked or cut.222. **Choose the thinnest stack that proves it.** Default is vanilla HTML/CSS/JS in one file.23 Add a CDN library (cdnjs only) solely when the core interaction demands one — charts,24 drag-and-drop, markdown rendering.253. **Seed believable fake data.** 8–15 records with realistic names, amounts and dates, plus at26 least one edge case: the too-long string, the zero value, the overdue date. Declare it as27 `const DATA = [...]` at the top of the script so reviewers can tweak it live.284. **Build mobile-first.** One breakpoint upward if needed; 44px touch targets; the primary29 action sticky and reachable by thumb.305. **Wire the interactive states.** The core interaction genuinely works — click, drag, type,31 submit — with visible state change, an empty state, and a success or error state. Zero dead32 buttons: stub everything else with a toast ("Not in this prototype").336. **Polish for ten minutes, not two hours.** One accent color, one font stack, consistent34 spacing — enough that the idea is not judged on ugliness. This is not the design system pass.357. **Ship.** One .html file that opens by double-click or pastes straight into a Claude artifact,36 plus the three-line delivery note: proven / faked / test.3738## Output format3940```html41<!doctype html>42<html lang="en">43<head>44 <meta charset="utf-8">45 <meta name="viewport" content="width=device-width, initial-scale=1">46 <title>Prototype — <the one interaction></title>47 <!-- CDN deps only if the core interaction needs them:48 https://cdnjs.cloudflare.com/ajax/libs/chart.js/4.4.1/chart.umd.min.js -->49 <style>/* mobile-first; one accent; system font stack */</style>50</head>51<body>52 <main><!-- the ONE interaction, fully wired --></main>53 <script>54 const DATA = [/* 8-15 seeded records, edge cases included */];55 // state -> render() -> delegated event handlers, all inline56 </script>57</body>58</html>59```6061Delivery note, always attached:6263```64PROVES: <the one interaction, now working>65FAKED: <auth, persistence, API calls — hardcoded or stubbed>66TEST: <what to watch when a human first touches it>67```6869## Quality bar7071- [ ] Opens by double-clicking the file — no build step, no server, no install72- [ ] The ONE interaction fully works, with visible state changes and an empty state73- [ ] Fake data reads as real and includes at least one edge case74- [ ] Zero dead buttons — everything clickable responds or admits it is stubbed75- [ ] Usable one-handed at 375px wide76- [ ] Dependencies, if any, load from cdnjs — and only because the core interaction demanded them7778## Example7980**Invocation:** "Prototype a Splitwise-style expense splitter for ski trips."8182**Produces:** `expense-splitter.html` (~300 lines): six friends and twelve expenses seeded83(including a 0.00 lift-pass refund edge case), an add-expense form with validation states,84per-person balances recomputed live on every change, a settle-up view, an empty state for a fresh85trip — vanilla JS, zero dependencies, opens by double-click. Delivery note: PROVES live balance86math; FAKED persistence; TEST whether users understand "who paid" versus "who owes".
alebgl77