Web Design Agent

Web Design Agent turns an ambiguous design request into three real, structurally different website implementations, lets a human compare and tune them, then refines the selected direction into exportable HTML/CSS/JS and reusable design-system evidence.

It is built for founders, product teams, designers, developers, and small teams who need strong visual direction before they can precisely describe what they want. Instead of producing one polished guess or three color-swapped clones, Web Design Agent makes meaningful design divergence part of the product contract.

The problem

Early-stage web design is often a communication problem before it is a coding problem. A user may know the feeling, audience, product, or competitive space they want, but not the exact layout, hierarchy, typography, navigation model, or visual system.

Traditional generation tools tend to collapse too early into one answer. Even when they show multiple options, those options are often the same structure with different colors and fonts.

Web Design Agent treats exploration, comparison, evidence, and human selection as first-class parts of the workflow.

How it works

A request moves through a Strands-powered design workflow:

Infer the product brief from the user's intent.
Generate Candidate A, B, and C with native Strands specialist agents.
Require each candidate to differ structurally through a Design Genome and deterministic pairwise design-distance checks.
Ground browser, component, and concept-provider claims in actual runtime tool evidence instead of trusting model-authored claims.
Present all three implementations in an MCP App review surface.
Let the human compare candidates, switch routes and device widths, and tune visual controls locally.
Refine the selected direction.
Export real HTML/CSS/JS plus reusable design-system evidence.

Strands architecture

Strands owns the model/tool loop. A Design Director coordinates native specialist agents for Candidate A, Candidate B, Candidate C, a Visual Critic, and an optional Concept Artist.

Deterministic product code owns the boundaries that should not be left to model judgment: schemas, diversity checks, request limits, browser-target validation, runtime evidence binding, cancellation, cleanup, and result validation.

This separation lets the agent be creative where creativity matters without allowing it to certify its own work.

Real product surfaces

Web Design Agent supports:

a public stateless NoAuth HTTP MCP endpoint;
local stdio MCP;
an MCP App for A/B/C comparison and refinement;
CLI generation;
one-shot vague-prompt evaluation;
multi-page website candidates;
responsive desktop, tablet, and mobile review;
live density, spacing, radius, font, hero, contrast, depth, and motion controls;
selected-candidate refinement;
standalone export;
reusable design-system inspection.

A/B/C is a contract, not a color picker

Each candidate carries a Design Genome describing composition, navigation, hero strategy, typography, density, geometry, surface model, depth, motion, content rhythm, and imagery strategy.

A deterministic DesignDistanceEvaluator scores every pair. If the candidates are too similar, one complete regeneration is allowed. If the second set still fails the diversity threshold, the generation is rejected rather than pretending three near-duplicates are useful exploration.

Evidence grounded in real tool execution

Web Design Agent does not trust the model to say it browsed, inspected, or used a provider.

Successful nested Strands tool calls are collected from the runtime event stream and attributed to the candidate that actually used them. Browser evidence is bound to a successful navigation target; failed or unrelated browser calls do not count. Concept-first generation requires a real provider execution rather than model-authored image URLs.

Public NoAuth, bounded execution

The public MCP surface is account-free, not unbounded.

Source URLs are validated before Strands sees them. Private, loopback, metadata, reserved, and mixed public/private destinations are rejected. Public browser deployments must also enforce network egress isolation from private/control infrastructure.

Requests are bounded by concurrency, body size, turn count, output tokens, total tokens, cancellation, and deployment-owned provider authority.

Why it matters

Good design exploration is expensive because it normally requires translating a vague human idea into multiple credible directions before anyone can make a meaningful choice. Web Design Agent makes that exploration executable.

The result is not simply “AI made a webpage.” The product gives a human real alternatives, grounded evidence, visual control, and a refinement loop while preserving clear technical boundaries around what the model may claim or execute.

Built for the Agents for Humans Hackathon

Web Design Agent targets the Professional Agents track. It is designed to make creators, founders, developers, and product teams dramatically better at a repetitive, judgment-heavy part of their existing work: turning fuzzy product intent into a concrete design direction.

The repository includes the source, setup instructions, MIT license, architecture diagram, demo runbook, and hackathon documentation.