Hakuto

An open-source static website builder powered by Claude Code. Clone it, describe what you want, and ship a production-ready site in minutes.

Built with Astro, Tailwind CSS v4, and shadcn/ui. Deployed to Cloudflare CDN.

Documentation and more on https://hakuto.dev/. Also an announcement post.

Live example how a Hakuto repo looks like for a real website: https://github.com/teamniteo/site-hakuto

Quick Start

Hakuto ships as a Claude Code plugin. Install once, scaffold new sites anywhere.

# Inside Claude Code:
/plugin marketplace add teamniteo/hakuto
/plugin install hakuto@hakuto

Then in an empty directory:

mkdir my-site && cd my-site
claude

/hakuto:init

Followed by:

bun install
bun run dev

Open localhost:4321 to see the site.

How It Works

Hakuto is a Claude Code plugin bundling skills, a subagent, and an Astro scaffold. Skills (design rules, component patterns, copy, analytics, etc.) live in the plugin and update via /plugin update hakuto. The scaffolded CLAUDE.md ties everything together inside your site repo.

1. Install the plugin — one time, global
2. /hakuto:init — drops an Astro + Cloudflare starter into an empty directory
3. Describe your site — "Build me a landing page for a coffee roaster" and website-builder takes over
4. Approve the design — a short interview, then 2–3 distinct directions and a branding.astro style preview built from real tokens; iterate there before any pages are written
5. Ship it — bun run build && wrangler deploy pushes to Cloudflare Workers

Stack

Layer	Technology
Framework	Astro 6.x
Styling	Tailwind CSS v4
Components	shadcn/ui (43 components)
Hosting	Cloudflare Workers
Runtime	Bun

Project Structure

The plugin (this repo)

.claude-plugin/
├── plugin.json         # Plugin manifest
└── marketplace.json    # Single-plugin marketplace
commands/
└── init.md             # /hakuto:init scaffolder
skills/                 # 15 site-building skills
agents/                 # Astro file editor subagent
scaffold/               # Astro project copied by /hakuto:init

A scaffolded site (what /hakuto:init drops in your cwd)

src/
├── assets/          # Images, favicon source
├── components/
│   ├── ui/          # shadcn/ui React components
│   └── *.astro      # Astro page sections
├── layouts/         # Base layout with SEO, fonts, schema
├── pages/           # File-based routing
└── index.css        # Theme tokens (Tailwind v4 @theme)

CLAUDE.md            # Agent spec for your site
AGENTS.md            # Auto-generated page index
worker/              # Cloudflare Worker entry
wrangler.toml        # Worker name, assets, custom domain

website-builder adds two more as it builds: site-specification.md (design decisions — direction, dials, palette, fonts) and src/pages/branding.astro (the living style guide, kept out of nav).

Available Scripts

bun run dev       # Start dev server
bun run build     # Production build → dist/client/
bun run preview   # Build, then serve via wrangler dev (Workers runtime)
bun run check     # TypeScript checks
bun run lint      # Lint with Biome
bun run format    # Format with Biome

Built-in Skills

The Claude Code agent has access to specialized skills for common tasks:

• agent-browser — Drive a browser for testing and screenshots
• brand-designer — Generate custom color palettes (OKLCH color-wheel math)
• code-review — Audit source against the project's CLAUDE.md rules
• fonts — Web fonts via Astro's Fonts API
• pagespeed-audit — Live Lighthouse / Core Web Vitals audit of deployed pages
• plausible-analytics — Privacy-friendly analytics
• prelaunch-checklist — Pre-launch validation (wrangler, forms, legal pages, placeholder scrub, gates)
• professional-copywriter — Conversion-optimized copy
• scaffold-sync — Pull selective scaffold updates from the installed plugin into existing sites
• section-blog — Multi-page blog system
• section-docs — Documentation with sidebar nav
• section-form — Contact forms and signups
• seo-audit — Static SEO audit of the built HTML
• skill-creator — Author and evaluate new skills
• website-builder — Design interview, style preview, and page creation

Forms

These steps apply only when using Customer.io for forms.

1. Choose a stable ASCII-safe form name. The HTML form name field must match it; the form skill handles this for you. For example, submitting to /~/form-contact creates a contact form in Customer.io.
2. Merge and deploy the form to the live site, then submit the production form once. Customer.io only shows forms that have received data.
3. In Customer.io, open Integrations from the sidebar, then click Forms in the main view. Click the form you created.
4. Go to Campaigns and press Create campaign.
5. In the campaign, open the Workflow tab and set up the messages. A workflow can include email or Slack messages.
6. For email, set a subject. The subject can use any event data, for example New sponsor-order from {{event.email}}.
7. In the email editor, use the event on the left side to preview the data that triggered the workflow.
8. Add this body to the email template to dump all submitted values. Use + to customize the message:

{% for pair in event %}
{{ pair[0] }}: {{ pair[1] }}

{% endfor %}

9. Use the email editor ... menu to send a test email.
10. Use the Sent tab to see sent or drafted messages.
11. To enable sending, the campaign must not be in draft. Go to Actions and start the campaign.

License

MIT