halftone

Websites with opinions, printed in code.

01 / install  ·   02 / workflow  ·   03 / rules  ·   04 / templates  ·   05 / moods  ·   06 / audits  ·   07 / faq

_{— MANIFESTO}
The Claude Code plugin for award-tier web design.

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.

_{01 / INSTALL}
Three commands. One plugin.

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@halftone

Then /reload-plugins or restart your Claude Code session to load the new files. Verify under ~/.claude/plugins/cache/halftone/halftone/<version>/.

_{02 / WORKFLOW}
Six steps. Zero AI-slop.

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.

_{03 / RULES}
Hardcoded, non-negotiable.

[!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.