黄昏小镇（第一版个人网站）

01做了什么

入口是一块写着「DUSK DRIVE-IN · 黄昏露天影院」的牌坊。按下 ACTION 或向下滚动，就沿着小镇的主街往前走，依次经过 10 个站点：

每一站都可以点开，下面是逐站录下来的样子：

1. 01论文写作 Skill科研工作流

   一台街机。点屏幕进入小游戏《黄昏书房》：你挑文献，其余交给 Agent。从书架上点开书，把有用的摘录拖到下方留下，留够四本后拉下发光的拉杆，Agent 开始处理，中途会问你一个问题；生成结束后，可以用右边的按钮一键成稿、查看知识库。

   

2. 02LearnWorld商业启蒙

   一块露天大屏，上面是项目地图。打开后是项目详情页，可以直接点击试玩。

   

3. 03XInbox个人情报库

   可以走进去的情报站。7 个发光工位对应收件台、标签矩阵、阅读台、Agent 控制台等环节，点开看每一处的设计。

   

4. 04Aside效率工具

   路边的屏幕演示 Aside 的用法：Agent 还在工作时，按快捷键唤出 Aside 记下想法；旁边的 MENU 列出全部功能。

   

5. 05业务经历直播电商

   可以走进去的直播工作室。10 个发光物件对应直播运营的各项工作，比如直播间实时中控、排期白板、分段式投流。

   

6. 06场景 Agent 评测通用能力与垂直能力

   汽车影院的银幕。放大后按评测设计、总览、任务 A、任务 B 和各个维度切换，看四款产品的得分。

   

7. 07Agent 协同工作流多 Agent 协作

   可以走进去的 Agent 工坊。传送带上的箱子依次经过 6 个环节，点工位看每一环的做法。

   

8. 08影视与研究电影研究

   剪辑灯箱。把胶片拖上银幕（也可以直接点胶片），放映每一段研究、电影节和影展经历。

   

9. 09电影院导览与简历

   展开一本介绍册：左页是作品导览，右页是简历。

   

10. 10全局地图章节总览

    街道尽头的地图板标出全部站点，点任意一站可以直接前往。

    

02设计探索

放映厅做出来之后、改成 3D 小镇之前，我用同样的前 5 章内容（LearnWorld、Aside、Research OS、Agent 工作方法、场景 Agent 评测），做了 5 个设计方向的静态稿，放在一起比较：

最后选了 E 黄昏露天影院，做成了现在的 Dusk Drive-In 小镇。

03核心设计

• 一站一个故事：每个站点有自己的布景，比如论文写作 Skill 是一台可以玩的街机，LearnWorld 是一块露天大屏，XInbox 是一间情报站。
• 可以走进去的房间：直播工作室、Agent 工坊和 XInbox 情报站可以进入，里面再配一页项目说明。
• 随时知道在哪：左侧胶片条显示当前站点，全局地图可以直接跳到任意一站；从房间或项目页返回，会回到打开它的那一站。

04迭代记录

依据两个代码仓库的提交记录，以及每次改动前留下的备份文件夹。

1. 放映厅09.28首版

   起点：第一人称放映厅

   • 用 Vite + React + TypeScript 起步，第一版是一个深色的第一人称放映厅，放了 LearnWorld、Aside、Research OS 三章
   • 同一天重做成明亮版放映厅，重排 LearnWorld 的动线，新增 04–09 章节和评测可视化

2. 3D 小镇09.29重构

   改成 3D 黄昏汽车影院小镇

   • 用 React Three Fiber 搭 3D 场景，每一章有自己的布景，招牌做了避让
   • 确定黄昏汽车影院（Dusk Drive-In）主题，部署到 Vercel

3. 互动10.08 – 10.14迭代

   优化互动方式，把项目做成可以互动的可视化内容

   • 这几天主要在改互动方式：不再只是看图读字，每个项目都做成可以点、可以玩的可视化内容
   • 每次改动前都留一份备份和一份增量改动：黄昏三渲二（10.08）、雨后质感、双向流光与银色流光（10.10）、电影院介绍册与纸张质感（10.10–10.11）、游戏机与五站互动（10.11）、直播工作室（10.12）、烘焙光照（10.14）

4. 结构重排10.13新增

   重排站点，新增可以走进去的房间

   • 站点重排为 10 站：论文 Skill、LearnWorld、XInbox、Aside、直播经历、Agent 评测、Agent 协同工作流、影视研究、电影院、地图
   • 直播工作室、Agent 工坊和 XInbox 情报站做成可以走进去的房间，各配一页项目说明；汽车影院的大屏放评测的逐维度得分和完整报告

5. 性能10.14重构

   降低显卡负载

   • 按需渲染：移动时 60 帧，阅读时 24 / 20 帧，静止时 15 帧；详情页、房间或游戏盖住小镇时，小镇停止渲染
   • 只在镜头移动时重画阴影，手机上不用实时阴影；降低像素比上限，环境光遮蔽用半分辨率

6. 手机体验10.15 – 10.17重构

   手机上的返回、拖动和首屏

   • 从房间或项目页返回时，回到打开它的那一站；手机上房间可以横向拖动，带滑动提示
   • 直播工作室改用烘焙光照：大面积用光照贴图，小物件用顶点光照
   • 首屏提速：脚本加载前先显示启动画面；手机先搭入口和前两站，其余在后台分批构建；首屏最长等待手机 6 秒、电脑 9 秒；修复 iOS Safari 工具栏被启动画面染色

05之后

黄昏小镇最后一次更新是 10 月 17 日。10 月 21 日起，我重新做了现在这个手绘风格的网站，作品集也搬到了这里。