# Maestro Design System **Maestro（多项目任务调度平台）** 是一个本地优先的任务编排 daemon：管理多个本地 git 项目的任务树，按复杂度（Hard / Medium / Easy）分级驱动审批闸，用后台 agent（Claude Code，经 MCP + Agent SDK）在隔离 git worktree 自动执行任务——改动不自动合并，等人审。 唯一的产品界面是 **Web 调度台（看板）**：三栏布局（项目侧栏 · 闸+任务树 · 事件流），实时 WebSocket 刷新，页面内 accept/reject。 ## 设计概念：phosphor console（磷光调度台） 整个品牌是一台老式磷光终端的隐喻：碳绿近黑底、磷光绿/琥珀/信号红/青四色信号系统、全站等宽字体中英混排、扫描线+暗角氛围层、零圆角、辉光代替阴影。它看起来像机房里的调度终端，而不是 SaaS 仪表盘。 ## 来源 - 代码库：本地挂载 `maestro/`（Node/TypeScript daemon + 无框架 vanilla JS 看板） - 视觉唯一事实来源：`maestro/web/style.css`（自称 "MAESTRO 调度台 · phosphor console"） - 结构：`maestro/web/index.html`；文案与状态模型：`maestro/web/app.js`、`maestro/DESIGN.md`、`maestro/README.md` - 无 Figma、无图片资产 —— logo = 像素章鱼图案（一脑多臂，喻多项目并行调度）+ 纯文字 `MAESTRO▮` 字标（见 ICONOGRAPHY 与 `guidelines/brand-logo.card.html`，15×12 像素图，磷光绿三档 + 暗眼，canvas 或 CSS 均可复现）。 - 字体经 Google Fonts CDN 加载（IBM Plex Mono + Noto Sans SC），仓库内无字体二进制。 --- ## CONTENT FUNDAMENTALS（文案基本面） - **语言：中文为主，术语保留英文。** 界面文案是简体中文，但状态机/复杂度/角色词保留英文原样：`HARD / MED / EASY`、`plan / spec / operations`、`agent`、`worktree`、`accept/reject`。中英文混排是常态：「待 Claude Code 产出（经 MCP 写入并提交评审）」。 - **电报式短语，不写完整句。** 标签和状态是 2–4 字的压缩词：「可执行」「待审/合」「需人工」「被依赖阻塞」「分析拆解中」。按钮同样短：「+ 新建」「保存配置」「⟳ 同步 todo」。 - **间隔号 `·` 是标点主角。** 用于并置短语：「多项目任务调度台」「审批闸 · 等待裁决」「manual · 手动」「P1 · 中」。其次是箭头 `→`（流转）和 `↳`（引用/原因）。 - **称谓：直接称「你」，系统无自称。** 「等待你裁决的审批闸」「改动不自动合并、等你审」。语气是工程师对工程师：克制、精确、略带机房黑话（「闸」「裁决」「返工」「兜底」）。 - **无 emoji。** 表意一律用 Unicode 几何字符与符号（▍ ▮ ⚠ ▸ ◉ ⟳ ⚙ ⌕ ✕ ↳ ·），见 ICONOGRAPHY。 - **大写字母标签 + 宽字距** 用于结构性小标题：`DIFF 摘要`、`DEPS · 依赖`、区块头全大写 + `.22em` 字距。 - **必填用红色 `*`；占位文案给真实示例**：`/path/to/repo`、`npm test（可空）`、「要做什么」。 - **空态文案直白且短**：「暂无产出与历史」「连接中…」。 ## VISUAL FOUNDATIONS（视觉基本面） - **主题**：默认深色（磷光终端）；`` 激活浅色主题——纸白绿灰底，信号色加深保对比，`-dim` 变淡色底，辉光减弱。全部组件走 CSS 变量，自动适配两套主题。 - **多语言**：界面 chrome 文案双语（zh / en，见 `ui_kits/console/i18n.js`）；状态/闸/事件标签经组件的 `label`/`kindLabel` prop 注入；任务标题等用户内容不翻译。 - **颜色**：碳绿近黑的底（`--bg #0a0d0b`，带极轻微绿味），三层抬升（bg-deep → panel → panel-2），全部偏绿灰。五个磷光信号色各司其职：**绿**=可执行/成功/品牌，**紫**=审批闸/等待裁决（v1.1 起由琥珀改紫，与 MED 复杂度区分），**琥珀**=警示/MED/待依赖，**红**=失败/驳回/Hard，**青**=执行中/agent/链接。每个信号色配一个 `-dim` 暗位，专门做边框和半透明底（`rgba(信号色, .05–.08)` 做 chip 底）。文字三档：ink / muted / faint。 - **字体**：全站只有一个字族 `--mono`（IBM Plex Mono + Noto Sans SC 回退）。没有「标题字体」——层级靠字号（10–20px，正文 13px）、字重（400/500/600/700）和字距（.04em–.35em）。全大写 + 宽字距是最强的层级信号。 - **圆角**：小而克制（v1.1 起由零圆角调整）：徽章/chip 3px、按钮/输入框 4px、面板/卡片 6px、模态/浮层 10px（`--radius-xs/sm/md/lg`）；正圆仍只允许出现在状态点（6–7px 圆点）。 - **边框**：1px 细线是主要分界手段（`--line` / `--line-soft` 两档）；虚线（dashed）表示空态、占位、弱分组；左侧 2px 实色边表示「当前/激活/文档块」。 - **阴影与辉光**：环境光是**辉光（glow）**而非阴影——品牌字、状态点、执行中 chip 都带 `0 0 8–18px` 的同色辉光；hover 按钮发光。黑色外阴影只用于浮层（弹层/模态/Toast）。无内阴影。 - **背景质感**：全屏界面盖一层 `body::before` 氛围层——1px 重复扫描线 + 椭圆暗角，opacity .5。无图片、无渐变背景（唯一的「渐变」是 sticky 区块头下缘的淡出，和审批区的磷光紫斜纹警示条 `repeating-linear-gradient(-45deg)`）。 - **动效**：快而硬。过渡 .1–.12s；入场统一 `rise`（5px 上移淡入，.18–.25s）；关键注意力靠 **blink**（光标方块，steps(1)）和 **pulse**（透明度脉冲，.8–2.2s，用于等待审批/执行中）。无弹跳、无缓动炫技。 - **hover**：背景抬一层（panel → panel-2）或边框提亮（line → muted）；强按钮 hover 提亮自身色 + 辉光。**press 无单独状态**。disabled 是 opacity .4。 - **focus**：输入框边框变 `--green-dim` + 1px 同色 ring（box-shadow），不用浏览器默认 outline。 - **卡片**：`--panel` 底 + 1px `--line` 边，6px 圆角，无阴影；语义卡片用信号色 dim 边（闸卡片紫边、agent 面板青边）。卡片内部用 `--line-soft` 分隔头/体/脚。 - **布局**：固定三栏 grid（232px / 1fr / 320px），整页 100vh、栏内各自滚动；1100px 以下退化为单栏纵排。区块头 sticky。 - **透明与模糊**：模态遮罩 `rgba(4,6,5,.78) + blur(2px)`；信号色 chip 底用 7–8% 透明信号色。除此之外不用玻璃拟态。 - **选区**：`::selection` 绿底白字。 ## ICONOGRAPHY（图标系统） - **统一 SVG 图标集**（`assets/icons/`，15 个，v1.1 起取代原纯 Unicode 方案）：24×24 网格、2px 圆头描边、**双色调**——基础笔画 `currentColor`（默认 --muted），语义元素 `stroke="var(--icon-accent, 信号色回退)"`： - gate 紫 · ready/task/add/sync/config/search/git 绿 · running/event/flow 青 · deps/reason 琥珀 · project/close 保持单色 - 内联使用时可按语境覆盖 `--icon-accent`；`` 引用时用内置回退色（暗色主题值） - 不要引入 lucide/heroicons 等第三方图标库；新图标按同一网格/描边/双色规则绘制 - **品牌字符保留**（非图标，锁 `--mono` 等宽字体渲染）： - `▍` 区块标题前的色块标记（绿/紫/琥珀/青上色） · `▮` logo 末尾的闪烁光标（blink 动画） - `→` 状态流转 · `↳` 驳回原因/引用 · `·` 间隔号 · `—` 空值 · `«`/`»` 面板折叠 - 状态点/agent 点：纯 CSS 圆点（非字符） - **emoji 禁用。** ## 字体替代说明 仓库不含字体文件；原产品本身就从 Google Fonts CDN 加载 **IBM Plex Mono** 与 **Noto Sans SC**（`tokens/fonts.css` 沿用同一来源，非替代品，无失真）。如需离线分发，请提供 woff2 文件。 --- ## INDEX（目录清单） - `styles.css` — 全局入口，仅 @import - `tokens/` — `colors.css`（基底+信号色+语义别名）· `typography.css`（字族/字号/字距）· `effects.css`（间距/边框/阴影/动效）· `fonts.css`（Google Fonts） - `guidelines/` — 设计系统标签页的基础规范卡片（颜色/类型/间距/品牌等） - `components/core/` — Button · StatusChip · ComplexityBadge · CountBadge · QuotaMeter · SectionHead - `components/forms/` — Input · Select · Textarea · ComplexitySeg - `components/surfaces/` — Panel · GateCard · Toast · EventItem · Timeline - `ui_kits/console/` — Web 调度台整屏交互复刻（index.html 可点击，侧栏/事件流可折叠；含已归档区分页与归档详情模态） - `ui_kits/console_mobile/` — 移动版调度台（390px 单栏 + 底部 Tab：任务/审批/事件/项目） - `assets/icons/` — 双色调 SVG 图标集（24×24 · 2px 圆头描边 · currentColor + --icon-accent） - `SKILL.md` — Agent Skill 入口