Artifacts Builder

To build claude.ai artifacts, follow these steps:

1. Initialize the frontend repo using scripts/init-artifact.sh
2. Develop your artifact by editing the generated code
3. Bundle all code into a single HTML file using scripts/bundle-artifact.sh
4. Display artifact to user
5. (Optional) Test the artifact

Stack: React 19 + TypeScript + Vite + Tailwind CSS v4 + shadcn/ui (Radix), installed and run with Bun. Bundling: vite-plugin-singlefile.

Requirements: Bun and Node.js 20.19+ or 22.12+ (the Vite minimum; the init script rejects anything older).

Design & Style Guidelines

VERY IMPORTANT: To avoid what is often referred to as "AI slop", avoid using excessive centered layouts, purple gradients, uniform rounded corners, and Inter font.

Quick Start