编辑器使用

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

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

• 载入后会自动填充 HTML / CSS / Prompt，建议第一时间改掉图片、配色，确保作品风格有明显差异。

• 模板只是起点：保留交互结构、重写文案或变量绑定，能让审核更快通过，也能避免与其他创作者“撞脸”。

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

• 结构大纲以树状展示结构，方便用户梳理和快速组织页面结构。

  • 每一节点可展开/收起、插入节点、调整顺序。

  • 选中节点时顶部会显示完整路径，方便定位和切换。

  • 如果层级之下仅包括文本节点的话，也会在父节点提前预览，方便知悉文本内容。

• 属性面板会在选中某一个节点之后，展开详细CSS、文本内容、属性配置等信息。

  • 支持左上角快速切换节点内容、添加节点、调整顺序；

  • 在文本内容区域支持插入变量；

  • class输入的时候支持 tailwind快速索引，点击即可；或自定义输入类名，通过空格确认；

  • 想修改某个类名的样式时，可在class里点击类名的tag，系统会自动展开显示对应类在CSS编辑器中的对应片段，省去手动搜索。

  • 编辑器内置多重校验：只允许白名单标签、自动补全闭合标签、阻止孤立文本节点，最大限度降低语法错误。

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

• HTML 编辑器提供全屏、插入变量、导出变量、清空等操作；导出的变量清单方便与Ai模型对话，从而在外部平台快速创建。

• CSS 编辑器同样支持全屏和一键清空，适合在需要编写复杂动画、媒体查询时使用。

• LLM提示词一个CG只能使用一份，因此这个输入框也是唯一固定的，需要在HTML结构中使用{llm_content}， 但是如果使用了多份，就会进行报错，请注意修复。

  • 注意：LLM提示词是唯一输入给模型的信息，如果需要模型生成指定的结构（HTML)和样式（CSS），需要在提示词中给出示例说明。