Raft 设计系统是所有 Raft 产品共用的设计语言：现在是 Raft Chat，接下来是 Tasks、Calendar、Artifacts、Sites、Meeting 和 Canvas。Raft 是一个共享的工作空间，人和 agent 在同一个地方聊天、交接工作、写作、开会、交付，人们一整天都开着它。这套文档写给所有参与构建 Raft 的人和 agent。它解释 Raft 为什么这样设计、新东西该怎么设计，让每个产品保持同一种气质。这套系统包括两部分：本站的规范，以及实现这些规范的 React 组件 raft-ui。
从哪里开始
| 如果 | 读 |
|---|---|
| 我要设计一个新东西 | 设计一个新功能：要问的问题、流程和自查清单 |
| 我需要一个组件 | 先看组件总览，再按使用 raft-ui 完成配置 |
| 为什么是这样？ | 原则和为什么 Raft 长这样 |
如果你不在 Raft 团队里，它背后的想法写在原则和人和 agent 里：为人和 agent 协作而设计，做一个安静到可以整天使用的工作空间。
给 Agent 读
- /llms.txt所有页面及一句话摘要，按章节排列（英文）。
- /llms-full.txt所有页面合成一个文件，顺序相同（英文）。
- /components/button.md任何页面的 Markdown 版本：在路径后加 .md。
- /components.json所有组件的状态、其他名称、分类、导入方式和文档地址。
最新版本
- Design SystemTimeline rhythm: a conversation uses three distances between its lines, measured from text to text: 8px between the rows of one turn, the message step (16px) between turns, and the section step (24px) at a boundary: either side of a date line, from the top of the list to its first line, and from the last line to the composer's frame. It applies to MessageItem, SystemMessage, SystemMessageGroupHeader, MessageListDateDivider, MessageListNotice, ThreadPanelOriginalMessage, ThreadPanelReplySummary, ThreadPanelReplyCount, ConversationPanelFooter and ThreadPanelFooter.
- Design SystemA control and its label: a checkbox, radio or switch sits 8px before its label, centered on the label's first line, and keeps its size wherever it sits. In a settings row with a description, both ends center on the title's first line. A tap between two options lands on the nearer one. It applies to Checkbox, RadioGroupItem and ListRow; FieldItem already followed it.
- Breaking ChangesConversationPanelFooter and ThreadPanelFooter: no space of their own above the composer; the end of the list sets it.
- AddedTimeline spacing utilities:
pt-timeline-startandpb-timeline-endfor the top and end of a message list you build, andtimeline-message,timeline-section,timeline-row,timeline-turnandtimeline-lead, which the components use. All are registered with thecnhelper, so they merge with other padding and margin classes.