g2025942049-glitch/dsh-rhine-skin

Rhine Lab skin for DSH

vibe coded
license
for DSH

English · 简体中文

一个 DeepSeek Harness Web GUI 的终端风格皮肤，美术来自
明日方舟官网 #world 页面自己的点云。

界面变成一台 PRTS 控制台：深黑底、青色调框体、带自检输出的开机序列、实时遥测面板，以及一块由
约 1000 个粒子绘成的莱茵生命点阵标志——它会响应鼠标，也会响应开屏语音。

🤖 这是一个纯 AI vibe coding 项目

每一行都由 AI 编程助手写成，在对话里完成，由人决定做什么、否掉看着不对的东西。没有任何一
行 JavaScript 是人手打的。这件事写在最前面，因为它会改变你应该预期什么：

- 换来了什么：一整套皮肤——1900 行客户端代码、一段开机序列、一块遥测面板、一套故障态、
一条构建流水线和一个测试台——一次坐下就全做完；无聊的部分（包装外壳、字形采样、心电图）
和有意思的部分写得一样快。
- 代价是什么：它会反复犯「看起来对」的错。指针衰减让每一个点都在动；文字避让模型把图形
掏空；一个未绑定的属性画不出任何东西、也不报任何错；测试桩拿 -dots 去匹配 /dots、自己给
自己回了 404；守卫把注释里 warmed 里的 armed 当成残留报了警。
- 靠什么守住：上面每一次都是靠把它跑起来、量出来抓到的，不是靠读代码。README 里
实测了什么 那一节就是这些残留，而 tools/verify-bundle.js 存在的原因就是
语法检查看不见上面任何一个错误。

如果你是在把这份代码当作「AI 写的代码长什么样」的样本：代码还行，有意思的是过程，而这个过程
只在有人坚持要证据时才成立。

两个发行版，唯一区别是文字压在标志上时怎么处理。

| | dsh-rhine-avoid | dsh-rhine-plain |
|---|---|---|
| 点与文字 | 逐字形绕开 | 不理它 |
| 图形 | 对话所在处凹陷 | 始终完整 |
| 可读性 | 点主动让位 | 靠图层不透明度和更暗的点色 |

嫌标志盖住对话就选 avoid；宁可图形永不形变就选 plain。两者是同一份代码——不随动那半是从
随动那半删掉标记区间生成的，所以不可能走样。

前置条件

- 带 Web GUI 的 DSH（dsh --profile web），Node 22.19+ 或 24+
- 安装时无需构建：包就是纯 JavaScript
- 无需配置：每个包自带点云与开屏语音

安装

把 INSTALL-PROMPT.zh-CN.md（中文，另有
英文版）贴进一个 DSH 会话让它自己装，或者手动三步：

1. 把包目录放到 $DSH_HOME/profiles/node_modules//。
2. 在 $DSH_HOME/profiles/web/cordis.patch.yml 追加一行：

- insert:
- id: rhine-skin
name: dsh-rhine-avoid

3. 重启 DSH，然后硬刷新页面。

安装就这些：开屏语音和点云都在包里，所以没有需要指过去的路径，运行时也不需要下载任何东西。

行里的 name 必须等于包目录名。其他都不用改：loader 从 cordis.yml 所在目录解析行名，Node 会
向上走到 profiles/node_modules 直接找到它，因此不需要任何依赖声明。

新行是开机合成组合树时装载的，所以必须重启。只改 bundle 内容刷新页面即可；改行或改它的
config 需要重启。

开屏语音

每个包都在 voices/ 里自带三条片子，标志成形时随机播一条。它们是短的开屏语音——0.83 秒到
1.15 秒，44.1kHz 单声道——按作者对这批文件的说明，对应 *塞雷娅（"塞主任"）、赫默、白面鸮
（"白咕咕"）。

文件名是序号（title-1.wav），不是角色名：源文件全叫"标题"，没有任何东西能区分它们，而靠音高
去猜比不猜更糟。想给它们标上名字就自己改。

想换自己的音频，就把行指向一个目录：

- insert:
- id: rhine-skin
name: dsh-rhine-avoid
config:
voiceDir: 'D:/path/to/clips'

.wav .mp3 .ogg .m4a .flac 都行，随机播一条。目录不存在或为空是静音，不是错误。
随包片子的来源见 NOTICE.md。

配置

| 字段 | 含义 |
|---|---|
| voiceDir | 覆盖 voices/ 里随包发布的片子。不写就用随包的那套；目录不存在或为空即静音。 |

「设置 → 通用」会多出四行：皮肤强度（全开 / 轻量 / 关闭）、启动动画（可重播、开关）、开屏语音
（开关，外加一个显式试听按钮）、故障警示演示。

开机序列

| 时刻 | |
|---|---|
| 0–2.1s | 点收拢成 LOADING 字样——没有省略号，字母就是这些点 |
| 0.5–4.7s | 自检代码串在下方滚动，带字符画进度条 |
| 3.86s | 进度到 80% 时目标集切换，同一批粒子螺旋卷向标志 |
| 6.07s | 标志成形，开屏语音起 |
| 7.26s | 螺旋结束 |
| 8.4–9.9s | 背板化开，GUI 在已定型的标志下浮现 |
| 10.0s | 遥测面板先浮现，再自己展开 |

整个变形过程中没有任何东西被创建或销毁：只是目标集换了，所以它是一段连续的运动。

序列自己跑，不等任何点击；开屏语音则不一定。 浏览器拒绝在没有用户手势时播出声音，这是
实测而非假设：全新文档上 play() 返回 NotAllowedError，而那一刻片子已经完整缓冲——
所以这是策略，不是延迟。序列不为任何东西等待，直接就跑；音频退到第一次交互时播。刻意没有
「点击开始」的闸门：那要多点一次才看得到皮肤，比语音晚响更难接受。

片子在序列还有几秒可跑时就预取并缓冲，所以一旦允许播放，它从标记上起步，而不是等一次抓取加缓冲。

屏幕上有什么

遥测面板。 可拖动、可折叠，起始收起，序列结束后自己展开（而不是直接出现在眼前）。读取
CPU 线程数、设备内存、JS 堆及其上限、平台、屏幕、语言、时区、网络类型、FPS 和运行时长。内存那一行
驱动一条心电图：波形是逐屏幕列解析求值的合成心跳——QRS 波群只有几毫秒宽，按时间采样会直接
跨过去——心率跟随堆占用，20MB 时 45 BPM，400MB 时 190 BPM。

故障态。 当界面正在显示失败时，整套皮肤转红：文档根上的一个属性重定义每一个青色 token，
心电图在基线上拉平，每一行遥测都显示 ERROR，心跳灯停止闪烁并常亮，背景标志被替换成 ERROR
字样——用的是和 LOADING 同一套像素采样。

把这个检测做对是靠量出来的。 这个界面里几乎每一个错误标记都是历史记录：一次失败的工具
调用会同时带上 data-error 和 data-state="error"，而一个没能好好结束的回合会一直保留它的错误
圆点——所以「存在即报错」会把皮肤钉死在红色直到会话结束。因此那几个选择器只在数量增加时触发，
并且只红八秒。只有 role="alert" 的错误 UI 才算实时，因为提示条和弹窗只在显示期间挂载。

实测了什么

以下是渲染出来比对过、而不是猜出来的细节：

- 指针衰减。 参考页自己的 1/(1+d)² 按本几何实测后否决：在像素尺度下，600px 外仍有 4px 推力，
导致 1984 个点全部位移、图形朝鼠标反向塌陷。改成紧支撑（180px，峰值 118px）后只影响 37.9% 的
点，图形完整。
- 文字避让。 渲了四种模型。清空文字区会让 1984/1984 个点全动、图形被掏空；把位移封顶到 90px
仍然达到 210px；从合并块径向推开移动了 99.5% 的点、峰值 277px，把图形搅成漩涡。字形级光晕
（80px 半径，峰值 26px）只动 44.5% 且图形完整。根因是几何硬约束：对话栏覆盖了图形绝大部分
面积，任何粗于字形级的规则都等价于要求整幅图形形变。
- 字样采样。 一个词有数千个亮点，而粒子只有约 1000 个，所以必须等距抽样；截断只会拼出
开头的字母。
- 属性位置。 一个拼错的变量曾经走到 gl.vertexAttribPointer：undefined 会绑成位置 0，把
位置属性静默重绑到颜色缓冲上——什么都画不出，也不报任何错。现在首次绘制前会校验位置。
- 开机流畅度。 在不透明背板后面全屏动的图层仍在合成，而 backdrop-filter 每帧重算模糊。
两者在序列播放期间都被撤下。

从源码构建

node build.mjs                  # src/ → packages/，两个变体
node tools/verify-bundle.mjs    # 跑两个包；68 项检查
node tools/audit-leaks.mjs      # 个人信息与可移植性，含 git 历史

src/centered-avoid/client.js 是唯一手改的客户端半区。build.mjs 删掉耦合标记围住的区间得到
不随动那半，然后把两者各自包成客户端 bundle、写出两个包。全程没有打包器：客户端 bundle 就是
一段向页面模块表注册 factory 的 classic script，包装过程只是改文本。

tools/verify-bundle.mjs 的存在是因为语法检查看不见这里最要命的那几类错误：bundle 必须自己去拿的
window 全局、和包名不一致的 id、或者走错的闸门分支。它把 bundle 求值、调 apply、渲染注册进去
的组件、并推进记录下来的定时器。

发布

仓库可以直接发布。PUBLISHING.md 里有首次推送的逐步说明、topics 建议，以及改
皮肤的标准流程。

已知限制

- 开屏语音可能需要一次交互：全新页面上浏览器会拒绝自动播放，见上文。序列本身从不等待，
没有任何东西被点击拦住。
- 点阵画布在所有栏之上的整帧浮层里，所以无法被文字遮住——不随动版的可读性靠不透明度。
- 文字避让最快每 110ms 重建一次，且滚动期间不重建：一次重建会遍历所有文字节点并强制布局，
否则它就跑在滚动路径上。滚动停止 140ms 后补一次。
- 连接断开横幅检测不到：它只渲染一个哈希类名，没有 role、没有 data-，要匹配就只能去匹配
它的文案，那太脆了。
- 点阵需要 WebGL；取不到时只有那一层是空的，其余照常工作。

来源

见 NOTICE.md。点云取自明日方舟官网页面自己的 bundle，字样是运行时用本地字体在离屏
canvas 上画的。明日方舟及其标志属于鹰角网络；本项目无关联，除坐标数据外不附带游戏素材。

许可

代码为 MIT——见 LICENSE。美术与数据的来源声明见 NOTICE。

本文件是 README.md 的简体中文版。改动英文版时请同步这一份。