技术手册

技术手册

正则、CSS、JS 和 SDK 的完整说明。想看懂 AI 助手写了什么，或者自己动手改，就翻这里。

叮咚

大部分时候用不到这本手册：状态栏、配色、小机关，跟 AI 创作助手说一句就行（见第 9 关、第 10 关）。手册是给想看懂代码、想自己改的你准备的。

你想做什么

目标	用什么	从这里开始
把固定文字变成状态卡、信息面板	正则 + CSS	状态卡片实例
改聊天背景、气泡、字体、输入区	CSS	聊天主题实例
收到消息后切换页面状态	JavaScript Hook	场景动效实例
自己做整个聊天页面	SDK + 独立界面	选择 SDK 接入方式

三样工具怎么分工

正则负责换内容：找到约定好的文字，换成能美化的 HTML。它不管颜色和动画。
CSS 负责换外观：颜色、圆角、背景、字体、动画。
JavaScript 负责响应事件：点击切换、收到消息后更新状态。只有这类需求才用得上。

做美化的顺序：先让角色稳定输出约定的格式 → 用正则测试面板确认替换结果 → 给新类名加 CSS → 真需要事件时才加 JS。

预览通过，不等于各端都没问题

创作页预览、网页聊天、App 用的是不同的运行环境。CSS 能命中的范围、HTML 的隔离方式、原生输入栏都不完全一样。发布前在目标端各测一遍完整回复、切换会话和退出聊天。

目录

正则与美化

状态卡、聊天主题、场景动效背后的代码。AI 助手能代写，这里讲它写了什么、怎么检查。

角色卡文件

导入、导出和版本。

导入、导出与版本平台 JSON、SillyTavern、Mufy XML 能转换什么

SDK 与独立界面

给会写前端的开发者：自己做整个聊天页面。