d719508733
Commit: 2e9aaf49
54 files changed — ACP protocol + RCS bridge enhancements
CCP-specific files (CLAUDE.md, mint.json, package.json, prompts.ts) kept ours
79 lines
4.2 KiB
Markdown
79 lines
4.2 KiB
Markdown
# Impeccable Design Context
|
|
|
|
## Users
|
|
|
|
**Primary**: Technical teams and enterprises using AI-assisted coding in production workflows.
|
|
- DevOps engineers managing remote agents via RCS dashboard
|
|
- Development teams collaborating through shared sessions
|
|
- Individual developers using terminal CLI daily
|
|
|
|
**Context**: Used during focused work sessions — debugging, code review, agent orchestration. Users are in "get things done" mode, not browsing. They value efficiency but also appreciate warmth and personality.
|
|
|
|
**Job to be done**: Make advanced AI coding tools accessible and controllable, especially features that normally require enterprise accounts or Anthropic OAuth.
|
|
|
|
## Brand Personality
|
|
|
|
**3 words**: Warm, Considered, Human
|
|
|
|
**Voice**: Like a knowledgeable colleague who's genuinely enthusiastic about the craft — not a corporate product manager. Community-first, open, slightly playful. Chinese developer community culture (贴吧/discord 温暖氛围).
|
|
|
|
**Emotional goals**: Confidence (this tool is solid), Warmth (this community is welcoming), Delight (small moments of personality make the difference).
|
|
|
|
**References**:
|
|
- **Anthropic's own design language** — their clean, considered aesthetic with warm undertones. The terra cotta/burnt orange as a human accent. Lots of breathing room. Typography-forward.
|
|
- **NOT**: Generic AI product (no ChatGPT blue, no gradient text, no "AI slop"). NOT corporate SaaS (no Salesforce-blue dashboards, no enterprise sterility).
|
|
|
|
**Anti-references**: Corporate enterprise dashboards, generic AI product pages, anything that looks like it was "designed by committee."
|
|
|
|
## Aesthetic Direction
|
|
|
|
**Theme**: Light + Dark dual mode (user/system preference switch)
|
|
|
|
**Tone**: Anthropomorphic warmth meets terminal precision. The brand orange (Claude's terra cotta) is the thread that ties everything together — it's the human element in a technical world.
|
|
|
|
**Typography**: Clean, considered, with good hierarchy. Terminal-native for CLI; modern web fonts for Web UI (RCS dashboard, docs). Favor readability and personality.
|
|
|
|
**Color**:
|
|
- Primary: Claude orange family (`#D77757` / terra cotta)
|
|
- Accent: Warm neutrals tinted toward orange
|
|
- Semantic: Success/Error/Warning following Anthropic's established palette
|
|
- Dark mode: Warm dark surfaces (not cold blue-black)
|
|
|
|
**Differentiation**: The CCB brand sits at the intersection of "serious tool" and "community project." It should feel like Anthropic's design principles applied to an open-source context — less corporate polish, more human craft. The mascot "Clawd" and the playful "踩踩背" naming hint at personality that the design should honor.
|
|
|
|
**Scope**: All Web UI — RCS control panel, documentation site, landing pages.
|
|
|
|
## Design Principles
|
|
|
|
1. **Considered over clever** — Every design choice should feel intentional, not trendy. If it doesn't serve the user, it doesn't ship.
|
|
2. **Warmth through subtlety** — Orange tints on neutrals, breathing room in layouts, personality in copy. Not giant emoji or aggressive color.
|
|
3. **Density with clarity** — Technical users need information density, but not chaos. Every pixel earns its place.
|
|
4. **Community voice** — The design should feel like it was made by people who use it, not by a distant design team. Slightly rough edges are fine if they're honest.
|
|
5. **Anthropic's shadow** — When in doubt, follow Anthropic's design instincts — the clean layouts, the generous spacing, the warm color temperature. Then add the community touch.
|
|
|
|
## Existing Design Assets
|
|
|
|
### Brand Colors (from theme system)
|
|
- Claude Orange: `rgb(215,119,87)` / `#D77757`
|
|
- Claude Blue: `rgb(87,105,247)` / `#5769F7`
|
|
- Permission Blue: `rgb(87,105,247)`
|
|
- Auto Accept Violet: `rgb(135,0,255)`
|
|
- Plan Mode Teal: `rgb(0,102,102)`
|
|
- Success: `rgb(78,186,101)`
|
|
- Error: `rgb(255,107,128)`
|
|
- Warning: `rgb(255,193,7)`
|
|
|
|
### Logo
|
|
- CCB text + orange play button icon
|
|
- Dark/Light SVG variants in `docs/logo/`
|
|
- Favicon: Orange circle `#D97706` with white play triangle
|
|
|
|
### Mascot
|
|
- "Clawd" — terminal-art character with multiple poses
|
|
- Theme-aware coloring
|
|
|
|
### Theme System
|
|
- 7 variants: dark, light, dark-ansi, light-ansi, dark-daltonized, light-daltonized, auto
|
|
- 89+ semantic color tokens
|
|
- Full documentation in `packages/@ant/ink/docs/04-theme-system.md`
|