-
Notifications
You must be signed in to change notification settings - Fork 49
Collaboration
From solo coding to team orchestration — unlock multi-agent collaboration in your terminal.
- Overview
- ClawTeam — Engineering Task Orchestration
- DesignTeam — Product Design Collaboration
- Research Team — Collaborative Investigation
- Saddle — Pipeline-Driven Development Framework
- Multi-Model Workflows
- Subagent System — The Collaboration Foundation
- Agent Customization
- Session Management & Branching
- MCP — Model Context Protocol Integration
- Plugin System — Extend Collaboration
- Team Experience Learning (TECAP)
- How It All Fits Together
ClawCode isn't just a chat-based coding assistant — it's a multi-agent collaboration platform built into your terminal. At its core, collaboration in ClawCode means:
| Concept | What It Means for You |
|---|---|
| Role-based orchestration | Dispatch tasks to specialized AI roles (architect, QA, researcher, designer…) that work together |
| Pipeline-driven delivery | Run structured workflows: specification → design → development, each with its own team |
| Deep loop convergence | Iterate automatically until quality thresholds are met, with measurable gap tracking |
| Cross-team memory | Team experience is captured and reused — the system learns from past collaborations |
| Plugin extensibility | Connect external tools, MCP servers, and custom agent definitions |
The collaboration stack has four layers, each building on the previous:
┌─────────────────────────────────────────────────┐
│ User Commands │
│ /clawteam /designteam /research /multi-* │
├─────────────────────────────────────────────────┤
│ Orchestration Engine │
│ TeamService · PipelineRunner · Role Selection │
├─────────────────────────────────────────────────┤
│ Agent Runtime │
│ SubAgent spawning · Tool mediation · Sessions │
├─────────────────────────────────────────────────┤
│ Learning & Memory │
│ TECAP capsules · Session memory · Experience DB │
└─────────────────────────────────────────────────┘
/clawteam is ClawCode's built-in multi-role engineering task orchestration command. You describe a requirement in natural language, and it dispatches multiple specialist AI agents to collaboratively plan, implement, and validate the solution.
| Role | Specialty | Tool Access |
|---|---|---|
| Product Manager | Product strategy, scope, acceptance criteria | Read, Glob, Grep, Bash |
| Business Analyst | Business requirements, stakeholder alignment | Read, Glob, Grep, Bash |
| System Architect | Architecture design, trade-off analysis | Read, Glob, Grep, Bash |
| UI/UX Designer | User flows, interaction design, usability | Read, Glob, Grep, Bash |
| Dev Manager | Engineering execution planning | Read, Glob, Grep, Bash |
| Team Lead | Cross-role coordination, alignment | Read, Glob, Grep, Bash |
| Backend Engineer | Backend implementation, APIs, data layer | Read, Write, Edit, Glob, Grep, Bash |
| Frontend Engineer | Frontend implementation, UI components | Read, Write, Edit, Glob, Grep, Bash |
| Mobile Engineer | Mobile platform implementation | Read, Write, Edit, Glob, Grep, Bash |
| DevOps | CI/CD, release automation, infrastructure | Read, Write, Edit, Glob, Grep, Bash |
| QA Engineer | Test strategy, quality validation | Read, Write, Edit, Glob, Grep, Bash |
| SRE | Reliability, observability, on-call | Read, Write, Edit, Glob, Grep, Bash |
| Project Manager | Scheduling, governance, risk tracking | Read, Glob, Grep, Bash |
| Scrum Master | Agile process, retrospectives, blockers | Read, Glob, Grep, Bash |
💡 Key insight: Roles with Write/Edit tools can modify your codebase. Roles with only Read tools contribute analysis and strategy without touching files.
# Auto-select roles and orchestrate collaboratively
/clawteam Build an order management system with audit logging
# Use a single specialist role
/clawteam:qa Review the authentication module for security issues
# Explicit single-role mode
/clawteam --agent clawteam-system-architect Design the microservices boundary
# Iterative deep loop with convergence tracking
/clawteam --deep_loop Refactor the payment processing module
# Deep loop with a custom iteration cap
/clawteam --deep_loop --max_iters 10 Implement real-time notification system
When --deep_loop is enabled, ClawTeam runs a structured multi-iteration loop where each iteration follows four steps:
| Step | Purpose |
|---|---|
| 1. Inspect | Analyze previous outcome, identify defects, risks, and gaps |
| 2. Deepen Design | Refine architecture, interfaces, and trade-offs |
| 3. Expand Implementation | Broaden feature scope and test coverage |
| 4. Final Convergence | Evaluate delta score, decide whether to continue |
Convergence criteria are configurable:
| Parameter | Default | Meaning |
|---|---|---|
min_gap_delta |
0.05 | Minimum improvement per iteration to continue |
convergence_rounds |
2 | Consecutive rounds below delta to declare convergence |
handoff_target |
0.85 | Success rate threshold for role handoffs |
max_iters |
100 | Hard cap on iterations |
max_rollbacks |
2 | Maximum rollback attempts on critical degrade |
Each iteration outputs structured metrics — gap_before, gap_after, gap_delta, deviation_reason — so you can track exactly how the team is converging toward the goal.
/designteam is the product design-oriented multi-role orchestration command, complementary to /clawteam (which focuses on engineering). It produces structured design documentation through collaborative role-based workflows.
| Role | Specialty |
|---|---|
| User Researcher | Qualitative/quantitative framing, personas, journey signals, research questions |
| Interaction Designer | Task flows, states, navigation, information architecture, interaction specs |
| UI Designer | Layout hierarchy, UI patterns, components, density, design system alignment |
| Product Designer | Problem framing, outcomes, success metrics, scope prioritization |
| Visual/Ops Designer | Brand-consistent visuals, marketing/growth touchpoints, conversion layout |
| Experience Design Expert | Cross-cutting experience principles, heuristic review, accessibility, risk synthesis |
Each role can optionally have a structured YAML configuration (in .claw/design/designteam/) providing output hints, method recommendations, references, and anti-patterns:
role_id: designteam-user-researcher
summary: Frame research questions, evidence gaps, and user signals
primary_outputs:
"User & Scenarios": primary
"Research Summary": primary
"Open Questions": consulted
method_hints:
- interviews
- journey_map
- competitive_scan
- assumption_mapping
anti_patterns:
- "Guessing personas without labeling assumptions"When deep loop is enabled, DesignTeam follows a structured seven-phase design process:
| Phase | Name | Key Activities |
|---|---|---|
| 1 | Exploration & Research | Stakeholder interviews, competitive analysis, user research |
| 2 | Definition & Strategy | Affinity diagrams, "How Might We" framing, value proposition |
| 3 | Ideation & Divergence | Brainstorming, Crazy 8s, sketching, storyboards |
| 4 | Prototyping & Validation | Interactive prototypes, usability testing, A/B concepts |
| 5 | Refinement & Delivery | Visual specs, motion design, design tokens, walkthrough |
| 6 | Development Follow-up | Requirement clarification, interaction walkthrough, UI acceptance |
| 7 | Iteration & Metrics | Analytics review, satisfaction surveys, user callbacks |
| 8+ | Integration & Convergence | Merge full design document, resolve remaining gaps |
Each iteration maps to one phase; after phase 7, the system enters convergence mode to finalize.
# Auto-orchestrate all design roles
/designteam Design a collaborative document editing experience
# Single design specialist
/designteam:designteam-ui-designer Create a component library for the dashboard
# Deep loop through the 7-phase design workflow
/designteam --deep_loop Redesign the onboarding flow for better activation
# Deep loop with iteration cap
/designteam --deep_loop --max_iters 8 Create a design system for the fintech platform
ResearchTeam extends ClawCode's research mode with role-based parallel collaboration for multi-phase academic and technical investigations.
| Role | Specialty |
|---|---|
| Literature Researcher | Literature retrieval, source curation, citation coverage |
| Data Collector | Raw evidence collection, data normalization |
| Methodology Designer | Method and controls design, bias checks |
| Deep Analyst | Deep analysis, statistical checks, pattern extraction |
| Critical Reviewer | Critical review of assumptions, methods, gaps |
| Synthesis Writer | Synthesize findings into structured narrative |
| Fact Verifier | Factual claims validation, citation verification |
| Evidence Curator | Evidence archive and provenance mapping |
Research Team executes in three parallel phases, each with a defined merge strategy:
| Phase | Roles | Merge Strategy |
|---|---|---|
| Literature Survey | Literature Researcher + Data Collector | Union (combine all findings) |
| Analysis & Review | Deep Analyst + Critical Reviewer | Conflict Resolution (resolve contradictions) |
| Synthesis & Verification | Synthesis Writer + Fact Verifier | Sequential Review (writer drafts, verifier checks) |
Up to 4 workers execute in parallel, with convergence checks after each phase to determine if results are sufficient.
Via slash command:
/research start quantum error correction -w team_research
/research start "LLM hallucination detection" -w team_audit --roles literature_researcher,deep_analyst
/research start "transformer architecture survey" -w team_survey
Via CLI:
clawcode research team "quantum error correction" \
--roles literature_researcher,deep_analyst,fact_verifier \
--strategy parallel \
--max-iters 5Available team workflows:
| Workflow | Description |
|---|---|
team_research |
Full multi-role collaborative research (5 agents) |
team_audit |
Claims/code/reference audit (3 agents) |
team_survey |
Literature survey with evidence curation (3 agents) |
Saddle is ClawCode's standalone collaboration-paradigm-driven development framework. It turns a one-line requirement into a structured, multi-stage project roadmap through a versionable pipeline.
┌──────────┐ ┌──────────┐ ┌──────────┐
│ Spec │────▶│ Design │────▶│ Develop │
│ │ │ │ │ │
│ Scope │ │ DesignTeam│ │ ClawTeam │
│ Tasks │ │ 6 roles │ │ 14 roles │
│ Checklist│ │ │ │ │
└──────────┘ └──────────┘ └──────────┘
Each stage is independently configurable and can be re-run with different modes without rebuilding context.
| Stage | Purpose | Outputs |
|---|---|---|
| Spec | Clarify scope, split work, define acceptance |
spec.md, tasks.md, checklist.md, meta.json
|
| Design | Multi-role design orchestration | Full orchestration prompt, agent selection, deep-loop config |
| Develop | Multi-role engineering execution | Full orchestration prompt, agent selection, deep-loop config |
Together these form the "North Star bundle" — a complete project roadmap that serves as an alignment anchor for implementation.
Modes are YAML files that define how the team collaborates. Instead of scattering conventions across chat logs, Saddle pins collaboration behavior in the repository.
Three built-in modes:
| Mode | Key Settings | When to Use |
|---|---|---|
| default | Full prompts, minimal agent selection, no deep loop | Standard projects |
| fast | Compact prompts, 12-iteration cap, higher thresholds | Quick prototypes, tight deadlines |
| deep | Full deep loop, balanced agent selection, tight convergence | Critical systems, high-quality requirements |
Example mode configuration:
name: fast
pipeline:
enabled: true
order: [spec, design, develop]
design:
enabled: true
deep_loop: false
max_iters: 12
prompt_profile: compact
develop:
enabled: true
deep_loop: false
max_iters: 12
prompt_profile: compact
agent_selection:
strategy: minimal
thresholds:
min_gap_delta: 0.08
convergence_rounds: 2
handoff_target: 0.85
tool_policy:
enable_web_search: true
enable_shell: true
enable_subagent: true
risk_level: balancedFor fine-grained control, Saddle introduces a three-layer collaboration primitive system:
| Layer | Description |
|---|---|
| Groups (Swimlanes) | Parallel execution lanes: design-research, design-ux, dev-planning, dev-execution, etc. |
| Primitives | Named collaboration steps with input/output schemas, constraints, and group assignment |
| Operation Primitives | Shorthand string list that auto-maps to groups by index |
This allows you to define exactly who does what, in what order, with what constraints — all version-controlled in the mode YAML.
Saddle includes a browser-based visual editor (React + Vite) for designing and managing modes:
| Feature | Description |
|---|---|
| Mode Studio | Load, edit, validate, and save mode configurations |
| Collaboration Editor | Drag-and-drop groups and primitives, edit schemas |
| i18n | English / Chinese interface toggle |
| Live Validation | Validate mode configs before saving to disk |
Launch: saddle serve → open http://127.0.0.1:1995/studio
# Full pipeline
saddle run "Build an order system with audit logging" --mode fast
# Individual stages
saddle spec "requirement"
saddle design "requirement"
saddle develop "requirement"
# Mode management
saddle mode list
saddle mode show <name>
saddle mode validate <name>
# HTTP API server (with Studio)
saddle serve
# Deep-loop finalization
saddle finalize clawteam <session_id> assistant_output.txtAlso available from ClawCode:
clawcode saddle run "requirement" --mode fast
clawcode saddle mode listClawCode provides five specialized multi-model collaborative workflows for different execution scenarios:
| Command | Focus | Key Phases |
|---|---|---|
/multi-plan |
Planning only (no code edits) | Research → Parallel Analysis → Cross-validation → Plan Delivery |
/multi-execute |
Collaborative execution | Execute → Audit → Verify with traceable artifacts |
/multi-backend |
Backend-focused delivery | Prepare → Research → Ideation → Plan → Execute → Optimize → Review |
/multi-frontend |
Frontend-focused delivery | Same phase sequence, frontend-oriented roles |
/multi-workflow |
Full-stack collaboration | Parallel backend + frontend analysis, dual-review optimization |
All multi-* commands share a common routing infrastructure with:
- Model pool selection — choose which LLM models to use for each role
- Fallback chains — automatic fallback if a model is unavailable
-
Strategy options —
quality-first,balanced,speed-first,cost-first
Underneath every team command is ClawCode's subagent system — the mechanism that enables nested agent execution with isolated tool sets and independent sessions.
When a team command dispatches work to multiple roles:
- The orchestration prompt is built and injected into the main agent's context
- The main agent uses the
Agent/Tasktool to spawn subagents for each selected role - Each subagent runs with an isolated tool set (defined by the role's
toolsallowlist) - Subagents create child sessions with their own message history
- Results are aggregated back into the parent session
| Property | Description |
|---|---|
| Tool isolation | Each subagent only has access to the tools its role allows |
| Session branching | Child sessions fork from the parent, maintaining context lineage |
| Auto-approval | Subagents auto-approve within their tool boundaries (no permission dialogs) |
| Iteration budget | Each subagent has configurable maxTurns to prevent runaway execution |
ClawCode's agent system is fully customizable. You can define your own specialist roles or override existing ones.
Agents are defined as Markdown files with YAML frontmatter:
---
name: my-custom-reviewer
description: Security-focused code reviewer
tools: [Read, Glob, Grep, Bash]
disallowedTools: [Write, Edit]
model: claude-sonnet-4-20250514
maxTurns: 25
---
You are a security-focused code reviewer. Analyze the codebase for:
- Authentication vulnerabilities
- Input validation gaps
- SQL injection risks
- XSS attack surfaces
...| Frontmatter Key | Meaning |
|---|---|
name |
Agent ID used with the Agent tool |
description |
Short summary for documentation |
tools |
Allowlist of tools (e.g., Read, Write, Bash) |
disallowedTools |
Block list of tools |
model |
Override the default LLM model |
maxTurns |
Maximum conversation turns |
isolation |
Isolation level for the subagent |
Agent definitions are loaded with increasing precedence (later wins):
1. Built-in agents (explore, plan, code-review, clawteam-*, designteam-*)
2. User-wide: ~/.claude/agents/*.md
3. Project: .claw/agents/ → .clawcode/agents/ → .claude/agents/
This means your project-level agents override user-wide agents, which override built-in agents — giving you full control without modifying the framework.
Every collaboration creates and manages sessions — persistent conversation threads with full history tracking.
| Feature | Description |
|---|---|
| CRUD operations | Create, read, update, delete sessions |
| Branching | Fork a new session from any existing session via parent_session_id
|
| Token tracking | Track prompt tokens, completion tokens, and cost per session |
| Event pubsub | Real-time events for session lifecycle (CREATED, UPDATED, DELETED) |
| Search | Full-text search across session history |
| Shortcut / Command | Action |
|---|---|
Ctrl + N |
Create new session |
Ctrl + A |
Switch between sessions |
Ctrl + Shift + S |
Open session panel |
When a subagent spawns from a team command, it creates a child session that inherits context from the parent. This means:
- Each role's work is tracked independently
- You can revisit any role's session to continue or refine
- The full collaboration tree is preserved for auditing
ClawCode implements a full MCP (Model Context Protocol) client for connecting to external tool and resource servers.
| Capability | Description |
|---|---|
| Tool discovery | Automatically discover available tools from connected MCP servers |
| Resource access | Read resources exposed by MCP servers (files, data, APIs) |
| Dynamic management | Add/remove MCP servers at runtime without restarting |
| Namespaced plugins | Plugin MCP servers are namespaced as plugin_name:server_name
|
| Transport | Use Case |
|---|---|
| Stdio | Local subprocess-based MCP servers |
| SSE (HTTP) | Remote HTTP-based MCP servers with Server-Sent Events |
MCP tools are available to all agents during team orchestration. This means your custom MCP servers (database clients, API gateways, internal tools) become part of the team's collaborative toolkit.
ClawCode includes a Claude Code-compatible plugin system for extending functionality through skills, hooks, MCP servers, and LSP servers.
| Capability | Description |
|---|---|
| Skills | Reusable prompt templates and workflows |
| Hooks | Lifecycle events: SessionStart, UserPromptSubmit, Stop, SessionEnd
|
| MCP Servers | Inject external tool servers into agent sessions |
| LSP Servers | Inject language server integrations (Python, Go, TypeScript) |
| Slash Commands | Custom commands via plugin namespace |
| Mode | Location | Use Case |
|---|---|---|
clawcode (default) |
~/.clawcode |
ClawCode-native plugins |
claude |
~/.claude |
Shared with Claude Code |
custom |
Absolute path | Organization-specific plugin directories |
| Source | Format |
|---|---|
| Local directory | Path to plugin folder |
| GitHub | owner/repo |
| Git URL | Remote git repository |
| npm / pip | Package registry |
| git-subdir | Subdirectory within a repository |
Saddle ships two official plugins for cross-platform collaboration:
| Plugin | Platform | Key Features |
|---|---|---|
| Claude Code Plugin | Claude Code | Session memory injection, /saddle:run slash command |
| OpenClaw Plugin | OpenClaw | Context engine integration, pipeline triggers via HTTP |
These plugins enable cross-tool collaboration — running Saddle pipelines from within Claude Code or other AI coding tools, with shared memory and context.
ClawCode captures collaboration experience in Team Experience Capsules (TECAPs) — structured records of how teams worked together, what went well, and what to improve.
| Dimension | What's Tracked |
|---|---|
| Team context | Objective, constraints, participants |
| Collaboration trace | Steps with owners, types, handoffs between roles |
| Outcome | Result quality, verification status, risk assessment |
| Handoff contracts | From-role → to-role with input/output contracts and acceptance criteria |
| Decision log | Key decisions made during collaboration |
| Coordination metrics | Handoff success rate, rework ratio, cycle time |
| Gap tracking | Per-iteration gap scores showing convergence trajectory |
TECAP computes a weighted Team Experience Function for scoring collaboration quality:
| Weight | Dimension |
|---|---|
| 35% | Delivery quality |
| 25% | Cycle time |
| 20% | Rework ratio |
| 20% | Escalation rate |
Past Collaboration → TECAP Capture → Quality Scoring →
↓
Future Collaboration → TECAP Retrieval → Role Selection Hints → Better Outcomes
TECAPs are persisted to .saddle/learning/ and automatically retrieved when similar collaboration patterns are detected in future runs.
Here's the complete collaboration flow from user input to deliverable:
User types: /clawteam Build a payment processing system
│
▼
┌─────────────────────────────────────────────────────────┐
│ 1. Slash Command Parsing │
│ builtin_slash.py parses arguments & flags │
└──────────────────────┬──────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────┐
│ 2. Agent Loading │
│ loader.py merges built-in + user + project agents │
└──────────────────────┬──────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────┐
│ 3. Orchestration Prompt Build │
│ TeamService selects roles & builds multi-agent prompt│
└──────────────────────┬──────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────┐
│ 4. Main Agent Dispatches Subagents │
│ Each role gets an isolated Agent with its tool set │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │Architect │ │Backend │ │ QA │ ... │
│ │(Read) │ │(Write) │ │ (Write) │ │
│ └────┬────┘ └────┬────┘ └────┬────┘ │
│ │ │ │ │
│ ▼ ▼ ▼ │
│ Child sessions with independent message history │
└──────────────────────┬──────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────┐
│ 5. Result Aggregation & Convergence │
│ Outputs merged, gaps measured, deep loop checked │
└──────────────────────┬──────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────┐
│ 6. TECAP Writeback │
│ Team experience captured for future learning │
└─────────────────────────────────────────────────────────┘
ClawCode — Creative Engineering Cockpit for Serious AI Builders
One terminal. Multiple minds. Better outcomes.
From visual experience to engineering aesthetics — craft your own terminal workspace.
- Design Philosophy
- Theme System
- Display Modes
- 54 Brand Design Catalogs
- AI Smart Style Selection Engine
- Anti-Pattern Guardian System
- HUD — Heads-Up Display
- Welcome Panel & Claw Mascot
- Keyboard Shortcuts Quick Reference
- Configuration & Persistence
- Design Team Workflow
- Architecture Overview
ClawCode's aesthetic design follows three core principles:
-
Terminal-Native Visual Quality — Achieve GUI-level visual refinement within a pure terminal environment. Powered by the Textual TUI framework and Rich rendering engine, ClawCode delivers a CSS-driven styling system, real-time Markdown rendering, syntax highlighting, and dynamic animations — all inside your terminal.
-
Multi-Layer Customization — From global color themes to layout modes, from AI-driven automatic style selection to manually locked brand styles, users can adjust the interface appearance at any granularity level.
-
Engineering Aesthetics Driven — Every visual decision is backed by semantic intent. Colors aren't just "pretty" — they carry functional roles: information hierarchy, action feedback, and cognitive guidance.
ClawCode ships with 8 hand-picked themes spanning warm to cool tones, classic to trendy aesthetics. Each theme defines 11 semantic color tokens, ensuring every UI element's coloration has a clear design purpose.
| Theme | Background | Primary | Accent | Style |
|---|---|---|---|---|
| Yellow ⭐ Default |
#1c1b1a Deep Charcoal |
#eab700 Amber Gold |
#f0c14b Warm Gold |
Warm high contrast, ideal for long coding sessions |
| Catppuccin |
#1e1e2e Deep Indigo |
#cba6f7 Lavender |
#f9e2af Cream |
Soothing pastel palette, visually comfortable |
| Dracula |
#282a36 Midnight Gray |
#bd93f9 Electric Purple |
#f1fa8c Neon Yellow |
Classic Dracula, high recognizability |
| Gruvbox |
#282828 Dark Brown |
#d3869b Rose Pink |
#fabd2f Retro Gold |
Retro warm tones, unique personality |
| Monokai |
#272822 Dark Olive |
#ae81ff Violet |
#e6db74 Lemon Yellow |
Classic editor palette, developer favorite |
| One Dark |
#282c34 Graphite Blue |
#c678dd Lavender |
#e5c07b Amber |
Atom editor style, balanced elegance |
| Tokyo Night |
#1a1b26 Deep Night Blue |
#bb9af7 Lavender Blue |
#e0af68 Warm Orange |
Japanese aesthetics, serene and deep |
| Light |
#ffffff Pure White |
#9d7cd8 Soft Purple |
#ff9e64 Warm Orange |
Light mode, ideal for bright environments |
💡 Tip:
Darkis an alias forYellow— selectingDarkuses the default Yellow theme.
| Action | Shortcut | Description |
|---|---|---|
| Cycle to next theme | Ctrl + T |
Cycles through Yellow → Catppuccin → Dracula → … |
| Open theme selector | Ctrl + Shift + T |
Opens a theme list panel; current theme is marked with *
|
| Confirm in dialog | Enter |
Selects and applies the highlighted theme |
Each theme defines 11 semantic color tokens corresponding to different element roles in the interface:
| Token | Purpose |
|---|---|
background |
Global background color |
foreground |
Body text color |
primary |
Primary actions, highlights, links |
secondary |
Secondary information, auxiliary labels |
accent |
Accent color for drawing attention |
error |
Error states, failure indicators |
warning |
Warning states, caution indicators |
success |
Success states, confirmation feedback |
muted |
De-emphasized text, comments, disabled states |
border |
Borders, dividers |
panel |
Panel backgrounds, card surfaces |
This semantic design ensures that when switching between themes, the functional meaning of UI elements remains consistent — errors are always red-ish, successes are always green-ish — preventing cognitive disorientation caused by theme changes.
Themes control colors; display modes control layout. ClawCode offers 6 display modes, each defining a distinct interface layout and color atmosphere.
┌──────────────────────────────────────────────────┐
│ Chat Area │ Info Panel │
│ │ Code Awareness │
│ [Message List] │ │
│ │ │
│ ┌──────────────────────┐ │ │
│ │ > Input Box │ │ │
│ └──────────────────────┘ │ │
│ [HUD Status Bar] │ │
└──────────────────────────────────────────────────┘
- No sidebar, right info panel visible
- OpenCode-style input box (
>prompt) - Bottom HUD status bar
- Warm amber
#fab283as the primary tone
- Same layout structure as OpenCode
- Neutral blue-gray tone
#11141cbackground - Ideal for users who prefer calm, cool tones
┌──────────────────────────────────────────────────┐
│ Chat Area (Full Width) │
│ │
│ [Message List] │
│ │
│ ┌──────────────────────────────────────────────┐ │
│ │ Claude-style Input Box │ │
│ └──────────────────────────────────────────────┘ │
│ [HUD Status Bar] │
└──────────────────────────────────────────────────┘
- Full-width chat area, no right panel
- Anthropic orange
#da7756as the primary tone - Deep indigo background
#1a1a2e - Claude-style input box
┌──────────┬───────────────────────────────────────┐
│ Sidebar │ Chat Area │
│ │ │
│ [Session]│ [Message List] │
│ [Session]│ │
│ [Session]│ ┌──────────────────────────────────┐ │
│ │ │ Classic Input Box │ │
│ │ └──────────────────────────────────┘ │
└──────────┴───────────────────────────────────────┘
- Left session sidebar visible
- Top status bar replaces bottom HUD
- One Dark warm tone
#e5c07b
- Bare-bones interface: only message list and input box
- No sidebar, no right panel
- Solarized Dark high-contrast palette
- Ideal for focused conversation scenarios
- Centered narrow-column layout (max width 100 characters)
- No sidebar, no panels, no bottom HUD
- Nord-inspired palette
#88c0d0frost blue - Maximum focus and immersion
| Shortcut | Description |
|---|---|
Ctrl + D |
Opens the display mode selection dialog |
Choose your preferred mode in the popup dialog — the layout and color scheme will switch instantly.
ClawCode includes design language references from 54 world-class brands. Each brand directory contains:
| File | Description |
|---|---|
DESIGN.md |
Complete design system documentation (colors, typography, layout, component specs) |
README.md |
Brand overview with preview screenshots |
preview.html |
Light mode HTML visual preview |
preview-dark.html |
Dark mode HTML visual preview |
tokens.compact.json |
Compact design tokens (primary color, background, text, border radius, shadow, font family) |
These brand catalogs are not just for ClawCode's own UI aesthetics — they serve as a design reference library for AI code generation. When you ask ClawCode to generate UI code, it can automatically reference the corresponding brand's design language to ensure output quality.
📋 Click to expand all 54 brands
| # | Brand | # | Brand | # | Brand |
|---|---|---|---|---|---|
| 1 | Airbnb | 19 | Intercom | 37 | Resend |
| 2 | Airtable | 20 | Kraken | 38 | Revolut |
| 3 | Apple | 21 | Linear | 39 | RunwayML |
| 4 | BMW | 22 | Lovable | 40 | Sanity |
| 5 | Cal | 23 | MiniMax | 41 | Sentry |
| 6 | Claude | 24 | Mintlify | 42 | SpaceX |
| 7 | Clay | 25 | Miro | 43 | Spotify |
| 8 | ClickHouse | 26 | Mistral | 44 | Stripe |
| 9 | Cohere | 27 | MongoDB | 45 | Supabase |
| 10 | Coinbase | 28 | Notion | 46 | Superhuman |
| 11 | Composio | 29 | NVIDIA | 47 | Together.ai |
| 12 | Cursor | 30 | Ollama | 48 | Uber |
| 13 | ElevenLabs | 31 | OpenCode | 49 | Vercel |
| 14 | Expo | 32 | 50 | VoltAgent | |
| 15 | Figma | 33 | PostHog | 51 | Warp |
| 16 | Framer | 34 | Raycast | 52 | Webflow |
| 17 | HashiCorp | 35 | Replicate | 53 | Wise |
| 18 | IBM | 36 | RunwayML | 54 | x.ai / Zapier |
Example — Stripe Compact Tokens:
{
"primary_color": "#533afd",
"background": "#ffffff",
"text": "#061b31",
"radius": "8px",
"shadow": "0 8px 24px rgba(50,50,93,0.25)",
"font_family": "sohne-var, SourceCodePro"
}Example — Vercel Design Characteristics:
- Geist Sans / Mono fonts with extreme negative letter-spacing
- Shadow-as-border technique (using
box-shadowinstead ofborder) - Near-pure white canvas
#ffffff+ deep black text#171717 - Workflow colors: Ship Red
#ff5b4f, Preview Pink#de1d8d, Develop Blue#0a72ef
ClawCode's most distinctive aesthetic feature is its AI-driven UI style auto-matching system. When you make a UI-related request, the system automatically selects the best-matching design style from the 54 brand catalogs.
User Input Prompt
│
▼
┌─────────────────────┐
│ UI Keyword Detection │ ← Recognizes "ui", "界面", "design", "theme", etc.
└─────────┬───────────┘
│
▼
┌─────────────────────┐
│ TF-IDF Vectorization│ ← Converts user input into feature vectors
│ + Synonym Expansion │ ← 28 synonym groups expand matching scope
└─────────┬───────────┘
│
▼
┌─────────────────────┐
│ Multi-Dim Weighted │ ← 5 dimensions scored independently
│ Scoring │
└─────────┬───────────┘
│
▼
┌─────────────────────┐
│ RRF Fusion Ranking │ ← Reciprocal Rank Fusion combining keyword & semantic matching
└─────────┬───────────┘
│
▼
┌─────────────────────┐
│ Anti-Pattern Check │ ← Filters out non-compliant design proposals
└─────────┬───────────┘
│
▼
Recommended Brand Style
The system uses TF-IDF (Term Frequency-Inverse Document Frequency) to vectorize user input for matching, and expands the matching scope through 28 synonym groups. Examples:
| Synonym Group | Covered Terms |
|---|---|
| Dashboard | dashboard, admin_panel, control_panel, 管理后台, 管理面板 |
| Landing Page | landing_page, product_landing, 落地页, 首页, 主页 |
| E-commerce | ecommerce, shopping, 商城, 电商, shop, store |
| Fintech | fintech, 金融, finance, banking, 银行, 支付 |
| Minimal | minimal, minimalist, 简洁, 极简, clean |
| Documentation | docs, documentation, 文档, 文档站, 知识库 |
The system scores each candidate brand independently across 5 dimensions:
| Dimension | Weight | Description |
|---|---|---|
fit_surfaces |
2.0 | Matching surface types (landing page, dashboard, blog, etc.) |
fit_domains |
1.6 | Matching industry domains (fintech, e-commerce, dev tools, etc.) |
tags |
1.2 | Tag matching (minimal engineering, technical premium, etc.) |
tone_keywords |
0.8 | Tone keywords (professional, friendly, bold, etc.) |
identity |
0.4 | Brand identity characteristics |
The final ranking is produced by Reciprocal Rank Fusion (RRF), which merges two signal sources — keyword matching and TF-IDF cosine similarity — into a unified ranking.
The system natively supports Chinese input matching through 4-gram extraction for CJK characters:
- Direct recognition of Chinese keywords:
界面(interface),页面(page),主页(homepage),仪表盘(dashboard),组件(component),样式(style),布局(layout),主题(theme),颜色(color),字体(font),按钮(button),表单(form),导航(navigation),交互(interaction), etc. - Synonym groups include Chinese-English cross-references:
电商 ↔ ecommerce,金融 ↔ fintech,极简 ↔ minimal
Style selection isn't just about "what looks good" — it's also about knowing "what to avoid." ClawCode includes an anti-pattern guardian system that actively detects and prevents bad design practices during style recommendation and code generation.
The following anti-patterns apply to all brand styles:
| Anti-Pattern | Severity | Fix Suggestion |
|---|---|---|
| Rainbow gradient headline | Medium | Use a single primary accent with neutral typographic hierarchy |
| Glassmorphism with heavy blur | High | Replace blur cards with subtle border-shadow cards |
| Excessive animation | Medium | Reduce the number of animations, keep it simple |
| Neon glow borders | Medium | Use softer borders or shadows instead |
| Multiple conflicting accent colors | High | Limit to one primary color + one semantic status color |
Each brand also has its own anti-pattern rules:
| Brand | Anti-Patterns | Fix Suggestion |
|---|---|---|
| Vercel | Skeuomorphic textures, thick ornamental borders, emoji-heavy hero copy | Use flat monochrome surfaces with concise technical copy |
| Linear | Rounded cartoon cards, oversized marketing slogans, bright multi-color CTAs | Use tighter radius and structured issue-tracking density |
| Airbnb | Dark-only monochrome palette, dense enterprise dashboard grid | Increase whitespace and use lifestyle-oriented visual hierarchy |
The HUD (Heads-Up Display) is ClawCode's bottom real-time status bar, inspired by aircraft cockpit instrument panels — delivering maximum contextual information in minimal visual space.
| Section | Information |
|---|---|
| Model | Currently active LLM model name (e.g., claude-sonnet-4-20250514) |
| Running Tools | Tool name and target file currently executing (with spinner animation) |
| Tool Done | Names of completed tools (marked with done-color) |
| Agent Type | Currently active Agent role (e.g., architect, implementer, etc.) |
| TODO Progress | Task list completion progress (●●●○○ style) |
| Context Window | Current token usage |
Each HUD information section has independent color configuration, determined by the current display mode's DisplayModeChromeStyle:
| Element | Purpose |
|---|---|
hud_model_color |
Model name color |
hud_tool_running_color |
Pulse animation color for running tools |
hud_tool_name_color |
Tool name color |
hud_tool_done_color |
Completion marker color for finished tools |
hud_agent_type_color |
Agent type label color |
hud_todo_bullet_color |
TODO bullet dot color |
Every time you open a new blank session, ClawCode presents a carefully crafted welcome panel.
┌─────────────────────────────────────────────────┐
│ │
│ Welcome to ClawCode — your AI coding cockpit │
│ Model: claude-sonnet-4-20250514 │
│ Workspace: ~/my-project │
│ │
│ ┌─────────────────┐ ┌─────────────────────┐ │
│ │ 💡 Tips │ │ 📋 Recent Activity │ │
│ │ • Use /help │ │ • Fix auth bug │ │
│ │ • Ctrl+K commands│ │ • Refactor API │ │
│ │ • Ctrl+T theme │ │ • Add tests │ │
│ └─────────────────┘ └─────────────────────┘ │
│ │
└─────────────────────────────────────────────────┘
Welcome panel highlights:
-
Claw Pixel Mascot — ASCII pixel art rendered using Rich
Text+bgcolorfills - Brand Information — Version number, current model, workspace path
-
Two-Column Layout — Tips on the left + Recent activity on the right (Rich
Columnscomponent) - Adaptive Coloring — Panel border, accent, and muted colors all follow the current display mode
Below are the ClawCode shortcuts related to aesthetic design:
| Shortcut | Function | Description |
|---|---|---|
Ctrl + T |
Cycle theme | Switches to the next theme in preset order |
Ctrl + Shift + T |
Open theme selector | Opens the full theme list panel |
Ctrl + D |
Switch display mode | Opens the display mode selection dialog |
Ctrl + K |
Command palette | Search and execute any command |
Ctrl + M |
Toggle mouse mode | Enable/disable mouse interaction (affects hover effects) |
Ctrl + H / F1
|
Help panel | View the full keyboard shortcuts list |
Ctrl + Q |
Quit | Exit ClawCode |
ClawCode automatically saves your UI preferences and restores them on the next launch.
~/.config/clawcode/.clawcode_ui.json
| Setting | Description |
|---|---|
| Current theme | e.g., tokyonight, dracula
|
| Current display mode | e.g., opencode, zen
|
| Right panel width | Width after drag-resize |
Beyond AI auto-selection, you can manually lock a brand style:
- Manual Lock — Explicitly specify which brand's design language to use
- Auto Pick — Let AI match automatically based on context
- Hybrid — AI suggests a candidate list; you pick from it
ClawCode isn't just a tool — it includes a built-in virtual design team. Through the /designteam command, you can launch an AI design team composed of 6 specialized design roles:
| Role | Responsibility |
|---|---|
| Experience Design Expert | Overall UX strategy and evaluation |
| Interaction Designer | Interaction patterns and user flow design |
| UI Designer | Interface layout, component hierarchy and density |
| Product Designer | Aligning product functionality with design objectives |
| Visual/Ops Designer | Visual execution and operational material design |
| User Researcher | User needs research and usability testing |
Each design team role has its own YAML configuration file (located in .claw/design/designteam/), defining the role's domain expertise, working methods, and delivery standards. This multi-role collaboration ensures comprehensive and professional design solutions.
From a technical perspective, ClawCode's aesthetic design system consists of three layers:
┌────────────────────────────────────────────────────────────────┐
│ User Interaction Layer │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ Theme │ │ Mode │ │ Brand │ │ Shortcut │ │
│ │ Switch │ │ Switch │ │ Select │ │ Actions │ │
│ └────┬─────┘ └────┬─────┘ └────┬─────┘ └────┬─────┘ │
│ │ │ │ │ │
├───────┴─────────────┴─────────────┴──────────────┴──────────────┤
│ Style Engine Layer │
│ ┌──────────────────┐ ┌──────────────────────────────────┐ │
│ │ Theme Engine │ │ Display Mode Engine │ │
│ │ 8 themes × │ │ 6 modes × │ │
│ │ 11 color tokens │ │ (65+ chrome + chat style slots) │ │
│ └──────────────────┘ └──────────────────────────────────┘ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ AI Style Engine │ │
│ │ TF-IDF + Synonym + RRF + Anti-Pattern + Session Memory │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
├─────────────────────────────────────────────────────────────────┤
│ Resource Layer │
│ ┌──────────────────┐ ┌──────────────────────────────────┐ │
│ │ .tcss Stylesheets │ │ 54 Brand Design Catalogs │ │
│ │ (Textual CSS) │ │ (.claw/design/UI/*) │ │
│ └──────────────────┘ └──────────────────────────────────┘ │
│ ┌──────────────────┐ ┌──────────────────────────────────┐ │
│ │ Rich Rendering │ │ Anti-Pattern Rule Library │ │
│ │ (Markdown/Syntax) │ │ (anti_patterns.json) │ │
│ └──────────────────┘ └──────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────┘
Core Dual Rendering Engine:
-
Textual (Widget Layer) — Manages screen layout, keyboard events, focus management, mouse interactions, and CSS styling. Uses
.tcssfiles for structural styles. -
Rich (Content Layer) — Handles all in-widget content rendering. Widget
render()methods return RichRenderableTypeobjects, includingMarkdown,Syntax,Panel,Text, and more.
This layered architecture ensures decoupling of layout logic from content rendering, allowing themes and modes to be switched independently of content.
ClawCode — Creative Engineering Cockpit for Serious AI Builders
Experience engineering aesthetics in the terminal.