# PLAYGROUND 聊天界面美化制作指导书

> 用途：把本文件完整复制给 ChatGPT、Claude、Gemini、DeepSeek 等 AI，让 AI 生成可以直接保存为 `.css` 并导入 PLAYGROUND 的聊天界面美化文件。

## 1. 你要制作的是什么

你要制作的是“聊天窗口内部”的 CSS 美化，不是桌面主题，也不是整个手机网页的 CSS。

它只影响当前聊天界面中的：

- 聊天背景
- 聊天顶部标题栏
- 对方消息气泡
- 我方消息气泡
- 头像
- 输入栏
- 发送按钮
- 聊天界面的局部动画和装饰

它不能修改：

- 手机桌面壁纸
- 桌面 App 图标
- Archive、设置、外观等其他 App
- 角色资料、聊天记录、Memory、世界书、用户数据

## 2. 正确导入方式

1. 让 AI 只输出完整 CSS。
2. 将 CSS 保存为 UTF-8 编码文件，例如 `my-chat-theme.css`。
3. 进入 PLAYGROUND 的聊天详情。
4. 点击清晰可见的“导入”按钮。
5. 选择 CSS 文件。
6. 在聊天美化预览中检查效果。
7. 点击“立即应用美化”。

导入按钮会把 CSS 放入当前聊天的聊天美化编辑器。它不会自动变成桌面主题，也不会覆盖其他 App 的样式。

## 3. 给 AI 的直接指令

复制下面整段，再把最后的需求替换掉：

```text
你是 PLAYGROUND Web 的聊天界面美化设计师。

请为 PLAYGROUND 生成一个可以直接保存为 .css 并导入的聊天界面美化文件。

产品环境：
- PLAYGROUND 是 390 x 844 的手机模拟器，必须优先适配窄屏手机。
- 这是聊天窗口，不是桌面，不是后台管理页面。
- 只允许影响聊天界面，不允许影响 body、html、桌面、其他 App 或其他聊天页面。

输出要求：
- 只输出纯 CSS，不要 Markdown 代码围栏，不要解释文字。
- CSS 必须可以直接保存为 UTF-8 的 .css 文件。
- 不使用 JavaScript，不使用外部字体，不使用 @import 网络资源。
- 不修改角色、用户、聊天记录、Memory、世界书等数据。
- 不使用全局选择器 body、html、:root、*。
- 不使用 position: fixed 把元素带出聊天窗口。
- 不使用 100vw、100vh；聊天内容尺寸使用百分比、max-width、min() 或容器内单位。
- 所有动画必须短、轻量、可停止，不能持续制造大量 DOM。
- 颜色、间距和字号必须保证文字可读。

推荐使用的聊天选择器：
- #chat-dialog-panel .win-header：聊天顶部标题栏
- #dialog-messages-container：消息滚动区域和聊天背景
- #dialog-messages-container .msg-bubble.other：对方消息行
- #dialog-messages-container .msg-bubble.self：我方消息行
- #dialog-messages-container .msg-avatar：头像
- #dialog-messages-container .msg-text：消息气泡
- #chat-dialog-panel .dialog-input-container：输入区域
- #chat-dialog-panel .input-main-row：输入栏主行
- #chat-dialog-panel #dialog-input-text：输入框
- #chat-dialog-panel .chat-send-btn：发送按钮

重要：导入器会自动把普通选择器限制在聊天窗口内。不要写 body、html、:root，也不要操作桌面元素。

视觉目标：
[在这里填写你想要的风格，例如：奶油色、雨季、Thread、极简黑白、复古信纸]

具体要求：
[在这里填写背景、气泡、字体、头像、按钮、动画等需求]
```

## 4. 推荐的 CSS 结构

AI 生成的 CSS 建议按以下顺序排列，方便小白检查：

```css
/* 1. 聊天窗口顶部 */
#chat-dialog-panel .win-header {
  background: #ffffff;
  color: #202020;
}

/* 2. 消息区域 */
#dialog-messages-container {
  background: #f3f0ea;
  padding: 14px 12px;
  gap: 12px;
}

/* 3. 对方气泡 */
#dialog-messages-container .msg-bubble.other .msg-text {
  max-width: min(78%, 290px);
  background: #ffffff;
  color: #242424;
  border: 1px solid #e6ded5;
  border-radius: 16px;
  padding: 9px 12px;
  box-sizing: border-box;
}

/* 4. 我方气泡 */
#dialog-messages-container .msg-bubble.self .msg-text {
  max-width: min(78%, 290px);
  background: #d8f2d0;
  color: #242424;
  border: 1px solid #c1e6b8;
  border-radius: 16px;
  padding: 9px 12px;
  box-sizing: border-box;
}

/* 5. 输入栏 */
#chat-dialog-panel .dialog-input-container {
  background: #ffffff;
  border-top: 1px solid #e6ded5;
}

#chat-dialog-panel #dialog-input-text {
  min-width: 0;
  box-sizing: border-box;
  color: #242424;
  background: #f8f6f2;
}
```

## 5. 尺寸规则

- 设计基准宽度：390 CSS px。
- 消息气泡最大宽度：建议 `70%` 到 `82%`，不要写死超过 330px。
- 头像建议 30px 到 56px。
- 普通聊天文字建议 12px 到 16px。
- 输入栏按钮点击区域不要小于 32px。
- 顶部标题栏不要设置超过 60px 的固定高度。
- 背景图片使用 `background-size: cover`，不要用超大内联图片。
- 不要把长文字放入固定高度且 `overflow: hidden` 的气泡，否则会截断消息。

## 6. 安全与隔离规则

必须遵守：

- 不写 `body {}`、`html {}`、`:root {}`、`* {}`。
- 不写 `body::before`、`body::after`。
- 不修改 `#phone-container`、`#desktop`、`.app-icon`、`.app-window`。
- 不修改 `#app-window-container` 的定位和层级。
- 不使用全局 `.btn`、`.card`、`.input` 这类容易污染其他页面的选择器。
- 不使用 `z-index: 999999`。
- 不使用外链图片、外链字体和远程脚本。
- 图片优先使用 URL 或压缩后的 Data URL，单张图片尽量不超过 1 MB。

导入器会对自定义 CSS 做聊天窗口作用域隔离，并会把 `vw`、`vh` 转换为聊天组件容器单位。仍然建议从一开始就只写聊天相关选择器。

## 7. 导入前自检清单

让 AI 在输出前自行检查：

- [ ] 输出只有 CSS，没有 ``` 符号。
- [ ] 没有 `body`、`html`、`:root`、`*` 全局选择器。
- [ ] 没有 JavaScript。
- [ ] 没有修改桌面或其他 App 的选择器。
- [ ] 消息气泡在 390px 宽度下不会溢出。
- [ ] 长消息可以换行。
- [ ] 输入框和发送按钮仍然可以点击。
- [ ] 对方和我方气泡的文字都有足够对比度。
- [ ] 文件扩展名是 `.css`，编码是 UTF-8。

## 8. 出错时怎么处理

如果导入后没有效果：

1. 确认文件不是 `.css.txt`。
2. 确认当前打开的是聊天详情，而不是桌面主题导入。
3. 确认导入后点击了“立即应用美化”。
4. 删除 CSS 中的 `body`、`html`、`:root`、`*` 规则。
5. 先只保留一个规则测试，例如只修改 `#dialog-messages-container`。
6. 如果是某个特定页面没有效果，优先使用上面列出的精确选择器。