site-flow

site-flow

AI-driven static website workflow for Claude Code. It helps non-technical users go from idea to a polished website preview with focused build stages, deterministic project bootstrap, environment readiness checks, and demo-ready seeded content.

The Problem

Most AI website workflows break down in three ways:

1. Everything happens in one long session — planning, setup, install, page building, and validation all compete for the same context window.
2. Framework bootstrap leaves residue — starter files, temporary folders, or wrong metadata remain in the final project.
3. The preview looks unfinished without assets — users are asked for too much text and too many images before they can judge whether the website is actually good.

The Solution

site-flow is a Claude Code plugin that acts like an AI web design consultant and build orchestrator. It:

1. Discovers your needs through simple, friendly questions
2. Recommends a design direction matched to your site type and audience
3. Builds through focused sub-agent stages so readiness checks, bootstrap, page work, and validation stay organized and isolated from the main session
4. Uses deterministic bootstrap rules so starter residue does not leak into the final project
5. Seeds demo-ready text and real-image-first visual defaults so the site looks close to finished before all real assets exist
6. Requires design-rich output with imagery, motion, hierarchy, and polish rather than scaffold-like placeholder pages
7. Separates content from code so real copy and images can replace demo content later

Installation

/plugin marketplace add zetos-dev/site-flow
/plugin install site-flow@site-flow-marketplace

Quick Start

# 1. Plan the website
/site-init

# 2. Build all pages
/site-build --all
# If this computer is missing required build tools, site-flow will pause,
# explain what to install, and let you resume afterward.

# 3. Preview in browser
/site-preview

# 4. Replace content later
/site-build --update

# 5. Add another language
/site-translate fr

# 6. Connect real services (optional)
/listmonk-integrate
/booking-integrate

# 7. Check workflow status anytime
/site-status

How It Works

/site-init — Plan the Website

This command guides the user through a few simple questions:

• what kind of site they need
• what the brand/project does
• who the audience is
• what references or inspiration they like

Then it generates the planning system under .site/, including:

• project config
• workflow state
• site blueprint
• design tokens
• content guide
• page specs
• seeded demo content in content/

/site-build — Orchestrate the Build

/site-build is a staged orchestrator, not a single monolithic coding pass.

It breaks work into:

1. environment readiness
2. discovery / plan check
3. bootstrap
4. page build loop
5. validation

The main session handles orchestration, readiness checks, installation/setup steps, and status reporting. Bootstrap, page implementation, content refreshes, design changes, and validation are attempted through focused sub-agents first, with graceful fallback in the current directory if agent launch is unavailable.

Options:

• /site-build — build the next pending page
• /site-build --all — build all remaining pages
• /site-build about — build one specific page
• /site-build --update — replace demo content with newer content from content/

/site-preview — Review Quickly

Starts a local preview server, explains what is still demo content, highlights unfinished design debt if present, and helps the user make focused adjustments through sub-agents.

/site-translate — Add One Language

Adds one new language version to an existing website without changing layout or design. Creates translated content files and ensures the site has a visible language selector and reachable pages for the new language.

/listmonk-integrate — Connect Listmonk

Completes real Listmonk email integration for a site that already has designed reserved capture modules. Only runs after design/build is complete. Preserves visual quality.

/booking-integrate — Connect Booking

Completes real booking integration (Calendly, HubSpot Meetings, Google Calendar, etc.) for a site that already has designed reserved booking entry points. Supports link-out, embed, and popup patterns.

/site-status — See Real Progress

Shows:

• current workflow stage
• environment readiness and missing tools
• built pages vs planned pages
• whether bootstrap residue checks passed
• whether validation passed
• how much of the site is using real content vs demo-ready content vs minimal placeholders
• what kind of imagery is currently being used (user, stock, AI, or placeholder)

Environment Readiness

site-flow is designed for non-technical users. You do not need git or worktrees to use it.