DESIGN —— agentaily 产品(视觉 / 交互真相源)
agentaily 的产品长什么样、交互怎么定 —— 视觉 + 交互维度的真相源。和 SPEC.md(规格真相)、ARCHITECTURE.md(架构真相)三足鼎立,它是体验契约。
⚠️ 别和组件库的
design-system/DESIGN.md混淆,两者是上下游:
design-system/DESIGN.md= 组件库@agentaily/design-system自身的视觉系统真相源(palette / type / tokens / 120 组件 / 分层规则)。视觉底座在那里,本文件不重复。- 本文件(根
DESIGN.md) = agentaily 产品(主应用 / 官网 / 各 Studio)怎么消费组件库、产品自己的页面 / 信息架构 / 交互决策。
视觉 / 交互规范在哪(两份 skill + 上游)
做或改任何 UI 前,先对这三处 —— 它们是规范真相源,本文件只记产品自己的指针与决策,不抄规范原文:
| 维度 | 去哪对 | 是什么 |
|---|---|---|
| 视觉 / 品牌 | skill agentaily-design + 上游 @agentaily/design-system(在线 Storybook https://agentaily.github.io/design-system/ · 全文 design-system/DESIGN.md) | 极客风格,简约,大气,科技感;单色亮色优先(暗色可切) |
| 交互 / 行为(鉴权守卫、加载/空/错态、跳转、表单反馈…非视觉) | skill interaction-design-spec | 跨产品共享的行为约定,每条 = 约定 + 最佳实践实现要点 |
⛔ Claude Design 工作流已退役(老板 2026-06-19 定)。 不再去 claude.ai/design 设计、不再拿 handoff、不再用
design-sync三路合并,也没有.design-baseline/。做 UI = 直接基于@agentaily/design-system在代码里实现。
怎么消费设计系统(铁律)
- UI 一律消费
@agentaily/design-system,不手搓底层、不 re-vendor。 升级随上游 npm 流过来(当前^0.15.0)。 - 组件按域取用,现有域:
ai·auth·buttons·chat·code·display·feedback·inputs·layout·overlay·review·settings·utilities·voice·workflow。要哪个先翻 Storybook,别自己重画。 - 缺组件 / 缺 seam → 往上游组件库仓补齐(下游定契约、上游照做)。这步通常叫人:在组件库仓开 PR / 提需求,别在产品里临时手搓一个绕过去(会漂移)。
产品 / 页面清单(+ 状态)
| 产品 | 页面 / 界面 | 状态 | 对应代码 | 主要消费的域 |
|---|---|---|---|---|
apps/web(主 SPA chat.*) | 登录 / Google 回调 | 已上线 | src/signin.tsx · src/main.tsx | auth buttons |
| AuthGate(鉴权守卫 → 工作台) | 已上线 | src/auth-gate.tsx | feedback layout | |
| 工作台:对话 + 设置面板 | 在迭代 | src/App.tsx | chat ai settings inputs overlay voice code | |
apps/website(官网 www.*) | 落地页(多语言切换) | 已上线 | apps/website/(features/switch-locale.feature) | display layout buttons |
| studio/*(可嵌入 Studio) | 各垂类内容模型的渲染 / 驱动界面 | 随垂类增长 | studio/* | 按垂类(review workflow display…) |
域名分层(官网
www/ 应用chat/ 发布<slug>.form.agentaily.com)见DOMAINS.md,本表不重复。
设计决策记录(产品自己的)
产品级的视觉 / 交互取舍记在这里(组件库内部规则不记 —— 那是
design-system/DESIGN.md的事)。改了页面的设计 / 交互,同一次改动更新本文件,别让上表的状态漂移。
- (暂无;新增产品级设计决策时往这里追加:决策 + 为什么 + 涉及页面。)
约定 / 坑(this repo)
- 两个 DESIGN.md 别改错:产品级设计决策 → 本文件;组件库视觉系统 →
design-system/DESIGN.md(且那份被 npm 包收录,改它等于改对外规范)。 - 交互优先查 skill 再实现:鉴权跳转、加载/空/错态这类行为,
interaction-design-spec已有约定,照它做,别每个页面各发明一套。 - 推进模型:改本文件 /
design-system/**走 worktree + PR(在自己的 worktree 里改、窄暂存、开 PR 合并),见CLAUDE.md的「🌳 推进模型」。