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。
13 KiB
13 KiB
受 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）：主要交互强调色——出现在按钮悬停、焦点状态和活跃链接上。唯一的彩色操作色。 - 环形蓝（
#4c6ee6at 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）文字。"
迭代指南
- 每次专注于一个组件
- 主要卡片始终使用 22px 圆角——"Cohere 卡片的圆润感"
- 明确指定字体——标题用 CohereText，正文用 Unica77，标签用 CohereMono
- 交互元素仅在悬停时使用交互蓝（#1863dc）
- 保持白色表面配冷灰边框——不使用暖色调
- 紫色专属全宽区块，不作卡片背景