Build a website you are proud of, even if you have never written a line of code.
v1.32.0 · 4 skills · 65 commands · 116 reference docs · 15 audit sub-agents
NullToHero is an add-on for Claude. Install it once, then ask Claude in plain language to design your pages, get them ranking on Google, and check them for problems before you publish. Claude does the expert work, you stay in control.
What it is · Pick your goal · Install · Skills · Compare · Workflow · Assets
Claude already writes code. NullToHero gives it the taste and the checklists of a senior web team: a designer, an SEO specialist, a quality inspector, and a reviewer who looks at the whole site at once.
You do not learn commands by heart. You say what you want ("make this landing page look more premium", "why am I not on Google", "is this ready to ship"), and Claude picks the right tool. The sections below show what each tool produces so you know what to expect.
| I want to | Type this | What you get back |
|---|---|---|
| Start a brand-new site | /siteasy setup then /siteasy build |
A brand file, then a styled, responsive first page |
| Make a page look more professional | /siteasy amplify index.html |
Stronger type, color and spacing, same content |
| Be found on Google | /seo audit yoursite.com |
A scored report and a prioritized action plan |
| Add Google rich results | /seo schema yoursite.com |
Valid Schema.org JSON-LD, ready to paste |
| Show up in AI answers (ChatGPT, Perplexity) | /seo geo yoursite.com |
A visibility score with per-engine fixes |
| Catch problems before publishing | /inspect detect index.html |
A checklist of issues, each with its fix |
| See it the way a real browser does | /inspect preview index.html |
Desktop and mobile screenshots, bugs fixed in a loop |
| Check the whole site in one pass | /audit yoursite.com |
One site health score and one merged action plan |
| Make a background video play everywhere (even iOS Low Power Mode) | /siteasy video hero.mp4 |
A canvas-decoded loop with poster, fallbacks and zero CLS |
| Finish and ship, gates included | /siteasy ship |
Polish, defect scan, deterministic audit and hardening, in order |
NullToHero is a Claude Code plugin and a marketplace in one repository.
A. From the marketplace (recommended, auto-updates)
/plugin marketplace add MariusYvard/NullToHero
/plugin install null-to-hero@null-to-hero-marketplace
Later, pull new releases with /plugin marketplace update null-to-hero-marketplace.
Manual install (macOS, Linux, Windows)
B. Manual install (macOS, Linux)
git clone https://github.com/MariusYvard/NullToHero.git
bash NullToHero/install.shC. Manual install (Windows PowerShell)
git clone https://github.com/MariusYvard/NullToHero.git
powershell -ExecutionPolicy Bypass -File NullToHero/install.ps1[!WARNING] A one-liner (
bash <(curl -fsSL https://raw.githubusercontent.com/MariusYvard/NullToHero/main/install.sh)) also works, but it runs a remote script directly. Clone and readinstall.shfirst if you want to inspect it.
Tip
The short forms /siteasy, /seo, /inspect and /audit work as long as no other plugin claims the same name. If you run several plugins, use the namespaced form /null-to-hero:siteasy.
|
|
|
|
|
|
Your design partner. It plans the look, builds the pages, fixes spacing and type, makes everything responsive, and adds tasteful motion. You describe the goal, it produces real, production-ready front-end.
All 33 commands
| Command | What it does |
|---|---|
build [feature] |
Shape, then build a feature end-to-end |
plan [feature] |
Plan UX/UI before writing code |
setup |
Create PRODUCT.md and DESIGN.md context |
concept [project] |
Set the creative direction before building: idea, anti-reference, signature moment |
research [scope] |
UX research planning, methods selection, persona and journey synthesis |
ia [target] |
Information architecture, card sorting, tree testing, navigation patterns |
journey [persona] |
Generate empathy maps, journey maps, or service blueprints from research |
document |
Generate DESIGN.md from existing project code |
extract [target] |
Pull reusable tokens and components into a design system |
handoff [target] |
Developer handoff spec: layout, tokens, props, states, breakpoints, edge cases, motion, accessibility |
tokens [project] |
Audit or create a two-layer CSS token system — primitives + semantic layer + dark mode |
critique [target] |
UX design review with heuristic scoring |
audit [target] |
Technical quality checks (a11y, perf, responsive, WCAG 2.2, image strategy, forms) |
polish [target] |
Final quality pass before shipping |
amplify [target] |
Amplify safe or bland designs — bolder typography, stronger color, more presence |
simplify [target] |
Reduce visual noise, tone down, strip to essence |
clarify [target] |
UX copy, error messages, button labels, empty states |
launch [target] |
Production hardening + performance — errors, i18n, edge cases, Core Web Vitals |
onboard [target] |
First-run flows, empty states, feature discovery, activation |
animate [target] |
Add purposeful animations and motion |
typeset [target] |
Typography audit, font selection, hierarchy |
layout [target] |
Spacing systems, visual rhythm, grid tools |
charts [target] |
Accessible data visualization: chart-type choice, a11y grades, non-color fallbacks |
adapt [target] |
Mobile/tablet/desktop/print adaptation |
mobile [target] |
Phone-specific ergonomics — thumb zone, touch targets, mobile navigation, virtual keyboards, mobile audit |
delight [target] |
Micro-interactions, personality in copy, satisfying feedback |
overdrive [target] |
View Transitions API, WebGL, scroll-driven animations |
video [target] |
Guaranteed-play decorative video: classify, transcode to a canvas-decodable asset (WASM decoder), emit the drop-in component |
parallax [target] |
Multi-layer depth, scrollytelling, AI-adaptive motion governance, WCAG 2.2.2 compliance |
live [target] |
Interactive variant mode (requires running dev server) |
ship [scope] |
Finish-and-ship pipeline: polish, defect scan, deterministic audit, hardening, final audit |
overhaul [url] |
Audit-driven rework: baseline, triage by remediation route, execute, compare |
express [brief] |
Zero-to-landing: setup, concept, tokens, plan, build, motion, checks, launch |
Common runs: a new page (setup → plan → build → layout → adapt → amplify → launch), a refresh (critique → amplify → polish), a design system (document → extract → tokens).
Your search expert. It audits a whole site or a single page, writes the structured data Google wants, builds sitemaps, and checks how visible you are in AI answers.
All 19 commands
| Command | What it does |
|---|---|
audit [url] |
Full site SEO audit — crawls up to 500 pages, scores 7 dimensions, outputs ACTION-PLAN.md |
page [url] |
Deep single-page analysis — title, meta, H1-H6, schema, images, content quality, score |
plan [business-type] |
Complete SEO strategy — architecture, content pillars, keyword plan, 4-phase roadmap |
technical [url] |
Technical audit — robots.txt, sitemaps, Core Web Vitals, mobile, security, JS rendering |
schema [url] |
Detect, validate, and generate Schema.org JSON-LD — Organization, Article, Product, etc. |
content [url] |
E-E-A-T analysis, readability, keyword density, AI citation readiness |
geo [url] |
AI search optimization — Google AI Overviews, ChatGPT, Perplexity, llms.txt, brand signals |
sitemap [url] |
XML sitemap validation and generation with industry-specific templates |
images [url] |
Image SEO audit — alt text, formats (WebP/AVIF), lazy loading, CLS, LCP |
local [business] |
Local SEO — Google Business Profile, NAP consistency, citations, reviews, LocalBusiness schema |
hreflang [url] |
Hreflang validation and generation for multilingual and multi-region sites |
programmatic [url] |
Programmatic SEO — URL patterns, quality gates (warn 100+, hard stop 500+), deduplication |
competitor-pages [url] |
"X vs Y" and "alternatives to X" pages with feature matrices, FAQ schema, conversion hooks |
cluster [keyword] |
Semantic keyword clustering — intent-based grouping, content architecture, gap analysis |
sxo [url] |
Search Experience Optimization — intent alignment, page-type matching, persona analysis |
drift [url] |
SEO drift monitoring — baseline capture, change detection, history tracking |
backlinks [url] |
Backlink profile analysis via free data sources (Moz, Bing, Common Crawl, GSC) |
ecommerce [url] |
E-commerce SEO — product pages, category pages, faceted navigation, Product schema |
report [url|file|generate] |
Format any audit output as a client-ready Markdown report or PDF with score gauges |
Common runs: new site (plan → build → technical → schema → sitemap → audit → report), existing site (audit → technical → content → geo → backlinks), a page that will not rank (page → content → schema → sxo), local business (local → schema → geo), before a redesign (drift baseline → redesign → drift compare).
Your quality gate. Three quick checks to run before you ship.
All 3 commands
| Command | What it does |
|---|---|
detect [target] |
Deterministic anti-pattern scan — finds focus rings, clipped dropdowns, pure black/white, tiny touch targets, missing reduced-motion, and more |
preview [target] |
Real Chromium screenshot — desktop + mobile viewports, reads back visually, fixes bugs in a loop |
review [file] |
Design engineering code review — motion crimes, a11y violations, forbidden patterns, Before/After table with score; plus code robustness (security, performance, correctness) |
Common runs: before every ship (detect → preview → review).
Runs every specialist at once across search, defects and design, then merges everything into one score and one action plan ordered by priority. The orchestration is documented in docs/ARCHITECTURE.md.
All 10 commands
| Command | What it does |
|---|---|
full [url] |
All 15 sub-agents across SEO, defects, and design; unified report + action plan |
seo [url] |
Search-visibility group only (5 SEO sub-agents) |
defects [url] |
Front-end defect group only (4 inspect sub-agents) |
design [url] |
Design-quality group only (5 siteasy sub-agents) |
quick [url] |
One representative sub-agent per group for a fast triage |
checks [url] |
Deterministic pre-pass only: computed checks plus SITE-AUDIT.json, no sub-agents |
verify [url] |
Consensus re-check: re-runs the gating dimensions (a11y, interaction, technical) K times and reconciles them by majority vote |
compare [A] [B] |
Diff two targets (before/after a site, or A vs B): per-check verdict changes and score deltas |
learnings [file] |
Review LEARNINGS.md candidates accumulated by real audits and turn accepted ones into rules, gates, laws or fixtures |
report [file] |
Format an existing audit into a client-ready report, a self-contained HTML page, or PDF |
The deterministic pre-pass behind checks fetches the page once (optionally rendering a client-rendered SPA with Playwright), computes the objectively decidable verdicts (32 checks: contrast, image dimensions, viewport, robots.txt, headings, titles, security headers, video hygiene, motion guards, media weight and more), attaches to each one the fixWith route toward the command that fixes it, and writes a machine-readable SITE-AUDIT.json. That JSON powers a structural compare, score-over-time, and a CI gate you can drop into any repo as a GitHub Action (uses: MariusYvard/NullToHero@v1.14.0). See docs/ARCHITECTURE.md and tools/audit/README.md. To analyze a live site in the browser with Claude, see docs/CLAUDE-IN-CHROME.md.
Common runs: a full pass (audit), a consensus re-check (audit verify) or a before and after diff (audit compare).
See sample output
A theme from /siteasy tokens, a drop-in :root stylesheet with WCAG-checked tokens:
:root {
--bg: #0B0B0C;
--surface: #161618;
--fg: #F5F5F4;
--accent: #6E56CF; /* on-accent 5.2:1, passes AA */
--ring: #6E56CF;
--text-lg: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
}Structured data from /seo schema, valid Schema.org JSON-LD ready to paste:
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "Example",
"url": "https://example.com",
"logo": "https://example.com/logo.png"
}An action plan from /audit, ordered by severity:
## Action plan
### Critical
- Contrast 3.1:1 on the hero CTA. Raise the accent or darken the label.
### High
- LCP 3.8s. Preload the hero image and set fetchpriority="high".
### Medium
- Heading order skips from H2 to H4. Renumber the section.NullToHero overlaps four kinds of tool. The honest comparison: each column is excellent at what it is for, none of them spans the whole loop of building, auditing, scoring and fixing inside your own files.
Text version of the table
| Capability | NullToHero | AI site builders v0 · Lovable · Bolt |
Audit tools Lighthouse · axe |
SEO suites Semrush · Ahrefs |
Design skills ui-ux-pro-max · ux-ui-mastery · Taste |
|---|---|---|---|---|---|
| Designs and builds real pages | ✅ | ✅ | — | — | 🟡 |
| Audits an existing site | ✅ | — | ✅ | ✅ | — |
| Routes every finding to the command that fixes it | ✅ | — | — | — | — |
| Deterministic 0-100 score, reproducible in CI | ✅ | — | 🟡 | 🟡 | — |
| Design taste scored (memorability, motion, Gestalt) | ✅ | 🟡 | — | — | 🟡 |
| SEO with structured data | ✅ | — | 🟡 | ✅ | — |
| AI-search visibility (GEO, llms.txt) | ✅ | — | — | 🟡 | — |
| Accessibility: WCAG 2.2 rules and contrast checks | ✅ | 🟡 | ✅ | — | 🟡 |
| CI gate on every push | ✅ | — | ✅ | — | — |
| Runs inside Claude, on your own files | ✅ | — | — | — | ✅ |
| Free, open source, no account | ✅ | — | ✅ | — | ✅ |
| Editable knowledge (rules, laws, resources as CSV) | ✅ | — | — | — | 🟡 |
✅ yes · 🟡 partial · — no. Nuances: Lighthouse's deterministic score covers performance, not design or content; Semrush's Site Health score is deterministic but proprietary and not CI-native; builders generate tasteful UI without judging or scoring it.
NullToHero is the one that spans build, defects, SEO and a scored whole-site audit in a single plugin, with every finding routed to the command that fixes it. It is not a hosted product or a visual editor: it runs inside Claude and edits the real files in your project, so the output is yours to keep and version.
/siteasy research understand the users
/siteasy ia validate the structure
/siteasy journey map empathy and journeys
/siteasy setup define brand, audience, tone
/siteasy plan plan UX before coding
/seo plan build the SEO strategy in parallel
/seo cluster group keywords by intent
|
/siteasy build build the interface
/siteasy tokens set up the token system
/siteasy layout fix spacing and rhythm
/siteasy adapt make it responsive
/siteasy mobile tune phone ergonomics
|
/siteasy amplify make it beautiful
/siteasy simplify strip to the essence
/siteasy typeset refine the typography
/siteasy animate add motion
/siteasy delight add micro-interactions
/siteasy clarify sharpen the copy
|
/inspect detect catch anti-patterns
/inspect preview see it in a real browser
/siteasy critique heuristic UX review
/inspect review final code-quality gate
/siteasy polish last quality pass
|
/seo audit full SEO check
/seo technical crawl and render health
/seo schema add structured data
/seo content E-E-A-T and readability
/seo images image SEO
/seo geo AI-search visibility
|
/siteasy launch harden for production
/seo report client-ready report
/seo drift watch for regressions
Tip
In a hurry, /audit yoursite.com runs the whole check in a single pass.
Set up your project
NullToHero works best with two small files in your project root. Claude reads them so its output matches your brand.
PRODUCT.md, who your users are, your brand, tone and anti-references. Create it with/siteasy setup.DESIGN.md, your colors, typography and components. Generate it with/siteasy document.
The assets/ folder ships an original, license-clean starter library: 139 icons, 20 background patterns, 18 spot illustrations, 34 animations and 6 templates. Icons and patterns take the surrounding color and the animations honor prefers-reduced-motion. Everything is CC0 for the media and MIT for the templates, so it is safe to copy into any project. Open assets/gallery.html to browse the whole set, and assets/README.md for how to wire each kind in. During a build, /siteasy build recommends curated external sites first and uses this library as a fallback for quick, offline or placeholder assets.
NullToHero ships 110 reference docs that Claude loads only when it needs them, so a large project does not eat your context budget.
See the full knowledge base
siteasy, design (77): accessibility-engineering, adapt, animate, animation-engineering, assets-library, audit, bolder, brand-identity, brand, clarify, cognitive-load, color-and-contrast, color-systems, colorize, component-patterns, component-recipes, concept, craft, creative-patterns, critique, css-architecture, dark-mode-engineering, data-viz, delight, design-tokens, distill, document, elevation, extract, fetch-asset, form-patterns, gestalt, handoff, harden, heuristics-scoring, image-strategy, information-architecture, inspiration, interaction-design, journey-express, journey-mapping, journey-overhaul, journey-ship, landing-patterns, layout, live, memorability, mobile-ergonomics, motion-choreography, motion-design, onboard, optimize, overdrive, parallax, personas, polish, print-styles, product, quieter, resource-recipes, resource-recommendations, responsive-design, shape, ship-checklist, signature-moments, spatial-design, stock-media, style-systems, teach, testing-strategy, tokens, typeset, typography, ux-research, ux-writing, video, wcag-2-2
seo, search (23): action-plan, audit, backlinks, cluster, competitor-pages, content, drift, ecommerce, geo, head-meta, hreflang, images, local, page, performance, plan, privacy-consent, programmatic, report, schema, sitemap, sxo, technical
seo, plan assets (6): agency, ecommerce, generic, local-service, publisher, saas
inspect, defects (4): code-quality, detect, preview, review
audit, whole-site (6): checks, compare, full, html-report, learnings, report
shared state and routing: DIRECTION.md and LOG.md project files read by every command, tools/data/laws.csv (16 canonical numeric laws, CI-checked citations), tools/data/remediation-map.csv routing every check and rule to the command that fixes it (fixWith in SITE-AUDIT.json), and tools/reference-graph.json (the reference graph, zero orphans enforced by CI).
A stack-aware design-system generator also lives under tools/design-system/, covering 16 technology stacks (React, Next.js, Vue, Svelte, Astro, Nuxt, Angular, Laravel, HTML and Tailwind, shadcn/ui, SwiftUI, React Native, Flutter, Jetpack Compose, Three.js, Nuxt UI).
Requirements
- Node.js, for
/inspect preview,/inspect detectand the validator (tests/validate.js). - Playwright, installed on first
/inspect previewrun. - Python 3, for the design-system generator (
/siteasy setup) and the Python tests.
- Changes by version: CHANGELOG.md
- How to contribute: CONTRIBUTING.md
- Reporting a vulnerability: SECURITY.md
- Credits and third-party licenses: ATTRIBUTION.md, NOTICE
node tests/validate.js # run before opening a PRBuilt by Marius Yvard · Releases · Changelog · Contributing
License: Apache 2.0. See LICENSE.