杂志编辑风 × 电影海报质感 长页构建
用途
把一个「单一主体」（一个人、一个品牌、一部作品、一个团队）的素材，组织成单文件 HTML 长页。核心体验公式：
> 开屏用电影片头建立仪式感 → 正文用杂志编辑排版承载信息 → 全站用墨迹与红线串联情绪
页面产出必须是可双击直接打开的单文件 HTML（内联 CSS/JS），不依赖构建工具与外部库。
何时使用
- 用户给出一个人物/品牌/作品的素材（文字、图片、介绍），要求做成网页展示
- 用户要求"杂志风""电影感""海报质感""编辑排版""高级感""有仪式感的落地页"
- 用户给出一个已存在的同风格 HTML，要求仿写、改版、换主题
- 需要把长文案（数千字 + 时间线 + 数据 + 图集）组织成有节奏的滚动叙事
不适用：需要后端交互的产品/后台系统、电商详情页、需要 SEO 的多页站点。
设计 DNA（五根支柱）
生成时必须同时满足这五条，缺一条就会"不像"：
- 纸墨双底色：暖米白纸
#EDE6DA与 墨黑#141210交替铺陈。信息型区块用纸色，情绪型/数据型区块用墨色。绝不用纯白#FFF或纯黑#000。 - 三字体分工：衬线（宋体系）承担所有大字标题与引言；等宽（mono）承担所有编号、年份、英文小标签并加大字距；无衬线承担正文。每一段文字都必须属于三者之一，不存在"默认字体"的内容。
- 单一强调色：全站强调色只有一个红
#C8322B，金色#B08A3E仅用于荣誉/成就语境。红是稀缺资源——一屏之内红色元素不超过 3 处，否则失去克制感。 - 全流体排版：所有字号、间距用
clamp(最小值, vw值, 最大值)，不写媒体查询调字号。断点只用来改变布局列数，不用来改尺度。 - 动效三段论：入场用
cubic-bezier(.16,1,.3,1)缓出的上浮/揭幕；悬停用 0.35–0.6s 的方向性位移；氛围用 4–22s 的无限循环呼吸。动效永远服务于"揭示"而非"装饰"。
构建流程
第 1 步：定叙事骨架
从素材中提取，按以下 9 幕组织（没有素材的幕直接删除，不要硬凑）：
| 幕 | 名称 | 承载内容 | 底色 |
|---|---|---|---|
| 0 | 开屏序章 | 3–5 个"决定性瞬间"逐幕揭幕，末幕落款 | 墨 |
| 1 | 主视觉 Hero | 名字（逐字上浮）+ 一句话 + 3 个关键数字 | 墨 |
| 2 | 01 档案 | 长文传记 + 首字下沉 + 证件式字段表 | 纸 |
| 3 | 02 数字 | 4 个核心数据（滚动计数） | 墨 |
| 4 | 03 时间轴 | 年份 + 标题 + 一段话 + 英文标签 | 深纸 |
| 5 | 04 作品 | 发丝线分隔的列表行（年份/标题/类型） | 纸 |
| 6 | 05 画廊 | 12 栏网格的不规则图墙 | 墨 |
| 7 | 06 荣誉 | 2px 间隙的方块矩阵 | 深墨 |
| 8 | 07 语录 | 全屏居中打字机 + 巨型水印字 | 纸 |
| 9 | 页脚 | 巨型名字 + 链接 + 版权 | 墨 |
区块编号是这套风格的签名：每个 section 标题上方必须有 <span class="sec-num">01 / PROFILE</span> 形式的中英编号，中文大标题下必须挂一行等宽英文小字。
第 2 步：建立 token 层
直接复制以下 :root，只允许改颜色值，不允许改变量名结构：
:root{
--ink:#141210;--ink-soft:#241f1b;
--paper:#EDE6DA;--paper-deep:#E0D6C6;
--red:#C8322B;--red-glow:#E14B3F;--gold:#B08A3E;
--muted:#8A8073;--line:rgba(20,18,16,.14);
--serif:"Songti SC","STSong","Noto Serif SC",Georgia,"SimSun",serif;
--sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",-apple-system,sans-serif;
--mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
}
完整的字号阶梯、间距节奏、各组件网格参数见 references/design-system.md。
第 3 步：搭骨架
以 assets/template/index.html 为起点。这是可直接运行的完整模板，包含全站 token、9 幕结构、全部动效脚本与占位内容。
cp assets/template/index.html ./<输出文件名>.html
替换模板内的 {{双花括号}} 占位符与文案，删除素材缺失的区块。不要从零手写——模板里的时序参数、缓动曲线、观察器配置是经过调校的，重写极易走形。
第 4 步：填内容
- 长文案 每段不超过 5 行，段落之间必须有视觉断点（引用、数据、分隔线）
- 数字必须有单位，单位用等宽小字区别于数字本体：
200<span>亿 元 +</span> - 时间轴年份用等宽 + 大字号，标题用衬线，描述用无衬线小字
- 图片统一加滤镜降低饱和度：
filter:grayscale(.2~.42) contrast(1.06~1.16) - 图片必须配
alt，装饰性图片用alt=""
第 5 步：校验动效
按 references/motion-system.md 的清单逐条核对，特别是：
- 开屏序章的总时长（CSS 动画）与 JS 兜底
setTimeout必须一致 - 每个
@keyframes必须在某处被真正引用 - 必须有
prefers-reduced-motion降级 - 滚动入场用
IntersectionObserver+unobserve，不要在 scroll 回调里做重计算
第 6 步：产出与展示
生成后向用户展示文件，并提示"开屏序章需等动画播完，可点右上角跳过"。
关键参数速查
入场缓出 cubic-bezier(.16,1,.3,1) ← 90% 的入场动效用它
幕布闭合 cubic-bezier(.76,0,.24,1)
线条生长 cubic-bezier(.83,0,.17,1)
入场时长 0.9s ~ 1.2s
悬停时长 0.35s ~ 0.6s
氛围循环 4s ~ 22s infinite alternate
逐字间隔 0.13s（大字）/ 105ms（打字机）
区块内边距 clamp(72px,11vw,150px) clamp(22px,6vw,90px)
反面清单（出现即不合格）
- ❌ 使用纯白/纯黑背景，或用蓝色/紫色渐变（互联网产品色，破坏纸墨感）
- ❌ 给正文用衬线字体，或给标题用无衬线
- ❌ 红色大面积铺底或同时出现多个强调色
- ❌ 圆角 + 阴影卡片堆砌（这是 SaaS 风，不是杂志风）
- ❌ 用
transition: all做入场动画（性能与可控性都差） - ❌ 动效超过 1.5s 且阻塞阅读
- ❌ 用 JS 逐帧计算字号实现响应式
参考资料
references/design-system.md— 完整设计令牌、字号阶梯、9 个区块的网格与组件规格references/motion-system.md— 动效目录（12 类）、精确时序、JS 实现片段、性能注意assets/template/index.html— 可直接运行的完整模板
