Files
beaver_project/前端改造风格/DESIGN.md
steven_li 30ab74ffb2 feat(engine): 添加MCP连接管理和工具集成功能
- 集成MCP连接管理器,支持MCP服务器连接
- 添加多种内置工具:ClarifyTool、CronTool、DelegateTool、ExecuteCodeTool、
  PatchFileTool、ProcessTool、SendMessageTool、SpawnTool、TerminalTool、
  TodoTool、WebFetchTool、WebSearchTool、WriteFileTool等
- 实现工具注册和装配功能
- 添加技能选择上下文参数
- 支持思考模式控制参数thinking_enabled

feat(coordinator): 重构任务执行计划器参数命名

- 将learning_candidate_enabled重命名为allow_candidate_generation
- 更新TeamGraphScheduler中的参数传递
- 修改LocalAgentRunner中的相关参数处理
- 更新README文档中的相应描述

refactor(context): 标准化工具调用参数格式

- 添加_json导入用于参数序列化
- 实现_provider_tool_calls方法标准化OpenAI兼容的工具调用载荷
- 修复工具调用中参数非字符串类型的序列化问题

refactor(session): 优化消息历史记录过滤逻辑

- 修改get_messages_as_conversation为基于运行状态过滤消息
- 排除未完成、失败或错误结束的运行记录
- 改进对话历史的可见性控制机制

fix(store): 修复FTS索引重建逻辑

- 添加异常处理防止FTS索引创建失败
- 实现_rebuild_fts_index方法重新构建全文搜索索引
- 优化索引触发器和表的维护流程
2026-05-14 09:43:48 +08:00

5.5 KiB

DESIGN.md

Brand

Beaver — Taupe

A calm editorial UI system focused on rhythm, hierarchy, and soft neutral contrast.
Designed for AI-native tools, dashboards, and minimalist productivity software.

The interface emphasizes:

  • Spacious layouts
  • Soft grayscale surfaces
  • Typography-first hierarchy
  • Rounded geometry
  • Quiet shadows
  • Dense information with low visual noise

The visual tone should feel:

  • thoughtful
  • mature
  • calm
  • premium
  • architectural
  • editorial

Avoid:

  • saturated colors
  • hard borders
  • sharp corners
  • excessive gradients
  • loud shadows
  • playful illustration-heavy UI

Colors

Core Palette

Token Hex Usage
background #F5F3F1 Main app background
foreground #0B0B0B Primary text
primary #1D1715 Primary actions
secondary #E5E2DF Secondary surfaces
muted #DDD9D6 Muted backgrounds
accent #CAC5C0 Borders / subtle emphasis

Neutral Scale

Token Hex
zinc-50 #F7F5F4
zinc-100 #ECE8E5
zinc-200 #D8D2CE
zinc-300 #B8AEA8
zinc-400 #8B7E77
zinc-500 #6A5E58
zinc-600 #4F4642
zinc-700 #342E2B

Semantic Colors

Taupe

Step Hex
taupe-100 #E7E2DE
taupe-300 #B8AEA8
taupe-500 #8B7E77
taupe-700 #5F5550

Sage

Step Hex
sage-100 #E3E8E2
sage-300 #B7C2B5
sage-500 #869683
sage-700 #657162

Slate

Step Hex
slate-100 #E4E7EB
slate-300 #BCC4CE
slate-500 #8C96A3
slate-700 #697281

Typography

Philosophy

Typography drives hierarchy.

The system should feel like a modern editorial publication mixed with a productivity dashboard.

Large headings use elegant serif typography.
UI and body copy use neutral grotesk sans-serif typography.


Font Stack

Serif

font-family: "Lora", Georgia, serif;

Used for:

  • hero titles
  • article headings
  • marketing emphasis
  • editorial sections

Sans

font-family: "Public Sans", Inter, sans-serif;

Used for:

  • UI
  • labels
  • forms
  • dashboards
  • buttons
  • navigation

Type Scale

Style Size Weight Line Height
h1 48px 600 1.1
h2 36px 600 1.15
h3 28px 500 1.2
body-lg 18px 400 1.7
body 16px 400 1.6
small 14px 400 1.5
mono 13px 500 1.4

Radius

Rounded geometry should feel soft but architectural.

Token Radius
xs 4px
sm 8px
md 12px
lg 16px
xl 24px
full 999px

Cards should primarily use:

border-radius: 16px;

Shadows

Shadows should be subtle and diffused.

Avoid strong elevation.

Soft

box-shadow:
0 1px 2px rgba(0,0,0,0.04),
0 6px 24px rgba(0,0,0,0.03);

Floating

box-shadow:
0 12px 40px rgba(0,0,0,0.06);

Grid

Layout

  • 12-column grid
  • Max width: 1280px
  • Horizontal padding: 32px
  • Large whitespace between sections

Content Widths

Type Width
reading 720px
dashboard 1280px
modal 480px
form 560px

Spacing

Base unit:

4px

Spacing scale:

Token Value
1 4px
2 8px
3 12px
4 16px
5 20px
6 24px
8 32px
10 40px
12 48px
16 64px

Use generous vertical rhythm.

Sections should breathe.


Components

Buttons

Primary

  • Dark background
  • White text
  • Pill radius
  • Minimal shadow
background: #1D1715;
color: white;
border-radius: 999px;
height: 40px;
padding: 0 16px;

Secondary

background: #ECE8E5;
color: #1D1715;

Ghost

Transparent background with subtle hover fill.


Cards

Cards are soft containers with quiet separation.

background: rgba(255,255,255,0.7);
border: 1px solid rgba(0,0,0,0.04);
border-radius: 16px;

Avoid heavy borders.


Inputs

Inputs should feel invisible until focused.

background: #F7F5F4;
border: 1px solid transparent;

Focus:

border-color: #8B7E77;
box-shadow: 0 0 0 3px rgba(139,126,119,0.12);

Charts

Charts should use muted earthy tones.

Preferred palette:

  • taupe
  • sage
  • slate

Avoid:

  • neon colors
  • bright blue dashboards
  • rainbow charts

Motion

Motion should be restrained and smooth.

Preferred easing:

cubic-bezier(0.22, 1, 0.36, 1)

Preferred duration:

Type Duration
hover 150ms
panel 250ms
modal 350ms

Layout Skeleton

Application layout:

  • Left sidebar
  • Large content canvas
  • Floating top toolbar
  • Soft dashboard cards
  • Spacious internal padding

The UI should always feel:

  • breathable
  • editorial
  • premium
  • calm

Never dense or overly enterprise-looking.


Design Keywords

Use these words when generating UI:

  • editorial
  • taupe
  • soft neutral
  • premium minimal
  • typography-first
  • architectural spacing
  • calm dashboard
  • quiet luxury
  • modern serif
  • subtle shadows
  • muted grayscale
  • sophisticated SaaS

AI Agent Instructions

When generating UI:

  1. Prioritize whitespace over density
  2. Typography should create hierarchy
  3. Use muted neutral palettes
  4. Prefer soft cards over hard sections
  5. Avoid excessive color usage
  6. Keep interactions subtle
  7. Use serif fonts sparingly for emphasis
  8. Maintain premium visual restraint
  9. Design should feel timeless rather than trendy
  10. Every screen should feel breathable