admin
5afeb6b78a
一、④段整套同步（用户选候选 A）
- 新增 `references/stage-proto-doc/assets/产品文档模板.html`（16 KB／247 行，从备份拷、转 LF）。
- ④段 SKILL.md 换成备份 15:28 那版，并按模板口径改齐：
· 「产品文档框架」从「四块＋一附录」改成**六节** —— 页面结构／功能清单／使用场景／操作流程／
跨页与界面状态／待确认与偏离；与模板同构，⛔ 不从空白页重写结构。
· 编号从 R/S/F 改成 **P 页面／S 场景／F 功能／J 二级功能**，各自唯一、按展示顺序通排。
· 保留旧版有价值的要求：每项功能补齐 做什么／入口在哪／输入边界／异常与恢复；重点功能三处标红；
横向流程图每步写清页面／功能／操作／完成判据。
· 完成标准「七节」→「六节」，自查清单同步换掉「需求」那批条目，补模板与配图两条。
· 路径 `designs/<项目>/` → `docs/pm/<项目>/ui/`（2 处）。
· 补回本机那条「每份产出文档开头都要有一张图」的引用（指向主 skill，段内不复述）。
- 主 skill 同步：四段结构表④行、④段沿革、画图小节（④段画页面结构图 ＋ 用户路径）。
二、open-design 移到技能根（用户选候选 A）
- `git mv product-planning/references/stage-delivery/assets/open-design → open-design/`（4178 文件）。
- `.gitignore` 白名单加 `!/open-design/` —— 否则移出去就不再纳入版本控制。
- 引用改 11 处：路径形态 `assets/open-design/...` → `<技能根>/open-design/...`；
「随段携带的自带件」改称「同根技能」；「路径怎么找」那条改成自带件（段内相对路径）与
同根技能（`<技能根>/<技能名>/`）两类分开写。
- open-design 自己的 ATTRIBUTION.md 两处同步（它现在与 oil-ui-pro 同层）。
- 副作用（有益）：命名闸门读数由 2063 降到 225 —— 此前它把 open-design 里 919 个第三方 md
当成规则一起扫了；现在只扫本包 23 个 md。已确认④段的 H1 与 4a/4b/4c 子步仍在检查范围内。
三、验收
- check_naming.py --ws E:/ProgramData/AIProject/contentm_agent ＝ 通过 225 / 失败 0 / 提示 27。
- 活文件里 `assets/open-design` 残留 0；工作区 CRLF 文件 0。
270 lines
13 KiB
Markdown
270 lines
13 KiB
Markdown
# 受 Cohere 启发的设计系统
|
||
|
||
> Category: AI 与大语言模型
|
||
> 企业级 AI 平台。充满活力的渐变色调，数据密集的仪表盘美学。
|
||
|
||
## 1. 视觉主题与氛围
|
||
|
||
Cohere 的界面是一个精致的企业级指挥台——自信、简洁，让 AI 呈现出严肃基础设施的质感，而非消费级玩具。整个体验建立在明亮的白色画布之上，内容被组织进带有大圆角（22px）的卡片中，形成一种有机的、云朵般的视觉语言。这是一个面向 CTO 和企业架构师的站点：专业而不冷漠，精致而不令人望而生畏。
|
||
|
||
设计语言通过双字体系统连接两个世界：CohereText 是一款带有紧凑字距的定制展示衬线字体，赋予标题以科技宣言的庄重感；Unica77 Cohere Web 则以几何瑞士风格的精准处理所有正文和 UI 文本。这种衬线/无衬线的组合构建出"自信权威遇上工程清晰"的品牌个性，完美契合企业级 AI 平台的定位。
|
||
|
||
色彩使用极度克制——界面几乎完全是黑白两色，配以冷灰边框（`#d9d9dd`、`#e5e7eb`）。紫罗兰色仅出现在摄影风格的主视觉横幅、渐变区块，以及表示悬停和焦点状态的交互蓝（`#1863dc`）。这种色彩克制意味着，当色彩真正出现时——在产品截图、企业摄影和深紫色区域中——它将承载最大的视觉分量。
|
||
|
||
**核心特征：**
|
||
- 明亮白色画布，搭配冷灰边框
|
||
- 22px 标志性圆角——独特的"Cohere 卡片"圆润感
|
||
- 双定制字体：CohereText（展示衬线体）+ Unica77（正文无衬线体）
|
||
- 企业级色彩克制：黑、白、冷灰，最少量的紫蓝强调色
|
||
- 深紫/紫罗兰主视觉区域，提供强烈对比
|
||
- 幽灵/透明按钮，悬停时切换为蓝色
|
||
- 展示多元真实场景的企业摄影
|
||
- CohereMono 用于代码和技术标签，配合大写变换
|
||
|
||
## 2. 色彩系统与用途
|
||
|
||
### 主色
|
||
- **Cohere 黑**（`#000000`）：主要标题文字及最高强调元素。
|
||
- **近黑色**（`#212121`）：标准正文链接颜色——比纯黑稍柔和。
|
||
- **深暗色**（`#17171c`）：带蓝调的近黑色，用于导航和深色区域的文字。
|
||
|
||
### 辅助色与强调色
|
||
- **交互蓝**（`#1863dc`）：主要交互强调色——出现在按钮悬停、焦点状态和活跃链接上。唯一的彩色操作色。
|
||
- **环形蓝**（`#4c6ee6` at 50%）：键盘焦点指示器的 Tailwind ring 颜色。
|
||
- **焦点紫**（`#9b60aa`）：输入框焦点边框颜色——柔和的紫罗兰。
|
||
|
||
### 表面色与背景色
|
||
- **纯白**（`#ffffff`）：主页面背景和卡片表面。
|
||
- **雪白**（`#fafafa`）：微妙的浮起表面和浅色区块背景。
|
||
- **最浅灰**（`#f2f2f2`）：卡片边框和最柔和的边界线。
|
||
|
||
### 中性色与文字色
|
||
- **静音石板**（`#93939f`）：弱化的页脚链接和三级文字——带有轻微蓝紫调的冷灰色。
|
||
- **冷边框**（`#d9d9dd`）：标准区块和列表项边框——略带紫调的冷灰色。
|
||
- **浅边框**（`#e5e7eb`）：更浅的边框变体——Tailwind 标准 gray-200。
|
||
|
||
### 渐变系统
|
||
- **紫罗兰主视觉横幅**：深紫渐变区块，与白色画布形成强烈对比。以全宽横幅的形式容纳产品截图和核心信息。
|
||
- **深色页脚渐变**：页面从深紫/炭灰过渡至黑色页脚，形成"黄昏"效果。
|
||
|
||
## 3. 字体规范
|
||
|
||
### 字体族
|
||
- **展示字体**：`CohereText`，备用字体：`Space Grotesk, Inter, ui-sans-serif, system-ui`
|
||
- **正文 / UI**：`Unica77 Cohere Web`，备用字体：`Inter, Arial, ui-sans-serif, system-ui`
|
||
- **代码**：`CohereMono`，备用字体：`Arial, ui-sans-serif, system-ui`
|
||
- **图标**：`CohereIconDefault`（定制图标字体）
|
||
|
||
### 层级
|
||
|
||
| 用途 | 字体 | 尺寸 | 字重 | 行高 | 字距 | 备注 |
|
||
|------|------|------|--------|-------------|----------------|-------|
|
||
| 展示 / 主视觉 | CohereText | 72px (4.5rem) | 400 | 1.00（紧凑） | -1.44px | 最强冲击力，衬线权威感 |
|
||
| 次展示 | CohereText | 60px (3.75rem) | 400 | 1.00（紧凑） | -1.2px | 大区块标题 |
|
||
| 区块标题 | Unica77 | 48px (3rem) | 400 | 1.20（紧凑） | -0.48px | 功能区块标题 |
|
||
| 副标题 | Unica77 | 32px (2rem) | 400 | 1.20（紧凑） | -0.32px | 卡片标题、功能名称 |
|
||
| 功能标题 | Unica77 | 24px (1.5rem) | 400 | 1.30 | normal | 较小的区块标题 |
|
||
| 大正文 | Unica77 | 18px (1.13rem) | 400 | 1.40 | normal | 引言段落 |
|
||
| 正文 / 按钮 | Unica77 | 16px (1rem) | 400 | 1.50 | normal | 标准正文、按钮文字 |
|
||
| 中号按钮 | Unica77 | 14px (0.88rem) | 500 | 1.71（宽松） | normal | 较小按钮、强调标签 |
|
||
| 说明文字 | Unica77 | 14px (0.88rem) | 400 | 1.40 | normal | 元数据、描述 |
|
||
| 大写标签 | Unica77 / CohereMono | 14px (0.88rem) | 400 | 1.40 | 0.28px | 大写区块标签 |
|
||
| 小号文字 | Unica77 | 12px (0.75rem) | 400 | 1.40 | normal | 最小文字、页脚链接 |
|
||
| 代码微型 | CohereMono | 8px (0.5rem) | 400 | 1.40 | 0.16px | 超小大写代码标签 |
|
||
|
||
### 原则
|
||
- **衬线用于宣言，无衬线用于功能**：CohereText 在展示尺寸传递品牌声音——其衬线末端赋予标题如同已发表研究成果般的权威感。Unica77 以瑞士几何中性风格处理一切功能性内容。
|
||
- **大尺寸负字距**：CohereText 在 60–72px 时使用 -1.2px 至 -1.44px 字距，形成紧密而有冲击力的文字块。
|
||
- **单一正文字重**：几乎所有 Unica77 的使用都是 400 字重。500 字重仅在小按钮强调时出现。系统依靠尺寸和间距，而非字重对比。
|
||
- **大写代码标签**：CohereMono 使用大写配合正字距（0.16–0.28px），用于技术标签和区块标记。
|
||
|
||
## 4. 组件样式
|
||
|
||
### 按钮
|
||
|
||
**幽灵 / 透明**
|
||
- 背景：透明（`rgba(255, 255, 255, 0)`）
|
||
- 文字：Cohere 黑（`#000000`）
|
||
- 无可见边框
|
||
- 悬停：文字切换为交互蓝（`#1863dc`），透明度 0.8
|
||
- 焦点：交互蓝 2px 实线轮廓
|
||
- 主要按钮样式——未交互时不可见
|
||
|
||
**深色实心**
|
||
- 背景：深色/黑色
|
||
- 文字：纯白
|
||
- 用于浅色表面上的行动召唤
|
||
- 胶囊形或标准圆角
|
||
|
||
**描边**
|
||
- 基于边框的视觉围合
|
||
- 用于次要操作
|
||
|
||
### 卡片与容器
|
||
- 背景：纯白（`#ffffff`）
|
||
- 边框：柔和卡片用最浅灰细实线（`1px solid #f2f2f2`）；强调卡片用冷边框（`#d9d9dd`）
|
||
- 圆角：**22px**——主要卡片、图片和对话框容器的标志性 Cohere 圆角。小元素分别使用 4px、8px、16px、20px
|
||
- 阴影：极少——Cohere 依靠背景色和边框，而非阴影
|
||
- 特殊：区块容器使用 `0px 0px 22px 22px` 圆角（仅底部圆角）
|
||
- 对话框：模态/对话框使用 8px 圆角
|
||
|
||
### 输入框与表单
|
||
- 文字：深色输入框用白色，浅色用黑色
|
||
- 焦点边框：焦点紫（`#9b60aa`），`1px solid`
|
||
- 焦点阴影：红色环（`rgb(179, 0, 0) 0px 0px 0px 2px`）——可能用于错误状态指示
|
||
- 焦点轮廓：交互蓝实线 2px
|
||
|
||
### 导航
|
||
- 白色或深色背景上的简洁横向导航
|
||
- Logo：Cohere 文字标（定制 SVG）
|
||
- 链接：16px Unica77 深色文字
|
||
- 行动召唤：深色实心按钮
|
||
- 移动端：折叠为汉堡菜单
|
||
|
||
### 图片处理
|
||
- 多元场景的企业摄影
|
||
- 戏剧性区块使用带紫色调的主视觉摄影
|
||
- 产品 UI 截图呈现于深色表面
|
||
- 图片使用 22px 圆角与卡片系统保持一致
|
||
- 满幅紫色渐变区块
|
||
|
||
### 特色组件
|
||
|
||
**22px 卡片系统**
|
||
- 22px 圆角是 Cohere 的视觉标志
|
||
- 所有主要卡片、图片和容器均使用此圆角
|
||
- 创造出云朵般有机的柔和感，有别于常见的 8–12px
|
||
|
||
**企业信任栏**
|
||
- 横向排列展示合作公司 Logo
|
||
- 体现企业级采用
|
||
- 简洁的单色 Logo 处理
|
||
|
||
**紫色主视觉横幅**
|
||
- 容纳产品展示的全宽深紫区块
|
||
- 在白色页面流中制造戏剧性的视觉断点
|
||
- 产品截图悬浮于紫色环境中
|
||
|
||
**大写代码标签**
|
||
- CohereMono 大写配合字距
|
||
- 用作区块标记和分类标签
|
||
- 构建技术性的结构化信息层次
|
||
|
||
## 5. 布局原则
|
||
|
||
### 间距系统
|
||
- 基础单位：8px
|
||
- 比例：2px、6px、8px、10px、12px、16px、20px、22px、24px、28px、32px、36px、40px、56px、60px
|
||
- 按钮内边距因变体而异
|
||
- 卡片内边距：约 24–32px
|
||
- 区块垂直间距：宽裕（区块间 56–60px）
|
||
|
||
### 网格与容器
|
||
- 最大容器宽度：最宽至 2560px，配合响应式缩放
|
||
- 主视觉区：居中展示，戏剧性大字排版
|
||
- 功能区块：多列卡片网格
|
||
- 企业区块：全宽紫色横幅
|
||
- 检测到 26 个断点——极其精细的响应式系统
|
||
|
||
### 留白哲学
|
||
- **企业级清晰度**：每个区块呈现一个清晰的主张，区块之间留有充足呼吸空间。
|
||
- **摄影作为主角**：大幅摄影区块提供视觉趣味，无需额外装饰性设计元素。
|
||
- **卡片分组**：相关内容被归入 22px 圆角卡片，形成自然的信息聚组。
|
||
|
||
### 圆角比例
|
||
- 锐利（4px）：导航元素、小标签、分页
|
||
- 舒适（8px）：对话框、次级容器、小卡片
|
||
- 宽裕（16px）：特色容器、中等卡片
|
||
- 大号（20px）：大型功能卡片
|
||
- 标志性（22px）：主要卡片、主视觉图片、主容器——这才是 Cohere 的圆角
|
||
- 胶囊（9999px）：按钮、标签、状态指示器
|
||
|
||
## 6. 层次与高度
|
||
|
||
| 层级 | 处理方式 | 用途 |
|
||
|-------|-----------|-----|
|
||
| 平面（0 级） | 无阴影，无边框 | 页面背景、文字块 |
|
||
| 描边（1 级） | `1px solid #f2f2f2` 或 `#d9d9dd` | 标准卡片、列表分隔线 |
|
||
| 紫色横幅（2 级） | 全宽深紫色背景 | 主视觉区块、功能展示 |
|
||
|
||
**阴影哲学**：Cohere 几乎不使用阴影。深度感通过**背景色对比**（紫色横幅上的白色卡片、雪白表面上的白色）、**边框围合**（冷灰边框），以及戏剧性的**明暗区块交替**来传达。当元素需要提升时，它们通过"深色上的白色"来实现，而非通过投影。
|
||
|
||
## 7. 规范与禁忌
|
||
|
||
### 规范
|
||
- 所有主要卡片和容器使用 22px 圆角——这是视觉标志
|
||
- 展示标题（72px、60px）使用 CohereText，配合负字距
|
||
- 所有正文和 UI 文字使用 400 字重的 Unica77
|
||
- 保持黑白调色板，配以冷灰边框
|
||
- 交互蓝（#1863dc）仅用于悬停/焦点交互状态
|
||
- 深紫色区块用于戏剧性视觉断点和产品展示
|
||
- 区块标签上的 CohereMono 使用大写配合字距
|
||
- 保持呈现多元场景的企业级摄影风格
|
||
|
||
### 禁忌
|
||
- 不要在主要卡片上使用 22px 以外的圆角——标志性圆角至关重要
|
||
- 不要引入暖色——调色板严格为冷色调
|
||
- 不要使用重阴影——深度感来自色彩对比和边框
|
||
- 不要在正文使用粗体（700+）字重——范围限于 400–500
|
||
- 不要跳过衬线/无衬线的层级规则——标题用 CohereText，正文用 Unica77
|
||
- 不要将紫色用作卡片表面色——紫色专属于全宽区块
|
||
- 不要将区块间距压缩至 40px 以下——企业布局需要呼吸空间
|
||
- 不要给按钮添加默认装饰——幽灵/透明是基础状态
|
||
|
||
## 8. 响应式行为
|
||
|
||
### 断点
|
||
| 名称 | 宽度 | 主要变化 |
|
||
|------|-------|-------------|
|
||
| 小屏手机 | <425px | 紧凑布局，最小间距 |
|
||
| 手机 | 425–640px | 单列，堆叠卡片 |
|
||
| 大屏手机 | 640–768px | 小幅间距调整 |
|
||
| 平板 | 768–1024px | 开始使用双列网格 |
|
||
| 桌面 | 1024–1440px | 完整多列布局 |
|
||
| 大屏桌面 | 1440–2560px | 最大容器宽度 |
|
||
|
||
*检测到 26 个断点——是数据集中响应式细腻程度最高的站点之一。*
|
||
|
||
### 触控目标
|
||
- 按钮尺寸充分满足触控交互需求
|
||
- 导航链接间距舒适
|
||
- 卡片表面作为触控目标
|
||
|
||
### 折叠策略
|
||
- **导航**：完整导航折叠为汉堡菜单
|
||
- **功能网格**：多列 → 双列 → 单列
|
||
- **主视觉文字**：72px → 48px → 32px 渐进缩放
|
||
- **紫色区块**：保持全宽，内容堆叠
|
||
- **卡片网格**：3 列 → 2 列 → 1 列
|
||
|
||
### 图片行为
|
||
- 摄影图片在 22px 圆角容器内等比缩放
|
||
- 产品截图保持宽高比
|
||
- 紫色区块背景等比缩放
|
||
|
||
## 9. Agent 提示指南
|
||
|
||
### 快速色彩参考
|
||
- 主文字："Cohere 黑（#000000）"
|
||
- 页面背景："纯白（#ffffff）"
|
||
- 次要文字："近黑色（#212121）"
|
||
- 悬停强调："交互蓝（#1863dc）"
|
||
- 静音文字："静音石板（#93939f）"
|
||
- 卡片边框："最浅灰（#f2f2f2）"
|
||
- 区块边框："冷边框（#d9d9dd）"
|
||
|
||
### 组件提示示例
|
||
- "在纯白（#ffffff）背景上创建主视觉区块，使用 CohereText，72px，字重 400，行高 1.0，字距 -1.44px。Cohere 黑文字。副标题使用 Unica77，18px，字重 400，行高 1.4。"
|
||
- "设计一个功能卡片：22px 圆角，白色背景上 1px 实线最浅灰（#f2f2f2）边框。标题使用 Unica77，32px，字距 -0.32px。正文使用 Unica77，16px，静音石板（#93939f）。"
|
||
- "创建一个幽灵按钮：透明背景，Unica77 16px Cohere 黑文字。悬停时文字切换为交互蓝（#1863dc），透明度 0.8。焦点：2px 实线交互蓝轮廓。"
|
||
- "创建一个深紫色全宽区块，白色文字。标题使用 CohereText，60px。产品截图悬浮其中，使用 22px 圆角。"
|
||
- "使用 CohereMono 设计区块标签：14px，大写，字距 0.28px。静音石板（#93939f）文字。"
|
||
|
||
### 迭代指南
|
||
1. 每次专注于**一个**组件
|
||
2. 主要卡片始终使用 22px 圆角——"Cohere 卡片的圆润感"
|
||
3. 明确指定字体——标题用 CohereText，正文用 Unica77，标签用 CohereMono
|
||
4. 交互元素仅在悬停时使用交互蓝（#1863dc）
|
||
5. 保持白色表面配冷灰边框——不使用暖色调
|
||
6. 紫色专属全宽区块，不作卡片背景
|