01已部署 · 原站
最初的研究门户
把四个研究领域放到同一个深色门户中，项目、写作和实验先保留内容入口。
- 深色、铜橙与青绿的初始识别
- 四领域入口和中英双语
- 生产站作为后续改版的参照
这一轮的判断
结构已建立，视觉与内容密度仍需要打磨。
打开这个版本 ↗部署快照与页面资源已归档
YUJIE LAB / AN OPEN DESIGN PROCESS
一个网站的
演变。
13 个设计阶段22 条部署记录HUMAN × AI · 持续迭代
01 / THE EVOLUTION
每一步，都有来处。
保留已经走过的路，也保留没有走通的路。
02历史预览
让领域成为图谱
开始用空间场景承载研究领域，尝试把四个方向变成可选择的节点。
- 可探索的四领域节点
- 三维与静态回退
- 首次独立改版预览
这一轮的判断
领域可点击，但视觉对象与内容之间的关联还不够明确。
打开这个版本 ↗部署快照与页面资源已归档
03历史预览
把滚动变成六幕故事
从独立领域面板转向共享研究装置，滚动推进概览、四领域与收束。
- 一套装置贯穿六幕
- 滚动控制镜头与领域状态
- 旧锚点、键盘和静态回退
这一轮的判断
装置具备动作关系，造型与审美仍未得到认可。
打开这个版本 ↗历史预览已恢复，与保存的构建内容一致
04源码重建 · 2026-10-18
先搭建可以生长的骨架
研究、项目、写作、实验拥有独立路由和详情模板，视觉组件与内容数据统一。首页另试了一种抽象影像方案。
- 多页面与静态预渲染
- 设计变量、基础组件与组件目录
- 首页与内容阅读区分工
这一轮的判断
静态底图的扰动没有带来足够的叙事推进。
打开这个版本 ↗从保存的 d005254 源码重建，非原始部署 · d005254
05源码重建 · 2026-10-18
一枚信号，四种动作
用同一枚青绿信号解释边界、同步、连接和反馈，开始建立四个领域的动作语义。
- 程序化三维路径与薄膜
- 同一信号贯穿四种动作
- 独立保留这次本地实验
这一轮的判断
需要把各段动作连接起来，并让文字与整屏空间一起参与。
打开这个版本 ↗从基础版本与六个原始实验文件重建
06历史预览 · 视觉评审记录
让整个界面参与叙事
沿用四种动作，加入连续镜头、景别、滚转，以及标题的放大、进退与左右、中轴编排。
- 信号跨越章节的空间连接
- 相机位置、观察目标与景别连续变化
- 文字和画面共用滚动时间轴
这一轮的判断
四段动作已加入整屏镜头与文字切场；后续继续完善联系结尾。
打开这个版本 ↗保留独立部署；整屏滚动样片尚未最终签收 · 0e169d3
07历史预览 · 视觉评审记录
从研究，走向新的连接
联系栏目逐渐展开，铜橙暖光由下而上扩散，深色研究空间最终落在明亮的合作邀请中。
- 首页联系画幅展开与日出亮场
- 内页复用静态明亮邀请
- 暂不添加真实联系方式或无效按钮
这一轮的判断
让空间和光线承担联系转场，文字保持适合阅读的大小。
打开这个版本 ↗保留独立部署；日出联系转场尚未最终签收 · 187a84b
08稳定基线 · 用户确认
让信号，点亮下一种可能
信号离开反馈环，抵达文字后化为一道微光，依次点亮“下一种可能”五个字。
- 三维信号准确抵达实际字形的位置
- 逐字激活后留下青绿高亮，光点融入文字
- 正反向滚动共用同一进度，保留日出联系转场
这一轮的判断
延续现有轨迹与排版，让信号的终点与结尾表达产生直接关联。
打开这个版本 ↗用户确认的稳定版本，固定部署与源码标签 stable-2026-10-18 已保留。 · bbbf173
09实验存档 · 视觉未认可
从线条，走向实体研究台
在独立新分支中，用实体金属、玻璃镜片、程序化照明与连续镜头，重新观察边界、同步、表示与行动。
- 同一台光学装置承载四种研究动作
- 首页与研究、项目、写作、实验统一视觉与内容关系
- 首次操作启用手机三维，保留静态阅读和明亮联系结尾
这一轮的判断
单一装置的机械隐喻难以理解，换角度仍缺少整站变化。后续转向电影式多场景旅程，让作品、文字与场景共同切换。
打开这个版本 ↗保留实际网页截图和独立部署。此方向未获视觉认可，未替换稳定版或主站生产。 · ce652a4
10空间样片 · 待视觉确认
穿过字形，走近真实作品
从有厚度的品牌字形穿行到实际 BSS 前端，再展开输入、模型与展示的工程剖面，最后进入明亮研究空间。
- 真实 BSS 空态界面提前进入作品幕，区分代码结构与运行结果
- 字腔推进、一次弧线和错层纸面组成不同空间段落
- 手机首次操作启动三维，保留完整静态阅读与多页面入口
这一轮的判断
用户认为第二张分镜仍太像平面设计，因此改用可操作的连续空间样片，先验证景别、遮挡、前进方向与阅读停顿。
打开这个版本 ↗实际浏览器画面与独立固定部署；当前为镜头和空间样片，尚未替换稳定版或主站生产。 · 2433eba
11显示修复 · 待视觉确认
让画面，按正确的时机相遇
保留空间样片，修复面板深度、提前入场与纸页穿插；继续修复研究幕的空白跳变、文字清晰度和阅读列表的多余横线。
- 工程三层收拢时保持深度，正文与三维预留独立区域
- 遮幕内交换场景，研究标题持续可见，纸面与阅读标题连续交接
- 首帧同步、尺寸刷新、手机页面返回与刷新恢复
- 修订：主纸与侧页共用坐标，按旋转外沿计算净空，防止研究标题被切断
- 修订：纸面标题改为矢量字形，窄窗口仍按设备像素比采样，最高 2 倍
- 修订：三维纸面完全退出后再显示研究列表，清除横穿智能体一行的纸板边缘
这一轮的判断
沿用同一条旅程修复显示关系，视觉仍待用户确认。
打开这个版本 ↗57 项测试；连续检查研究幕正反向中间帧，核对 390/512/768/1440 视口与短屏。原 512×748、DPR 2 窗口的画布由 512×676 提高为 1024×1352。208e3b17、32d9e25b 固定部署仍保留；等待视觉确认。 · 5c2c0f3bdcfc185b3690ba3b498e02bb69c2fb04
12材料预演被否决 · 转向成熟素材
让光，照出玻璃与液体的重量
整站转向浓烈色彩，以原创厚铸玻璃、体积液体和离线／实时混合画面验证新的艺术方向，同时重做导航与内容阅读视觉。
- 钴蓝、朱红和酸黄的新视觉，重做整站导航、索引、详情与明亮邀请
- 原创 Blender 几何与灯光；横竖两套各48帧的液体形态影像
- 真实BSS空态接入作品幕，标明界面数值占位；保留完整静态阅读
这一轮的判断
2026-10-25：用户否决自制液体的质量，停止扩展该模型，转向成熟视频、可复用成品与前端技能。原预演保留，素材试映单独发布。
打开这个版本 ↗独立分支首段预览；67项测试、类型检查、构建与资源预算检查通过。390/512/768/1440px检查无横向溢出，已验证WebP回退与三维故障降级。视觉与最终多场景质量尚未签收。 2026-10-25视觉反馈为不满意；这些技术检查不构成审美通过。 · 51ab4f29982ee8099cf1c150d482ef654f9d8cd9
13整场景预览 · 待视觉确认
从成熟素材，进入完整场景
用户认可真实素材试映后，重点转向整幅玻璃空间和液体影像；四个研究方向进入同一连续空间，本轮撤去旧版 BSS 界面。
- 保留 Xylophone 原模型、材质、流体响应、模糊背景及后期管线，改编自然滚动镜头与阅读空间
- 真实 Full HD 液体原片随滚动前进与后退，重资源独立加载
- 研究窗口与真实 DOM 说明同步；保留四领域详情、静态阅读、低画质与资源失败路径
这一轮的判断
复用许可明确的完整成品管线，以原作者材质质量为基准。素材试映的认可不等于整合首页的视觉签收。
打开这个版本 ↗76项测试，类型检查、生产构建、资源预算与独立视觉评审通过。检查390/512/768/1440px与短屏；修正阅读区远景干扰、标题断句和影像控制反差。真实手机帧率与最终审美尚未签收。
02 / SIDE BY SIDE
把变化放在一起看。
拖动分隔线比较画面。键盘方向键也可调整；截图记录的是一次具体迭代，不代表最终认可。
03 / THE CONVERSATION
方向，来自具体的反馈。
节选自本项目的设计对话。以下为用户原话，后接对应的调整。
01 / 从装饰到推进
“当我向下滑动时，只是这个银河图左右来回波荡，而没有任何实质性意义”
把画面从静态底图扰动，推进到具有动作关系的信号路径。
02 / 保留有效的部分
“主要是动画，需要巧思，不要一直推翻重做”
停止不断更换造型，保留四段动作，在同一版本上调整镜头和排版。
03 / 把整屏交给叙事
“而不是一直固定在右边做动画”
从固定的左右分栏，转向中轴、左右换位、景别和文字进退。
04 / 让结尾成为邀请
“像日出一样，整个页面背景从黑色变为白色”
用暖光与整屏亮场承接联系区，表达欢迎交流、合作和新的机会。
05 / 给研究以体积
“我认为3d很重要，但是我们现在的3d太过于单薄”
在独立分支中尝试实体装置、物理材质与程序化照明，同时保留稳定版本。
06 / 从物体，走向整站体验
“我们不能只使用一个3d装置或者是一个什么线形的东西，而是要像其它获奖的作品一样”
将实体研究台保留为失败探索，重新以多环境、景别、排版和作品之间的连续转场组织首页。
07 / 克制的电影感
“过于科幻或像游戏，希望更克制的数字艺术与排版”
收起幻想地貌与科幻建筑，将身份、真实软件、研究阅读和交流邀请组织成不同构图。
08 / 让排版真正进入空间
“太像平面设计，需要更丰富的空间变化”
改用可操作的三维样片，穿过品牌字腔进入 BSS，沿短弧揭示工程剖面，再让编辑空间收敛为可读索引。
09 / 修复，而非再造
“存在很多bug，显示上的很多3d和显示都有重叠或者是提前出线的情况，我需要你修复”
对照连续滚动截图修复几何深度、切场、正文留白与位置恢复，在同一场景中完成修正。
010 / 同一帧，直接复核
“这里还是存在问题”
对照用户截图的 512×748 与 .7254 进度修复真实纸页穿插，保留同帧前后截图；不以字幕时序和构建通过代替几何视觉检查。
011 / 内容连续，才能成为旅程
“research这里会出现没有内容然后突然出现的问题，而且分辨率偏低，同时继续追问这里这个智能体下面的线不正确”
按真实窗口检查连续交接，将纸面标题改为矢量字形并恢复高清采样；列表出现前让整块三维纸面退场，保留同窗前后截图。
012 / 材质与重量，成为新的起点
“不需要克制气质，可以更加震撼和视觉冲击力，但是要有光影和重量，玻璃和液体”
撤去克制的美术限制，重新以强色彩和原创三维材料预演验证首段，再决定后续空间；不以框架通过代替视觉认可。
013 / 成品质量，先于自制模型
“我认为我们根本没有必要使用自己构建的3d模型，我们可以利用视频或者是其他的开源项目的成品，前端skills，而不是全部靠你自己的理解去做”
停下被否决的自制液体，以原作者成品和视频建立可操作试映页，逐项标明可复用范围与参考边界。
014 / 重点是完整场景
“不仅仅是我们的那三种形态的魔玻璃与文字，还有后面的液体影像和完整场景，重点是其他作品的完整场景”
把材质来源作为整个环境的基础，保留原作的几何、反射、遮蔽与模糊管线，以真实影片连接研究空间；整合版本继续单独评审。
04 / THE RECORD
可追溯的版本记录。
历史部署保留独立地址。相同代码可能有多次部署；源码重建会单独标注。
| 时间（上海） | 版本 | 分支 | 环境 |
|---|---|---|---|
| 2026/10/25 00:47:37 | b4064dfe ↗ | material-sources-v4 | 预览 |
| 2026/10/24 15:47:17 | 4df73739 ↗ | light-spaces-v3 | 预览 |
| 2026/10/24 15:41:19 | 1d780d91 ↗ | light-spaces-v3 | 预览 |
| 2026/10/19 21:53:35 | 3bd83945 ↗ | cinematic-journey | 预览 |
| 2026/10/19 21:35:14 | 208e3b17 ↗ | cinematic-journey | 预览 |
| 2026/10/19 10:44:13 | 32d9e25b ↗ | cinematic-journey | 预览 |
| 2026/10/18 22:16:01 | 7af408a9 ↗ | cinematic-journey | 预览 |
| 2026/10/18 22:12:51 | 71c2b7d5 ↗ | cinematic-journey | 预览 |
| 2026/10/18 17:01:21 | 4155f936 ↗ | experience-v2 | 预览 |
| 2026/10/18 11:44:03 | 10019f12 ↗ | redesign | 预览 |
| 2026/10/18 11:18:04 | ab5195b4 ↗ | redesign | 预览 |
| 2026/10/18 11:07:33 | de30d78f ↗ | redesign | 预览 |
| 2026/10/18 01:40:10 | ff0e9206 ↗ | redesign | 预览 |
| 2026/10/18 01:21:05 | ee059c0f ↗ | redesign | 预览 |
| 2026/10/18 01:14:29 | bb909683 ↗ | archive-signal-v1 | 预览 |
| 2026/10/18 01:13:56 | ab6162a3 ↗ | archive-foundation | 预览 |
| 2026/10/17 12:53:47 | 8d81f8fd ↗ | redesign | 预览 |
| 2026/10/13 16:42:49 | 2773d239 ↗ | redesign | 预览 |
| 2026/8/5 22:27:38 | 8f40789f ↗ | main | 生产记录 |
| 2026/8/5 22:22:40 | 16fc392a ↗ | preview | 预览 |
| 2026/8/5 21:30:16 | 922b1111 ↗ | main | 生产记录 |
| 2026/8/5 21:23:07 | 9a46ebae ↗ | preview | 预览 |
当前样片仍在评审。构建通过、部署成功与视觉认可分别记录，不互相替代。