0 Fork 0

Files

T

admin 5afeb6b78a ④段整套同步（六节＋ P/S/F/J ＋模板）＋ open-design 移到技能根

一、④段整套同步（用户选候选 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。

2026-10-15 21:17:28 +08:00

11 KiB

Raw Blame History

灵感源自 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（图片、卡片、对话框）
阴影：微妙至中等的层次感效果
产品截图作为卡片内容

特色组件

产品标签栏

水平胶囊形标签（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。白底纯黑文字。"

迭代指南

精确使用可变字体字重停驻点：320、330、340、450、480、540、700
界面始终黑白——绝不为外壳添加颜色
虚线聚焦轮廓，不用实线
正文字母间距始终为负，等宽标签始终为正
按钮/标签用胶囊（50px），图标按钮用圆形（50%）

11 KiB Raw Blame History Unescape Escape