本文档只负责作品集页面层的规则，不负责系统 token、本体组件职责和高层品牌策略。
它回答的问题是：
- 这个作品集页面应该是什么气质
- 页面级硬规则有哪些
- 封面、章节、大图、图注这些模式应该怎么组织
相关文档：
- 高层设计上下文：
docs/design-context.md - 设计系统与主题 token：
design-system.md
使用原则：
- 当任务主要在判断品牌气质、受众、长期方向和设计原则时，先读
docs/design-context.md - 当任务主要在判断 token、theme、组件职责和共享视觉语义时，先读
design-system.md - 当前文档只处理 page layer：页面气质落地、案例叙事结构、页面级 non-negotiables 和 Figma 实现规则
当前作品集的方向关键词：
- 精致
- 轻盈
- 克制
- 小清新
- 内容优先
- 叙事感
- 温暖留白
- 轻 editorial 气质
不要把它做成：
- 过度科技感
- 过度后台感
- 过度插画化
- 过度依赖强品牌色
下面这些规则默认不能随意打破：
- 作品集页面优先使用
portfolio主题，而不是旧的通用 preview 风格 - 基础组件可以继续复用通用设计系统，但作品集页面的视觉语义应优先服从
portfoliotoken - 新增功能模块涉及颜色、字体、图标、圆角、阴影、间距等设计语言要素时，必须优先复用现有 design system / portfolio theme 中已经定义的 token、组件和图标语义；如果现有系统没有合适语义，先说明缺口，再决定是否补充到 design system，不能在功能模块里临时硬编码一套新的视觉语言
- 标题字体只用于封面标题、章节标题和叙事型标题，不用于按钮、表单、功能型标签
- 大图展示默认优先使用“外层浅底容器 + 轻边框 + 内层圆角内容”的模式
- 图注默认弱于正文，不和正文抢层级
- 页面优先服务“阅读和案例叙事”，不是“组件展台式信息堆叠”
- 通过 Figma 读取到的展示文案，默认按设计稿原文逐字实现，不要擅自润色、改写、补充、省略或重组
适用场景：
- 案例页标题
- 章节说明
- 图注
- bullet list
- Figma 中已经定稿的展示文案
规则：
- 通过 Figma 读取到的展示文案，默认按设计稿原文逐字实现
- 不要擅自润色、改写、补充、省略或重组文案
- 不要擅自补标点，例如列表项末尾的句号、冒号、分号等；Figma 写什么，就实现什么
- 如果代码里的展示文案与 Figma 原文不一致，默认优先以 Figma 为准
- 只有在用户明确要求“帮我优化文案”或“帮我改写文案”时，才允许偏离设计稿原文
适用场景：
- 案例页开头
- 项目标题区
- 大图引导区
规则：
- 优先使用强标题和大图，不堆很多辅助元素
- 标题、简介、主视觉要形成明确节奏
- 主视觉优先大图展示，不切碎成很多同级小卡片
适用场景：
- 章节开头
- 大 section 标题和说明
规则：
- 章节标题优先使用作品集标题体系
- 标题下方可以跟一到两段说明文字
- 强调标签优先用品牌强调色的小标签，不额外加重装饰
适用场景：
- 大截图展示
- 方案对比图
- 过程稿展示
规则：
- 外层优先使用暖灰浅底和轻边框
- 内层内容要与外壳形成明显的圆角层级
- 不要让边框、阴影、背景同时都很重
适用场景：
- 图片说明
- 图注
- 对比说明
规则：
- 图注默认弱于正文
- 图注只负责帮助理解图片
- 图注尽量短，不写成另一段正文
适用场景：
- 背景说明
- 问题分析
- 设计决策
- 落地结果
规则：
- 一屏优先只讲一个重点
- 文字和图片要互相支撑
- section 之间靠留白和标题节奏区分，不靠过度装饰区分
适用场景：
- 背景卡片里放多张截图
- 参考拼图
- Before / After 对比图
- 带背景纹理的大截图卡片
- 带底部图注的图片区
规则：
- 实现前，先拆清楚这块是不是 3 层结构：
- 最外层
figure - 背景卡片本体
- 卡片外部的
figcaption
- 最外层
- 不要默认把图注放进背景卡片里。必须先去 Figma 确认：
- 图注在卡片内部
- 还是图注在卡片外部，并和卡片保持固定间距
- 不要默认所有图片都该
cover。必须先判断：- 参考拼图、收集图、总览图优先完整展示，通常更接近
contain - 局部视觉稿、局部界面稿、局部截图通常才更适合
cover
- 参考拼图、收集图、总览图优先完整展示，通常更接近
- 对多张图的卡片，不要先猜“平均分布”或“自动居中”。优先读 Figma 的真实值：
- 卡片高度
- 图片宽高
- 图片距离卡片四边的 inset
- 行距
- 列距
- 标签或分组文案的位置
- 如果 Figma 里有左侧分组标签，例如：
上线第一版上线第二版默认按“行标签”实现，不要把它错误地挂到每张图下面
- 如果 Figma 里有背景纹理图、天空图、暖色底图，默认把背景层和前景内容层拆开实现，不要把前景图直接铺成唯一层
- 如果图块带有明确语义顺序，例如：
Before / After原版 / 新版左 / 右实现后必须单独核对一次顺序，不要只看标签文字是否存在
自检清单：
- 图注是否在正确层级（卡片内 / 卡片外）
- 图注与卡片之间的间距是否和 Figma 一致
- 卡片高度是否和 Figma 一致
- 图片尺寸是否和 Figma 一致
- 图片与卡片边缘的距离是否和 Figma 一致
- 多张图之间的行距和列距是否和 Figma 一致
- 标签、说明文字、分组文案的位置是否和 Figma 一致
- 如果项目里已有 Playwright，优先做局部截图自检，不要只靠肉眼判断
适用场景：
- section 与 section 之间的纵向节奏
- 同一 section 里的多块内容
- 标题块、正文块、图片区、总结卡、反馈卡之间的间距
- Round 1 / Round 2 这种“块内紧、分组间松”的长内容区
常见问题：
- 把整段内容都套进同一个统一
gap，导致所有块之间看起来都一样，失去层级 - 只顾着改某个组件自己的
padding，却没区分：- 组件内部间距
- 组件与下一个块之间的外部间距
- 视觉上是两个分组，但实现时还是普通相邻块，所以本该更大的分组间距被压成了默认值
- Figma 已经把两个 section 合并成一个内容区，但代码里还是两个 section，导致上下留白被叠加
- 图注、总结卡、反馈卡这些“弱层级块”被错误地和主图、主标题用同一个间距规则处理
实现前检查：
- 先分清当前这段内容到底是：
- 两个独立 section
- 还是同一个 section 里的多个 cluster
- 不要先假设所有块之间都应该用同一个
gap - 先去 Figma 确认这段内容里至少有哪几层节奏：
- section 上下留白
- 同组内容之间的普通间距
- 两个内容分组之间的加强间距
- 如果某一段是“标题 + 图 + 总结卡 + 图 + 总结卡 + 总览图 + 反馈卡”这种结构，默认不要只靠父级一个
gap解决全部问题 - 如果某块只是需要比默认值多一档间距，优先加“局部断点类”或局部
margin-top，不要急着改整段全局 token
实现规则：
- 默认先建立 3 层 spacing 语义，而不是只有一个数值：
- 普通块间距
- 分组间距
- section 级留白
- 标题块到紧随内容块，通常优先使用普通块间距
- 图与图注、图与总结卡、图与反馈卡，不要自动共用同一个数值，必须按 Figma 真实关系判断
- 如果是“方案 A 一组 / 方案 B 一组 / 总览图一组”这种结构，默认要允许组与组之间插入额外间距
- 如果 spacing 错误来自 section 合并或拆分，优先修 section 结构，不要只靠硬调
margin
自检清单：
- 当前这段内容里，是否把所有块错误压成了同一个
gap - 是否存在本应
24的普通间距被做成48，或反过来 - 是否存在本应是“分组断点”的地方，仍然沿用普通间距
- 是否存在 section 合并后，上下留白叠加的问题
- 图注与图片区之间的距离是否和 Figma 一致
- 总结卡 / 反馈卡与前后图片区之间的距离是否和 Figma 一致
- 如果项目里已有 Playwright，优先量出真实值，而不是只看视觉大概像：
gap from title to figuregap from figure to summarygap between grouped figuresgap from figure to feedback
适用场景：
- 案例页标题组件替换
- 把页面里的一级 / 二级 / 三级标题迁移到共享组件
- Figma 标题实现和目录层级对齐
规则：
- 如果项目里已经有明确的共享案例标题组件，默认优先按层级直接替换：
- 一级标题 ->
CaseStudyHeadingOne - 二级标题 ->
CaseStudyHeadingTwo - 三级标题 ->
CaseStudyHeadingThree
- 一级标题 ->
- 不要在替换前，先因为“看起来像”某种样式，就给现有层级组件发明额外变体。
- 标题层级和视觉样式要分开判断：
- 先判断语义层级
- 再检查共享组件默认样式是否已经匹配 Figma
- 如果一个标题在页面正文和目录里都出现了同名文本，自检时不要直接按全文搜索结果下结论，优先基于 section id 或标题容器节点检查，避免抓到目录链接而误判。
- 如果三级标题在 Figma 里是标签型、胶囊型或带边框的小标题，默认先检查共享三级标题组件的默认实现，而不是立刻把它改成普通文本标题。
自检清单：
- 当前标题是否用了正确层级组件
- 标题样式对照的是正文节点，而不是目录里的同名文本
- 标题字号、字重、行高是否和 Figma 一致
- 如果标题是标签型，是否同时检查了：
- 边框颜色
- 背景颜色
- 圆角
- 最小高度
- 左右 padding
- 页面优先保持单主列阅读逻辑
- 小屏下优先改单列，不强保复杂横向结构
- 大图容器缩放或改单列时，不能裁掉关键信息
- 标题可以缩小，但层级关系不能消失
- section 纵向节奏可以收紧，但不能挤到失去呼吸感
- 图片必须保留有意义的替代文本，纯装饰图可留空
- 正文和图注颜色对比必须保持可读
- 按钮和链接需要明确的可点击反馈
- 不要只靠颜色表达状态差异
- 功能型 UI 先保证可读、可点、可理解，再谈风格统一
当前推进方式默认如下：
- 先让作品集页面层继续吃
portfoliotoken - 先沉淀页面模块，再决定是否改基础组件
- 每次优先做小步、可验证的调整