Open Source · Apache 2.0

Design agents that
interview, generate,
and build.

Describe what you want. Sitechain agents ask about your aesthetic, generate a complete design token system, build production-grade code, and review it for quality — all from a single prompt.

Get started View on GitHub
Works with
Cursor Claude Code Gemini CLI Codex CLI Copilot Antigravity
Pipeline

Four agents, one prompt

No configuration. No slash commands. Describe what you want and the agents coordinate automatically — with mandatory approval at every step.

01

Director scans your project

Detects your framework, existing tokens, components, and conventions. Determines if you need a design system or already have one.

package.json CSS custom properties Font imports Token files
02

Strategist interviews you

Asks about purpose, audience, mood, color preferences, typography, and layout style. Generates a complete OKLCH token system — then waits for your approval.

OKLCH palette Type scale Spacing Motion Layout style
03

Builder creates production code

Takes the approved brief and tokens, builds a Vite dev server project with vanilla HTML, CSS, and JS. Hot reload, zero runtime dependencies. Supports single-page and multi-page sites.

Vite dev server Semantic HTML WCAG AA Mobile-first
04

Reviewer checks every file

Runs after the Builder, before you see the result. Checks for simplicity, cleanliness, and security — fixes issues directly rather than just reporting them.

No dead code Tokens used throughout No innerHTML CSP compatible
Human-in-the-Loop

Nothing happens without your say-so

Sitechain never makes design decisions for you. Every agent has mandatory approval checkpoints. No code is written until you've approved the direction.

Design interview Asks questions in small groups, waits for your answers
Token approval Presents generated palette and tokens, waits for sign-off
Design brief Shows complete build plan before writing any code
Security review Reviewer flags anything that needs your input before shipping
Agents

Deep domain knowledge, coordinated

Each agent is a specialist. They know when to step in, what to ask, and how to hand off cleanly.

Director

Scans your project. Detects framework, tokens, design system status. Routes the pipeline.

Auto-triggers on build requests

Strategist

Interviews you about aesthetic. Generates OKLCH palette, type scale, spacing, motion tokens.

When no design system exists

Builder

Creates production code. Vite dev server, semantic HTML, WCAG AA, keyboard nav.

After design approval

Reviewer

Quality gate. Checks simplicity, cleanliness, security. Fixes issues before you see them.

After builder creates code
Design System — shared knowledge consulted by all agents
Typography Color Spatial Motion Interaction Responsive Writing
agent relay
director strategist No tokens found. Start interview.
strategist you What mood? What colors? What fonts?
you strategist Warm, earthy, organic feel.
strategist you Tokens generated. Approve?
director builder Brief approved. Build 3 pages.
builder reviewer 4 files ready for review.
reviewer builder All checks passed. Ship it.
Output

What it generates

From a single prompt to a complete, production-ready foundation.

tokens.css
Color Palette
primary
cream
sage
dark
light
Type Scale
Display Heading Section Title Body text with comfortable leading for readability. --font-mono: JetBrains Mono
Spacing & Radius
4
8
12
16
24
32
Color

OKLCH Palette

Perceptually uniform colors, tinted neutrals, semantic tokens, dark mode support, surface hierarchy.

Type

Typography System

Distinctive fonts, fluid type scale with clamp(), proper line-heights, font loading strategy.

Space

Spacing & Layout

4pt grid system, semantic spacing tokens, clean or bold layout style, responsive grid patterns.

Motion

Animation Tokens

Duration tiers, exponential easing curves, prefers-reduced-motion support baked in.

Code

Production Components

Semantic HTML, all 8 interaction states, keyboard navigation, WCAG AA, Vite dev server.

Pages

Multi-Page Sites

Shared navigation via JS module, per-page meta, aria-current active states, Vite multi-page config.

Layout Style

Clean or bold — your call

The Strategist asks about your layout preference. The Builder implements it throughout.

Clean

Balanced & Composed

  • Symmetric grids, consistent gaps
  • Standard type scale (1.2–1.25 ratio)
  • Uniform spacing throughout
  • Subtle transitions, no scroll effects
  • Clean separation between elements
Bold

Experimental & Expressive

  • Asymmetric grids, varied gaps
  • Oversized display headings (3–5× body)
  • Dramatic spacing variation
  • Scroll-driven animations, clip-path edges
  • Elements crossing boundaries, layered depth
Anti-Slop

Trained to avoid AI clichés

Sitechain actively avoids the generic patterns that make AI-generated sites look like AI-generated sites.

Cyan-on-dark, purple-to-blue gradients
Gradient text on headings
Cards nested in cards, identical grids
Glassmorphism without purpose
Big rounded icons above every heading
Everything centered, same spacing
Bounce/elastic easing
Pure black or pure white
Inter / Roboto / Open Sans defaults
Hero metric layouts
Generic lorem ipsum content
Modals for everything
Install

Works with your tools

One source, multiple outputs. Install in your preferred AI coding environment.

Claude Code

Plugin auto-provides all agents to any project

Cursor

Outputs .mdc rule files for split attention

Gemini CLI

Native GEMINI.md project instructions

Codex CLI

OpenAI Codex agent instructions

Copilot

GitHub Copilot custom instructions

Antigravity

Google Antigravity skill directories

Any Tool

Copy into your system prompt or rules file

All providers build from a single source:

git clone https://github.com/MatoMusha/webflo.git && cd webflo && node scripts/build.js

Stop designing by committee with your AI.

Install sitechain. Describe what you want. Approve the direction. Ship.

Get started Star on GitHub