主题开发指南

这篇指南带你制作一个「柔和夜色」聊天主题，导出为 .thm 文件，并发布到 Tavo Hub。配置规则和选择器见主题开发参考。

选择适合你的制作方式：

• 使用 AI Agent + MCP 制作：描述风格，让 Agent 在 Tavo 中创建、应用和调整主题。
• 手动编辑主题：用主题编辑器完成基础外观，按需添加 CSS 和图片资源。

使用 AI Agent + MCP 制作

1. 连接 Tavo

准备好可以正常使用的 AI Agent 和 Tavo。如果 Agent 在电脑上、Tavo 在手机上，让两台设备连接同一局域网，例如同一个 Wi-Fi。

1. 在 Tavo 打开 更多 → 设置 → 创作者 → Tavo MCP 服务器。
2. 跨设备连接时，将 访问范围 设为 局域网，然后开启服务器。同一台设备连接可以使用本机访问范围。
3. 点击页面底部的 复制完整连接配置。
4. 连接和制作期间保持 Tavo 运行，手机上保持前台和屏幕常亮。

在 Agent 对话中发送下面的话，用复制的配置替换占位行：

请连接下面的 Tavo MCP 服务器，读取当前版本的主题工具、主题字段和自定义 CSS 文档。
先发现可用的工具和资源，再按它们的说明操作，不要猜测参数。
<删除这一行，粘贴 Tavo 中复制的完整连接配置>
连接成功并读完文档后，告诉我是否可以创建、应用主题和管理主题资源。

如果 Agent 请求连接权限，按提示确认。连接失败时先查看 Tavo MCP 服务器文档。当前版本未提供某项工具时，可以用后面的手动编辑流程完成对应操作。

2. 描述风格并创建主题

发送具体需求，例如：

请创建一个独立的 Tavo 主题，名为“柔和夜色”。
使用消息模式和气泡布局，深蓝灰色背景，浅色正文，用户和角色气泡用不同的柔和色调。
头像和名称保持可见，输入区与气泡颜色协调，长消息要容易阅读。
先用基础主题配置完成，需要边框和轻微阴影时再加 CSS，只使用公开选择器。
先不要添加外部图片。保留现有主题，完成后告诉我新主题的名称和 ID。

Agent 会根据当前工具说明写入主题。若 Tavo 弹出写入确认，检查目标主题和修改内容后确认。创建成功后，在 更多 → 主题 中可以找到它。

3. 应用到测试聊天并预览

选择一个用于测试的聊天，并明确告诉 Agent 目标。名称重复时，让它列出匹配项，再用聊天 ID 指定。例如：

请查找名为“主题测试”的聊天。如果只有一个匹配，将刚创建的“柔和夜色”主题应用到它。
如果有多个匹配，请列出名称和 ID，等我指定后再应用。只修改这个聊天的主题绑定。

回到该聊天查看效果。创建主题不会自动应用，修改共享主题则会影响所有使用它的聊天，因此使用独立主题更方便试做。

如果主题包含自定义 CSS，在 Tavo 设置中开启 高级前端渲染。Agent 返回“写入成功”只表示配置已保存，视觉效果仍要在实际聊天中检查。

4. 反馈并调整

描述具体问题，也可以提供不含私人聊天内容的截图。例如：

请调整刚才的“柔和夜色”主题：角色气泡与背景太接近，把气泡提亮一些，正文和输入框文字增大一点。
保留其他设置和已有 CSS。更新前先读取主题，合并需要保留的规则。

每次调整后查看真实聊天，检查长消息、输入区和生成中状态。完整检查清单见在真实聊天中检查。

需要纹理或背景图时，把你有权使用的图片交给 Agent，让它通过当前版本的主题资源工具导入，并使用返回的资源地址。电脑上的本地文件路径不能直接作为 Tavo 手机上的路径使用。也可以在 自定义样式 → 资源 中手动导入，再让 Agent 列出资源并引用它。资源重命名后，还需要更新 CSS 中的引用。

5. 导出并分享

满意后可以让 Agent 导出：

请把“柔和夜色”主题导出为 .thm，使用刚才测试聊天的文件区。
告诉我导出的主题 ID、聊天 ID 和文件路径，并说明如何将文件保存到 Tavo 外部。

MCP 主题导出会把文件写入指定聊天的文件区，返回的是 Tavo 内部路径，不等于已经下载到电脑或打开系统分享。最直接的分享方式是在 Tavo 主题列表中打开主题菜单，选择 导出，保存 .thm 文件。导入测试和分享时的注意事项见导出与分享。

6. 发布到 Tavo Hub

1. 打开 Tavo Hub，登录后进入 主题 → 我的主题。
2. 上传导出的 .thm 文件。
3. 点击 发布。需要分享时，可复制主题链接。

手动编辑主题

不连接 MCP 时，可以按下面的步骤在编辑器中制作，也可以把主题开发参考交给 AI 辅助完成：

• 让 AI 提供基础设置建议和 CSS，由你填入编辑器、预览和保存。
• 让能生成文件的 Agent 按主题包格式制作 .thm，然后在 Tavo 主题页选择 导入主题。参考中提供了包含纸张纹理的示例包、清单和图片，导入后可继续按下面的流程调整和检查。

1. 创建独立主题

在侧边栏的 更多 → 主题 中创建主题，或复制一个接近目标效果的主题，命名为「柔和夜色」。官方主题需要复制后才能修改。

多个聊天可以使用同一个主题，修改会影响它们。开发时使用独立主题和测试聊天，方便反复调整。

2. 完成基础外观

按下面的顺序设置。颜色和尺寸是起点，可以在预览中微调，不必逐项照搬。

点击 预览 检查整体效果，返回主题编辑页保存，再应用到测试聊天。此时你已经有一个可以使用和分享的主题，可以直接跳到第 5 步检查，再导出。后面的 CSS 和纹理都是可选增强。

3. 添加 CSS 细节（可选）

自定义 CSS 需要在设置中开启 高级前端渲染。它作用于聊天中的消息、头像和 Web 输入区，不能改变设置页、菜单或系统弹窗。

打开主题编辑页的 自定义样式 → 自定义 CSS，粘贴下面的规则：

.tavo-message-content {
  line-height: 1.8;
  letter-spacing: 0.02em;
}

.tavo-character-bubble {
  border: 1px solid rgba(160, 180, 220, 0.4);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

只粘贴 CSS 本身，不要包含 Markdown 代码围栏、HTML 或 <style> 标签。点击 预览，确认角色气泡出现边框和轻微阴影，然后返回主题编辑页保存，并将主题应用到测试聊天。

需要修改其他区域时，从编辑器的 CSS 助手 选择目标。完整清单见公开选择器参考。只使用清单中公开的选择器和标准 CSS 属性，不依赖内部 DOM、未公开的 class 或 CSS 变量。

4. 添加随主题保存的图片（可选）

不需要图片时可以跳过这一步。要给气泡加上纹理，准备一张颜色较淡、不会影响阅读的图片，然后：

1. 在主题编辑页的 自定义样式 → 资源 区域点击 导入，选择图片。
2. 在导入的资源旁点击 复制地址。
3. 将复制的完整 url(...) 粘贴为 CSS 的 background-image 值。

例如，实际复制的地址是 url("theme/assets/paper.png") 时，添加：

.tavo-character-bubble {
  background-image: url("theme/assets/paper.png");
  background-size: cover;
}

示例文件名只是占位，请使用你复制的地址。同名资源导入时可能自动改名，直接复制地址可以避免拼写和文件名编码问题。

资源会随主题导出。直接在 CSS 中引用的外部图片和字体不会自动打包，接收者仍需要访问原地址。主题资源地址只适用于所属主题，不是可以发给其他人的下载链接。

重命名或删除资源后，需要手动更新 CSS 中的引用。保存主题后，再检查图片是否正常显示。

5. 在真实聊天中检查

编辑器预览适合快速调样式，分享前还需要检查实际聊天：

只需覆盖主题打算支持的布局和使用场景。气泡与平面布局的效果可能不同，特定元素也只有在相应内容或状态出现时才能看到。

出现异常时，先备份 CSS，再逐段移除规则定位问题。避免使用全局样式重排聊天页面，也不要修改输入区的定位或交互状态。更多常见问题见主题排错说明。

6. 导出与分享

1. 保存主题，在主题列表中打开该主题的菜单，选择 导出。
2. 保存生成的 .thm 文件。
3. 在主题页的创建入口选择 导入主题，导入文件并另存为测试副本，重新应用到聊天检查。
4. 确认样式和图片资源正常后，将 .thm 与效果截图、简短介绍一起分享。

同名导入时选择另存，可以保留原主题。分享介绍中注明自定义 CSS 需要开启高级前端渲染，以及你测试过的布局和设备。只在打包中包含你有权分享的素材。

7. 发布到 Tavo Hub

1. 打开 Tavo Hub，登录后进入 主题 → 我的主题。
2. 上传导出的 .thm 文件。
3. 点击 发布。需要分享时，可复制主题链接。