Skip to content
UXClaim
Design Systems

Web Architect

4-agent orchestrator that generates complete design systems, architecture plans, and production-ready code with constrained generation to avoid generic AI ou...

View source More in Design Systems

What It Does

Web Architect is a multi-agent orchestrator skill that conducts a complete design-to-code pipeline in one command. Instead of running design, architecture, and code generation skills separately, it orchestrates four specialized agents (Designer, Architect, Builder, Reviewer) through a unified workflow that maintains consistency and quality throughout.

How It Works

The system uses constrained generation across four layers: concept (design metaphor), color (WCAG-compliant harmony algorithms), typography (curated font pairings, excluding generic options like Inter), and motion (CSS-only, accessibility-first). Each agent runs in fresh context and communicates via disk files, reducing overhead while maintaining quality.

After building, the Reviewer scores output on five dimensions (design fidelity 30%, accessibility 25%, performance 20%, code quality 15%, architecture 10%). Scores below 80 trigger automatic fixes.

Use Cases

  • Marketing landing pages and one-pagers
  • SaaS product interfaces and dashboards
  • E-commerce sites and catalogs
  • Portfolio and gallery websites
  • Admin panels and CRM interfaces
  • Blog and content sites

Who Benefits

Product designers and non-technical founders who want AI-assisted web projects that look premium and intentional rather than generic. Works with Claude Code, Cursor, Amp, and 15+ other agents.

Frequently asked questions

How do I install Web Architect?
Run `npx skills add choppawave-beep/web-architect` to auto-detect your agent (Claude Code, Cursor, Amp, etc.). For manual installation, clone the repo and copy files to `~/.claude/skills/web-architect/` and `~/.claude/agents/`.
What makes Web Architect different from generic AI design?
It enforces four constraint layers: design concept (avoids repetition), color harmony (WCAG 4.5:1 contrast), typography (bans Inter, Roboto, Arial), and motion (CSS-only, accessibility-compliant). This prevents the homogeneous look of most AI-generated sites.
Can I use my existing design system?
Yes. Use `/wa:build [description]` to skip the design phase and build with your established design tokens. The system learns from your feedback and applies it to future projects.
What project types does it support?
Eight profiles: landing pages, SaaS, dashboards, e-commerce, CRM, portfolio, blog, and desktop (Electron). Set your profile with `/wa:profile [type]` to optimize component priorities and performance targets.
How does the quality scoring work?
The Reviewer uses a 5-dimension 0-100 scale: design fidelity (30%), accessibility (25%), performance (20%), code quality (15%), and architecture (10%). Scores below 80 trigger auto-fixes up to 2 rounds.
Can I override design choices?
Yes. The pipeline pauses after the Designer generates your design system, letting you approve or modify colors, fonts, and concept before building. User overrides get highest priority in future learning.
Does it require coding knowledge?
No. Just describe what you want (`/wa:design homepage with hero, pricing, testimonials`). The orchestrator handles all architecture, component structure, and code generation. You approve designs, not code.
What agents is this compatible with?
Works with Claude Code, Cursor, Amp, Codex CLI, Gemini CLI, GitHub Copilot, Windsurf, and 15+ others. Auto-detects your environment and adapts accordingly.

Glossary

Constrained Generation
A multi-layer approach that enforces design rules (concept, color, typography, motion) during generation to prevent generic, homogeneous output. Each layer has specific constraints (e.g., WCAG contrast ratios, font diversity).
Design Gate
A pause point in the pipeline after the Designer generates your design system, where you review and approve colors, fonts, and design concept before the Builder creates code.
Project Profile
One of eight predefined project types (landing, SaaS, dashboard, e-commerce, CRM, portfolio, blog, desktop) that determine layout patterns, component priorities, performance targets, and design emphasis.
Design Token
A named variable (color, spacing, typography, motion) that the Builder uses consistently throughout generated code instead of hardcoded values, ensuring fidelity to the approved design system.
Quality Score
A weighted 0-100 metric evaluating code against five dimensions: design fidelity (30%), accessibility (25%), performance (20%), code quality (15%), and architecture (10%). Scores below 80 trigger automatic fixes.

More in Design Systems

All →
Design Systems

Arcade Prototyper

Build interactive HTML prototypes using DevRev's production design system and Arcade components in Claude Code.

asundiev-devrev
Design Systems

Awesome Design Skill

Access 54+ brand design systems (Linear, Apple, Stripe, Vercel) for Claude Code UI development with complete design specifications.