Web Artifacts Builder V2

Web Artefacts Builder

To build a frontend claude.ai artefact, follow these steps:

1. Initialise the frontend repo with scripts/init-artifact.sh
2. Pick a theme from resources/themes.css and apply it (see "Themes" below)
3. Develop your artefact by editing the generated code
4. Bundle to a single HTML file with scripts/bundle-artifact.sh
5. Share the bundled artefact with the user
6. (Optional) Test the artefact

Stack: React 19 + TypeScript + Vite 8 + Tailwind CSS v4 + shadcn/ui (new-york style) + lucide-react. Bundling via vite-plugin-singlefile. Requires Node 20.19+ or 22.12+.

Design principles

These principles are adapted from the html-design-examples skill. Load that skill alongside this one when you need patterns for specific artefact intents (status report, code review, PR write-up, design system page, editor, etc.); its rendered catalogue at resources/index.html indexes 20 single-file references.

• Calm, editorial aesthetic. Restrained accent colour, generous whitespace, content does the talking. Avoid hero gradients, marketing sheen, and dashboard-style chrome unless the artefact is a dashboard.
• Typography over chrome. Establish hierarchy with weight, size, and leading before reaching for borders, backgrounds, or coloured bars. Serif headings paired with sans body is the recurring pattern in the references and a reliable choice when you have no other signal. Defaulting to Inter as the only typeface is an AI-output tell - pick a pairing from the chosen theme's font notes.
• Earn your accent. Most themes ship with a single accent colour. Treat it as scarce. Use it for the one thing on the page that demands attention (the primary action, the link, the focused state) and almost nowhere else.
• Use the full width when it helps. Don't centre a narrow column when the content is tabular, comparative, or spatial. A wide layout with structured columns reads better than a 720px text shaft for anything that isn't longform prose.
• Export interactive state. If the artefact is an editor, board, or any surface where the user is doing work, finish it with a "copy as JSON" or "copy as prompt" button so the result flows back into the agent loop. See the 18-editor-triage-board.html example in html-design-examples for the pattern.

Anti-slop rule

Use visual accents (coloured border stripes, tinted-background callout boxes, accent bars on cards) only when the colour or treatment encodes specific information - status, category, severity, or priority that I've explicitly defined. Don't apply visual accents decoratively, don't rotate through palette colours across sibling items for variety, and don't reach for the tinted-callout-with-coloured-bar pattern as a default way to mark asides. If you're about to add an accent, ask whether removing it would lose information; if not, remove it and rely on plain typographic hierarchy instead.

Other things to avoid because they read as AI-default output: excessive centred layouts, purple gradients, uniformly rounded corners on everything, glassmorphism, emoji bullets, and three-card-grid hero sections with identical icons. The same goes for status badges or pulsing dots whose state never changes ("Active", "Verified"), copy that echoes the prompt or stack ("Built with..."), fake-system naming (// separators, SCREAMING_SNAKE labels, version pills, spaced mono-caps eyebrows), and landing-page furniture on working screens (hype subtitles, vanity stat strips, one headline word in the accent colour). Check the alignment of SVGs, ASCII art and timeline markers by measuring the computed boxes.