Solo AI development lacks organizational structure. One general-purpose assistant means:
- No design consistency across pages
- No security review before deploying contracts
- No separation of concerns between UI, blockchain, and infrastructure
- Technical debt accumulates silently
Claude Code Website Studios transforms a single Claude Code session into a structured development environment with:
- 36 specialized agents organized in a studio hierarchy
- 37 slash command workflows for every development phase
- 25 built-in design styles from Glassmorphism to Dark+Neon
- 8 automated hooks catching issues before they ship
- 11 path-scoped rules enforcing standards by directory
┌─────────────────────┐
│ TIER 1: DIRECTORS │
│ (Opus tier) │
└──────────┬──────────┘
┌────────────────────┼────────────────────┐
│ │ │
┌───────▼───────┐ ┌───────▼───────┐ ┌────────▼──────┐
│ Creative │ │ Technical │ │ Producer │
│ Director │ │ Director │ │ │
└───────┬───────┘ └───────┬───────┘ └────────┬──────┘
│ │ │
▼ ▼ ▼
┌──────────────────────────────────────────────────────────┐
│ TIER 2: DEPARTMENT LEADS (Sonnet) │
├──────────┬──────────┬──────────┬──────────┬──────────────┤
│ Frontend │ Contract │ UI/UX │ Web3 │ DevOps │
│ Lead │ Lead │ Lead │ Lead │ Lead │
├──────────┼──────────┼──────────┼──────────┼──────────────┤
│ QA │ Security │ Content │ │ │
│ Lead │ Lead │ Lead │ │ │
└────┬─────┴────┬─────┴────┬─────┴────┬─────┴──────┬───────┘
│ │ │ │ │
▼ ▼ ▼ ▼ ▼
┌──────────────────────────────────────────────────────────┐
│ TIER 3: SPECIALISTS (Sonnet/Haiku) │
│ │
│ React Dev · Animation Dev · Responsive Dev │
│ Solidity Dev · Contract Auditor · Token Engineer │
│ Visual Designer · Interaction Designer · DeFi Dev │
│ Wallet Dev · Blockchain Dev · Subgraph Dev │
│ NFT Dev · DevOps Eng · Analytics Eng · SEO Specialist │
│ QA Tester · E2E Tester · Security Auditor │
│ Copywriter · Localization Specialist │
│ Performance Optimizer · Accessibility Specialist │
└──────────────────────────────────────────────────────────┘
Choose your visual direction with /pick-style:
| # |
Style |
Best For |
Difficulty |
| 1 |
Scroll Storytelling |
High-end product launches |
⭐⭐⭐⭐ |
| 2 |
Bento Grid |
SaaS, DApp dashboards |
⭐⭐ |
| 3 |
Glassmorphism |
Modern DApps, wallets |
⭐⭐ |
| 4 |
Neumorphism |
Control panels |
⭐⭐ |
| 5 |
Dark Mode + Neon |
Web3, crypto, gaming |
⭐⭐ |
| 6 |
Brutalism |
Meme tokens, punk projects |
⭐ |
| 7 |
Minimalism |
Premium brands |
⭐ |
| 8 |
Big Typography |
Token launches |
⭐⭐ |
| 9 |
Horizontal Scroll |
NFT galleries |
⭐⭐⭐ |
| 10 |
Card Stacking |
Feature showcases |
⭐⭐⭐ |
| 11 |
Split Screen |
Comparisons |
⭐⭐ |
| 12 |
3D Immersive |
GameFi, metaverse |
⭐⭐⭐⭐⭐ |
| 13 |
Parallax |
Roadmaps, brand stories |
⭐⭐⭐ |
| 14 |
Grain & Retro |
Vintage crypto |
⭐ |
| 15 |
Illustrated |
Community projects |
⭐⭐ |
| 16 |
Cursor Interaction |
Creative DApps |
⭐⭐⭐ |
| 17 |
Gradient Mesh |
Token pages |
⭐⭐ |
| 18 |
Claymorphism |
Casual GameFi |
⭐⭐ |
| 19 |
Aurora |
AI + crypto |
⭐⭐⭐ |
| 20 |
Layered Paper |
Documentation sites |
⭐ |
| 21 |
Mondrian Grid |
Art NFT platforms |
⭐⭐ |
| 22 |
Kinetic Typography |
Launch events |
⭐⭐⭐⭐ |
| 23 |
Organic Shapes |
Health/green crypto |
⭐⭐ |
| 24 |
Masked Image |
NFT showcases |
⭐⭐ |
| 25 |
Infinite Scroll Gallery |
NFT collections |
⭐⭐ |
| Project Type |
Recommended Styles |
| 🪙 Token Official Site |
Dark+Neon + Gradient Mesh |
| 📊 DApp Dashboard |
Bento Grid + Glassmorphism |
| 🖼️ NFT Gallery |
Infinite Gallery + Dark+Neon |
| 🎮 GameFi |
3D Immersive + Aurora |
| 💰 DeFi Protocol |
Minimalism + Card Stacking |
- Next.js 15 — App Router, RSC
- TypeScript 5 — Strict mode
- Tailwind CSS 4 — Utility-first
- GSAP + Framer Motion — Animations
- Zustand — State management
- React Hook Form + Zod — Forms
|
- wagmi v2 + viem — Wallet & chain
- RainbowKit — Wallet UI
- BNB Smart Chain — BEP20
- Hardhat — Contract dev
- Solidity 0.8.x — Smart contracts
- The Graph — Data indexing
|
- Vercel — Frontend deployment
- GitHub Actions — CI/CD
- Sentry — Error monitoring
- Mixpanel / GA4 — Analytics
|
- Vitest — Unit testing
- Playwright — E2E testing
- ESLint + Prettier — Code quality
- Slither / Mythril — Contract audit
|
| Category |
Count |
Details |
| Agents |
36 |
Specialized subagents across design, frontend, contract, Web3, QA, and production |
| Skills |
37 |
Slash commands for workflows (/start, /new-dapp, /code-review, /deploy-contract, etc.) |
| Hooks |
8 |
Automated validation on commits, pushes, assets, and session lifecycle |
| Rules |
11 |
Path-scoped coding standards for site, DApp, contracts, components, and more |
| Templates |
8 |
Document templates for whitepapers, tokenomics, audit reports, sprint plans |
| Docs |
10 |
Guides for setup, agents, styles, Web3 patterns, and technical preferences |
- Git
- Node.js 20+ and pnpm
- Claude Code (
npm install -g @anthropic-ai/claude-code)
- Recommended:
jq (hook validation)
# Clone the template
git clone https://github.com/LordVibeCoding/Claude-Code-Website-Studios.git my-web3-project
cd my-web3-project
# Open Claude Code
claude
# Get guided setup
/start
| Command |
What It Creates |
/new-site |
Official website with SEO, responsive design |
/new-dapp |
DApp with wallet connection, contract interaction |
/new-token |
BEP20 token page with swap integration |
/new-nft |
NFT project with minting, gallery, metadata |
Project Bootstrap (7 commands)
| Command |
Description |
/start |
Guided project setup based on your stage |
/new-site |
Create official website project |
/new-dapp |
Create DApp project |
/new-token |
Create BEP20 token page |
/new-nft |
Create NFT project |
/setup-stack |
Configure technology stack |
/pick-style |
Choose from 25 design styles |
Development (5 commands)
| Command |
Description |
/brainstorm |
Creative ideation session |
/prototype |
Quick throwaway prototype |
/design-system |
Build/update design system |
/connect-wallet |
Implement wallet connection |
/deploy-contract |
Deploy smart contract to BSC |
Review & Analysis (9 commands)
| Command |
Description |
/code-review |
Full code review |
/contract-review |
Smart contract security review |
/design-review |
UI/UX design review |
/security-audit |
Security assessment |
/perf-profile |
Performance profiling |
/seo-check |
SEO analysis |
/accessibility-check |
WCAG compliance check |
/scope-check |
Scope creep detection |
/tech-debt |
Technical debt assessment |
Production (5 commands)
| Command |
Description |
/sprint-plan |
Plan sprint tasks |
/milestone-review |
Review milestone progress |
/estimate |
Effort estimation |
/retrospective |
Sprint retrospective |
/project-stage-detect |
Detect current project stage |
Release (4 commands)
| Command |
Description |
/release-checklist |
Pre-release verification |
/launch-checklist |
Launch day checklist |
/changelog |
Generate changelog |
/hotfix |
Emergency fix workflow |
Team Orchestration (7 commands)
| Command |
Description |
/team-frontend |
Assemble frontend team |
/team-contract |
Assemble contract team |
/team-design |
Assemble design team |
/team-web3 |
Assemble Web3 integration team |
/team-release |
Assemble release team |
/team-polish |
Assemble polish/QA team |
/map-systems |
Map system dependencies |
| Hook |
When |
What |
validate-commit |
Pre-commit |
Blocks private keys, checks TODO format, validates JSON |
validate-push |
Pre-push |
Warns on main branch, checks for unreviewed contracts |
validate-assets |
Post-write |
Validates naming, SVG optimization, Solidity compilation |
session-start |
Session open |
Loads sprint context, shows recent activity |
session-stop |
Session end |
Logs accomplishments, warns uncommitted changes |
detect-gaps |
Session open |
Flags missing docs, uncovered code, empty directories |
pre-compact |
Pre-compact |
Preserves progress notes and decisions |
log-agent |
Agent spawn |
Creates audit trail for all subagent invocations |
| Path |
Standards |
src/site/** |
SEO-ready, accessible, Core Web Vitals |
src/dapp/** |
Wallet-aware, error boundaries, tx states |
src/contracts/** |
Gas optimized, reentrancy safe, NatSpec |
src/components/** |
Typed props, reusable, Storybook-ready |
src/hooks/** |
Proper cleanup, dependency arrays |
src/lib/** |
Pure functions, full types, no side effects |
src/styles/** |
Design tokens, responsive, dark mode |
design/** |
Required sections, user flows |
tests/** |
Naming conventions, coverage requirements |
CLAUDE.md # Master configuration
.claude/
├── settings.json # Hooks, permissions, safety rules
├── agents/ # 36 agent definitions
├── skills/ # 37 slash command workflows
├── hooks/ # 8 validation scripts
├── rules/ # 11 path-scoped standards
└── docs/
├── quick-start.md
├── agent-roster.md
├── design-styles-guide.md
├── web3-patterns.md
└── templates/ # 8 document templates
src/
├── site/ # Official website pages
├── dapp/ # DApp pages and features
├── contracts/ # Smart contracts (Solidity)
├── components/ # Shared React components
├── hooks/ # Custom React hooks
├── lib/ # Utilities, Web3 config
├── styles/ # Global styles, design tokens
└── assets/ # Images, fonts, icons
design/ # Design docs, wireframes
docs/ # Technical docs, ADRs
tests/ # Test suites
production/ # Sprint plans, milestones
Question → Options → Decision → Draft → Approval
- Agents ask before proposing solutions
- Present 2-4 options with pros/cons
- User always makes final decisions
- Draft and show work before finalizing
- Nothing gets written without explicit approval
- Vertical delegation — Directors → Leads → Specialists
- Horizontal consultation — Peers advise but don't override
- Conflict resolution — Escalates to shared parent director
- Change propagation — Producer coordinates cross-team changes
- Domain boundaries — Agents respect file ownership
This template is modular — adapt it to your needs:
- Add/remove agents for your specific domains
- Edit agent prompts with project-specific knowledge
- Modify skills to match your workflow
- Create new rules for your directory structure
- Adjust hook strictness or add new validators
- Add design styles to the 25 built-in options
Built on the same principles as Claude Code Game Studios, adapted for Web3 website development on BNB Chain.
MIT — Use it however you want.
Built with Claude Code · Powered by Anthropic
