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。
224 lines
11 KiB
Markdown
224 lines
11 KiB
Markdown
# 灵感源自 Figma 的设计系统
|
||
|
||
> Category: 设计与创意
|
||
> 协作设计工具。色彩鲜活多元，活泼而不失专业。
|
||
|
||
## 1. 视觉主题与氛围
|
||
|
||
Figma 的界面是那个设计了自身的设计工具——一堂排版精妙的大师课，自定义可变字体（figmaSans）在极细（字重 320）与粗体（字重 700）之间无缝切换，并在大多数字体系统从不涉足的中间值（330、340、450、480、540）处设有停驻点。这种细粒度的字重控制为每个文字元素赋予了精确校准的视觉分量，通过微小差异构建层级，而非"常规与粗体"这种粗放手段。
|
||
|
||
页面呈现出一种迷人的二元性：界面外壳严格遵循黑白配色（字面上仅能检测到 `#000000` 和 `#ffffff` 两种颜色），而英雄区和产品展示区则爆发出鲜活的多色渐变——电光绿、亮黄、深紫、热粉。这种分隔意味着设计系统本身是无色的，将产品的多彩输出作为核心内容。Figma 的营销页面本质上是一面陈列彩色艺术作品的白色画廊墙。
|
||
|
||
让 Figma 与众不同的，除了可变字体之外，还有它的圆形与胶囊几何造型。按钮使用 50px 圆角（胶囊）或 50%（图标按钮的完美圆形），营造出一种有机的、工具调色板式的感觉。虚线轮廓聚焦指示器（`dashed 2px`）是一种刻意为之的设计选择，与 Figma 编辑器中的选择手柄相呼应——网站的 UI 语言引用了产品的 UI 语言。
|
||
|
||
**核心特征：**
|
||
- 自定义可变字体（figmaSans），具有非寻常的字重停驻点：320、330、340、450、480、540、700
|
||
- 严格黑白的界面外壳——颜色仅存在于产品内容中
|
||
- figmaMono 用于大写技术标签，配以宽字母间距
|
||
- 胶囊形（50px）与圆形（50%）按钮几何造型
|
||
- 虚线聚焦轮廓，呼应 Figma 编辑器的选择手柄
|
||
- 鲜活的多色英雄渐变（绿、黄、紫、粉）
|
||
- OpenType `"kern"` 特性全局启用
|
||
- 全局负字母间距——即便正文文本也使用 -0.14px 至 -0.26px
|
||
|
||
## 2. 色彩方案与用途
|
||
|
||
### 主色
|
||
- **纯黑** (`#000000`)：所有文字、所有实色按钮、所有边框。界面唯一的"颜色"。
|
||
- **纯白** (`#ffffff`)：所有背景、白色按钮、深色表面上的文字。二元体系的另一半。
|
||
|
||
*注：Figma 营销站点的界面层仅使用这两种颜色。所有鲜亮色彩仅出现在产品截图、英雄渐变和嵌入内容中。*
|
||
|
||
### 表面与背景
|
||
- **纯白** (`#ffffff`)：主要页面背景和卡片表面。
|
||
- **玻璃黑** (`rgba(0, 0, 0, 0.08)`)：用于次要圆形按钮和玻璃效果的微妙深色叠加。
|
||
- **玻璃白** (`rgba(255, 255, 255, 0.16)`)：深色/彩色表面上按钮的磨砂玻璃叠加。
|
||
|
||
### 渐变系统
|
||
- **英雄渐变**：由电光绿、亮黄、深紫和热粉构成的鲜活多停驻点渐变。这个渐变是英雄区的视觉标志——它代表着工具的无限创意可能。
|
||
- **产品区域渐变**：各产品区域（Design、Dev Mode、Prototyping）在其展示中可能使用独特的色彩主题。
|
||
|
||
## 3. 排版规则
|
||
|
||
### 字体族
|
||
- **主字体**：`figmaSans`，备选字体：`figmaSans Fallback, SF Pro Display, system-ui, helvetica`
|
||
- **等宽体 / 标签**：`figmaMono`，备选字体：`figmaMono Fallback, SF Mono, menlo`
|
||
|
||
### 层级
|
||
|
||
| 角色 | 字体 | 尺寸 | 字重 | 行高 | 字母间距 | 备注 |
|
||
|------|------|------|--------|-------------|----------------|-------|
|
||
| 展示 / 英雄 | figmaSans | 86px (5.38rem) | 400 | 1.00（紧凑） | -1.72px | 最大冲击力，极端字距 |
|
||
| 区块标题 | figmaSans | 64px (4rem) | 400 | 1.10（紧凑） | -0.96px | 功能区块标题 |
|
||
| 副标题 | figmaSans | 26px (1.63rem) | 540 | 1.35 | -0.26px | 强调区块文字 |
|
||
| 轻量副标题 | figmaSans | 26px (1.63rem) | 340 | 1.35 | -0.26px | 轻字重区块文字 |
|
||
| 功能标题 | figmaSans | 24px (1.5rem) | 700 | 1.45 | normal | 粗体卡片标题 |
|
||
| 大号正文 | figmaSans | 20px (1.25rem) | 330–450 | 1.30–1.40 | -0.1px 至 -0.14px | 描述、引言 |
|
||
| 正文 / 按钮 | figmaSans | 16px (1rem) | 330–400 | 1.40–1.45 | -0.14px 至 normal | 标准正文、导航、按钮 |
|
||
| 轻量正文 | figmaSans | 18px (1.13rem) | 320 | 1.45 | -0.26px 至 normal | 轻字重正文 |
|
||
| 等宽标签 | figmaMono | 18px (1.13rem) | 400 | 1.30（紧凑） | 0.54px | 大写区块标签 |
|
||
| 等宽小号 | figmaMono | 12px (0.75rem) | 400 | 1.00（紧凑） | 0.6px | 大写微型标签 |
|
||
|
||
### 原则
|
||
- **可变字体精准性**：figmaSans 使用大多数系统从不触及的字重——320、330、340、450、480、540。这通过微妙的字重差异而非大幅跳跃来构建层级。330 与 340 之间的差异几乎无法察觉，却在结构上意义重大。
|
||
- **轻体为基础**：大多数正文使用 320–340（比典型的 400"常规"更轻），营造出空灵、通透的阅读体验，与设计工具的美学相契合。
|
||
- **处处字距微调**：每个文字元素都启用 OpenType `"kern"` 特性——字距微调不是可选项，而是结构性的。
|
||
- **默认负字距**：即便正文也使用 -0.1px 至 -0.26px 的字母间距，营造出全局紧凑的文字效果。展示文字进一步压缩至 -0.96px 和 -1.72px。
|
||
- **等宽字体用于结构**：figmaMono 以大写形式配合正字母间距（0.54px–0.6px），创造出技术指示牌标签。
|
||
|
||
## 4. 组件样式
|
||
|
||
### 按钮
|
||
|
||
**黑色实色（胶囊）**
|
||
- 背景：纯黑（`#000000`）
|
||
- 文字：纯白（`#ffffff`）
|
||
- 圆角：圆形（50%），用于图标按钮
|
||
- 聚焦：虚线 2px 轮廓
|
||
- 最强调
|
||
|
||
**白色胶囊**
|
||
- 背景：纯白（`#ffffff`）
|
||
- 文字：纯黑（`#000000`）
|
||
- 内边距：8px 18px 10px（不对称垂直）
|
||
- 圆角：胶囊（50px）
|
||
- 聚焦：虚线 2px 轮廓
|
||
- 深色/彩色表面上的标准 CTA
|
||
|
||
**玻璃深色**
|
||
- 背景：`rgba(0, 0, 0, 0.08)`（微妙深色叠加）
|
||
- 文字：纯黑
|
||
- 圆角：圆形（50%）
|
||
- 聚焦：虚线 2px 轮廓
|
||
- 浅色表面上的次要操作
|
||
|
||
**玻璃浅色**
|
||
- 背景：`rgba(255, 255, 255, 0.16)`（磨砂玻璃）
|
||
- 文字：纯白
|
||
- 圆角：圆形（50%）
|
||
- 聚焦：虚线 2px 轮廓
|
||
- 深色/彩色表面上的次要操作
|
||
|
||
### 卡片与容器
|
||
- 背景：纯白
|
||
- 边框：无或极简
|
||
- 圆角：6px（小型容器）、8px（图片、卡片、对话框）
|
||
- 阴影：微妙至中等的层次感效果
|
||
- 产品截图作为卡片内容
|
||
|
||
### 导航
|
||
- 白色背景上的简洁水平导航
|
||
- Logo：黑色 Figma 字标
|
||
- 产品标签：胶囊形（50px）标签导航
|
||
- 链接：黑色文字，1px 下划线装饰
|
||
- CTA：黑色胶囊按钮
|
||
- 悬停：通过 CSS 变量控制文字颜色
|
||
|
||
### 特色组件
|
||
|
||
**产品标签栏**
|
||
- 水平胶囊形标签（50px 圆角）
|
||
- 每个标签代表 Figma 的一个产品区域（Design、Dev Mode、Prototyping 等）
|
||
- 激活标签高亮显示
|
||
|
||
**英雄渐变区块**
|
||
- 全宽鲜活多色渐变背景
|
||
- 带 86px 展示标题的白色文字叠加
|
||
- 产品截图悬浮在渐变中
|
||
|
||
**虚线聚焦指示器**
|
||
- 所有交互元素在聚焦时使用 `dashed 2px` 轮廓
|
||
- 引用 Figma 编辑器中的选择手柄
|
||
- 一种将网站与产品相连接的元设计选择
|
||
|
||
## 5. 布局原则
|
||
|
||
### 间距系统
|
||
- 基础单位：8px
|
||
- 刻度：1px、2px、4px、4.5px、8px、10px、12px、16px、18px、24px、32px、40px、46px、48px、50px
|
||
|
||
### 网格与容器
|
||
- 最大容器宽度：最高 1920px
|
||
- 英雄区：全宽渐变，内容居中
|
||
- 产品区：交替展示
|
||
- 页脚：深色全宽区块
|
||
- 响应式范围：559px 至 1920px
|
||
|
||
### 留白哲学
|
||
- **画廊式节奏**：充裕的间距让每个产品区块如同独立展品般自由呼吸。
|
||
- **色彩区块作为视觉喘息**：渐变英雄区和产品展示区在单色界面区块之间提供色彩上的缓冲。
|
||
|
||
### 圆角比例
|
||
- 极小（2px）：小型链接元素
|
||
- 微妙（6px）：小型容器、分隔线
|
||
- 舒适（8px）：卡片、图片、对话框
|
||
- 胶囊（50px）：标签按钮、CTA
|
||
- 圆形（50%）：图标按钮、圆形元素
|
||
|
||
## 6. 深度与层次
|
||
|
||
| 层级 | 处理方式 | 用途 |
|
||
|-------|-----------|-----|
|
||
| 平坦（层级 0） | 无阴影 | 页面背景、大多数文字 |
|
||
| 表面（层级 1） | 渐变/深色区块上的白色卡片 | 卡片、产品展示 |
|
||
| 抬升（层级 2） | 微妙阴影 | 悬浮卡片、悬停状态 |
|
||
|
||
**阴影哲学**：Figma 节制地使用阴影。主要的深度机制是**背景对比**（彩色/深色区块上的白色内容）以及产品截图本身固有的立体感。
|
||
|
||
## 7. 应为与不为
|
||
|
||
### 应为
|
||
- 使用 figmaSans 配合精准的可变字重（320–540）——细粒度字重控制即是设计本身
|
||
- 保持界面严格的黑白配色——颜色仅来自产品内容
|
||
- 对所有交互元素使用胶囊（50px）和圆形（50%）几何造型
|
||
- 应用虚线 2px 聚焦轮廓——标志性的无障碍模式
|
||
- 在所有文字上启用 `"kern"` 特性
|
||
- 将 figmaMono 以大写形式配合正字母间距用于标签
|
||
- 全局应用负字母间距（-0.1px 至 -1.72px）
|
||
|
||
### 不为
|
||
- 不要添加界面颜色——单色调色板是绝对的
|
||
- 不要使用标准字重（400、500、600、700）——使用可变字体的独特停驻点（320、330、340、450、480、540）
|
||
- 不要在按钮上使用尖锐角落——仅使用胶囊和圆形几何造型
|
||
- 不要使用实线聚焦轮廓——虚线才是标志
|
||
- 不要将正文字重提高至 450 以上——轻字重美学是核心
|
||
- 不要在正文使用正字母间距——它始终为负值
|
||
|
||
## 8. 响应式行为
|
||
|
||
### 断点
|
||
| 名称 | 宽度 | 主要变化 |
|
||
|------|-------|-------------|
|
||
| 小屏手机 | <560px | 紧凑布局，堆叠排列 |
|
||
| 平板 | 560–768px | 微调 |
|
||
| 小桌面 | 768–960px | 两列布局 |
|
||
| 桌面 | 960–1280px | 标准布局 |
|
||
| 大桌面 | 1280–1440px | 扩展 |
|
||
| 超宽屏 | 1440–1920px | 最大宽度 |
|
||
|
||
### 折叠策略
|
||
- 英雄文字：86px → 64px → 48px
|
||
- 产品标签：移动端水平滚动
|
||
- 功能区块：堆叠单列
|
||
- 页脚：多列 → 堆叠
|
||
|
||
## 9. 智能体提示指南
|
||
|
||
### 快速颜色参考
|
||
- 全部：「纯黑（#000000）」与「纯白（#ffffff）」
|
||
- 玻璃深色：「rgba(0, 0, 0, 0.08)」
|
||
- 玻璃浅色：「rgba(255, 255, 255, 0.16)」
|
||
|
||
### 示例组件提示
|
||
- "在鲜活的多色渐变（绿、黄、紫、粉）上创建一个英雄区。标题为 86px figmaSans 字重 400，行高 1.0，字母间距 -1.72px。白色文字。白色胶囊 CTA 按钮（50px 圆角，8px 18px 内边距）。"
|
||
- "设计一个带胶囊形按钮的产品标签栏（50px 圆角）。激活态：黑色背景，白色文字。非激活态：透明，黑色文字。figmaSans 20px 字重 480。"
|
||
- "构建一个区块标签：figmaMono 18px，大写，字母间距 0.54px，黑色文字。启用字距微调。"
|
||
- "创建 20px figmaSans 字重 330 的正文，行高 1.40，字母间距 -0.14px。白底纯黑文字。"
|
||
|
||
### 迭代指南
|
||
1. 精确使用可变字体字重停驻点：320、330、340、450、480、540、700
|
||
2. 界面始终黑白——绝不为外壳添加颜色
|
||
3. 虚线聚焦轮廓，不用实线
|
||
4. 正文字母间距始终为负，等宽标签始终为正
|
||
5. 按钮/标签用胶囊（50px），图标按钮用圆形（50%）
|