How It Works
Agents CodeScanner Brainstormer Designer StackAdvisor Phaser Deployer
About Get Started →
How It Works

From idea to implementation plan — and beyond.

Spec4 is a structured pipeline of six AI agents. Each one handles a distinct phase of project planning, produces a machine-readable output, and hands it forward to the next. You stay in control at every step.

Before you begin

When you open Spec4, the first thing you'll do is configure your AI connection:

◈
Choose a provider and model
Spec4 works with any major LLM provider — OpenAI, Anthropic, Google, Mistral, and others. Pick the model that fits your budget and preference.
◈
Choose a web search provider
Spec4's agents use web search to look up canonical documentation for any technology standard, protocol, or API that comes up during planning. You'll need to connect a search provider to enable this.
Choose a provider
Choosing an AI provider in Spec4
Choose a model
Choosing a model in Spec4
Web search provider
Configuring web search in Spec4

Once configured, you move through the pipeline. You can start from scratch with a new idea, or begin with CodeScanner if you're planning changes to an existing project.

01 optional

Understand where you're starting from.

If you're building something new from scratch, you can skip straight to Brainstormer. But if you're extending or redesigning an existing project, CodeScanner reads your codebase and produces a structured analysis before any planning begins.

It walks through six areas — project type, architecture, languages and frameworks, build system, coding style, and notable observations — and asks you to confirm or correct each one. The result travels with the spec through every downstream agent.

Output: code_review.json
Learn more about CodeScanner
CodeScanner start
CodeScanner reading a codebase
CodeScanner end
CodeScanner code review output
02

Turn a rough idea into a well-defined vision.

Brainstormer is a collaborative agent that asks you one focused question at a time. It surfaces assumptions, identifies gaps, and pushes back when something is unclear — without overwhelming you with a form to fill out.

Each answer adds to a running vision statement you can review and revise at any step. Brainstormer deliberately stays in its lane: it won't ask about technology, hosting, or libraries. The focus is entirely on what you're building, who it's for, and why it matters.

Output: vision_statement JSON object
Learn more about Brainstormer
Brainstormer start
Brainstormer starting conversation
Brainstormer end
Brainstormer vision statement output
03 optional

See it before you build it.

Designer reads your vision statement and generates a self-contained HTML mock of your application's look and feel — no frameworks, no build step, no external dependencies. Open it in any browser, share it with stakeholders, or hand it to your coding agent as a visual spec.

Two modes: create from scratch using your vision, or modify an existing UI to reflect your planned changes. Iterative refinement is built in — describe what to change and it regenerates. Give Designer screenshots or images that you like or dislike and it will use those to guide the design. The mock can then inform StackAdvisor's UI library recommendations. You can skip Designer for CLI, terminal, or API-only projects.

Output: design/mock.html
Learn more about Designer
See a complete design mock →
Designer output
Designer generating a UI mock
04

Pick a technology stack with confidence.

StackAdvisor takes your vision statement — and your UI mock if Designer ran — and walks you through every layer of the technology decision: programming language, deployment platforms, hosting approach, libraries for each functional area, and coding style.

For each choice, it presents ranked options with honest trade-off analysis — maintenance status, adoption, footprint, what you'd have to write yourself without it. When a code review is present, it actively flags conflicts between what you have and what you're considering.

Output: stack.json
Learn more about StackAdvisor
StackAdvisor start
StackAdvisor beginning technology selection
StackAdvisor end
StackAdvisor technology stack output
05

A plan your coding agent can actually execute.

Phaser takes the vision, stack spec, and design mock and produces a numbered sequence of implementation phases. Each phase is a self-contained JSON object with a summary, dependency list, configuration requirements, step-by-step instructions, a risk assessment, and an exact verification command.

Phase 1 is always a Steel Thread — the minimal end-to-end connection that proves your stack is wired together before any feature development begins. If a phase would require a dependency not in your stack spec, Phaser stops and asks for your approval first.

Output: series of phase JSON objects
Learn more about Phaser
Phaser start
Phaser beginning phase planning
Phaser end
Phaser implementation phases output
06

Plan your path to production.

Deployer works in two parts. First, you tell it which AI coding agent you'll use (Claude Code, Cursor, Copilot, Windsurf, Cline, and others are supported). Deployer searches for current documentation on that agent and gives you precise guidance for loading and executing Spec4 phases — exact syntax, recommended workflow, and known pitfalls.

Second, Deployer walks through your deployment strategy one question at a time: target platform, containerization, CI/CD pipeline, environment configuration, and monitoring. For cloud deployments, it can generate complete Terraform infrastructure scripts.

Output: deployment-plan.md
Learn more about Deployer
See a complete deployment plan →
Deployer start
Deployer planning production deployment
Deployer end
Deployer deployment plan output

Your spec. Your tool. Your pace.

Spec4 doesn't lock you into an agentic coding tool or a deployment workflow. The output is structured JSON, a deployment plan, and a UI mock — all yours to use however you like. Paste a phase into Claude Code, deploy to your own infrastructure, design on your own schedule.

Start your first spec →