产品设计系统
::: html
品牌色与文字色
整个系统只保留一个强调色——珊瑚陶土色，其余全部依靠明暗层次的文字色阶来建立秩序。
底色与表面层级
画布必须是带暖调的米白色，而不是纯白或冷灰——这是与其它 AI 产品拉开辨识度的关键。
深色对比板块
深色只出现在页脚与少数收尾 CTA、以及产品截图（代码编辑器 / 聊天界面）模块中，从不作为页面主基调。
辅助色与状态色
青绿与琥珀作为极少量的点缀色（多见于代码高亮），成功/警告/错误则是常规语义色，同样只做点缀，不作为大面积色块。
::: html
字体角色与字号
展示字体是原版的 Copernicus（衬线，此处用 Cormorant Garamond 替代），只用常规字重、不加粗，并且在大号字上必须带负字距，否则会失去"文学感"。正文与界面统一使用无衬线的 StyreneB（此处用 Public Sans 替代），标签常用等宽字体做点缀。
字体替代说明：Copernicus 与 StyreneB 是 Anthropic 的授权字体，未公开提供 Web Font。第三方分析建议的替代顺序为 —— 衬线：Tiempos Headline / Cormorant Garamond / EB Garamond；无衬线：Inter / Söhne / Public Sans。
::: html
输入框
米白底色配细边框，聚焦态切换为珊瑚色描边并附加淡色光晕，不使用系统默认蓝色焦点框。
功能卡片 feature-card
比画布更深一级的米色（#efe9de），大内边距（32px）让文字更透气，顶部小图标 + 标题 + 描述的三段式结构。
长上下文
一次性处理更长的文档与对话历史。
工具调用
连接外部工具，完成多步骤任务。
安全对齐
训练过程中重视可靠与可控。
深色产品卡片 product-mockup-card-dark
用于展示真实产品截图（代码编辑器 / 聊天界面），自带行号、语法高亮、状态栏等"内部纵深"，因此几乎不需要额外阴影。
::: html
网格、间距与页面节奏
Hero 区域采用 6:6 对称网格；主要板块之间统一使用 96px 的大间距（spacing.section），营造出杂志专栏式的呼吸感；卡片内部统一使用 32px 内边距。
12 栏网格示意
节奏规则：页面表面模式必须交替出现，不能连续两个板块使用相同底色 —— 米色 → 米色卡片 → 深色产品截图 → 米色 → 珊瑚色 CTA → 深色页脚，如此循环。
| 间距代币 | 数值 | 典型用途 |
|---|---|---|
| sp-xs | 8px | 徽标 / 标签内边距 |
| sp-sm | 16px | 组件内部小间距 |
| sp-md | 24px | 卡片间距 |
| sp-lg | 32px | 卡片内边距 |
| sp-xl | 48px | 板块内左右留白 |
| sp-section | 96px | 主要板块之间的垂直间距 |
::: html
深度哲学：色块优先，阴影罕见
层次感几乎完全来自"米色 vs 深色"的表面对比，而不是投影。深色产品卡片依靠自身的界面细节（行号、滚动条、状态栏）制造纵深，不需要额外阴影。
浅色卡片
细边框 + 大圆角，零阴影。
深色卡片
靠色块对比制造层次，而非投影。
::: html
该怎么做 / 不该怎么做
- 始终把页面锚定在暖调米白画布上，纯白会显得像"随便一个 AI 工具"
- 每个展示级标题都用衬线字体，正文配无衬线字体
- 展示字号的负字距是硬性要求，去掉就会显得"离题"
- 主要板块之间保持 96px 的统一间距
- 不要用冷灰或纯白做画布底色
- 不要给衬线展示字体加粗（700 字重会显得夸张，系统统一停在 400）
- 不要用冷蓝或高饱和青色作为品牌强调色
- 不要让珊瑚色到处出现——它只用于个别元素的点缀，只有整块的珊瑚色 CTA 卡片才允许大面积铺色
- 不要用 Inter 做展示级标题字体，衬线字符是品牌声音的核心
- 不要让相邻两个板块使用相同的表面模式
- 不要叠加系统未定义的 hover 效果——按钮按下只会变暗，没有其它动效
::: html
断点行为
| 组件 | 断点行为 |
|---|---|
| 顶部导航 | <768px 收起为汉堡菜单，展开为全屏米色抽屉 |
| Hero 区块 | 6:6 网格收起为单列：先显示 h1 + 副标题 + 按钮，插画/产品截图卡片放在下方；标题字号从 64px 降到 32px |
| 功能卡片网格 | 缩减列数而不是缩小卡片本身 |
| 定价卡片 | 4 栏 → 2 栏 → 1 栏；被选中档位的深色背景在所有断点下都保持醒目 |
| 代码窗口卡片 | 代码保持原字号，横向滚动而不是换行，确保可读性 |
| 连接器卡片 | 整张卡片都可点击，有效点击区域远大于 44px |
| 圆形图标按钮 | 固定 36×36px，略小于 WCAG 建议的 44px，但视觉上居中对齐 |
| 页脚 | 4 栏收起为 1 栏 |
::: html
这份分析没有覆盖什么
<p class="disclaimer">全文声明：本页内容整合自 VoltAgent/awesome-design-md 仓库中关于 Claude 的 DESIGN.md 分析及相关社区资料，属于第三方基于公开可观察界面模式做出的独立整理，不隶属于、不代表、也未获得 Anthropic 官方认可，其中的具体数值可能与真实产品存在出入，仅供学习与风格参考使用。</p>
</div>
</section>