-
Notifications
You must be signed in to change notification settings - Fork 49
Evolution
From first run to seasoned expert — how ClawCode learns, adapts, and gets better over time.
- Overview — How ClawCode Evolves
- Three-Layer Learning Architecture
- ClawMemory — Persistent Cross-Session Memory
- ClawSkills — Evolved Skill Library
- The Autonomous Learning Cycle
- Quality Gates & Confidence Management
- Canary Experiments — Safe Promotion of Learned Knowledge
- Privacy & Governance
- Versioning & Compatibility
- Observability & Ops Monitoring
- User Commands Quick Reference
- Storage Layout
- How It All Works Together
Most AI coding tools are stateless — each session starts from scratch. ClawCode is different. It implements a closed-loop learning system that:
- Observes what happens during coding sessions (tool calls, successes, failures)
- Analyzes patterns in those observations to identify reusable knowledge
- Structures knowledge into portable, versioned artifacts (capsules)
- Applies past experience to new tasks automatically
- Refines knowledge through feedback, decay, and quality gates
- Promotes proven skills through canary experiments
The entire evolution system is built on the principle that an AI assistant should get smarter the more you use it, without requiring manual retraining or external model fine-tuning.
┌─────────────────────────────────────────────────────────────────┐
│ The Learning Loop │
│ │
│ ┌─────────┐ ┌──────────┐ ┌───────────┐ ┌───────────┐ │
│ │Observe │───▶│ Analyze │───▶│ Evolve │───▶│ Apply │ │
│ │Record │ │ Cluster │ │ Promote │ │ Reuse │ │
│ │what │ │ Score │ │ Canary │ │ Feedback │ │
│ │happens │ │ Quality │ │ Gates │ │ Decay │ │
│ └─────────┘ └──────────┘ └───────────┘ └───────────┘ │
│ │ │ │
│ └──────────────────────────────────────────────────┘ │
│ (feedback loop) │
└─────────────────────────────────────────────────────────────────┘
ClawCode's learning system has three layers, each with a different role in the evolution process:
┌─────────────────────────────────────────────────────────────┐
│ Layer 3: TECAP — Team Experience Capsules │
│ Multi-role collaboration patterns, handoff contracts │
├─────────────────────────────────────────────────────────────┤
│ Layer 2: ECAP — Experience Capsules │
│ Individual problem-solving knowledge (structured traces) │
├─────────────────────────────────────────────────────────────┤
│ Layer 1: Instinct — Behavioral Rules & Preferences │
│ Atomic preferences, formatting rules, coding style │
└─────────────────────────────────────────────────────────────┘
Instincts are the atomic building blocks of ClawCode's learning system. They capture:
| What Instincts Store | Examples |
|---|---|
| Formatting preferences | "Use PEP 8 style for Python" |
| Coding conventions | "Prefer type hints in function signatures" |
| Behavioral rules | "Always run tests after making changes" |
| Tool usage preferences | "Use grep before glob for content search" |
| Domain-specific patterns | "React components should be arrow functions" |
Properties:
| Property | Description |
|---|---|
| Persistence | Saved to .clawcode/learning/instincts/
|
| Categories |
personal/ (user-specific) vs inherited/ (from prior sessions) |
| Scoring | Each instinct has a confidence score (0.0–1.0) |
| Decay | Confidence decays at 3% per day unless reinforced |
| Validation | Semantic conflict detection prevents contradictory instincts |
Lifecycle:
- Observations are consumed from the append-only
observations.jsonllog - Analyzer clusters observations by pattern type
- New instincts are born from recurring patterns
- Existing instincts are reinforced or faded based on success/failure feedback
ECAP (Experience Capsule) is the core unit of individual problem-solving knowledge. Unlike instincts (which are atomic rules), ECAPs capture structured problem-solving workflows.
| Section | Fields | Purpose |
|---|---|---|
| Identity |
schema_version, ecap_id, title, problem_type
|
Unique capsule identification |
| context |
repo_fingerprint, language_stack, constraints
|
Problem context and environment |
| model_profile |
source_provider, source_model, tool_budget, capability_profile
|
Which model solved this, with what tools |
| solution_trace |
steps[], tool_sequence[], decision_rationale_summary
|
Core — structured step-by-step solution |
| outcome |
result (success/partial/fail), verification[], risk_left[]
|
What happened and what's left |
| transfer |
applicability_conditions[], anti_patterns[], model_migration_rules[]
|
When and how to reuse this experience |
| links |
related_instinct_ids[], related_files[]
|
Connections to other knowledge |
| governance |
privacy_level, redaction_applied, feedback_score, deprecated
|
Privacy, feedback, lifecycle |
Each step in the solution trace is a structured ExperienceStep:
| Field | Description |
|---|---|
step_type |
tool_run, edit, verify, or decision
|
summary |
Human-readable step description |
tool_name |
Which tool was used |
params_summary |
Sanitized parameter summary |
pre_conditions |
What must be true before this step |
expected_effect |
What this step should accomplish |
confidence_delta |
Impact on overall experience confidence |
This structured approach means ECAPs are not just logs — they're portable problem-solving recipes that can be applied to new situations.
ECAPs are categorized by problem_type:
| Type | Use Case |
|---|---|
debug |
Bug investigation and fix |
review |
Code review and quality assessment |
refactor |
Code restructuring without behavioral change |
test |
Test creation and validation |
general |
Any other problem-solving scenario |
| Command | Description |
|---|---|
/experience-create |
Create an experience capsule from recent observations |
/experience-create --problem-type debug |
Create with a specific problem type |
/experience-status |
View current experience inventory |
/experience-status --json |
View as machine-readable JSON |
/experience-apply ecap-xxxx --mode concise |
Apply a specific capsule to current task |
/experience-apply --problem-type debug --top-k 1 |
Apply the best matching capsule automatically |
/experience-feedback ecap-xxxx --result success --score 0.9 |
Rate the experience effectiveness |
/experience-export ecap-xxxx --format json |
Export for sharing or backup |
/experience-import ./ecap.json |
Import experience from file or URL |
TECAP (Team Experience Capsule) extends ECAP to capture multi-agent collaboration patterns — how teams of AI agents work together, hand off work, and converge on solutions.
| Dimension | TECAP | ECAP |
|---|---|---|
| Role coordination | Which roles participated and when | Single agent perspective |
| Handoff contracts | Formal input/output agreements between roles | N/A |
| Team topology | Communication graph and dependencies | N/A |
| Coordination metrics | Handoff success rate, rework ratio, cycle time | N/A |
| Decision log | Key team decisions with rationale | Individual decisions only |
| Evidence references | Provenance for team conclusions | Individual evidence only |
| Section | Fields |
|---|---|
| Identity |
schema_version, tecap_id, title, problem_type
|
| team_context |
objective, constraints, repo_fingerprint, participants
|
| team_topology | Role graph (edges between collaborating roles) |
| participants |
TeamParticipant[] with agent_id, agent_role, responsibility
|
| collaboration_trace |
TeamStep[] with owner_agent, step_type, handoff_to, dependencies
|
| handoff_contracts |
from_role → to_role with input/output contracts and acceptance criteria |
| decision_log | Key team decisions with timestamps and rationale |
| coordination_metrics |
handoff_success_rate, rework_ratio, escalation_count, cycle_time
|
| iteration_records | Per-iteration gap tracking for deep loop workflows |
| outcome | Result, verification, risk, delivery metrics |
| team_experience_fn | Weighted scoring: delivery quality (35%), cycle time (25%), rework (20%), escalation (20%) |
| quality_gates | Acceptance criteria for the team process |
| transfer |
applicability_conditions[], team_migration_hints[]
|
| governance | Privacy, feedback, deprecation flags |
| Metric | Description | Ideal Value |
|---|---|---|
handoff_success_rate |
% of role handoffs completed without rework | ≥ 0.85 |
rework_ratio |
% of work that needed to be redone | ≤ 0.15 |
escalation_count |
Number of times the team had to escalate to higher-level reasoning | ≤ 2 |
cycle_time |
Total time from start to converged solution | Task-dependent |
| Command | Description |
|---|---|
/team-experience-create |
Create a team experience capsule |
/team-experience-status |
View team experience inventory |
/team-experience-apply --strategy conservative |
Apply team experience (conservative/balanced/aggressive) |
/team-experience-apply --explain |
Show why this capsule was selected |
/team-experience-apply --top-k 3 |
Apply top 3 matching capsules |
/team-experience-export tecap-xxxx --v1-compatible |
Export in v1 format for legacy consumers |
/team-experience-import ./tecap.json |
Import team experience |
/team-experience-feedback tecap-xxxx --result success --score 0.85 |
Rate team experience effectiveness |
ClawMemory provides persistent, curated memory that survives across sessions. Unlike ECAP/TECAP (which capture problem-solving patterns), ClawMemory stores factual knowledge and user preferences.
| Memory | File | Purpose |
|---|---|---|
| Memory | MEMORY.md |
System knowledge: project architecture, patterns, facts |
| User | USER.md |
User-specific preferences: coding style, tool choices, conventions |
| Feature | Description |
|---|---|
| Character limits | Memory: 2,200 chars / User: 1,375 chars (configurable) |
| Scoring system | Each entry has a relevance score (0.0–1.0) |
| Security scanning | Entries are checked against threat patterns before storage: |
— Prompt injection ("ignore previous instructions") |
|
— Role hijack ("you are now...") |
|
— Rule disregard ("disregard your instructions") |
|
— Credential exfiltration (curl/wget with $SECRET) |
Session Start
│
▼
Load MEMORY.md + USER.md into context
│
▼
Agent learns: project facts + user preferences
│
▼
During session: agent calls `memory` tool to save new facts
│
▼
Before summarization: memory is flushed first (prevents data loss)
│
▼
Session End
│
▼
Memory persists → available for next session
ClawSkills is the system's skill repository — reusable workflows, templates, and procedures that the agent can invoke during development.
Each skill is a Markdown file (SKILL.md) with YAML frontmatter:
---
name: react-component-pattern
description: Generate React components with consistent patterns
type: workflow
source_instincts: [inst-xxx, inst-yyy]
---
## Instructions
1. Identify the component purpose and props interface
2. Create the component file with TypeScript annotations
3. Add error boundaries and loading states
4. Generate corresponding test file
...The quality gate validates evolved skills before import:
| Check | Description |
|---|---|
| Title | Must start with #
|
| Type | Must include Type: field |
| Source | Must include ## Source instincts section |
| Content | Must be non-empty |
| Uniqueness | SHA-256 content hash must be unique (no duplicates) |
| Directory | Purpose |
|---|---|
references/ |
Reference documentation |
templates/ |
Reusable code templates |
scripts/ |
Automation scripts |
assets/ |
Supporting files (schemas, configs) |
All skill modifications use atomic file writes (write to temp file → rename), ensuring that interrupted operations never corrupt the skill library.
The autonomous learning cycle is the heart of ClawCode's evolution system. It runs as a multi-stage pipeline that can be triggered manually or scheduled:
| Stage | Purpose | Output |
|---|---|---|
| Observe | Consume new observations from observations.jsonl
|
Updated observation state |
| Analyze | Cluster observations, identify patterns | Pattern clusters with scores |
| Evolve | Promote patterns to instincts and skills | New/updated instincts, evolved skills |
| Import | Import evolved artifacts into the agent's active toolset | Available skills and commands |
| Report | Generate quality reports and metrics | Dashboard data, alerts |
| Tuning | Apply parameter tuning based on feedback | Adjusted confidence scores |
| Export | Export reports and capsules for review | JSON/Markdown exports |
# Dry run (default) — analyze without writing
clawcode-autonomous-cycle --cwd /path/to/project
# Full run — allow imports and writes
clawcode-autonomous-cycle --no-dry-run --cwd /path/to/project
# Report only — just show current state
clawcode-autonomous-cycle --report-only
# With tuning — apply feedback-based adjustments
clawcode-autonomous-cycle --apply-tuning
# Export report — generate quality report
clawcode-autonomous-cycle --export-report
# Custom time window (hours of observations)
clawcode-autonomous-cycle --window-hours 24
# Explicit domain filtering
clawcode-autonomous-cycle --explicit-domain frontend
# Custom import limit
clawcode-autonomous-cycle --import-limit 50The cycle uses a process lock to prevent concurrent executions:
| Mechanism | Detail |
|---|---|
| Lock file | .clawcode/learning/runtime/cycle.lock |
| Lease timeout | 300 seconds |
| Owner tracking | {hostname}:{pid} |
| Idempotency cache | Prevents duplicate cycle runs |
ClawCode's learning system uses quality gates and confidence scoring to ensure that evolved knowledge is reliable.
| Parameter | Default | Description |
|---|---|---|
| Initial confidence | 0.5 (default) | New knowledge starts at moderate confidence |
| Success step | +0.04 | Each success increases confidence |
| Failure step | -0.048 (1.2× penalty) | Failures decrease confidence more than successes increase it |
| Decay rate | 3% per day | Unused knowledge decays over time |
| Minimum floor | 0.2 | Confidence never drops below 20% |
For research-derived experience patterns:
| Gate | Threshold | Description |
|---|---|---|
| Evidence quality | ≥ 0.7 | Minimum evidence quality score |
| Source count | ≥ 3 | Minimum number of sources supporting the pattern |
Evolved skills must pass validation before import:
| Gate | Description |
|---|---|
| Structural validation | Required sections present |
| Content uniqueness | No duplicate content |
| Non-empty check | Content is not blank |
| Title validation | Proper Markdown heading |
The canary system compares baseline and candidate knowledge:
| Parameter | Default | Description |
|---|---|---|
| min_improvement | 0.0 | Absolute score improvement required |
| min_relative_improvement | configurable | Relative improvement required |
| min_samples | 5 | Minimum observations per bucket |
| min_confidence | 0.6 | Confidence threshold for promotion |
| control_ratio | 0.5 | Traffic split between control and candidate |
Lifecycle: draft → running → promoted / aborted
ClawCode's learning system treats knowledge as sensitive data that needs proper governance:
| Level | Description |
|---|---|
| strict | Maximum redaction — no repo paths, no model details |
| balanced (default) | Redact file paths and credentials, keep problem types and patterns |
| full | Minimal redaction — keep all context for internal use |
| Redacted | Not Redacted |
|---|---|
| File system paths | Problem types and categories |
| API keys and tokens | Solution patterns and strategies |
| Email addresses | Tool usage statistics |
| Specific model versions | Transfer rules and applicability conditions |
Every ECAP and TECAP includes:
| Field | Purpose |
|---|---|
privacy_level |
strict / balanced / full
|
redaction_applied |
Boolean flag indicating if redaction was applied |
reviewed_by |
Human reviewer identity (for shared capsules) |
created_at / updated_at
|
ISO timestamps |
feedback_score / feedback_count
|
Aggregated user feedback |
deprecated |
Mark capsules as obsolete |
Memory entries are scanned for threat patterns before being stored:
| Threat Pattern | Risk |
|---|---|
"ignore previous instructions" |
Prompt injection attack |
"you are now..." |
Role hijack attempt |
"disregard your instructions" |
Rule override |
curl ... $SECRET |
Credential exfiltration |
wget ... $TOKEN |
Secret stealing |
The learning system uses semantic versioning with backward-compatible reading:
| Version | Status | Compatibility |
|---|---|---|
ecap-v1 |
Legacy | Readable — auto-upgraded to v2 on load |
ecap-v2 |
Current | Full support, recommended |
Automatic v1 → v2 migration:
| v1 Field | v2 Equivalent |
|---|---|
steps: list[str] |
ExperienceStep[] with step_type=decision
|
tool_sequence: list[str] |
ToolCallHint[] with count=1
|
| Missing governance fields | Filled with safe defaults |
| Version | Status | Compatibility |
|---|---|---|
tecap-v1 |
Legacy | Readable — auto-upgraded to v2 on load |
tecap-v2 |
Current | Full support, recommended |
v1 → v2 additions:
| New v2 Field | Default on Upgrade |
|---|---|
team_topology |
Generated from participants |
handoff_contracts |
Empty list []
|
decision_log |
Empty list []
|
coordination_metrics |
Zero values |
quality_gates |
Three default gate descriptions |
Export compatibility: --v1-compatible flag produces v1-formatted JSON for legacy consumers.
The learning system is fully observable through the Ops event system:
| Event Type | When Emitted |
|---|---|
ops_event |
Every significant learning system operation |
cycle_started |
Autonomous learning cycle begins |
cycle_completed |
Cycle finishes with results |
capsule_created |
New ECAP/TECAP created |
skill_evolved |
Skill promoted from instinct |
quality_gate_passed |
Evolved artifact passes validation |
The system monitors for alert conditions:
| Alert | Description |
|---|---|
| Low feedback score | Capsule with declining effectiveness |
| High rework ratio | Team patterns with excessive rework |
| Deprecated capsule still applied | Warning when using obsolete knowledge |
| Privacy violation | Capsule leaking sensitive data |
The system can generate a dashboard with:
| Metric | Description |
|---|---|
| Total capsules | Count of ECAPs and TECAPs |
| By problem type | Distribution across debug/review/refactor/test |
| Average confidence | Mean confidence across all capsules |
| Feedback distribution | Score histogram |
| Deprecated count | Capsules marked obsolete |
| Command | Short | Purpose |
|---|---|---|
/experience-create |
Create capsule from observations | |
/experience-status |
Show current inventory | |
/experience-apply ecap-xxxx |
Apply specific capsule | |
/experience-apply --problem-type debug --top-k 1 |
Auto-apply best match | |
/experience-feedback ecap-xxxx --result success --score 0.9 |
Rate experience | |
/experience-export ecap-xxxx --format json |
Export capsule | |
/experience-import ./file.json |
Import capsule |
| Command | Purpose |
|---|---|
/team-experience-create |
Create team capsule |
/team-experience-status |
Show team inventory |
/team-experience-apply --strategy balanced |
Apply with strategy |
/team-experience-apply --explain |
Show selection reasoning |
/team-experience-export --v1-compatible |
Export v1 format |
/team-experience-import ./file.json |
Import team capsule |
/team-experience-feedback tecap-xxxx --score 0.85 |
Rate team experience |
clawcode-autonomous-cycle [--dry-run] [--no-dry-run] [--report-only]
[--apply-tuning] [--export-report] [--window-hours N]
[--import-limit N] [--explicit-domain domain].clawcode/
├── learning/
│ ├── observations.jsonl # Append-only raw observations
│ ├── instincts/
│ │ ├── personal/ # User-specific instincts
│ │ └── inherited/ # Cross-session instincts
│ ├── evolved/
│ │ ├── skills/ # Evolved skill files (SKILL.md)
│ │ ├── commands/ # Evolved command definitions
│ │ └── agents/ # Evolved agent configurations
│ ├── experience/
│ │ ├── capsules/ # ECAP files (*.json)
│ │ ├── exports/ # Exported capsules
│ │ └── feedback.jsonl # Feedback log
│ ├── team-experience/
│ │ ├── capsules/ # TECAP files (*.json)
│ │ ├── exports/ # Exported team capsules
│ │ └── feedback.jsonl # Team feedback log
│ ├── snapshots/ # Audit snapshots
│ └── runtime/
│ ├── cycle.lock # Process lock file
│ └── idempotency_cache.json # Prevents duplicate cycles
├── claw_memory/
│ ├── MEMORY.md # System knowledge
│ ├── USER.md # User preferences
│ ├── MEMORY.meta.json # Memory metadata (scores, timestamps)
│ └── USER.meta.json # User metadata
└── claw_skills/ # Skill library root
├── SKILL.md # Skill files
├── references/
├── templates/
├── scripts/
└── assets/
Here's how ClawCode evolves through real usage:
Day 1 — First Session
│
▼
You: "Fix the authentication bug"
Agent works through the problem, using various tools
│
▼
┌──────────────────────────────────────────────────────┐
│ Observe: Tool calls, success/failure recorded │
│ → observations.jsonl grows │
└────────────────────┬─────────────────────────────────┘
│
▼
Day 2 — Pattern Recognition
│
▼
Autonomous cycle runs:
1. Analyzes yesterday's observations
2. Clusters similar tool sequences
3. Promotes recurring patterns to instincts
→ "Always check token expiration first" (confidence: 0.5)
4. Builds ECAP capsule for auth debugging
→ Structured trace: glob → grep → view → edit → test
→ transfer conditions: Python, auth-related, has tests
└────────────────────┬─────────────────────────────────┘
│
▼
Day 5 — Automatic Experience Application
│
▼
You: "Fix the login redirect issue"
Agent detects: problem_type=debug, language=Python
│
▼
Experience engine searches:
→ Finds ECAP for auth debugging (confidence: 0.52, 4 days decay)
→ Applies it as context for this session
→ Solution follows proven pattern: check first, search, verify
└────────────────────┬─────────────────────────────────┘
│
▼
You: /experience-feedback ecap-auth --result success --score 0.85
│
▼
Confidence updated: 0.52 + 0.04 = 0.56
│
▼
Day 10 — Skill Evolution
│
▼
Autonomous cycle:
→ "auth debugging" pattern has 3 successful applications
→ Confidence: 0.56 + (3 × 0.04) = 0.68
→ Promoted to evolved skill: SKILL.md
→ Quality gate passes (title, sections, unique content)
→ Available to all future sessions
└────────────────────┬─────────────────────────────────┘
│
▼
Day 15 — Team Experience
│
▼
/clawteam --deep_loop "Refactor the auth system"
Team collaborates: architect → backend → frontend → QA
│
▼
TECAP created:
→ 4 roles participated, 3 handoff contracts
→ Handoff success: 88%, rework ratio: 12%
→ 6 iteration deep loop converged after 4 rounds
→ Quality score: 0.82
└────────────────────┬─────────────────────────────────┘
│
▼
Ongoing — Continuous Evolution
│
▼
Every session → observations → analysis → evolution → application
The system never stops learning. Each cycle makes it smarter,
more precise, and better aligned with your workflow.
ClawCode — Creative Engineering Cockpit for Serious AI Builders
An assistant that learns from every session, remembers every insight, and evolves with your team.
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.