myapp-creator

Version: 1.0.31

让用户用一句话生成可独立打开的单文件 HTML 应用或文档，并落库到 fe-service。

本 skill 不主动调用 LLM，所有 HTML / app_name / features 由调用本 skill 的 LLM agent 直接产出后传入工具。

> ⚠️ 最高优先级规则（违反即为严重错误）：

> 1. 游戏类应用 绝对禁止 包含任何形式的 AI 对手、人机对战、电脑自动下棋/出牌。棋类/对战类游戏 只允许 双人同屏轮流操作，不实现任何计算机决策逻辑。

> 2. 所有应用 绝对禁止 出现"导出"、"打印"、"保存"按钮或相关功能代码。

触发条件

当用户需求匹配以下任一类别时，本 skill 参与：

应用类（交互式 HTML）

关键词：应用、app、小游戏、游戏、网页、页面、工具、计算器、时钟、日历、翻译器、转换器

示例：

• "做一个贪吃蛇游戏"
• "创建一个番茄钟"
• "生成一个天气页面"
• "给我做一个马里奥游戏"
• "帮我做一个单位转换工具"

文件类（文档式 HTML）

关键词：文档、文件、word、ppt、演示文稿、slides、pdf、excel、xlsx、表格、报告、简历、周报、日报、总结、方案、计划书

示例：

• "生成一个项目周报"
• "做一个自我介绍PPT"
• "创建一个预算表格"
• "帮我写一份简历"
• "保存一个会议纪要文档"

不触发（交给龙虾其他能力）

• 图片/绘画类："画一张…"、"生成一张图片…"
• 音频/音乐类："生成一首歌…"、"合成语音…"
• 视频类："剪辑一个…"、"生成视频…"
• 小说/纯文本类："写一篇小说…"、"写一首诗…"（纯创作不产出可交互文件）
• 纯问答/聊天/闲聊

判断规则

用户意图是"产出一个可独立打开、保存下来反复使用的文件或应用"时触发本 skill。

如果用户只是想让你"说一段话"或"回答问题"，不要触发。

触发标记（兼容旧入口）

以下前缀仍可直接触发，不需要语义判断：

• [create_app]<描述> → 创建新应用/文件
• [update_app:app_id=]<描述> → 更新已有应用/文件
• [install_check:session=] → 安装自检（仅调 myapp_ping）
• 不带上述前缀 → 按语义判断是否匹配触发条件

创建流程

最长等待 300s。若 300s 内不能完成 HTML 生成与 myapp_register 调用，直接回复"应用创建失败，请稍后重试"。

1. 解析用户描述，判断类型（应用类 or 文件类），产出：
• app_name：应用/文件名，≤30 字
• features：JSON 字符串数组，3~8 条，每条 ≤30 字，描述具体功能/内容要点
• html_content：完整可独立打开的单文件 HTML（按类型选择模板风格）

1. HTML 通用约束：
• 自包含：CSS/JS 全部内联在

  ```

  • changeDir(dx, dy) 和 togglePause() 替换为游戏实际函数名；坐标映射类游戏中方向键可改为触发"持续向该方向移动"逻辑
  • 按钮尺寸用 vmin 单位，960px 小屏到 2560px 大屏均可用
  • 暂停键必须在中心格，禁止移到键盘外部单独放置

  游戏角色视觉规范（卡通可爱风格，禁止只画纯色圆点/方块）：

  • 贪吃蛇：蛇头用圆角矩形 + 两个白色眼睛（小圆 + 黑色瞳孔）+ 根据朝向旋转；蛇身用渐变色圆角矩形，节节之间颜色略有变化；食物用苹果/草莓等图形（红色圆 + 绿色小叶子）
  • 贪吃蛇蛇头绘制示例（Canvas 2D）：

  ```js

  function drawHead(ctx, x, y, w, h, dir) {

  ctx.save();

  ctx.translate(x + w/2, y + h/2);

  const angle = {right:0, down:Math.PI/2, left:Math.PI, up:-Math.PI/2}[dir] || 0;

  ctx.rotate(angle);

  // 头部圆角矩形

  ctx.fillStyle = '#2ecc71';

  roundRect(ctx, -w/2, -h/2, w, h, w*0.3);

  ctx.fill();

  // 眼睛

  [[-w0.15, -h0.15],[w0.15, -h0.15]].forEach(([ex,ey])=>{

  ctx.fillStyle='#fff'; ctx.beginPath(); ctx.arc(ex,ey,w0.12,0,Math.PI2); ctx.fill();

  ctx.fillStyle='#222'; ctx.beginPath(); ctx.arc(ex+w0.03,ey,w0.06,0,Math.PI*2); ctx.fill();

  });

  ctx.restore();

  }

  function roundRect(ctx,x,y,w,h,r){

  ctx.beginPath();ctx.moveTo(x+r,y);ctx.lineTo(x+w-r,y);ctx.arcTo(x+w,y,x+w,y+r,r);

  ctx.lineTo(x+w,y+h-r);ctx.arcTo(x+w,y+h,x+w-r,y+h,r);ctx.lineTo(x+r,y+h);

  ctx.arcTo(x,y+h,x,y+h-r,r);ctx.lineTo(x,y+r);ctx.arcTo(x,y,x+r,y,r);ctx.closePath();

  }

  ```

  • 俄罗斯方块：方块用渐变色 + 高光边框，不同形状用不同颜色
  • 飞机大战：飞机用多边形或 SVG path 绘制，子弹用细长椭圆，敌机颜色与玩家区分；子弹必须自动连续发射，禁止要求玩家手动点击射击；操作说明写「触摸屏幕移动飞机，子弹自动发射」
  • 通用原则：所有游戏角色必须有辨识度，能看出是什么，不能只是纯色几何形状

  平台跳跃 / 跑酷类游戏触摸控制规范（马里奥、跑酷等左右移动+跳跃类游戏必须遵守）：

  > 核心设计：左右半屏控制方向，上滑触发跳跃，斜滑（如右上方）同时触发移动+跳跃，完全模拟实体手柄的拇指操作。

  ```js

  let tSX = 0, tSY = 0; // 触摸起点，每次 touchstart 或跳跃触发后重置

  canvas.addEventListener('touchstart', e => {

  e.preventDefault();

  const t = e.touches[0];

  tSX = t.clientX; tSY = t.clientY;

  }, {passive: false});

  canvas.addEventListener('touchmove', e => {

  e.preventDefault();

  const t = e.touches[0];

  const dx = t.clientX - tSX;

  const dy = t.clientY - tSY; // 负值 = 向上

  // 左右移动：根据手指当前位置在画布左/右半区判断方向

  const rect = canvas.getBoundingClientRect();

  if (t.clientX < rect.left + rect.width / 2) {

  moveLeft();

  } else {

  moveRight();

  }

  // 上滑检测跳跃：阈值 20px，触发后立即重置 tSY 防止重复触发

  if (dy < -20) {

  jump();

  tSY = t.clientY; // 重置参考点，允许同一次触摸连续触发（斜滑等）

  }

  }, {passive: false});

  canvas.addEventListener('touchend', e => {

  stopMove(); // 手指抬起停止移动

  }, {passive: false});

  ```

  • dy < -20（负值向上）触发跳跃，同一次 touchmove 序列可多次触发（重置 tSY）
  • 斜向上滑（如右上方）会同时执行 moveRight() + jump()，天然支持斜跳
  • 阈值 20px 优于 28px，更灵敏，适合快节奏横板游戏
  • 右栏方向键：◀▶ 控制移动，▲ 触发跳跃，▼ 可用于下蹲/快速下落
  • 触摸坐标映射为主控，方向键为辅助——两套控制并行，不互斥
  • 防止页面滚动干扰游戏：游戏容器加 touch-action:none，Canvas 加 { passive: false } 并 e.preventDefault()
  • 游戏暂停/重启按钮触摸区域 ≥ 44×44px
  • 禁止在游戏主循环中使用 alert()，改用页面内自定义弹窗显示胜负信息

  跳跃 / 平台类游戏角色定位规范（跳一跳、跑酷、马里奥等必须遵守）：

  > ⚠️ 已知 Bug 根因：用 ph = PLAYER_H / squish 作为绘制高度来定位头部/身体，当落地弹跳动画触发 squish ≠ 1 时，ph 变大，角色视觉上"沉入"平台下方。

  正确做法：py 始终表示角色脚底的 y 坐标（即站在平台顶面），squish 只影响宽度（身体变宽/变窄），绝不影响高度定位：

  ```js

  // py = 脚底 y（始终贴平台顶面，不受 squish 影响）

  // squish: 落地压缩系数，1=正常，>1=横向压扁（宽变大、高不变）

  function drawPlayer(ctx, px, py, squish) {

  const W = PLAYER_W * squish; // 宽度随 squish 变化

  const H = PLAYER_H; // 高度固定，不除以 squish

  const x = px - W / 2;

  const y = py - H; // 脚底 py 往上量固定 PLAYER_H

  // 绘制身体：rr(ctx, x, y, W, H, radius)

  }

  ```

  • squish 动画只修改 W（或同时等比缩小 H 但必须同步上移 y = py - H），确保脚底始终在 py
  • 禁止写 y = py - PLAYER_H / squish，这会在 squish > 1 时让角色上移，squish < 1 时下沉

  > ⚠️ 强制要求：所有游戏类应用必须内置难度阶段机制，默认从简单难度开始，通过 10 关后自动升级为中等难度，通过 20 关后升级为困难。以飞机大战为参照基准，其他游戏按比例换算。

  难度分级标准（以飞机大战为基准示例）：

  | 阶段 | 关卡范围 | 敌机坠落速度 | 子弹发射间隔 | 过关目标分 | 每关目标分增量 |

  |------|---------|------------|------------|---------|------------|

  | 简单（Easy） | 第 1~10 关 | 基础速度 × 1/2 | 300ms/发 | 100 分 | +10 分/关 |

  | 中等（Medium）| 第 11~20 关 | 基础速度 × 80% | 200ms/发 | 200 分 | +10 分/关 |

  | 困难（Hard） | 第 21 关起 | 基础速度 | 100ms/发 | 300 分 | +10 分/关 |

  • 难度参数必须用变量控制，根据关卡号计算，禁止魔法数字硬编码：

  ```js

  let level = 1; // 每通关 +1

  function getDifficulty(level) {

  if (level <= 10) return {

  speedMul: 1/2, bulletInterval: 300,

  targetScore: 100 + (level - 1) * 10 // 100, 110, 120...

  };

  if (level <= 20) return {

  speedMul: 0.8, bulletInterval: 200,

  targetScore: 200 + (level - 11) * 10 // 200, 210, 220...

  };

  return {

  speedMul: 1, bulletInterval: 100,

  targetScore: 300 + (level - 21) * 10 // 300, 310, 320...

  };

  }

  ```

  • 不设硬性关卡上限，进入困难阶段后目标分持续增加，让玩家可以持续挑战
  • 关卡信息（当前关卡、当前难度名称、得分 / 目标分、生命）必须在右栏顶部实时显示

  文档/Word/PDF 风格：

  • 容器使用响应式宽度：max-width: min(1200px, 92vw); margin: 3vh auto; padding: 4vh 5vw
  • 在 960px 小屏上内容几乎满宽，在 1920px+ 大屏上居中且不超过 1200px
  • 正文字号 clamp(14px, 1.8vw, 18px)，标题 clamp(20px, 3vw, 32px)
  • 清晰的标题/段落/列表排版，使用衬线或无衬线字体
  • 页面顶部可显示文档标题和日期

  PPT/演示文稿风格：

  • 引入 reveal.js：
  • 引入主题：
  • 引入 JS：
  • 内容用
    ...
    包裹
  • 每个
    是一页幻灯片
  • 初始化：

  reveal.js 内部会等比缩放到实际视口，960×600 基准保证所有设备文字清晰不溢出

  • 5~15 页为宜

  Excel/表格风格：

  • 容器 width:100vw; height:100vh; overflow:auto; box-sizing:border-box; padding:2vh 3vw
  • HTML 宽度 100%，带 border 和交替行色
    表头字号 clamp(12px, 1.6vw, 16px)，单元格字号 clamp(12px, 1.4vw, 15px)
    表头点击可排序（内联 JS 实现）
    单元格 contenteditable="true" 可编辑

    所有类型通用禁止项：

    • 禁止出现"导出"、"打印"、"保存"功能按钮
    • 禁止 @media print 相关样式
    • 禁止 window.print()、文件下载等功能
    1. 图标生成（icon_base64）：
    • 产出一个 256×256 的 SVG 图标
    • 风格：圆角矩形纯色背景 + 居中的主题图形（用 SVG path/circle/rect 绘制，禁止使用 或 emoji）
    • 背景用饱和度高的纯色，中间图形用与背景对比强烈的颜色（可用白色、也可用多色彩搭配，参考 App Store 图标风格）
    • SVG 文本做 base64 编码后传入 icon_base64（不带 data:image/svg+xml;base64, 前缀）
    • SVG 原文不超过 3KB，禁止使用 元素或 emoji
    1. 【必须执行】HTML 自检 — 提交前逐项检查：

    生成 html_content 后，必须在脑内逐项检查以下条件，任一不通过则必须修改代码后再提交：

    自检项 A — 禁止 AI/电脑对手（仅游戏/棋类/对战类需检查）：

    • [ ] 代码中是否存在任何"电脑走棋/出牌/移动"的函数？（如 computerMove, aiMove, makeAIMove, botPlay, autoPlay, cpuTurn）→ 若有，删除整个函数及其调用
    • [ ] 代码中是否存在 minimax, alphaBeta, evaluate, bestMove, getRandomMove, Math.random() 用于选择落子位置？→ 若有，删除
    • [ ] 代码中是否存在"难度选择"（easy/medium/hard）或"人机/人人"模式切换？→ 若有，删除，只保留双人模式
    • [ ] 游戏流程是否为：玩家A操作 → 切换到玩家B → 玩家B操作 → 切换回玩家A → 循环？→ 必须是
    • [ ] 是否有任何 setTimeout/setInterval 用于延迟执行电脑的操作？→ 若有，删除

    自检项 B — 禁止导出/打印/保存（所有类型需检查）：

    • [ ] 是否存在"导出"、"打印"、"保存"、"下载"按钮或菜单项？→ 若有，删除
    • [ ] 是否存在 window.print(), document.execCommand('SaveAs'), URL.createObjectURL, download 属性？→ 若有，删除

    自检项 C — Android 8.1 WebView 兼容（所有类型需检查）：

    • [ ] 是否使用了 Chrome 86+ 才支持的 CSS/JS API（@property、content-visibility、structuredClone、??=/||=/&&= 赋值运算符）？→ 若有，替换为兼容写法
    • [ ] 是否使用了 ctx.roundRect()？→ Chrome 99+，必须替换为自定义 rr() helper（用 arcTo 实现）
    • [ ] Canvas 内是否使用了 emoji 字符（fillText 中含 🔥❤️ 等）？→ WebView 字体渲染异常，必须替换为纯文字或几何图形
    • [ ] 游戏布局是否为横版左右两栏（左栏游戏区、右栏控制区）？→ 若是竖版堆叠，必须改为横版
    • [ ] 右栏有 #game-preview（下一块/预览区）时，是否已去掉 #leaderboard 和 #instructions？→ 预览区与排行/说明互斥，有预览时不展示排行和说明。无预览区的游戏中，排行/说明用 flex:1 1 0;min-height:0 + h3 固定 + .sb-inner 内滚动。#controls 始终 flex:0 0 auto 固定底部
    • [ ] Canvas CSS 是否用 position:absolute;top:0;left:0;width:100%;height:100% 撑满左栏，而非依赖 flex 布局？→ 若只用 width:100%;height:100% 而无 position:absolute，必须修正
    • [ ] Canvas 尺寸初始化是否在 window.load + 双层 requestAnimationFrame 内执行，且用 offsetWidth 做兜底（防止 Android 8.1 WebView 初始 clientWidth 为 0）？→ 若直接在顶层读 clientWidth，必须改为延迟初始化模板
    • [ ] 需要方向控制的游戏：是否在 Canvas 上绑定了 touchstart/touchmove 做坐标直接映射（主控），且右下角仍保留方向键 + 暂停按钮（辅助）？→ 若只有方向按钮而无触摸坐标映射，必须补充
    • [ ] 飞机大战类游戏：子弹是否自动连续发射（setInterval 或主循环计时），而非要求玩家手动点击射击？→ 若需要手动触发，必须改为自动发射
    • [ ] 俄罗斯方块/消除类游戏：①初始下落间隔是否为800ms（经典NES速度）？②贴地后是否立刻lock+spawn（零等待，无LOCK_DELAY缓冲）？③spawnPiece()是否将新方块赋值给全局变量（cur=shape）？→ 若不符合，按专项规则修正
    • [ ] 游戏内的开始/结束/暂停遮罩层是否用 position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center 居中（禁止用 inset:0，Chrome 85 不支持）？→ 若用 inset:0 或固定像素定位，内容会在智能屏上贴左上角，必须修正
    • [ ] 游戏是否实现了三段式难度（简单1~10关：速度×1/2、300ms/发、100+10×n分 → 中等11~20关：速度×80%、200ms/发、200+10×n分 → 困难21关起：基础速度、100ms/发、300+10×n分），且第1关使用简单参数？→ 若全程同一难度或开局就很快，必须按难度分级模板修正
    • [ ] 游戏角色是否有视觉辨识度（蛇头有眼睛、食物有形状等），而不是纯色圆点/方块？→ 若只是纯色几何形，必须改为卡通风格
    • [ ] 是否使用了原生 alert()/confirm()/prompt()？→ 若有，改为页面内自定义弹窗
    • [ ] 游戏容器/Canvas 是否加了 touch-action:none 并在 touch 事件中调用 e.preventDefault()？→ 若未处理，补充
    • [ ] 可点击/可触摸元素的触摸区域是否 ≥ 44×44px？→ 若不足，调整尺寸
    • [ ] 跳跃/平台类游戏（跳一跳、跑酷等）：绘制角色时是否用固定常量 PLAYER_H 定位脚底坐标（py 为脚底 y，头顶为 py - PLAYER_H），而非用 PLAYER_H / squish 等变形高度定位？→ squish（落地压缩动画）只能影响角色宽度/变窄，绝不能影响脚底 py 的计算，否则 squish≠1 时角色视觉上会"沉入"平台下方

    ⚠️ 如果自检发现违规代码，不要提交，先修正 html_content 再继续下一步。

    5.5. 【必须执行】JS 语法验证（应用类/游戏类必须，文件类可选）：

    在调用 myapp_register 之前，用 exec 工具对 html_content 中的

    Skill工具集 © 2026