search

CG创作约束

  • CG目前不支持Script脚本，只用 HTML + CSS / Tailwind：禁止脚本。

  • 能用 Tailwind 的场景优先用 flex、grid、peer-checked:、transition-*；

  • 需要动画或复杂状态时再写局部 CSS。

  • 交互模式推荐：

    • 使用 input[type=checkbox/radio] + label + ~ 兄弟选择器来实现折叠、轮播、切换；不1要使用 :has()。

    • 展开/收起动画用 max-height + opacity + transition，不要期望 display 过渡。

    • Tailwind 的 peer 只能影响后续兄弟节点，如果结构不满足，请切换到 CSS 选择器。

  • 资源与安全:

    • 图片、字体、音视频都需走 HTTPS，可优先使用官方静态域名或角色内上传资源。

    • 图片占位建议 img + fallback div，用 CSS 控制显隐，不许 onerror。

    • 避免 iframe/object/embed/video/audio，审核会直接拒绝。

  • 白名单参考

    任何未在白名单内的属性或标签都会被清洗，确保最终 HTML/CSS 能在沙箱稳定运行，开放的白名单主要包括：

  - **文本/语义结构**：`p/span/strong/em`，所有标题 `h1-h6`，`blockquote`、`div`、`section/article/nav/aside/header/footer/main`、`ul/ol/li`、`table/thead/tbody/tr/th/td` 等都放开，足够搭建多层级模块。
  - **交互/布局标签**：白名单支持 `input`（radio/checkbox/text 等）、`label`、`button`、`details/summary`，还可以用 `table`、`svg`、`path/rect/circle/linearGradient/stop` 等组件来绘制装饰图形或进度条。
  - **媒体/链接**：`img` 必须绑定 HTTPS 静态地址，无法拼接变量；`a` 标签会保留样式但 `href` 会被移除，不允许跳出沙箱；`svg` 的 `viewBox/width/height/fill/stroke` 等属性均可用。
  - **属性白名单**：所有标签默认只保留 `class/id/title/style`；`input` 额外支持 `type/placeholder/value/checked/disabled/name`，`label` 支持 `for`；`img` 保留 `src/alt/width/height`；`details` 可用 `open`；`svg/path/rect/circle` 允许 `fill/stroke/opacity/transform` 等安全属性。
  - **CSS 能力范围**：颜色、渐变、字体、Flex/Grid 布局、`gap`、`position`（支持 `static/relative/absolute`）、`z-index`、`opacity`、`transform/transition/animation`、`clip-path`、`filter/backdrop-filter`、`mask`、`pointer-events`、`mix-blend-mode` 等主流属性均可使用；`cursor:none` 等危险值会被过滤，URL 只允许 HTTPS，`javascript:`/`data:` 会直接删除。
  - **内联样式与 class**：`style` 属性会自动重写，只保留安全声明；`class` 会过滤非法字符并阻止自定义脚本注入。
  - **全局属性**：系统只保留 `class/id/title/style` 这几个基础属性，`class`/`id` 会自动做合法性校验；`style` 会被过滤为安全 CSS，非法声明会被丢弃。
  - **CSS 白名单**：颜色、字体、布局（Flex/Grid）、动画（transition/animation）、滤镜（filter/backdrop-filter）等主流属性都已放开；`position` 仅支持 `static/relative/absolute`，`cursor:none` 等危险值会被移除；URL 只能引用 HTTPS，本地 `javascript:` / `data:` 会被拦截。

  • LLM 与输入：

    • 只允许一个 {llm_content}，Prompt 中鼓励引用结构化变量、样式名称、HTML结构和示例指导模型。

    • 为了给会话上下文保留空间，对Prompt长度进行了限制，预览面板会显示用量，需要按量调整，以满足渲染要求。

  • 变量列表（不断迭代中）

前へ编辑器使用次へCG创作实践参考

最終更新