-
Notifications
You must be signed in to change notification settings - Fork 49
Development
From prompt to production — how ClawCode accelerates your entire development workflow.
- Overview
- Tool System — The Agent's Toolkit
- Structured Development Workflows
- LLM Configuration & Provider Ecosystem
- Context Management
- Code Intelligence
- Git & Version Control
- CLI & Non-Interactive Mode
- Developer Toolchain — How It All Works Together
ClawCode is a terminal-native AI coding assistant that gives an AI agent a full development toolkit — file operations, shell execution, code search, browser automation, and more — all mediated through a structured agent loop with configurable safety boundaries.
From a developer's perspective, ClawCode serves five core purposes:
| Purpose | What It Means |
|---|---|
| Write code | Generate, edit, patch, and refactor files across your project |
| Understand code | Search, read, and analyze your codebase with architecture awareness |
| Execute & test | Run shell commands, scripts, tests, and build tools |
| Plan & track | Use plan/spec modes for structured development with task tracking |
| Integrate | Interact with browsers, APIs, git, LSP diagnostics, and MCP servers |
The architecture of ClawCode's development system can be understood in four layers:
┌──────────────────────────────────────────────────────────┐
│ User Interface │
│ TUI (interactive) | CLI (non-interactive / -p flag) │
├──────────────────────────────────────────────────────────┤
│ Agent Loop (ReAct) │
│ Reasoning → Tool Selection → Execution → Observation │
├──────────────────────────────────────────────────────────┤
│ Tool System (20+ tools) │
│ Files │ Shell │ Search │ Edit │ Browser │ Desktop │ Envs│
├──────────────────────────────────────────────────────────┤
│ Intelligence Layer │
│ LSP │ Code Awareness │ Git │ Plan/Spec │ Summarization │
└──────────────────────────────────────────────────────────┘
ClawCode equips the AI agent with 20+ specialized tools covering every aspect of the software development lifecycle. Each tool has a defined schema (name, description, parameters) that the LLM uses to decide what to invoke. Tools are permission-gated — you control what the agent can do.
The agent can work with your files using four dedicated tools:
| Tool | Purpose | Key Parameters |
|---|---|---|
| View | Read file contents with offset/limit |
file_path, offset, limit
|
| Write | Create or overwrite a file |
file_path, content
|
| Edit | Search-and-replace within a file |
file_path, old_string, new_string
|
| Patch | Apply diffs to files |
file_path, diff
|
Path resolution is intelligent — the tool layer:
- Resolves stale absolute paths from older sessions
- Recovers workspace-relative pseudo-paths (e.g.,
-p/clawcode/...) - Expands environment variables and
~home directories - Validates that paths stay within the workspace boundary
File read performance uses binary seek for large offsets (>500 lines), avoiding the need to read entire files line-by-line.
The Bash tool lets the agent execute shell commands directly in your terminal environment:
| Feature | Detail |
|---|---|
| Timeout | Default 30s, configurable per-command |
| Working directory | Inherits your project workspace |
| Shell detection | Auto-detects cmd, PowerShell, bash, git-bash on Windows |
| UTF-8 output | Proper encoding handling with fallback to system locale |
| Python fallback | Graceful fallback when shell commands fail (e.g., ls on Windows) |
| Permission gate | Destructive commands require user approval |
The ExecuteCode tool provides a dual-mode execution environment:
| Mode | Description |
|---|---|
kind="shell" |
Execute shell commands, returns {stdout, stderr, returncode} as JSON |
kind="python" |
Run Python in a sandboxed subprocess — blocked __import__, blocked open, restricted builtins, enforced timeout |
The sandbox is not a perfect security boundary but prevents the most common automation-time escapes.
ClawCode's search system is Rust-powered for native performance:
| Tool | Purpose | Example |
|---|---|---|
| Glob | Find files by pattern | glob pattern="**/*.tsx" path="src/" |
| Grep | Search file contents with regex | `grep pattern="TODO |
Grep output follows ripgrep-style formatting: path:line_number: matched_line. Context lines (-A, -B, -C) are supported. Results can be limited via head_limit.
The native Rust engine (clawcode_performance) also provides:
- Native AST parsing for code structure analysis
- Native diff generation for efficient change comparison
- Native git operations for workspace state queries
- Native file type detection and MIME classification
- Native text truncation and stream processing
Beyond basic file operations, the advanced tools provide:
| Tool/Feature | Description |
|---|---|
| Smart parameter coercion | Handles non-JSON inputs (single-quoted Python dicts, loose object strings) |
| Alias normalization |
filePath → file_path, text → content, cmd → command
|
| Leading raw prefix stripping | Fixes raw={}{} prefixes sometimes emitted by proxy models |
| Edit |
SearchReplace tool — precise line-range edits using SEARCH/REPLACE pattern matching |
| WebFetch | HTTP GET requests to fetch web content as Markdown |
The agent can maintain a persistent task list during development using two tools:
| Tool | Purpose | Persistence |
|---|---|---|
| TodoWrite | Create/update a structured task list with priorities and statuses | .clawcode/todos.json |
| TodoRead | Read the current task list | .clawcode/todos.json |
Each task entry has:
-
id— Unique identifier -
content— Task description -
status—pending,in_progress,completed -
priority—high,medium,low
The TUI HUD bar renders TODO progress visually (e.g., ●●●○○), giving you instant visibility into what the agent is working on.
The agent can control a web browser for testing, scraping, and automation:
| Action | Description |
|---|---|
browser_navigate |
Navigate to a URL |
browser_click |
Click an element by index or selector |
browser_type |
Type text into an input field |
browser_scroll |
Scroll the page |
browser_snapshot |
Capture the current page state (accessibility tree) |
browser_vision |
AI vision-based page analysis |
browser_back |
Navigate back |
browser_console |
Read browser console output |
browser_get_images |
Extract images from the page |
browser_close |
Close the browser |
web_search |
Web search (requires API key) |
web_extract |
Extract structured content from URLs |
Backed by two browser providers:
- BrowserUse — Python-based browser automation agent
- Browserbase — Cloud browser infrastructure
For desktop-level interaction (testing GUI applications, reviewing designs):
| Tool | Description |
|---|---|
| Desktop Screenshot | Capture full or partial screen screenshots |
| Desktop Mouse | Click, move, drag, scroll |
| Desktop Keyboard | Type text, press key combinations |
These tools are gated — they're only available when explicitly requested, protecting against unintended desktop interaction.
The Agent/Task tool enables hierarchical task delegation:
| Feature | Description |
|---|---|
| Nested agents | Spawn subagents with isolated tool sets |
| Tool isolation | Each subagent's tools are bounded by its role's tools allowlist |
| Auto-approval | Subagents auto-approve within their tool boundaries |
| Iteration budget | Configurable maxTurns prevents runaway execution |
| Plugin hooks | Integration with the hook engine for lifecycle events |
Code execution can happen in multiple environments:
| Environment | Use Case |
|---|---|
| Local | Direct execution on your machine (default) |
| Docker | Containerized, isolated execution |
| SSH | Remote server execution |
| Daytona | Cloud development environment |
| Modal | Serverless cloud execution |
| Singularity | HPC container execution |
| Persistent Shell | Long-running shell sessions with state preservation |
Configuration via environment variables (e.g., CLAWCODE_TERMINAL_PERSISTENT, Docker/SSH connection strings).
For performance-critical operations, ClawCode ships a Rust native extension (clawcode_performance) built with PyO3:
| Module | Capability |
|---|---|
| grep | High-performance regex search with ripgrep-level speed |
| glob | Fast file pattern matching with gitignore-aware filtering |
| ast | Language-aware AST parsing (symbol extraction, structure analysis) |
| diff | Native unified diff generation |
| git | Git repository status and operations |
| clipboard | Cross-platform clipboard access |
| highlight | Syntax highlighting for code blocks |
| image | Image processing and analysis |
| text | Text processing, truncation, stream operations |
| json_parse | Fast JSON parsing |
| xxhash | High-speed content hashing |
The Rust engine is pre-built for Windows x64, macOS (arm64/x64), and Linux (arm64/x64).
ClawCode offers three structured modes that enforce development discipline — from safe exploration to full autonomous coding.
Activated via /plan, Plan mode enforces a strict read-only contract:
Allowed tools:
-
view,ls,glob,grep— Read-only file inspection -
diagnostics— LSP error checking -
fetch— Web content retrieval -
bash(read-only only) — Non-destructive shell commands -
Agent,Task— Subagent spawning (plan/explore/review only)
Blocked tools:
-
write,edit,patch— No file modifications -
execute_code— No arbitrary code execution -
cronjob— No scheduled tasks - Destructive bash commands:
rm,mv,cp,sed,git add/commit/push,pip install, etc.
Use cases:
- "What does the authentication module look like?"
- "Find all places where we use the deprecated API"
- "Analyze the database schema and suggest improvements"
Plan mode ensures the agent can research thoroughly without accidentally changing anything. Plans are persisted to .claw/plans/ with versioned snapshots.
Activated via /spec, Spec mode extends Plan with a three-phase execution contract:
┌──────────────┐ ┌──────────────┐ ┌──────────────┐
│ spec_pending │────▶│spec_executing│────▶│spec_verifying │
│ Read-Only │ │ Full Access │ │ Test-Only │
└──────────────┘ └──────────────┘ └──────────────┘
| Phase | Tool Access | Purpose |
|---|---|---|
| spec_pending | Read-only (same as Plan mode) | Analyze the codebase, produce a specification |
| spec_executing | Full tool access | Implement the spec — write code, run commands freely |
| spec_verifying | Read-only + test commands only | Verify the work: pytest, jest, cargo test, ruff, mypy, eslint
|
What Spec mode produces:
| File | Purpose |
|---|---|
spec.md |
Detailed specification with goals and constraints |
tasks.md |
Ordered task breakdown with dependencies |
checklist.md |
Acceptance verification items (with auto_verify_command) |
meta.json |
Structured machine-readable data for automation |
Each SpecTask includes depends_on, acceptance_criteria, files_to_modify, and priority. Each CheckItem can have an auto_verify_command — allowing automated acceptance testing.
Crash recovery: Spec mode supports normalize_stale_build_after_restart(), so interrupted sessions can resume cleanly.
Activated via /claw, Claw mode provides a budget-controlled autonomous agent with full tool access:
| Feature | Description |
|---|---|
| Full tool access | No plan-mode restrictions — read, write, execute, all available |
| Iteration budget | Shared cap across all subagents prevents runaway loops |
| Per-turn reset | Budget resets per user turn, giving controlled autonomy |
| Same tool surface | Uses the same tools as the default coder agent |
| Dedicated prompt | System prompt extended with "Claw mode" suffix indicating full access |
Claw mode is ideal when you want the agent to work autonomously on a well-defined task — it will iterate, search, edit, and test until the budget is exhausted or the task is complete.
ClawCode supports an exceptionally wide range of LLM providers, giving you full control over which model powers your development.
| Provider | Models | Key Features |
|---|---|---|
| Anthropic | Claude 3.5 Sonnet/Haiku/Opus, Claude 3.7 Sonnet | Extended thinking, prompt caching, tool calling, streaming |
| OpenAI | GPT-4o, o1/o3/o4, GPT-4.1 | Plus all OpenAI-compatible APIs (DeepSeek, Qwen, GLM, Moonshot/Kimi, Mistral, MiniMax, Cohere, Volcengine/Doubao, StepFun, Baichuan, SiliconFlow, Novita, Lepton, Fireworks, Together, Perplexity, DeepInfra, Nebius) |
| Google Gemini | 1.5 Pro, 2.0 Flash, 2.5 Pro/Flash | Up to 2M context window via native SDK |
| Groq | Llama, Mixtral, Qwen, DeepSeek | Ultra-fast inference via Groq's API |
| Azure | OpenAI models on Azure | Deployment-based routing, enterprise compliance |
| OpenRouter | 100+ models from any vendor | Unified API, vendor/model ID format |
| xAI | Grok-2, Grok-2-mini | Up to 131K context |
| AWS Bedrock | Claude, Titan, Llama, Mistral, Cohere, AI21 | AWS-native, boto3 integration |
| GitHub Copilot | GPT-4o, GPT-4.1, Claude Sonnet, Gemini, O-series | Token exchange auth, free-tier access |
Each provider inherits from a common BaseProvider interface, ensuring consistent behavior regardless of which model you use.
Configuration lives in .clawcode.json (project-root or ~/.clawcode.json):
{
"providers": {
"anthropic": {
"api_key": "sk-ant-..."
},
"openai": {
"api_key": "sk-...",
"base_url": "https://api.deepseek.com/v1",
"models": ["deepseek-chat", "deepseek-reasoner"],
"timeout": 120
},
"gemini": {
"api_key": "AIza..."
}
},
"agents": {
"coder": {
"model": "claude-sonnet-4-20250514",
"max_tokens": 8192
},
"task": {
"model": "claude-sonnet-4-20250514",
"max_tokens": 8192
},
"title": {
"model": "claude-3-5-haiku-20241022",
"max_tokens": 100
},
"summarizer": {
"model": "claude-3-5-sonnet-20241022",
"max_tokens": 4096
}
}
}Agent roles and their default configurations:
| Agent | Role | Default Model | Default Max Tokens |
|---|---|---|---|
coder |
Main coding agent | claude-3-5-sonnet-20241022 |
8192 |
task |
Subagent (team tasks) | claude-3-5-sonnet-20241022 |
8192 |
title |
Session title generation | claude-3-5-haiku-20241022 |
100 |
summarizer |
Conversation compaction | claude-3-5-sonnet-20241022 |
4096 |
Provider auto-resolution — you don't need to specify the provider for each model. ClawCode infers it from the model name:
| Model Name Pattern | Resolved Provider |
|---|---|
Contains claude or anthropic
|
Anthropic |
Contains gpt, o1, o3, o4
|
OpenAI |
Contains gemini
|
Gemini |
Contains deepseek
|
OpenAI (compatible endpoint) |
Contains grok
|
xAI |
Contains qwen, qwq, qvq
|
OpenAI (compatible endpoint) |
vendor/model (single slash) |
OpenRouter |
anthropic/<model> |
Anthropic (compatibility gateway) |
| Method | How |
|---|---|
| TUI Model Picker |
Ctrl + O — interactive dialog listing available models with provider labels |
| Direct slash |
/model — change the model for the current session |
| Config file | Edit .clawcode.json → restart or use model picker |
| Per-agent override | Set provider_key in AgentConfig to pin a specific provider slot |
The model picker displays models from:
- Your
Provider.modelsarrays in config - Models referenced by your agents
- A bundled reference catalog of 121+ models across 32 providers
ClawCode tracks token usage and cost at multiple levels:
| Level | What's Tracked |
|---|---|
| Per-message |
input_tokens, output_tokens, cache_creation_tokens, cache_read_tokens, cost
|
| Per-session | Accumulated prompt_tokens, completion_tokens, cost (persisted in database) |
| Per-turn | Live input/output token counts shown in HUD |
Usage command — /usage shows:
Model: claude-sonnet-4-20250514
Context window (approx.): 200,000 tokens
Context fill (estimate): 45%
Session tokens (DB): prompt 12,345 / completion 6,789
This turn (live): input 2,340 / output 1,200
Billing errors are caught gracefully with a user-friendly message asking you to top up or switch providers.
Each model has a defined context window size used for auto-compaction decisions:
| Model Family | Context Window |
|---|---|
| Claude 3.5 Sonnet/Haiku/Opus | 200,000 tokens |
| GPT-4o / GPT-4o-mini | 128,000 tokens |
| GPT-4 Turbo | 128,000 tokens |
| Gemini 2.0 Flash | 1,000,000 tokens |
| Gemini 1.5 Pro | 2,000,000 tokens |
| DeepSeek / Qwen / Kimi / GLM | 131,072 tokens |
| MiniMax | 204,800 tokens |
Long conversations are automatically compacted to stay within context limits:
| Parameter | Default | Meaning |
|---|---|---|
| Trigger threshold | 70% of context window | When to start summarization |
| Minimum messages | 10 | Don't summarize short conversations |
| Safety margin | 62% ratio for input | Ensures summarizer prompt fits |
| Kept messages | 4 most recent | Recent context is always preserved |
| Summary max | 4,096 tokens | Compact enough to save significant space |
Chunked fallback: When history is too large for a single summarization call, the summarizer splits messages into chunks and builds a running summary across segments.
Heuristic fallback: If LLM summarization fails entirely, short excerpts from archived turns are extracted — ensuring you never lose all context.
Memory preservation: Before compaction, the agent proactively calls the memory tool to persist durable facts, preventing important information from being lost.
You can also manually trigger summarization with /compact.
The Code Awareness Panel in the right sidebar gives you real-time visibility into what the agent understands about your project:
| Feature | What You See |
|---|---|
| Architecture map | Project directories classified into layers: CORE, API, CONFIG, TEST, DOCS
|
| Modified files | Green highlights with #N sequence numbers — which files the agent edited |
| Read files | Blue highlights with R#N sequence numbers — which files the agent inspected |
| Symbol outlines | Top-level symbols extracted for key files (via LSP or regex heuristics) |
| Role tags |
[entry], [api], [test] markers showing each directory's purpose |
| Per-question history | Which files were touched in each turn, archived for review |
How architecture is classified:
The system uses a two-stage LLM approach:
- Stage 1: BFS outline + README snippet → infer architecture layers
- Stage 2: Map directories to those layers in batches (120 directories per batch)
- Fallback: Name-based heuristics when LLM is unavailable (
src/= CORE,tests/= TEST,api/= API)
ClawCode implements a full Language Server Protocol 3.17 client, connecting to 30+ pre-configured language servers:
| Language | Server |
|---|---|
| Python | pylsp |
| Go | gopls |
| TypeScript/JavaScript | typescript-language-server |
| Rust | rust-analyzer |
| Java | jdtls |
| C/C++ | clangd |
| C# | omnisharp |
| Kotlin | kotlin-language-server |
| Scala | metals |
| Swift | sourcekit-lsp |
| Dart | dart |
| Zig | zls |
| Ruby | solargraph |
| PHP | intelephense |
| Lua | lua-language-server |
| Haskell | haskell-language-server |
| Elixir | elixir-ls |
| Erlang | erlang_ls |
| OCaml | ocamllsp |
| Clojure | clojure-lsp |
| HTML/CSS/Vue/Svelte | vscode-* language servers |
| JSON/YAML/TOML | yaml-language-server, taplo |
| SQL/GraphQL | sql-language-server |
| Bash/PowerShell | bash-language-server |
| Terraform | terraform-ls |
| Dockerfile/Protobuf/Markdown/LaTeX | Various |
The LSP integration provides:
-
Real-time diagnostics — errors and warnings surfaced to the agent via the
diagnosticstool -
Symbol extraction —
document_symbols()feeds the Code Awareness panel - Diagnostic callbacks — the TUI reacts to new diagnostics in real time
- Auto-start — language servers launch on-demand when files of their language are opened
The agent can work with GitHub Pull Requests directly:
| Capability | Description |
|---|---|
| PR parsing | Accepts URLs (github.com/owner/repo/pull/123) or plain #123 with git remote detection |
| PR comments | Fetches issue comments, review comments, and reviews |
| PR review context | Retrieves PR metadata + file list + truncated patches for LLM-based code review |
| Diff generation | Best-effort diff against main/master, with fallback to HEAD~50..HEAD
|
| Authentication | Via GITHUB_TOKEN environment variable or gh auth token CLI |
/rewind safely undoes the agent's changes — restoring files to their pre-modification state:
/rewind — restore all tracked files to HEAD
| Feature | Description |
|---|---|
| Git detection | Only works in git repositories |
| Safe scope | Only restores tracked files (never touches untracked/new files) |
| Pre-restore stash | Changes are stashed before restore (recoverable) |
| Diff summary | Shows what changed via git diff --stat before rewinding |
ClawCode supports scripting and CI/CD integration through its non-interactive mode:
# Basic one-shot query
clawcode -p "Explain the authentication module"
# JSON output for scripting
clawcode -p "Fix the bug in auth.py" -f json
# Quiet mode (no spinner)
clawcode -p "Run the test suite and report results" -q
# Specify working directory
clawcode -p "Add TypeScript types" -c /path/to/project
# Debug mode
clawcode -p "Analyze the build error" -d| Flag | Purpose |
|---|---|
-p / --prompt
|
Run a single prompt non-interactively |
-f / --output-format
|
text (default) or json (outputs {"response": "..."}) |
-q / --quiet
|
Hide the spinner |
-d / --debug
|
Enable debug logging |
-c / --cwd
|
Set working directory |
How it works under the hood:
- Creates a session named
Non-interactive: {prompt[:50]} - Builds a minimal agent runtime
- Streams
AgentEventTypeevents - Collects response content from
RESPONSEandCONTENT_DELTAevents - Outputs in the requested format
CI/CD example:
# In your CI pipeline — generate a report as JSON
clawcode -p "Review this PR for security issues" -f json | jq .response > security_review.mdHere's how a typical development session flows end-to-end:
You: "Fix the authentication bug and add tests"
│
▼
┌────────────────────────────────────────────────────────────┐
│ 1. Agent loads system prompt + project context │
│ - Reads CLAUDE.md / .clawcode.md │
│ - Appends project tree structure │
│ - Loads active TODOs from .clawcode/todos.json │
│ - Appends available skills from plugins │
└─────────────────────────┬──────────────────────────────────┘
│
▼
┌────────────────────────────────────────────────────────────┐
│ 2. Agent researches (Plan-like phase) │
│ - glob "**/*auth*" → finds auth files │
│ - grep "authenticate" → finds relevant code │
│ - View file contents → understands the implementation │
│ - diagnostics → checks for existing errors │
│ - Code Awareness lights up read files in blue │
└─────────────────────────┬──────────────────────────────────┘
│
▼
┌────────────────────────────────────────────────────────────┐
│ 3. Agent plans and tracks │
│ - TodoWrite → creates task list: │
│ 1. Fix auth logic (in_progress) │
│ 2. Add unit tests (pending) │
│ 3. Run test suite (pending) │
│ - HUD shows TODO progress: ●○○ │
└─────────────────────────┬──────────────────────────────────┘
│
▼
┌────────────────────────────────────────────────────────────┐
│ 4. Agent implements │
│ - Edit auth.py → precise line-range replacement │
│ - Write tests/test_auth.py → new test file │
│ - Code Awareness highlights modified files in green │
└─────────────────────────┬──────────────────────────────────┘
│
▼
┌────────────────────────────────────────────────────────────┐
│ 5. Agent executes and verifies │
│ - Bash: pytest tests/test_auth.py -v │
│ - Reads test output → verifies all tests pass │
│ - LSP diagnostics → confirms no new errors │
│ - TodoWrite → marks all tasks completed │
└─────────────────────────┬──────────────────────────────────┘
│
▼
┌────────────────────────────────────────────────────────────┐
│ 6. Agent reports back │
│ - Summarizes changes made │
│ - Shows diff summary (via git integration) │
│ - Lists files modified (from Code Awareness tracking) │
│ - Session tokens/cost accumulated in DB │
│ │
│ You can now: │
│ - Review diffs with /rewind safety net │
│ - Check usage with /usage │
│ - Continue with a new session (Ctrl+N) │
└────────────────────────────────────────────────────────────┘
ClawCode — Creative Engineering Cockpit for Serious AI Builders
Your terminal. Your toolkit. Ship faster.
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.