Showcase Page

上下游

• 前接：展示页的需求或素材。
• 读取：视觉细则读 frontend-design，动效配方读 web-anim。
• 分流：不适用的页面转 frontend-design（见「边界」）。

目标是把页面本身做成作品。评判只看一件事：像不像一位有审美、会思考、能把概念做成完整体验的创意前端作者的作品。元素数量与库数量不计分。

边界

适用：页面本身是交付物，体验即内容——自我介绍页、作品集、活动页、概念演示。

不适用：有转化任务的落地页、企业官网、应用内界面（通用视觉规则走 frontend-design）。

流程

1. 侦察

• 钉死主题、受众、页面的唯一职责。主题是"你自己"时，拿仓库、工具链、工作方式当素材。
• 查仓库与可用依赖后定技术栈。框架、Canvas / SVG / WebGL / GSAP / 音频皆可。选型只服从概念。
• 动效配方按需读 web-anim（GSAP、ScrollTrigger、p5.js）。不重复实现已有配方。

完成判据：一句话说清"访客从这个页面体验到什么"。

2. 核心概念

用不超过 200 字写出核心隐喻或创意命题。概念是决策发生器：之后每个显眼的视觉、文案、交互、动效选择都能回溯到它。

完成判据：拿概念推演三个决策（配色、装置形态、转场方式）。三者都有明确且互不相同的答案才算立住；有决策推演不出就重写概念。

3. 设计稿

编码前向用户输出五样：

• 核心概念
• 访客体验路径：首屏 → 发展 → 转折 → 收束，标出至少一段完整长时序
• 视觉与交互原则：字体、色彩、材质、留白、节奏上的取舍
• 核心体验装置设计（规格见第 4 节）
• 三件主动决定不做的事及原因

配色、字体、模板默认值等细则按 frontend-design 执行。暗色 + 霓虹 + 粒子 + 打字机是本类页面的模型默认皮肤，概念真的需要才用。

4. 核心体验装置

整站视觉与交互的中心。必备属性：

• 随操作、滚动进度或页面状态产生连续反馈，不是单次播放的动画
• 有自己的运动逻辑、状态变化与节奏——像一件乐器，不是一段视频
• 与概念直接相关，装置即隐喻
• 至少一层要用户主动探索才发现的交互或隐藏层次

实现技术自选，表现力须明显超出常规落地页。

5. 实现

时间优先级从高到低：

1. 首屏与装置
2. 章节关键转场
3. 交互反馈细节
4. 移动端与 reduced-motion 替代方案

普通信息区块从简，不平均分配。

动效当编舞做：缓动、延迟、层级、物理感都经设计。章节之间有状态延续或视觉因果，不做互不相关的区块拼接。opacity + translateY 批量 reveal 不构成动效方案。克制可以是选择，但克制本身必须是设计决定，不是省工。

6. 创意总监自审

第一版完成后逐项批评，每项给结论与证据：

1. 概念贯穿：抽查三个显眼决策，能否回溯到概念
2. 模板感：哪些选择换个主题也成立？换掉
3. 无意义动效：每个动效说得出一个目的
4. 首屏记忆点：访客能否一句话说出作品独特在哪
5. 信息易懂：内容与导航无需解释
6. 可用性：桌面与手机、键盘操作、焦点状态、prefers-reduced-motion
7. 性能：重型视觉有降级策略

7. 修改与验证

按自审结果做至少一轮实质修改：动结构、装置或节奏，不是只改文案和颜色。

收尾验证：生产构建通过、错误清零、桌面与手机实测可用。

红线

• 不用需要密钥的服务；本地能跑、能构建
• 每个显眼的设计与技术选择都有理由：不为展示技术堆技术，不为展示设计牺牲可用性
• 允许大胆，不允许半成品