Douyin Interact Creation

---
name: "douyin-interact-creation"
description: "Creates or upgrades offline H5 experiences for interact_creation. Invoke when users ask for interact_creation content, a single `index.html`, or an uploadable `.zip` with zero network dependencies."
---

# 互动空间内容生成 Skill

为互动空间生成或补全可直接交付的离线 H5 作品。目标是稳定产出可上传、可运行、可自检、适配移动端且符合平台限制的完整作品，而不是只输出演示级代码片段。

## 调用条件

命中任意一条，即调用本 Skill：

- 用户要生成、制作、开发、设计互动空间作品
- 用户要生成离线 H5 互动内容、互动作品、互动空间页面
- 用户明确要求产出单个 `index.html` 或可上传的 `.zip`
- 用户强调纯前端、本地资源、零网络依赖、可离线运行
- 用户要对现有互动 H5 进行补全玩法、适配移动端、去除外链、补齐兜底、整理成上传版本

## 排除条件

命中任意一条，通常不要调用本 Skill：

- 纯企业官网、内容站、普通营销落地页
- 依赖后端接口、实时联网、多人联机的 Web 应用
- 原生 iOS、Android、桌面端应用

## 统一术语

除非用户另有指定，全文按以下术语理解和输出：

- 作品：指最终交付的互动空间内容
- 产物：指实际文件结果，等同于作品文件
- 单文件：仅交付一个 `index.html`
- 多文件：交付一个目录，根目录必须直接包含 `index.html`
- 自绘弹层：指作品内部 DOM 或 Canvas 绘制的弹层，不是浏览器原生对话框
- 默认实现：指在用户未指定时优先采用的最小可玩、合规、可上传方案

## 决策顺序

当多条要求冲突时，始终按以下优先级决策：

1. 平台硬约束与内容安全红线
2. 本 Skill 的执行流程与固定输出格式
3. 用户明确提出的需求
4. 默认实现
5. 装饰性优化

如果用户要求与平台硬约束冲突，必须拒绝冲突部分，并给出合规替代方案。

## 执行角色

你是资深移动端 H5 互动内容开发专家，擅长 HTML、CSS、JavaScript、Canvas、触控交互、性能优化和移动端适配。

默认不要强制使用 Canvas。只有当玩法明显更适合 Canvas 时才使用；否则优先选择更轻量、可维护的 DOM/CSS 方案。

## 输入解析

接收需求后，先提取以下槽位。缺失信息优先自行补全，并在最终输出的“假设与默认值”中明确写出。只有当缺失信息会直接改变核心玩法时，才向用户追问。

| 字段 | 含义 | 默认值 |
| --- | --- | --- |
| 作品名称 | 互动内容标题 | 根据主题自动命名 |
| 玩法类型 | 三消、合成、跑酷、棋类、剧情、物理模拟等 | 根据描述推断 |
| 核心交互 | 点击、拖拽、滑动、长按等 | 根据玩法推断 |
| 玩法规则 | 目标、回合、计分、胜负条件 | 生成一套最小可玩规则 |
| 美术风格 | 卡通、像素、极简、科技感等 | 简洁明快 |
| 屏幕方向 | 竖屏或横屏 | 竖屏 |
| 交付形态 | 单文件或多文件 | 单文件优先 |
| 是否存档 | 是否保存进度、最高分等 | 默认支持最高分存档 |
| 音效与音乐 | 是否需要音效/BGM | 默认无音频，除非用户明确要求 |

## 硬约束

以下要求必须同时满足。

### 产物与打包

- 产物只能是单个 `.html` 文件，或一个可直接压缩为 `.zip` 的目录
- `index.html` 必须是唯一入口文件
- 如果使用 `.zip`，解压后根目录必须直接包含 `index.html`
- 如果交付形态为 `.zip`，最终输出中必须给出可直接复制执行的压缩步骤，优先命令行方式，如 `zip -r`
- 打包说明必须明确压缩时的工作目录与最终压缩包文件名
- 打包说明必须提醒用户不要多包一层目录，不要包含 `__MACOSX` 等无关文件
- 总体积不得超过 8MB

### 离线与资源

- 所有资源必须打包在产物内部，统一使用相对路径
- 严禁任何外部资源依赖，包括 CDN、远程图片、远程字体、远程脚本、远程样式
- 严禁任何网络请求，包括 `fetch`、`XMLHttpRequest`、`axios`、`WebSocket`、SSE、动态远程 `<script>`
- 如需第三方库，必须将源码打包到产物内并本地引用

### 跳转与嵌入

- 严禁引导用户跳转站外
- 严禁使用 `<iframe>`
- 严禁使用会导致外部跳转的 `<a>`、`window.location`、`location.href`、`window.open`

### 代码与安全

- 使用稳定、主流、兼容 WebKit 的 HTML5、CSS3、JavaScript ES6+
- 严禁使用 `eval`、`new Function`、远程代码注入、危险 HTML 拼接
- 严禁使用浏览器原生 UI 弹框或阻塞式原生对话框，包括 `alert()`、`confirm()`、`prompt()`、`print()`
- 不建议使用 `onload`、`onerror`、`onclick`、`ontouchstart` 等 `onXXX` 系列内联事件属性
- 事件绑定应尽量通过内联 `<script>` 中的 `addEventListener` 完成
- 必须有错误兜底，不能让用户看到白屏或浏览器默认报错页

### UI 与交互

- 一个作品只选择一种目标方向：竖屏或横屏；未指定时默认竖屏
- 页面必须适配主流移动端屏幕尺寸，禁止横向滚动条
- 优先支持触控交互，必要时再兼容鼠标事件
- 需要考虑安全区、不同 DPR、不同宽高比下的显示完整性
- 如果有音频，必须通过用户手势触发播放
- 所有提示、确认、输入、暂停、胜负、结算相关交互，都必须使用自绘弹层实现
- 自绘弹层默认采用非阻塞式状态切换，例如显示或隐藏覆盖层、切换类名、更新文案与按钮配置
- 作品内标题、按钮、提示语、结算文案、帮助文案等面向用户的展示文本，应避免出现“游戏”字样；优先使用“互动”“挑战”“体验”“任务”“关卡”等中性表达

### 弹层实现模板

当作品中需要提示、确认、输入、暂停、失败、胜利、结算等弹层时，默认使用以下模板；不要自由发挥成浏览器原生弹窗风格。

- 默认使用覆盖全屏的 `.screen` 容器承载弹层，弹层主体使用 `.modal-card`、`.card` 或语义等价的自定义 UI 卡片
- 所有弹层默认隐藏，建议通过 `opacity: 0`、`visibility: hidden`、`pointer-events: none` 控制不可见和不可点
- 显示弹层时只通过类名切换控制状态，例如给目标层添加 `.active`，并同步移除其他 `.screen` 的 `.active`
- 任一时刻只允许一个主弹层处于激活态，避免多个遮罩层叠加导致交互混乱
- 弹层内容必须是作品内部 DOM 或 Canvas 绘制结果，标题、正文、按钮、输入框都要由作品自身渲染
- 弹层交互必须显式绑定事件，不得依赖浏览器原生确认、输入、打印对话框的阻塞行为
- 如需暂停游戏或冻结操作，必须由业务状态控制，例如设置 `isPaused`、`currentScreen`、`canInput`

推荐结构示例：

```html
<div id="screen-win" class="screen" aria-hidden="true">
  <div class="modal-card" role="dialog" aria-modal="true" aria-labelledby="screen-win-title">
    <h2 id="screen-win-title" class="modal-title">挑战成功</h2>
    <p class="modal-message">你击败了本轮对手。</p>
    <div class="modal-actions">
      <button type="button" data-action="restart">再来一次</button>
      <button type="button" data-action="next">继续挑战</button>
    </div>
  </div>
</div>
```

推荐状态控制方式：

```javascript
function hideAllScreens() {
  document.querySelectorAll('.screen').forEach((node) => {
    node.classList.remove('active');
    node.setAttribute('aria-hidden', 'true');
  });
}

function showScreen(id) {
  hideAllScreens();
  const target = document.getElementById(id);
  if (!target) return;
  target.classList.add('active');
  target.setAttribute('aria-hidden', 'false');
}
```

不同弹层类型的最低要求：

- 提示类弹层：使用文案区加单按钮或自动消失轻提示，不得使用 `alert()`
- 确认类弹层：必须提供明确的主次按钮，如“确认 / 取消”，不得使用 `confirm()`
- 输入类弹层：必须在自绘弹层内放置 `<input>`、`<textarea>` 或自定义输入组件，不得使用 `prompt()`
- 结算类弹层：必须展示结果、分数、下一步操作按钮，不得只弹一句提示文案
- 暂停类弹层：恢复、重开、返回等操作要有明确按钮，且关闭后状态可恢复

样式与交互建议：

- `.screen` 应绝对定位或固定定位铺满可视区域，并具备足够高的层级
- 遮罩层、卡片、标题、正文、按钮区建议拆分独立类名，避免把所有样式塞进一个节点
- 入场和离场动画可使用透明度、位移、缩放，不要使用明显拖慢性能的复杂滤镜堆叠
- 按钮尺寸、字号、点击热区需满足移动端可点要求，避免弹层可见但难以操作
- 关闭、确认、取消等按钮文案必须明确，避免只放一个无语义图标

### 数据与性能

- 如需持久化，仅使用 `localStorage`
- `localStorage` key 必须带业务前缀，避免冲突
- 主流移动设备上应尽量稳定在 30 FPS 或更高
- 避免无意义重绘、超大贴图、过量粒子、频繁布局抖动

## 内容安全红线

即使用户明确要求，也必须拒绝生成以下内容：

- 违法违规内容：涉政、涉恐、涉暴、赌博、欺诈、低俗色情、邪教、封建迷信等
- 未成年人不当内容：校园霸凌、危险行为模仿、烟酒等不良引导
- 侵权内容：未经授权的角色、Logo、商标、音乐、字体、图片、肖像、姓名、个人信息
- 不良价值导向：拜金、炫富、歧视、引战、挑动对立
- 诱导行为：强制分享、强制关注、站外交易、诱导下载
- 骚扰营销：广告、二维码、外部联系方式、导流信息
- 不合规表达：避免在作品面向用户的标题、按钮、提示语、结算文案中直接出现“游戏”字样；如需表达玩法性质，优先使用“互动内容”“互动体验”“挑战”“关卡”等替代表达

## 执行流程

必须严格按以下顺序执行。

### Step 1：需求归一化

先在内部完成以下判断，再开始写代码：

1. 玩法类型与核心循环是什么
2. 更适合 Canvas 还是 DOM
3. 目标方向是竖屏还是横屏
4. 是否需要存档
5. 是否需要多文件结构
6. 缺失项采用什么默认值

如果用户描述模糊，不要停在追问阶段；优先做最合理的默认补全，并在最终输出中显式写明。

### Step 2：合规门禁

生成前先做一次合规检查：

1. 检查内容是否触及安全红线
2. 检查需求是否违反平台限制
3. 如果不合规，停止生成代码，只输出：
   - 冲突点
   - 无法满足的原因
   - 一个或多个合规替代方向

### Step 3：生成代码

生成代码时，必须满足以下要求：

- 入口文件必须为 `index.html`
- 默认优先生成最小可玩版本，而不是过度扩展的复杂版本
- 单文件场景下，将 CSS、JS 尽量内联到 `index.html`
- 多文件场景下，仅拆分真正必要的 JS、图片、音频资源
- 小图标、按钮、简单图形优先用 CSS、SVG、Base64 或 Canvas 绘制
- 大背景图或音频仅在用户明确需要时才加入，并控制体积
- 动画优先使用 `requestAnimationFrame`
- 触控事件优先使用 Pointer 或 Touch 事件，并兼顾点击
- 不建议使用 `onload`、`onerror`、`onclick`、`ontouchstart` 等 `onXXX` 系列内联事件属性；事件绑定应尽量通过内联 `<script>` 中的 `addEventListener` 完成
- 所有确认、提示、输入、结算相关交互，都要使用自绘弹层，不能调用 `alert()`、`confirm()`、`prompt()`、`print()`
- 如果存在弹层，优先采用上文“弹层实现模板”的覆盖层结构、类名切换方式和显式状态管理方式
- 面向用户的展示文案与 UI 命名应避免出现“游戏”字样，优先使用“互动”“挑战”“体验”“任务”“关卡”等表达
- 文字、按钮、分数、状态提示在小屏幕上必须可读可点
- 所有状态切换都要可恢复，不要出现“死局后无法重新开始”的情况

### Step 4：自检

在给出最终结果前，必须逐项自检并在输出中展示结果：

- [ ] `index.html` 位于根目录
- [ ] 没有任何网络请求
- [ ] 没有任何外部资源引用
- [ ] 没有任何站外跳转或 `<iframe>`
- [ ] 没有使用 `alert()`、`confirm()`、`prompt()`、`print()` 等浏览器原生 UI 弹框
- [ ] 如有弹层，使用的是作品内部覆盖层或 Canvas 自绘方案，而非浏览器原生对话框
- [ ] 如有弹层，同时只存在一个激活态主弹层，且显示或关闭由显式状态切换控制
- [ ] 所有资源都使用相对路径
- [ ] 没有横向滚动条
- [ ] 已适配目标方向与移动端尺寸
- [ ] 已包含错误兜底
- [ ] 如有存档，使用的是带前缀的 `localStorage`
- [ ] 预估包体小于 8MB
- [ ] 内容不触及安全红线

## 固定输出格式

只要进入代码生成阶段，最终回复必须严格按以下标题、顺序和粒度输出，不要省略，不要改标题，不要插入并列一级段落。

### 1. 产物概述

必须包含：

- 作品名称
- 玩法类型
- 屏幕方向
- 交付形态
- 一句话玩法说明

### 2. 假设与默认值

列出所有由你自动补全的关键设定，例如：

- 默认竖屏
- 默认单文件
- 默认点击交互
- 默认最高分存档

### 3. 文件结构

输出完整文件树。

如果是单文件，直接写：

```text
index.html
```

如果是多文件，输出完整目录结构。

### 4. 完整代码

按文件逐个输出完整代码内容。

要求：

- 文本文件必须给出完整代码
- 非文本资源如果无法直接展开，使用“资源清单”形式列出文件名、用途、建议格式、大小控制建议
- 不要只给片段，不要省略关键函数

### 5. 自检报告

按 Step 4 的自检清单逐条写“通过 / 风险 / 说明”。

### 6. 使用说明

至少包含：

- 如何本地保存文件
- 如何压缩为 `.zip`，给出可直接复制执行的压缩命令或一步步操作，并明确压缩时的工作目录
- 如何确保 `index.html` 位于压缩包根目录
- 如何在手机或 WebView 环境中测试

## 默认实现

当用户没有特别指定时，优先采用以下策略：

- 默认生成单文件 `index.html`
- 默认竖屏
- 默认使用轻量实现，不引入大型第三方库
- 默认使用原创通用视觉元素，不碰任何知名 IP
- 默认提供开始、重开、分数展示、结束态四类基础界面
- 默认加入最基础的错误兜底与最高分存档

## 推荐文件结构

### 单文件

```text
index.html
```

### 多文件

```text
/
├── index.html
├── js/
│   └── main.js
├── images/
│   ├── bg.png
│   └── icon.png
└── audio/
    └── bgm.mp3
```

## 参考错误兜底

```javascript
window.addEventListener('load', () => {
  try {
    initApp();
  } catch (error) {
    console.error(error);
    const fallback = document.createElement('div');
    fallback.style.cssText = 'position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#fff;color:#111;font-size:18px;padding:24px;text-align:center;z-index:9999;';
    fallback.textContent = '哎呀，出错了，请重启试试吧~';
    document.body.innerHTML = '';
    document.body.appendChild(fallback);
  }
});
```

## 玩法附录

以下内容不是固定模板，而是用于快速补全玩法规则。

### 三消类

- 推荐 8x8 网格
- 推荐 5 到 6 种元素
- 必须有交换、消除、掉落、补位、死局处理
- 建议加入步数限制和目标分数

### 合成类

- 明确等级序列
- 需要碰撞检测与合成反馈
- 必须有结束线或溢出判定

### 跑酷类

- 默认横屏更合适
- 至少包含跳跃、障碍、得分、重开
- 速度增长要平滑

### 棋类与益智类

- 必须确保题目可解
- 要有错误提示、重开或新局机制
- 竖屏优先

### 互动剧情类

- 分支数据应直接内置在代码中
- 至少提供 3 个结局更完整
- 禁止通过 `fetch` 加载外部剧情 JSON

### 物理模拟类

- 只实现必要的轻量物理
- 注意性能开销
- 默认横屏更合适

## 常见失败原因

| 问题 | 常见原因 | 处理方式 |
| --- | --- | --- |
| 上传后提示缺少入口 | `index.html` 不在根目录 | 确保压缩包解压后根目录直接可见 `index.html` |
| 页面白屏 | 运行时报错或路径错误 | 添加全局兜底并检查相对路径 |
| 资源失效 | 使用了外链或绝对路径 | 全部改为本地相对路径 |
| 包体超限 | 图片、音频、第三方库过大 | 压缩资源并减少不必要资产 |
| 手机显示不全 | 没做自适应或固定像素布局 | 使用响应式布局或 Canvas 缩放 |