Websites with opinions, printed in code.
01 / install ·
02 / workflow ·
03 / rules ·
04 / templates ·
05 / moods ·
06 / audits ·
07 / faq
Claude Code ships shadcn-clean SaaS design by default. Competent. Dead on arrival.
Halftone forces Claude into a design-director mode. It runs a brief, generates three art directions, ships a live HTML preview on localhost:3737 (full motion, no framework), then converts the validated preview to SvelteKit or Astro. Anti-AI-slop rules are enforced on every preview save by a PostToolUse hook.
The goal: push Claude toward the editorial, motion-rich, asymmetric craft that wins Awwwards — or at least stops embarrassing you in a studio pitch.
No purple gradients. No Inter. No lorem ipsum. No apologies.
Step 1 — add the marketplace:
/plugin marketplace add Sakaax/halftone
Step 2 — install the plugin:
/plugin install halftone@halftone
Step 3 — kick off a site:
/halftone
That's it. Halftone takes over from there.
Already on an older version? Pull the latest from the marketplace:
/plugin marketplace update halftone /plugin update halftone@halftoneThen
/reload-pluginsor restart your Claude Code session to load the new files. Verify under~/.claude/plugins/cache/halftone/halftone/<version>/.
Halftone refuses to write framework code until the user has validated a live HTML preview. Period.
01 Brief — 3 questions: a one-word feeling, one site you love + one word for why, one non-negotiable constraint. Hard cap.
02 Directions — three art directions dispatched in parallel. You pick one.
03 Preview — full-motion vanilla HTML/CSS/JS in halftone/preview/, served on localhost:3737. GSAP + Lenis from CDN. You iterate in plain language. A PostToolUse hook blocks banned fonts / gradients / Tailwind defaults on every save.
04 Framework choice — once the preview is good, pick SvelteKit or Astro. Halftone surfaces a recommendation per direction.
05 Convert — mechanical mapping: each data-slot becomes a component, each initX() moves verbatim into onMount (Svelte) or <script> (Astro). Lenis goes to the root layout, GSAP/Lenis switch from CDN to npm.
06 Code — framework-specific additions (routing, forms, dynamic meta, sitemap), motion polish, typography, audits.
Warning
Fonts banned, absolute — Inter · Arial · Roboto · Helvetica Neue · Open Sans · Lato · Montserrat
Gradients banned — purple-to-pink · rainbow · neon text glow
Colors banned as defaults — Bootstrap primary blue · Tailwind defaults unmodified · Material palette
Motion banned — random entry animations · bouncing arrows · auto-playing sliders · hover-scale on everything · fade-in-on-every-section
Layout banned — centered hero + subtitle + button (no asymmetry) · dense SaaS-packed grids
Framework banned — Next.js
Tip
Fonts allowed, whitelist — Newsreader · PP Editorial New · Migra · Fraunces · Mondwest · PP Neue Montreal · Space Grotesk · JetBrains Mono · GT America · PP Right Grotesk
Moods available — 7 curated palettes (see below)
Motion libs — GSAP · Lenis · Motion One, reason-driven, prefers-reduced-motion gated, custom cubic-bezier(0.76, 0, 0.24, 1) easing
These rules live in .claude/skills/halftone/SKILL.md and are re-read on every file write.
| Format | Best for | Slots |
|---|---|---|
studio-landing |
Agency / studio sites. Unseen, Basement, Locomotive style. | hero · primary-motion · footer · cursor · transition |
saas-premium |
Linear, Vercel, Raycast style premium SaaS. | hero · primary-motion · footer · cursor |
creative-portfolio |
Designer / artist indie premium portfolios. | hero · primary-motion · footer · transition · cursor |
italic slots are optional
Every format ships in both SvelteKit and Astro. 3 formats × 2 frameworks = 6 templates.
Framework selection is recommended per art direction:
- SvelteKit → dynamic SaaS · studio landings with heavy motion orchestration · client-state-heavy sites
- Astro → content-heavy portfolios · editorial + islands · SaaS with docs/blog built in
Always overridable with "direction 2 but in Astro".
| Mood | Palette | Vibe |
|---|---|---|
| Editorial Warm |
|
Warm browns, creams, terracotta — editorial craft-forward |
| Brutalist Mono |
|
Pure black/white + single accent — hard edges, type-dominant |
| Swiss Editorial |
|
Off-white, ink black, saturated accent — type-driven, grid-first |
| Organic Earth |
|
Olive, clay, bone, sage — organic shapes, hand-crafted |
| Y2K Glitch |
|
Chrome, electric blue, hot pink — retro-tech (explicit brief only) |
| Dark Academic |
|
Deep forest, aged parchment, burgundy — literary, patinated |
| Soft Pastel Print |
|
Muted risograph pastels — hand-craft, editorial print vibe |
When img-pilot isn't installed, Halftone falls back to 42 hand-curated SVGs (7 moods × 6 briefs: hero-bg · texture · ambient · detail · portrait · abstract).
Static — fast, no deps. CSS AST + HTML parse. Runs in ~200ms.
/halftone audit
Checks: clamp() type tokens · 48px tap targets · viewport meta · prefers-reduced-motion gating · loading="lazy" · alt text · <html lang> · focus-visible outlines · skip-link · palette contrast · semantic landmarks (nav / main / footer).
Deep — Playwright + axe-core, opt-in. Installs Playwright on-demand.
/halftone audit --deep
Launches chromium in mobile viewports (375 · 390 · 414px), measures real DOM tap-targets, tests nav-overlay interaction, runs full WCAG 2.1 AA axe-core analysis grouped by impact (critical/serious → fail · moderate/minor → warn).
Reports land in halftone/audit/responsive.md and halftone/audit/a11y.md (same schema).
| Plugin | Role | Halftone integration |
|---|---|---|
| ux-pilot | UX discovery & flows | Reads ux-pilot/ux-brief.md — skips Q1 of the brief |
| brand-pilot | Brand guardian | Reads brand-pilot/brand-kit.md — fixes palette, constrains typography |
| img-pilot | AI image generation | Called for moodboards + hero imagery — falls back to SVGs if absent |
Halftone sits outside the *-pilot family on purpose. It's a next-step product, not a sibling.
Halftone is a plugin that writes files to your disk and (optionally) handles API keys for img-pilot. Defenses shipped in v0.1:
- Auto-gitignore —
halftone/paths appended to your.gitignoreon first run (idempotent) - chmod 600 on key files (
halftone/.keys,halftone/.env) - Pre-commit hook — scans staged diffs for API key patterns (
sk-·AIza·api_key = "..."·IMG_PILOT_KEY=·RUNWAY_API_KEY=·KLING_) - FS scope enforcer — writes restricted to whitelist (
halftone/·src/halftone-generated/·static/·public/·package.jsonappend ·.gitignoreappend) - Prompt-injection filter — scans
direction.md/brief.mdfor known injection patterns before passing to Claude - Pattern integrity — sha256 per pattern in
patterns/index.json, verified at runtime - Dependency pinning — exact versions only, no
^, no~ - CSP starter templates — nonce-based, no
unsafe-inlinefor scripts - No runtime code fetching — patterns, moods, fonts all ship in the release tarball
Full threat model → SECURITY.md
Halftone itself: TypeScript 5.8 · Bun runtime (Node fallback) · Zod validation · gray-matter · postcss · node-html-parser · playwright (peer dep)
Generated sites: SvelteKit 2.x or Astro 4.x · GSAP 3.x · Lenis · Motion One · self-hosted fonts · vanilla CSS with custom design tokens (no Tailwind utility soup · no shadcn)
/halftone Start the full director workflow (v0.2)
/halftone direction Re-generate 3 fresh art directions
/halftone preview Re-launch the localhost:3737 preview server
/halftone convert Convert validated preview to chosen framework
/halftone audit Static audit (responsive + a11y)
/halftone audit --deep Full audit with Playwright + axe-core
/halftone mood list List 7 curated moods
/halftone hook install Install pre-commit API-key scanner
/halftone hook uninstall Remove it
/halftone status Show current workflow state
Is my generated site AGPL-3.0 too? No. AGPL-3.0 covers Halftone's plugin source only. Your generated sites can use any license — MIT, proprietary, whatever.
Does it work with Next.js? No. Next.js is banned explicitly. SvelteKit + Astro only. No plans to add Next.js.
Video / animations? Not in v0.2. No Runway/Kling/ffmpeg integration. v0.3+ consideration.
Where did the moodboard step go?
Removed in v0.2. The live HTML preview on localhost:3737 replaces it with a stronger signal — full visual + motion design instead of 6 static images. The 42 fallback SVGs and moods/ catalog are kept in repo for future pattern extensions but are no longer part of the default flow. See MIGRATION-v0.1-to-v0.2.md.
What if img-pilot isn't installed?
Halftone runs end-to-end on 42 curated SVG fallbacks. Full generated site, placeholder moodboards instead of AI-generated ones.
What if my brand-kit uses Inter? Halftone warns you loudly during the brief phase. Either accept drift, or update your brand-kit to a whitelisted font.
How do paid fonts work?
Halftone does NOT ship paid fonts (PP Editorial New · Migra · GT America · PP Right Grotesk). Scaffold emits halftone/README-fonts.md with purchase URLs + expected filenames. Fallback stack kicks in until you drop the WOFF2.
Next.js support ever? Unlikely. The ban is ideological.
v0.2 candidates — more pattern slugs · live API pricing in dry-run · mood pack extensions · community pattern contribution flow · video hero support (if demand)
v0.3+ — more auto-fix audit coverage · visual regression baselines · Remix / Nuxt (maybe) · mobile-native (if a craft story emerges)
- Landing — halftone.sakaax.com (coming soon)
- Ecosystem — ux-pilot · brand-pilot · img-pilot
- Issues — github.com/Sakaax/halftone/issues
- Maker — @sakaaxx · github.com/Sakaax
Halftone's plugin code must stay open-source if redistributed or hosted as a service. Your generated sites can use any license you want — MIT, proprietary, all rights reserved, whatever. The copyleft applies to Halftone, not to its output.
Websites with opinions, printed in code.
halftone v0.1.0 — crafted with halftone itself — agpl-3.0 — 2026