playwright

Designer Pro and SEO

A Claude Code plugin for the web-design + SEO workflow: research a niche, generate a coherent design system, write a complete build brief, build, run a pre-delivery QA gate, port the result into any CMS, and review on-page SEO. One bundle so the same project context, scripts, and data libraries serve the whole loop.

Free and open source under the MIT License — see LICENSE.

Install

This repository is its own Claude Code plugin marketplace (it ships a .claude-plugin/marketplace.json), so installing is two commands in Claude Code:

/plugin marketplace add ZachArticulateV/designer-pro-and-seo
/plugin install designer-pro-and-seo@designer-pro-and-seo

Run /plugin afterward to confirm designer-pro-and-seo is enabled — the skills are then available in every project. See QUICKSTART.md for the five-minute golden path.

Developing or contributing? Load a local clone for the current session instead:

git clone https://github.com/ZachArticulateV/designer-pro-and-seo
claude --plugin-dir designer-pro-and-seo

From a clone you can also run the bundled checks from the repo root — python3 scripts/smoke_test.py (use py on Windows).

Shipping status (v1.10.1 "Depth Sweep"). 45 of 45 skills are Stable — 24 Core, 18 Lite, 3 routing (real steps, real scripts/data, graceful degradation without paid APIs, smoke-tested). Core skills are 3-layer (earned references + a deterministic engine and/or real Agent-tool fan-out, each pinned by a golden example); Lite skills are Stable single-file and get the same depth pass next. Every skill that can use an external tool is tool-aware: it uses a dedicated MCP/CLI when present and falls back to Claude's built-in web/browser tools + bundled scripts otherwise (references/CAPABILITY-TIERS.md). Skill descriptions describe only what the shipping version does. Full status: SHIPPING.md.

Why this plugin exists

Web design and SEO aren't the same job — but when you build a website they pull in the same direction, and most tools treat them as separate. So you end up re-explaining the same project to a design tool, then an SEO tool, then a QA checklist, then a CMS. They work hand-in-hand: good SEO depends on decisions design owns (clean semantic structure, fast and accessible pages, a clear content hierarchy), and good design is wasted if the page can't be found or crawled. This plugin keeps both in one bundle with shared project context, scripts, and data, so the whole build loop runs without hand-offs between disconnected tools:

research → design → build → SEO → QA → port — study the niche and capture the brief, generate an on-brand design system and build the pages, optimize them for search, run a pre-delivery QA (quality-assurance) gate, then port the result into any CMS.

("QA" here is quality assurance, not Q&A — it sits late on purpose, because it's the quality check on the finished build right before hand-off. The up-front requirements-gathering you might think of as "questions first" is the research step at the start of the loop.)

Shipping skills (v1.10.1) — 45 Stable, mostly free-tier

The whole loop runs end to end on the free tier. All 45 skills below are Stable; ★ marks the 24 Core skills (deepened this release — earned reference docs and/or a real parallel agent fan-out). The other 18 are Lite (Stable and single-file, slated for the same depth pass in v1.1), and 3 are routing helpers.

Design (10)

• ★ design-system-gen — generate a full design system: pattern, style, WCAG-safe palette, type pairing, effects.
• design-dimensions — structure a design brief around 5 core dimensions (layout, style, color, type, motion).
• ★ design-motion — motion code with a reduced-motion guard every time, plus a motion audit (layout-property animation, transition:all, infinite loops, removed focus rings).
• design-system-persist — save a design system to disk so later sessions reuse it.
• ★ design-build — generate distinctive, production-grade frontend UI from a design system.
• design-tokens-emit — export a design system as CSS / Tailwind / SCSS / Style-Dictionary tokens.
• ★ design-cro — CRO heuristic engine (CTA hierarchy, form friction, trust proximity, tap-to-call, headline clarity) ranked by impact ÷ effort, citing the UX rule set.
• ★ design-accessibility — audit HTML against WCAG 2.2 (alt text, heading order, labels, contrast, landmarks).
• ★ design-research — competitive research on a site + its rivals → a scored intelligence report.
• ★ design-visual-qa — screenshot baselines across viewports/browsers, then diff to catch rendering regressions.

Build & QA (5)

• blast-prompt — write a complete build brief (BLAST format) so an agent can one-shot the build.
• ★ qa-gate — 9-phase pre-delivery quality gate → PASS/CONDITIONAL/FAIL with a risk rating + fix list.
• ★ portable-html-port — port a built site into one self-contained HTML file for any CMS.
• ★ parallel-build — spin up N page variants in parallel from one brief + shared tokens, then compare.
• html-extract — capture a reference site's structure, tokens, and components into an inspiration file.

Content & data (3)

• copywriting — conversion-focused page/section copy (headlines, value props, CTAs, microcopy).
• content-draft — draft long-form content (blog / service / landing / guide) from a brief, originality-checked.
• csv-to-report — turn a raw CSV into a structured, business-ready report (redacts PII).

Business / GTM (1)

• client-outreach — cold-outreach openers + follow-up sequences + a compliance-checked import CSV.

Routing — the three-brain workflow (3)

• route-three-brain — the routing law: when to hand off between Claude, Codex, and Gemini.
• route-codex-review — forced adversarial review of Claude's own code/content by Codex before delivery.
• route-gemini-context — delegate whole-repo / multi-file analysis to Gemini's large context window.

SEO (23)

• ★ seo-audit — orchestrates a multi-specialist audit → one weighted health score + prioritized fix list.
• ★ seo-page — single-URL SEO review (on-page, meta, schema, images, links) in one pass.
• ★ seo-technical — 10-dimension technical audit with a fix per finding + a lab score (crawl & AI-crawler policy, index incl. 2 MB limit, security, mobile, CWV lab risks, JS render).
• ★ seo-schema — JSON-LD from HTML: nested-value validation (offers, returns, ratings), a cross-page @id entity-graph check, a linked site-graph starter, retired-rich-result flags, and a score.
• ★ seo-sitemap — sitemap validation + lastmod honesty + quality gates (4xx / noindex / canonical) + an internal-link graph (orphans, click depth, broken links) + generation.
• ★ seo-image-audit — image SEO audit: alt quality, WebP/AVIF, srcset/sizes, LCP loading, CLS, real byte + pixel budgets from the files, og:image, conversion commands.
• ★ seo-content — content quality + E-E-A-T + AI-citation-readiness analysis.
• seo-content-brief — competitive content briefs (headings, word counts, entities, links) from top-rankers.
• ★ seo-geo — optimize content to be cited by AI answer engines (AI Overviews, ChatGPT, Perplexity).
• ★ seo-strategy — plan multi-month SEO as a six-stage evidence loop, by business type.
• ★ seo-cluster — SERP-overlap topic clustering into hub-and-spoke content architecture.
• seo-sxo — search-experience optimization: detect page-type / intent mismatches by persona.
• ★ seo-hreflang — hreflang code rules + a cross-page cluster audit (return links, x-default, html lang, noindex/canonical conflicts) + generation.
• ★ seo-drift — git-for-SEO: baseline on-page elements and diff to catch deploy regressions.
• seo-competitor-pages — generate "X vs Y" / "alternatives" comparison pages with schema.
• seo-programmatic — plan + safeguard SEO for pages generated at scale (templates, thin-content gates).
• ★ seo-ecommerce — merchant-listing audit (markup vs visible price / rating / stock, returns, shipping, variants) + facet and pagination index hygiene.
• ★ seo-local-unified — local SEO: Google Business Profile, NAP consistency, citations, reviews, LocalBusiness schema.
• seo-google — real Google field data (Search Console, PageSpeed/CrUX) when connected.
• seo-dataforseo — live SERP / keyword / backlink / AI-visibility data via the DataForSEO MCP.
• seo-firecrawl — site crawl / map / JS-render scraping via Firecrawl (free sitemap fallback).
• seo-backlinks — backlink profile: referring domains, anchors, toxic flags, competitor gap.
• seo-image-gen — generate SEO-ready images (OG, heroes, infographics, favicons) at correct dimensions.

Backed by 42 scripts — all standard-library-only Python; every one but the design ranker library is also a runnable CLI. "Standard-library-only" means they use only what ships with Python, so there is nothing to pip install. They include the design engine + palette generator, page renderer, token emitter, CRO and motion audits, HTML porter, CSV profiler, capability probe, a shared SSRF guard + guarded page fetcher, and the SEO engines (technical, content, schema + entity graph, sitemap + link graph, images, GEO + llms.txt + AI crawlers, hreflang, e-commerce, drift, clustering, local), plus a smoke test and the release verifier. From a clone, python3 scripts/smoke_test.py verifies them. See QUICKSTART.md.

Two one-command audits over a static build

python3 scripts/workflow/site_audit.py --dir dist/ --base-url https://site.com --human     # SEO health score + one fix list
python3 scripts/workflow/qa_gate.py    --dir dist/ --base-url https://site.com --report    # pre-delivery PASS / CONDITIONAL / FAIL

site_audit.py runs every SEO engine that applies, scores each specialist, rolls them up re-normalized over what actually ran, says what it did not cover (and what that needs), and merges findings across pages. qa_gate.py runs the same engines plus a secret scan and deployment checks, and fills the client-facing QA template. Every current-state search fact they rely on is dated in references/shared/search-landscape-2026.md.

Tool-aware, not paid-gated

Every skill that can use an external tool follows a documented capability-tier cascade (references/CAPABILITY-TIERS.md): a dedicated MCP/API if connected → Claude's built-in web/browser tools + bundled scripts → a CLI connector (e.g. the Gemini CLI for image generation) → a guided manual path. So the formerly "in-development" skills (seo-google, seo-dataforseo, seo-firecrawl, seo-backlinks, seo-image-gen, design-research, design-visual-qa) all ship Stable with a real free/built-in path — they just go deeper when you connect a tool.

Routing helpers invoke the codex / gemini CLIs directly when present (or the adjacent openai-codex / cc-gemini-plugin tools), and degrade to documented manual steps when neither is installed — convenience wrappers, not a hard dependency.

Repository map

Start at any folder: each one has its own README explaining what lives there and why.

Folders