🐝 hive_studio

10 specialists. One Creative Director. Zero generic AI layouts.

A premium web design system for Claude Code. Mobile-first · Originally designed · Emotionally strong · SEO + GEO ready · Lighthouse 95+.

First time here? Run through INSTALL.md, then read CLAUDE.md (Claude auto-loads it).

---

What this is

A repeatable, opinionated system to design and ship premium websites with Claude Code. Not a template — a workflow + a hive mind of 11 specialized agents + a Creative Director critic + 70+ design skills.

The system:

• Forces a real intake before any design happens (30 indispensable questions)
• Dispatches 11 specialized agents (the hive mind) that work in parallel
• Routes a Creative Director critic at every gate to find blind spots — verdict APPROVE / REVISE / REJECT is binding
• Defaults to Next.js 15 + Tailwind v4 + shadcn/ui + Motion + GSAP/R3F when needed
• Generates premium hero imagery via Higgsfield (or NanoBanana for fast iteration)
• Bakes in SEO + GEO (Generative Engine Optimization for LLM citation) from phase 1
• Won't let you ship below Lighthouse 95+ mobile

Built by @svetlanatotolina (AI Automation Specialist, Antwerp). MIT licensed — fork, adapt, ship your own work with it.

---

Quick start

0. One-time setup

git clone https://github.com/[YOUR-USER]/[REPO].git web-design-studio
cd web-design-studio
bash _scripts/install-skills.sh    # installs 70+ wds-* skills into ~/.claude/skills/

See INSTALL.md for full prerequisites + MCP setup.

1. Start a new client project

bash _scripts/new-project.sh acme-corp

Then:

1. Open _projects/acme-corp/01-intake.md
2. Run the questionnaire from 01_INTAKE/client-questionnaire.md with the client
3. When intake is complete + greenlit, tell Claude:

   "Run phase 02 for acme-corp"

Claude reads 02_STRATEGY/README.md, dispatches brand-strategist, then routes to creative-director for the Gate 1 critique.

---

Folder map

hive_studio/
├── CLAUDE.md                      ← Constitution (auto-loaded)
├── README.md                      ← You are here
│
├── 00_SYSTEM/                     ← How the system works
│   ├── workflow.md                ← ASCII flow diagram
│   └── skills-mcp-routing.md      ← Which tool for which job
│
├── 01_INTAKE/
│   └── client-questionnaire.md    ← The 30 indispensable questions
│
├── 02_STRATEGY/README.md          ← Phase 02 instructions
├── 03_DESIGN/README.md            ← Phase 03 (parallel: UX + Art + Content + Copy)
├── 04_BUILD/README.md             ← Phase 04 (parallel: Frontend + Motion)
├── 05_SEO_GEO/README.md           ← Phase 05 (parallel: SEO/GEO + Performance)
├── 06_QA/README.md                ← Phase 06 cross-cutting QA
├── 07_DELIVERY/README.md          ← Phase 07 delivery + handoff
│
├── _agents/                       ← The Hive Mind (10 specialists + 1 CD)
│   ├── 00-orchestration.md        ← How they work together
│   ├── 01-brand-strategist.md
│   ├── 02-ux-architect.md
│   ├── 03-art-director.md
│   ├── 03b-visual-producer.md     ← Higgsfield / NanoBanana / imagegen
│   ├── 04-content-architect.md
│   ├── 05-copywriter.md
│   ├── 06-frontend-designer.md
│   ├── 07-motion-designer.md
│   ├── 08-seo-geo-strategist.md
│   ├── 09-performance-engineer.md
│   └── 10-creative-director.md    ← THE CRITIC
│
├── _references/                   ← Studio-wide visual library
│   ├── README.md
│   ├── inspiration-links.md       ← Top sites by tier
│   ├── moodboards/                ← By style (swiss, editorial, etc.)
│   ├── screenshots/
│   ├── competitors/
│   ├── type-specimens/
│   └── color-systems/
│
├── _templates/                    ← (Empty — populate as patterns emerge)
│
├── _projects/                     ← Per-client folders (gitignored if you set up git)
│   └── [client-slug]/
│       ├── CLAUDE.md
│       ├── 01-intake.md
│       ├── 02-brand-dna.md
│       ├── 03-design/
│       ├── 04-build/
│       ├── 05-seo-geo/
│       ├── 06-qa/
│       ├── 07-delivery/
│       ├── _critiques/            ← CD critiques per gate
│       └── _refs/                 ← Project-specific references
│
└── _scripts/
    └── new-project.sh             ← Scaffolds a new project

---

The 7 phases

01 INTAKE  →  02 STRATEGY  →  03 DESIGN  →  04 BUILD  →  05 SEO/GEO  →  06 QA  →  07 DELIVERY
              ↑ CD Gate 1     ↑ CD Gate 2   ↑ CD Gate 3  ↑ CD Gate 4

Each phase has a README explaining how to dispatch its agents. Each gate has a Creative Director critique that produces APPROVE / REVISE / REJECT.

See 00_SYSTEM/workflow.md for the full visual.

---

The Hive Mind

#	Agent	Role	Phase
01	brand-strategist	DNA, positioning	02
02	ux-architect	Mobile-first wireframes	03
03	art-director	Visual world	03
03b	visual-producer	Higgsfield / NanoBanana / imagegen heroes	03
04	content-architect	Narrative structure	03
05	copywriter	Words	03
06	frontend-designer	Next.js + Tailwind + shadcn	04
07	motion-designer	Subtle premium motion	04
08	seo-geo-strategist	SEO + LLM optimization	05
09	performance-engineer	Lighthouse 95+	05
10	creative-director	Critic at every gate	every

Full specs in _agents/. Orchestration logic in _agents/00-orchestration.md.

---

The 5 non-negotiables

Every site is judged on:

1. Original — no generic AI layouts
2. Emotionally strong — first scroll produces a felt reaction
3. Conversion-engineered — every section earns its scroll
4. SEO + GEO ready — ranks on Google AND gets cited by LLMs
5. Mobile-first, Lighthouse 95+ — non-negotiable

If any fails the CD review at the relevant gate → REVISE.

---

Default tech stack

Layer	Choice
Framework	Next.js 15 (App Router)
Styling	Tailwind CSS v4
Components	shadcn/ui
Motion	Motion (Framer Motion) 11
Scroll/3D when needed	GSAP + ScrollTrigger / React Three Fiber
Forms	react-hook-form + zod
Hosting	Vercel (default)
Backend (when needed)	Supabase
Analytics	Plausible or Vercel Analytics

See full reasoning in CLAUDE.md section 4.

---

Installed skills (the studio's brain)

Strategy & research

• ui-ux-pro-max — 67 styles, 96 palettes, 57 type pairings (the master library)
• wds-modern-web-design — 2025 trends + principles
• wds-visual-foundations — typography / color / spacing theory
• marketing:competitive-brief, marketing:seo-audit, marketing:campaign-plan
• design:user-research, design:research-synthesis

Design

• wds-design-system — extract DS from an existing URL
• wds-ds-creation — build a DS from scratch
• wds-landing-page — single landing page generator
• frontend-design:frontend-design — non-generic UI

Build (frontend)

• wds-nextjs-app-router — Next 15 patterns
• wds-tailwind-theme + wds-tailwind-design-system
• wds-shadcn-ui — shadcn install + composition
• wds-react-patterns — React 19 perf rules
• wds-web-components, wds-responsive, wds-responsive-pro
• wds-design-loop — autonomous multi-page builder

Motion

• wds-motion-framer — Motion (default)
• wds-gsap — GSAP + ScrollTrigger
• wds-scroll-reveal — AOS
• wds-locomotive — smooth scroll
• wds-r3f — React Three Fiber
• wds-3d-lite — Vanta / vanilla-tilt
• wds-lottie — Lottie
• wds-interaction — microinteraction theory
• wds-microinteraction-spec — trigger/rules/feedback spec
• wds-microinteractions-book — Microinteractions book principles
• wds-animation-principles — Disney-style animation rules
• wds-motion-system — motion design tokens
• wds-react-view-transitions — React View Transitions API

Visual generation

• Higgsfield (via production-manager subagent + Playwright MCP) — cinematic premium heroes
• NanoBanana (via production-manager) — fast iteration
• wds-imagegen-web — one ref-image per section
• wds-brandkit — brand-guidelines boards
• wds-image-to-code — image-first pipeline
• anthropic-skills:canvas-design — static PNG/PDF art

Strategy & growth

• wds-positioning — Obviously Awesome (April Dunford)
• wds-mom-test — customer interviews
• wds-personas + wds-jtbd — audience modeling
• wds-cro — conversion rate optimization audit
• wds-cialdini — 6 principles of ethical persuasion
• wds-stickiness — Made to Stick SUCCESs framework
• wds-contagious — STEPPS virality
• wds-hooked-model — habit-forming product loops
• wds-norman — Don Norman foundations
• wds-lean-ux — hypothesis-driven UX
• wds-heuristic-eval — Nielsen's heuristics

Quality

• wds-a11y — WCAG 2.2 audit
• design:accessibility-review — WCAG 2.1 AA pass
• wds-design-review — design quality audit
• design:design-critique — structured feedback
• marketing:brand-review — voice consistency

Copy & SEO

• design:ux-copy — microcopy
• marketing:draft-content — long-form copy
• wds-seo-local — LocalBusiness schema
• gsc — Google Search Console

MCPs

• Playwright — live browser QA
• Supabase — backend
• Figma — design ↔ code
• Notion — client docs
• Firecrawl — competitor scrape
• (...and more — see 00_SYSTEM/skills-mcp-routing.md)

---

Talk to Claude

Once a project exists, just speak naturally:

You say	Claude does
"Start a project for acme"	Runs new-project.sh acme and walks you through intake
"Run intake for acme"	Opens questionnaire, fills 01-intake.md with your answers
"Run phase 02 for acme"	Dispatches brand-strategist + CD Gate 1
"Run design for acme"	Parallel-dispatches UX + Art + Content, then copywriter, then CD Gate 2
"Build acme"	Phase 04 — frontend + motion + CD Gate 3
"SEO + perf for acme"	Phase 05 — SEO/GEO + perf engineer + CD Gate 4
"Ship acme"	Phase 07 — delivery + Notion push + handoff
"Just critique acme's home page"	Spawns CD with Playwright to open and review

Claude reads CLAUDE.md every time, so the rules are always in force.

---

Versioning

• v1.0 · 2026-05-22 · Initial system build (10 agents, 25 skills, 7-phase workflow)
• v1.1 · 2026-05-22 · +visual-producer (Higgsfield), +45 skills (70 total), repo-ready

License

MIT — see LICENSE. Fork it, adapt it, ship better sites with it.

Contributing

See CONTRIBUTING.md. PRs for new skill integrations, agent improvements, and CD critique enhancements welcome.

Acknowledgments

This studio aggregates the best Claude Code skills from the community. Massive credit to:

• vercel-labs/agent-skills — web design guidelines + React rules
• jezweb/claude-skills — design-loop, shadcn, landing-page
• freshtechbro/claudedesignskills — motion + 3D libraries
• wshobson/agents — UI design + Next.js patterns
• secondsky/claude-skills — responsive + DS creation
• LovroPodobnik/refactoring-ui-skill — Refactoring UI tactics
• Leonxlnx/taste-skill — taste sliders + style packs
• Dammyjay93/interface-design — design memory system
• Owl-Listener/designer-skills — 91 design skills library
• wondelai/skills — book-based design + UX principles
• Anthropic frontend-design plugin — non-generic UI generation
• ui-ux-pro-max — master style/palette/type library