# 编辑器使用
#### 模板库：免费试用、一键跑通
模板库集合了官方维护的朋友圈、直播间、档案等主题，点击「全屏预览」即可在沙箱里免费看到完整效果，再决定是否载入（通过旁边的按钮）。
* 载入后会自动填充 HTML / CSS / Prompt，建议第一时间改掉图片、配色，确保作品风格有明显差异。
* 模板只是起点：保留交互结构、重写文案或变量绑定，能让审核更快通过，也能避免与其他创作者“撞脸”。
#### 新手模式：快速交互、简单实现
* **结构大纲**以树状展示结构，方便用户梳理和快速组织页面结构。
* 每一节点可展开/收起、插入节点、调整顺序。
* 选中节点时顶部会显示完整路径，方便定位和切换。
* 如果层级之下仅包括文本节点的话，也会在父节点提前预览，方便知悉文本内容。
* **属性面板**会在选中某一个节点之后，展开详细CSS、文本内容、属性配置等信息。
* 支持左上角快速切换节点内容、添加节点、调整顺序；
* 在文本内容区域支持插入变量；
* class输入的时候支持 tailwind快速索引，点击即可；或自定义输入类名，通过空格确认；
* 想修改某个类名的样式时，可在class里点击类名的tag，系统会自动展开显示对应类在CSS编辑器中的对应片段，省去手动搜索。
* 编辑器内置多重校验：只允许白名单标签、自动补全闭合标签、阻止孤立文本节点，最大限度降低语法错误。
#### 自由模式： 变量导出、自由发挥
* HTML 编辑器提供全屏、插入变量、导出变量、清空等操作；导出的变量清单方便与Ai模型对话，从而在外部平台快速创建。
* CSS 编辑器同样支持全屏和一键清空，适合在需要编写复杂动画、媒体查询时使用。
* LLM提示词一个CG只能使用一份，因此这个输入框也是唯一固定的，需要在HTML结构中使用`{llm_content}`， 但是如果使用了多份，就会进行报错，请注意修复。
* **注意：LLM提示词是唯一输入给模型的信息，如果需要模型生成指定的结构（HTML)和样式（CSS），需要在提示词中给出示例说明。**
