LunaTalk HTML 格式懒人版——让 AI 帮你写 HTML 界面
HTML 格式有两种用法
LunaTalk 支持 HTML 格式在聊天框里渲染游戏化界面。写角色卡时你有两条路：
| 路线 | 难度 | 适合谁 |
|---|---|---|
| 懒人版 | ⭐ 零门槛 | 不想学 HTML 的普通创作者 |
| 手动版 | ⭐⭐⭐ 需要学基础标签 | 想精细控制界面的进阶创作者 |
本页讲懒人版——直接告诉 AI 你想要什么效果，让 AI 帮你写 HTML。手动版的完整教程见帮助中心的 HTML 手动版页面。
懒人版怎么写
在角色卡的回复要求或格式要求里，直接描述你想要的效果。AI 会根据你的描述生成对应的 HTML 代码。
关键前置指令（必写）
帮助文档特别强调——必须先告诉 AI 要用 HTML 格式回复，以及不能用哪些标签：
（必写前置）
① 全部回复以 HTML 格式进行回复。
② 不要生成单独的 <script>，所有的 script 必须放在 HTML 元素事件中内联使用。
③ 不支持 <style>，不要使用 style 标签。
④ script 必须内联在 HTML 元素事件中（比如 onclick=""），不能有单独的 script 块。然后描述你想要的效果
用自然语言描述就行，AI 会帮你写成 HTML：
示例一：对话和内心独白用不同颜色
（前置必写）
② 人物的语言对话全部放在双引号内，字体使用蓝色、加粗。
③ 人物的内心独白全部放在括号内，字体使用粉色、斜体。AI 会自动生成：
<font color="blue"><b>"你来了？"</b></font> <font color="pink"><i>（她心里嘀咕这人怎么又来了）</i></font>
示例二：句末输出状态栏
（前置必写）
④ 回复末尾输出一行状态栏，格式为表格：
表格背景浅蓝色，文字深蓝色。
表格内容：姓名、灵根、修为、灵力、当前位置、天数。示例三：提供交互选项按钮
（前置必写）
⑤ 每轮回复末尾提供 2~4 个可选项，以按钮形式呈现。
按钮点击后自动把选项文字填入输入框。
按钮颜色浅蓝色，文字深蓝色。AI 会自动生成带 onclick 内联脚本的 HTML 按钮。
懒人版的优缺点
优点
- 零门槛：不用学 HTML 语法，直接说想要什么效果就行
- 快：写角色卡时省掉大量 HTML 细节代码
- 灵活：改角色卡效果时直接改描述就行，不用改代码
缺点
- AI 生成的 HTML 可能不完全准确——比如颜色没对上、按钮点击没反应
- 复杂效果（多层表格、复杂交互按钮）可能 AI 搞不定
- 需要多测几轮，发现 AI 生成的 HTML 有问题再调整你的描述
懒人版 + 手动微调的推荐组合
实际使用中最常见的做法是：
- 用懒人版写描述，让 AI 生成 HTML
- 测试几轮后看渲染效果
- 发现哪里不对——在角色卡的格式要求里补充更具体的描述，或者手动写那一段 HTML 示例给 AI 参考
比如 AI 生成的按钮颜色不对，你可以在格式要求里加：
按钮使用这个精确模板：
<button style="background-color: lightblue; color: darkblue;" onclick="...">选项文本</button>把你的精确 HTML 代码贴给 AI 当参考，它后续会照着来。
禁用标签说明
帮助文档明确说明 LunaTalk HTML 支持的约束：
| 约束 | 原因 |
|---|---|
不支持 <style> 标签 | LunaTalk 的渲染器不处理 style 块 |
不支持独立 <script> 块 | 所有脚本必须内联在 HTML 元素事件里（如 onclick） |
| 只支持内联事件脚本 | <button onclick="..."> 这种写法 |
所以在给 AI 的描述里要特别强调这些限制，不然 AI 可能生成 LunaTalk 渲染不了的代码。
测试 HTML 效果
写好带 HTML 格式要求的角色卡后：
- 先开 GPT 系列模型测——GPT 对 HTML 生成的准确度通常最高
- 看实际渲染效果——不要只看 AI 输出的 HTML 代码，要看 LunaTalk 渲染后长什么样
- 换几个模型测——不同模型生成的 HTML 可能不同，选最稳定的那个模型
进阶：给 AI 贴参考 HTML
如果懒人版的描述不够精确，你可以手动写一段你想要的 HTML 示例贴在格式要求里，让 AI 照着模板来：
请参考以下 HTML 格式输出状态栏：
<table style="background-color: lightblue; color: darkblue; border-collapse: collapse;">
<tr><td>姓名</td><td>林风</td></tr>
<tr><td>修为</td><td>炼气一层</td></tr>
</table>
按钮格式参考：
<button onclick="const ta=document.querySelector('#lunatalk-input textarea.uni-textarea-textarea');if(ta){ta.value='修炼';ta.dispatchEvent(new Event('input',{bubbles:true}))}">修炼</button>AI 看到这段模板后，后续生成的 HTML 基本会照着来。