# 编辑器使用

### 模板库：免费试用、一键跑通

模板库集合了官方维护的朋友圈、直播间、档案等主题，点击「全屏预览」即可在沙箱里免费看到完整效果，再决定是否载入（通过旁边的按钮）。

<div><figure><img src="/files/1I6aFNWPXpUGsUC5Dwo1" alt=""><figcaption></figcaption></figure> <figure><img src="/files/VHwoka4YHuvskrxDqwyV" alt=""><figcaption></figcaption></figure></div>

* 载入后会自动填充 HTML / CSS / Prompt，建议第一时间改掉图片、配色，确保作品风格有明显差异。
* 模板只是起点：保留交互结构、重写文案或变量绑定，能让审核更快通过，也能避免与其他创作者“撞脸”。

### 新手模式：快速交互、简单实现

<div><figure><img src="/files/9X7QIOZWI0HcmUqHSCXV" alt=""><figcaption></figcaption></figure> <figure><img src="/files/bEmBVuNWV3yKzNYmZYc6" alt=""><figcaption></figcaption></figure></div>

* **结构大纲**以树状展示结构，方便用户梳理和快速组织页面结构。
  * 每一节点可展开/收起、插入节点、调整顺序。
  * 选中节点时顶部会显示完整路径，方便定位和切换。
  * 如果层级之下仅包括文本节点的话，也会在父节点提前预览，方便知悉文本内容。
* **属性面板**会在选中某一个节点之后，展开详细CSS、文本内容、属性配置等信息。
  * 支持左上角快速切换节点内容、添加节点、调整顺序；
  * 在文本内容区域支持插入变量；
  * class输入的时候支持 tailwind快速索引，点击即可；或自定义输入类名，通过空格确认；
  * 想修改某个类名的样式时，可在class里点击类名的tag，系统会自动展开显示对应类在CSS编辑器中的对应片段，省去手动搜索。
  * 编辑器内置多重校验：只允许白名单标签、自动补全闭合标签、阻止孤立文本节点，最大限度降低语法错误。

### 自由模式： 变量导出、自由发挥

<div><figure><img src="/files/keHXflOBQZLdvKBnezv5" alt=""><figcaption></figcaption></figure> <figure><img src="/files/TV3sPyHQ51xNo5EqVyz7" alt=""><figcaption></figcaption></figure></div>

* HTML 编辑器提供全屏、插入变量、导出变量、清空等操作；导出的变量清单方便与Ai模型对话，从而在外部平台快速创建。
* CSS 编辑器同样支持全屏和一键清空，适合在需要编写复杂动画、媒体查询时使用。
* LLM提示词一个CG只能使用一份，因此这个输入框也是唯一固定的，需要在HTML结构中使用`{llm_content}`， 但是如果使用了多份，就会进行报错，请注意修复。
  * **注意：LLM提示词是唯一输入给模型的信息，如果需要模型生成指定的结构（HTML)和样式（CSS），需要在提示词中给出示例说明。**


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://feelin.ai/wiki/create/character/cg-guide/creator-guide/usage.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.