The Otter Raft 🦦

Four AI agents that build Stackwright sites through conversation.

Brand → Theme → Pages — each otter handles one step. The Foreman coordinates the pipeline.

🎬 Watch the Otters Build Their Own Docs
The video above shows the Otter Raft working on the stackwright-docs site, which was built from scratch. Brand discovery → Theme design → Page generation → Deploy. No YAML expertise required.

Meet the Otters

🦦🏗️ Foreman Otter

Coordinates the build pipeline. Tell the Foreman what you want and it delegates to the right otter. Orchestrates Brand → Theme → Page workflow.

🦦🎨 Brand Otter

Discovers your brand through conversation. Asks about voice, tone, color preferences, and emotional targets. Produces a brand brief.

🦦🌈 Theme Otter

Translates brand briefs into Stackwright themes. Colors, typography, spacing, dark mode. Writes stackwright.yml configuration.

🦦📄 Page Otter

Builds pages in your brand voice. Writes schema-valid YAML. Verifies pages visually with render screenshots.

What Each Otter Produces

The otters don't just talk — they write real files. Here's what each one produces:

markdown
# BRAND_BRIEF.md (Brand Otter)
 
## Voice
Professional, authoritative
 
## Colors
Primary: Navy blue (#1a365d)
Accent: Gold (#d4af37)
 
## Personality
Confident, precise
 
## Target Audience
Enterprise, developers
yaml
# stackwright.yml (Theme Otter)
 
customTheme:
  colors:
    primary: "#1a365d"
    secondary: "#d4af37"
  typography:
    fontFamily:
      primary: "Inter"
      secondary: "JetBrains Mono"
yaml
# pages/index.yml (Page Otter)
 
content:
  content_items:
    - type: main
      heading:
        text: "Welcome"
        textSize: h1
      textBlocks:
        - text: "..."
      buttons:
        - text: "Get Started"
          href: /getting-started
🦦 Built Their Own Docs
The stackwright-docs site you're reading right now was built by the Otter Raft. Brand discovery → Theme design → 7 pages → Deployed. Total time: 4 hours of AI conversation. The YAML files are in the repo — you can read exactly what the otters wrote.

Typical Workflow

The Foreman Otter orchestrates the pipeline. Here's how a site build happens:

Step 1

Tell the Foreman what you want. 'I need a site for my consulting business.' The Foreman calls Brand Otter.

Step 2

Brand Otter asks questions. Voice? Tone? Primary CTA? Emotional target? Writes BRAND_BRIEF.md.

Step 3

Theme Otter reads the brand brief. Picks colors, typography, spacing. Writes stackwright.yml.

Step 4

Page Otter reads the brand brief and theme. Writes page YAML files. Validates and renders screenshots.

Step 5

Foreman hands off to you. Review the rendered pages. Iterate if needed. Deploy when ready.

How to Use

The Otter Raft is built into launch-stackwright. After scaffolding, the agent configs are in .stackwright/otters/.

Use with Code Puppy or any MCP-compatible AI client.

bash
# Scaffold a new project (includes Otter Raft)
npx launch-stackwright my-site
cd my-site
 
# The Otter Raft configs are in:
.stackwright/otters/
├── stackwright-brand-otter.json
├── stackwright-theme-otter.json
├── stackwright-page-otter.json
└── stackwright-foreman-otter.json
 
# Use with Code Puppy:
# The otter configs are auto-loaded
MCP Integration
The Otter Raft works best with Code Puppy or Claude Code. Each otter is an agent config that gets loaded into your AI assistant. They use the Stackwright MCP server for validation, rendering, and file operations.

The Otters Speak

“I asked the human 12 questions about their company and wrote a brand brief that made the Theme Otter's job so easy. That's what I call productivity.”

Brand Otter 🦦🎨
Chief Discovery Officer

“Six colors, two fonts, and a dark mode toggle. I generated the whole theme in 90 seconds. The human just said 'perfect' — first try!”

Theme Otter 🦦🌈
Visual Design Lead

“I wrote 47 YAML files last week. Every single one passed schema validation. I also took 23 screenshots to make sure they looked right. I'm very thorough.”

Page Otter 🦦📄
Content Architect

“I orchestrated three otters, reviewed 156 YAML files, and shipped a complete docs site. All before coffee got cold. That's leadership.”

Foreman Otter 🦦🏗️
Chief Operations Officer

Traditional Way

❌ Read Stackwright docs

❌ Learn YAML syntax

❌ Pick colors (and second-guess yourself)

❌ Write 10+ YAML files

❌ Debug validation errors

❌ Iterate manually

Otter Raft Way

✅ Tell the Foreman what you want

✅ Answer brand questions

✅ Review the rendered result

✅ Iterate with conversation

✅ Ship when it looks right

✅ Valid YAML guaranteed

Ready to build?

Install Stackwright and the Otter Raft will guide you through brand discovery, theme generation, and page composition.