name	super-dev-seeai
description	Activate the Super Dev SEEAI competition mode inside Codex CLI.
when_to_use	Use when the user says /super-dev-seeai, super-dev-seeai:, or super-dev-seeai： followed by a requirement. Activate the fast competition delivery mode.
version	2.4.0

Super Dev SEEAI - 赛事极速版 (Codex)

关键约束提醒（每次操作前必读）

以下规则在整个开发过程中始终有效，不得以任何理由违反：

图标系统: 功能图标只能来自 Lucide / Heroicons / Tabler 图标库。绝对禁止使用 emoji 表情作为功能图标、装饰图标或临时占位。如果你发现自己即将输出包含 emoji 的 UI 代码，停下来，改用图标库组件。
AI 模板化禁令: 禁止紫/粉渐变主色调、禁止 emoji 图标、禁止无信息层级的卡片墙、禁止默认系统字体直出。
代码即交付: 不允许“先用 emoji 顶上后面再换”。图标库必须在第一行 UI 代码前就锁定。
自检规则: 在向用户展示任何 UI 代码或预览前，必须自检源码中不存在任何 emoji 字符（Unicode range U+2600-U+27BF, U+1F300-U+1FAFF）。发现后先替换为正式图标库再继续。

Direct Activation Rule（强制）

If this skill is invoked, Super Dev SEEAI competition mode is already active.
Do not spend a turn explaining the skill or deciding whether to enter the workflow.
Treat this as a distinct fast-delivery contract optimized for time-boxed competition work.
Keep quality, but compress the path aggressively after Spec.

触发方式（强制）

Treat super-dev-seeai: <需求描述> and super-dev-seeai：<需求描述> as the AGENTS-driven natural-language SEEAI entry.
Treat $super-dev-seeai as the explicit Codex CLI Skill entry for the competition mode.
In Codex App/Desktop, selecting /super-dev-seeai from the slash Skill list is the official app entry.
Do not route SEEAI requests back to ordinary chat or to the full standard Super Dev contract.

Runtime Contract（强制）

Super Dev SEEAI is still Super Dev governance, but with a competition-fast contract.
The host remains responsible for model execution, tools, search, terminal, and edits.
Use Codex native web/search/edit/terminal capabilities for research, building, and validation.
Keep local super-dev CLI for governance artifacts only when it materially helps the fast path.
The mode is designed for 30-minute showcase builds such as a polished landing page, mini-game, or focused demo tool.
Default decision rule: protect one demo path first, one wow point second, and only then add extra engineering depth.

首轮响应契约（强制）

首次触发时第一轮回复必须说明：Super Dev SEEAI 赛事模式已激活，当前阶段是 research。
先快速理解需求，再做极短顺位思考：作品类型、评委 wow 点、必须完成项、主动放弃项。
如果用户需求模糊，最多只补 1 个关键问题；能合理假设时直接给出假设并推进，不展开长澄清。
先完成 fast research，再写 compact research / PRD / architecture / UIUX。
文档确认后创建 compact Spec，然后直接进入 full-stack sprint。
不要在 SEEAI 模式里重新切回标准 Super Dev 的 preview confirm / 长质量闭环。
若会落盘 workflow state，必须把 flow_variant = seeai 一起写入。

首轮输出模板（强制）

SEEAI 首轮回复不要展开成长讨论。优先用极短结构锁定范围，然后立即进入 research：

作品类型：官网类 / 小游戏类 / 工具类，三选一。
评委 wow 点：本次成品最值得被记住的一个亮点。
P0 主路径：半小时内必须真正跑通的一条演示路径。
主动放弃项：本轮明确不做的部分，避免范围失控。
关键假设：只有在用户没说清时才写，最多 1 到 2 条。

如果需求不缺关键信息，就不要反问。直接按这个模板给出判断，然后开始 fast research 和 compact 文档。

比赛短文档模板（强制）

SEEAI 的文档必须真实落盘到 output/*，但只保留比赛需要的信息：

research.md：题目理解、目标观众、参考风格、评委 wow 点、风险与主动放弃项。
prd.md：作品目标、P0 主路径、P1 wow 点、P2 可选项、非目标。
architecture.md：页面/玩法主循环、技术栈、数据流、是否需要最小后端、降级方案。
uiux.md：视觉关键词、主 KV、页面骨架、关键交互、动效重点、设计 token。
spec：只保留一个 sprint 清单，按 P0 -> P1 -> polish 排序。

技术栈快速决策矩阵（核心）

收到题目后，根据作品类型立刻选择技术栈。不纠结，不混搭。

决策树

题目类型？
|-- 小游戏 / 互动动画
|   |-- 纯2D休闲 -> HTML Canvas + Vanilla JS（零依赖，开箱即用）
|   |-- 复杂2D游戏 -> Phaser.js（场景管理、物理引擎、精灵动画一体化）
|   `-- 3D/沉浸感 -> Three.js + React Three Fiber（如果用React）
|
|-- 官网 / 展示页 / 落地页
|   |-- 纯静态展示 -> HTML + Tailwind CDN + GSAP/Framer Motion
|   |-- 需要路由/多页 -> React + Vite + Tailwind + Framer Motion
|   `-- 需要SSR/SEO -> Next.js + Tailwind + Framer Motion
|
|-- 工具 / 应用
|   |-- 纯前端工具 -> React + Vite + Tailwind + Zustand
|   |-- 需要后端API -> React前端 + Express/Fastify后端
|   `-- 实时协作 -> React + Socket.io / WebSocket
|
`-- 数据看板 / 可视化
    |-- 简单图表 -> React + Recharts / Chart.js
    |-- 复杂交互 -> React + D3.js
    `-- 实时数据 -> React + ECharts + WebSocket

赛事推荐组合（已验证能30分钟内交付）

组合	适用场景	CDN快速启动	需要构建
HTML+Tailwind CDN+GSAP	展示页/官网	是	否
React+Vite+Tailwind+Framer	工具/应用/多页	否	是
HTML Canvas+Vanilla JS	2D小游戏/互动	是	否
Phaser.js	复杂2D游戏	是	否
Three.js	3D展示/沉浸	是	否

赛事铁律: 能用 CDN 零构建的优先用 CDN，省掉构建和配置时间。

小游戏开发模板库（核心）

模板1: HTML Canvas 游戏骨架

适用于所有 2D 休闲游戏（贪吃蛇、打砖块、弹球、飞机大战等）。骨架包含：Canvas 初始化、游戏主循环、HUD、菜单/结束 Overlay、localStorage 最高分。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>GAME_TITLE</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { background: #0a0a0a; display: flex; justify-content: center; align-items: center; min-height: 100vh; font-family: 'Inter', sans-serif; }
    #gameContainer { position: relative; }
    canvas { display: block; border-radius: 12px; box-shadow: 0 0 40px rgba(59,130,246,0.3); }
    #hud { position: absolute; top: 0; left: 0; right: 0; padding: 16px 24px; display: flex; justify-content: space-between; color: #fff; font-size: 14px; font-weight: 600; pointer-events: none; z-index: 10; }
    #overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; background: rgba(0,0,0,0.8); border-radius: 12px; z-index: 20; transition: opacity 0.3s; }
    #overlay.hidden { opacity: 0; pointer-events: none; }
    #overlay h1 { color: #fff; font-size: 36px; margin-bottom: 8px; }
    #overlay p { color: #94a3b8; margin-bottom: 24px; }
    #overlay button { padding: 12px 32px; border: none; border-radius: 8px; background: #3b82f6; color: #fff; font-size: 16px; font-weight: 600; cursor: pointer; transition: transform 0.15s, background 0.15s; }
    #overlay button:hover { transform: scale(1.05); background: #2563eb; }
    .score-display { background: rgba(255,255,255,0.1); padding: 6px 16px; border-radius: 20px; backdrop-filter: blur(8px); }
  </style>
</head>
<body>
  <div id="gameContainer">
    <canvas id="gameCanvas"></canvas>
    <div id="hud">
      <div class="score-display">Score: <span id="score">0</span></div>
      <div class="score-display">Level: <span id="level">1</span></div>
      <div class="score-display">Best: <span id="best">0</span></div>
    </div>
    <div id="overlay">
      <h1>GAME_TITLE</h1>
      <p>游戏描述</p>
      <button id="startBtn">Start Game</button>
    </div>
  </div>
  <script>
    const CONFIG = { width: 800, height: 600, bgColor: '#0a0a0a', accentColor: '#3b82f6', fps: 60 };
    const STATE = { MENU: 0, PLAYING: 1, PAUSED: 2, OVER: 3 };
    let gameState = STATE.MENU, score = 0, level = 1;
    let bestScore = parseInt(localStorage.getItem('game_best') || '0');
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');
    canvas.width = CONFIG.width; canvas.height = CONFIG.height;
    const keys = {};
    document.addEventListener('keydown', e => { keys[e.key] = true; e.preventDefault(); });
    document.addEventListener('keyup', e => { keys[e.key] = false; });
    let lastTime = 0;
    function gameLoop(timestamp) {
      const dt = (timestamp - lastTime) / 1000; lastTime = timestamp;
      ctx.fillStyle = CONFIG.bgColor;
      ctx.fillRect(0, 0, CONFIG.width, CONFIG.height);
      if (gameState === STATE.PLAYING) { update(dt); draw(); }
      requestAnimationFrame(gameLoop);
    }
    function update(dt) { /* game logic */ }
    function draw() { /* render */ }
    function addScore(pts) {
      score += pts;
      document.getElementById('score').textContent = score;
      if (score > bestScore) {
        bestScore = score; localStorage.setItem('game_best', bestScore);
        document.getElementById('best').textContent = bestScore;
      }
    }
    function startGame() {
      score = 0; level = 1; gameState = STATE.PLAYING;
      document.getElementById('overlay').classList.add('hidden');
    }
    function gameOver() {
      gameState = STATE.OVER;
      const o = document.getElementById('overlay');
      o.classList.remove('hidden');
      o.querySelector('h1').textContent = 'Game Over';
      o.querySelector('p').textContent = 'Final Score: ' + score;
      o.querySelector('button').textContent = 'Play Again';
    }
    document.getElementById('startBtn').addEventListener('click', startGame);
    document.getElementById('best').textContent = bestScore;
    requestAnimationFrame(gameLoop);
  </script>
</body>
</html>

模板2: 碰撞检测工具箱

// 矩形碰撞
function rectCollision(a, b) {
  return a.x < b.x + b.w && a.x + a.w > b.x && a.y < b.y + b.h && a.y + a.h > b.y;
}
// 圆形碰撞
function circleCollision(a, b) {
  const dx = a.x - b.x, dy = a.y - b.y;
  return dx*dx + dy*dy < (a.r + b.r) * (a.r + b.r);
}
// 粒子效果
class Particle {
  constructor(x, y, color) {
    this.x=x; this.y=y; this.vx=(Math.random()-0.5)*8; this.vy=(Math.random()-0.5)*8;
    this.life=1; this.decay=0.02+Math.random()*0.03; this.size=2+Math.random()*4; this.color=color;
  }
  update() { this.x+=this.vx; this.y+=this.vy; this.life-=this.decay; this.vy+=0.1; }
  draw(ctx) {
    ctx.globalAlpha=this.life; ctx.fillStyle=this.color;
    ctx.fillRect(this.x-this.size/2, this.y-this.size/2, this.size, this.size);
    ctx.globalAlpha=1;
  }
  get dead() { return this.life <= 0; }
}

模板3: 常见游戏模式速查

游戏类型	核心循环	关键对象	反馈重点
贪吃蛇	移动->吃食->变长->碰撞检测	蛇身数组、食物坐标	吃到食物闪烁、蛇身渐变色
打砖块	发球->挡板->砖块碰撞	挡板、球、砖块网格	砖块破碎粒子、连击特效
飞机大战	移动->射击->躲避->Boss	玩家飞机、敌机数组、子弹数组	爆炸粒子、屏幕震动
消除游戏	选择->匹配->消除->下落	网格数组、选中状态、动画队列	消除爆炸、连锁得分飞字
跑酷	跳跃->障碍->加速->距离	角色、障碍物队列、地面	跳跃拉伸、落地压缩、速度线

模板4: 游戏HUD/UI组件

// 屏幕震动
function screenShake(intensity=5, duration=200) {
  const c = document.getElementById('gameContainer');
  const start = Date.now();
  function shake() {
    const elapsed = Date.now() - start;
    if (elapsed < duration) {
      const f = 1 - elapsed/duration;
      c.style.transform = `translate(${(Math.random()-0.5)*intensity*f}px,${(Math.random()-0.5)*intensity*f}px)`;
      requestAnimationFrame(shake);
    } else { c.style.transform = ''; }
  }
  shake();
}
// 得分飞字
function floatingText(x, y, text, color='#fbbf24') {
  const el = document.createElement('div');
  el.textContent = text;
  Object.assign(el.style, { position:'absolute', left:x+'px', top:y+'px', color, fontSize:'20px', fontWeight:'bold', pointerEvents:'none', transition:'all 0.8s ease-out', zIndex:'30' });
  document.getElementById('gameContainer').appendChild(el);
  requestAnimationFrame(() => { el.style.top=(y-60)+'px'; el.style.opacity='0'; });
  setTimeout(() => el.remove(), 800);
}

游戏开发铁律

核心玩法循环必须完整：开始->游玩->结束->再来一次
反馈感 > 真实物理：夸张的视觉反馈比物理精确更重要
操作延迟 < 50ms：任何卡顿都会毁掉游戏体验
分数/进度必须实时可见

精美页面模板库（核心）

设计Token预设（6套赛事验证主题）

主题A: 暗夜科技（适合科技/AI/数据类）

:root {
  --bg-primary: #0a0a0f;
  --bg-secondary: #111827;
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --accent: #3b82f6;
  --accent-glow: rgba(59,130,246,0.4);
  --gradient-hero: linear-gradient(135deg, #0a0a0f 0%, #1e1b4b 50%, #0a0a0f 100%);
  --card-bg: rgba(17,24,39,0.8);
  --card-border: rgba(59,130,246,0.15);
}

主题B: 日出暖橙（适合教育/社交/正能量）

:root {
  --bg-primary: #fffbf5; --bg-secondary: #fef3e2;
  --text-primary: #1c1917; --text-secondary: #78716c;
  --accent: #f97316; --accent-glow: rgba(249,115,22,0.3);
  --gradient-hero: linear-gradient(135deg, #fffbf5 0%, #fed7aa 100%);
  --card-bg: rgba(255,251,245,0.9); --card-border: rgba(249,115,22,0.15);
}

主题C: 翡翠绿意（适合环保/健康/生活）

:root {
  --bg-primary: #f0fdf4; --bg-secondary: #dcfce7;
  --text-primary: #14532d; --text-secondary: #4d7c0f;
  --accent: #16a34a; --accent-glow: rgba(22,163,74,0.3);
  --gradient-hero: linear-gradient(135deg, #f0fdf4 0%, #bbf7d0 100%);
  --card-bg: rgba(240,253,244,0.9); --card-border: rgba(22,163,74,0.15);
}

主题D: 极简黑白（适合工具/效率/专业）

:root {
  --bg-primary: #fafafa; --bg-secondary: #f4f4f5;
  --text-primary: #18181b; --text-secondary: #71717a;
  --accent: #18181b; --accent-glow: rgba(24,24,27,0.1);
  --gradient-hero: linear-gradient(180deg, #fafafa 0%, #e4e4e7 100%);
  --card-bg: #ffffff; --card-border: rgba(24,24,27,0.08);
}

主题E: 深海蓝绿（适合海洋/探索/游戏）

:root {
  --bg-primary: #042f2e; --bg-secondary: #134e4a;
  --text-primary: #ccfbf1; --text-secondary: #5eead4;
  --accent: #14b8a6; --accent-glow: rgba(20,184,166,0.4);
  --gradient-hero: linear-gradient(135deg, #042f2e 0%, #0f766e 50%, #042f2e 100%);
  --card-bg: rgba(19,78,74,0.6); --card-border: rgba(20,184,166,0.2);
}

主题F: 赛博朋克（适合潮流/音乐/创意）

:root {
  --bg-primary: #0c0015; --bg-secondary: #1a002e;
  --text-primary: #f0e6ff; --text-secondary: #c084fc;
  --accent: #e879f9; --accent-secondary: #06ffa5;
  --accent-glow: rgba(232,121,249,0.4);
  --gradient-hero: linear-gradient(135deg, #0c0015 0%, #2d1b69 50%, #0c0015 100%);
  --card-bg: rgba(26,0,46,0.8); --card-border: rgba(232,121,249,0.2);
}

禁止使用: 紫粉渐变、默认蓝色模板感配色。

动效预设工具箱

// 1. 滚动渐入（Intersection Observer）
function setupScrollReveal() {
  const observer = new IntersectionObserver(entries => {
    entries.forEach(e => { if(e.isIntersecting) { e.target.classList.add('revealed'); observer.unobserve(e.target); } });
  }, { threshold: 0.1 });
  document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
}
// CSS: .reveal { opacity:0; transform:translateY(30px); transition:all 0.6s cubic-bezier(0.16,1,0.3,1); }
// .reveal.revealed { opacity:1; transform:translateY(0); }

// 2. 数字滚动动画
function animateNumber(el, target, duration=1500) {
  const start = parseInt(el.textContent)||0; const t0 = performance.now();
  function update(now) {
    const p = Math.min((now-t0)/duration, 1);
    const eased = 1 - Math.pow(1-p, 3);
    el.textContent = Math.round(start + (target-start)*eased).toLocaleString();
    if(p<1) requestAnimationFrame(update);
  }
  requestAnimationFrame(update);
}

// 3. 鼠标跟随光晕
function setupCursorGlow(container) {
  const glow = document.createElement('div');
  Object.assign(glow.style, { position:'absolute', width:'400px', height:'400px',
    borderRadius:'50%', pointerEvents:'none',
    background:'radial-gradient(circle, var(--accent-glow) 0%, transparent 70%)',
    transform:'translate(-50%,-50%)', zIndex:'0', opacity:'0.6' });
  container.style.position = 'relative';
  container.appendChild(glow);
  container.addEventListener('mousemove', e => {
    const r = container.getBoundingClientRect();
    glow.style.left = (e.clientX-r.left)+'px';
    glow.style.top = (e.clientY-r.top)+'px';
  });
}

// 4. 打字机效果
function typeWriter(el, text, speed=60) {
  let i = 0; el.textContent = '';
  function type() { if(i<text.length) { el.textContent += text.charAt(i++); setTimeout(type, speed); } }
  type();
}

// 5. 卡片3D倾斜
function setupTiltCard(card, intensity=15) {
  card.addEventListener('mousemove', e => {
    const r = card.getBoundingClientRect();
    const x = (e.clientX-r.left)/r.width - 0.5;
    const y = (e.clientY-r.top)/r.height - 0.5;
    card.style.transform = `perspective(800px) rotateY(${x*intensity}deg) rotateX(${-y*intensity}deg) scale(1.02)`;
  });
  card.addEventListener('mouseleave', () => { card.style.transform = ''; });
}

Hero区域模板（3种高转化布局）

Hero A: 大标题+CTA+背景动画（通用）

<section style="min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background:var(--bg-primary)">
  <div style="position:absolute;inset:0;opacity:0.5;background:var(--gradient-hero)"></div>
  <div style="position:relative;z-index:10;text-align:center;max-width:800px;padding:0 24px">
    <div style="display:inline-block;padding:6px 16px;border-radius:20px;background:var(--accent);color:#fff;font-size:13px;font-weight:600;margin-bottom:24px">Tagline</div>
    <h1 style="font-size:clamp(36px,6vw,72px);font-weight:800;color:var(--text-primary);line-height:1.1;margin-bottom:16px">主标题 <span style="color:var(--accent)">关键词高亮</span></h1>
    <p style="font-size:18px;color:var(--text-secondary);margin-bottom:32px;max-width:600px;margin-left:auto;margin-right:auto">副标题</p>
    <div style="display:flex;gap:12px;justify-content:center">
      <a href="#cta" style="padding:14px 32px;border-radius:8px;background:var(--accent);color:#fff;text-decoration:none;font-weight:600">Primary CTA</a>
    </div>
  </div>
</section>

Hero B: 左文右图（产品/工具类）

<section style="min-height:100vh;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:48px;padding:80px 48px;background:var(--bg-primary)">
  <div>
    <h1 style="font-size:48px;font-weight:800;color:var(--text-primary)">标题</h1>
    <p style="font-size:18px;color:var(--text-secondary);margin-bottom:24px">描述</p>
    <button style="padding:12px 28px;border-radius:8px;background:var(--accent);color:#fff;border:none;font-weight:600;cursor:pointer">Get Started</button>
  </div>
  <div style="aspect-ratio:4/3;border-radius:16px;background:var(--card-bg);border:1px solid var(--card-border)"></div>
</section>

Hero C: 全屏动态背景+居中标题（展示类）

<section style="height:100vh;display:flex;align-items:center;justify-content:center;position:relative">
  <div style="position:absolute;inset:0;background:var(--gradient-hero);z-index:1"></div>
  <div style="position:relative;z-index:10;text-align:center;color:#fff">
    <h1 style="font-size:clamp(40px,8vw,80px);font-weight:900;text-shadow:0 2px 20px rgba(0,0,0,0.3)">主标题</h1>
    <p style="font-size:20px;max-width:600px;margin:16px auto 0;opacity:0.85">副标题</p>
  </div>
</section>

页面开发铁律

首屏3秒内传达核心价值，不允许普通模板感
至少一个让人记住的动效瞬间（鼠标跟随/数字滚动/粒子背景）
所有颜色使用 CSS 变量，不硬编码 hex
移动端至少可用，桌面端完美

赛事文档模板库（核心）

比赛不只看代码，文档和演示决定最终名次。以下模板在 Spec 确认后立即生成。

模板1: 参赛项目 README

# PROJECT_NAME

> 一句话描述项目核心价值（评委3秒内能理解）

## 项目亮点
- 亮点1（技术实现/设计/创新）
- 亮点2
- 亮点3

## 技术栈

| 层级 | 技术 | 选型理由 |
|------|------|----------|
| 前端 | XXX | 快速/美观/生态 |
| 后端 | XXX（如无则写"纯前端"） | 必要性 |
| 数据 | XXX | 轻量/够用 |
| 部署 | XXX | 一键/零配置 |

## 快速开始
```bash
npm install && npm run dev

功能演示路径

打开首页 -> 看到XXX
点击XXX -> 触发XXX
完成XXX -> 看到结果


### 模板2: 技术亮点文档

```markdown
## 1. 创新点：XXX
**问题**: 为什么要做这个
**方案**: 具体怎么实现的
**效果**: 数据/截图/对比

## 2. 技术难点突破：XXX
**挑战**: 遇到什么问题
**解决**: 怎么解决的
**收获**: 学到了什么

模板3: 演示脚本（30秒版 + 2分钟版）

## 30秒电梯演讲
大家好，我们是TEAM_NAME。我们做了PROJECT_NAME。
它解决的核心问题是【痛点】。我们的方案是【一句话方案】。
最大的亮点是【wow点】。谢谢！

## 2分钟完整演示
### 开场（15秒）：我们注意到一个问题... 切到首页展示痛点场景
### 核心演示（60秒）：按功能顺序走一条完整主路径
### 亮点展示（30秒）：展示技术亮点/创新设计
### 总结（15秒）：一句话总结核心价值 + 未来展望

## 演示注意
- 准备备用演示路径（主路径出问题时的Plan B）
- 数据预填充，不要现场输入
- 不依赖网络，本地运行

模板4: 答辩准备卡

## 必答题
1. 技术方案为什么这样选？ -> 性能/生态/时间权衡
2. 再给一周时间优先做什么？ -> 核心体验/用户反馈
3. 最大的技术挑战？ -> 具体问题+解决方案
4. 和竞品相比核心差异？ -> 创新点+用户价值
5. 用户体验有什么特别设计？ -> 细节+数据支撑

## 加分回答（主动提及）
- 我们不只做了功能，还关注了XXX细节
- 我们在有限时间内做了降级方案确保演示稳定

## 减分避免
- 不要说"时间不够所以没做完"
- 不要说"这个功能比较简单"
- 不要说"AI帮我们写的"（改说"我们利用AI辅助提升了开发效率"）

赛事文档铁律

文档必须落盘到 output/* 和项目根目录 README.md
技术亮点不能空泛，必须有具体的方案描述
演示脚本必须提前演练一遍，确保路径完整无断点
答辩回答不要说"时间不够"或"AI写的"

作品类型决策模板

进入 SEEAI 后，优先先判断当前更像哪一类题，再决定研究和实现重心：

官网类：优先主视觉、品牌故事、信息层级、首屏转化、滚动节奏与演示动效。默认技术栈：React/Vite 或 Next.js + Tailwind + Framer Motion。默认 sprint：先做 Hero 与主叙事，再做亮点区和 CTA，最后统一动效与滚动节奏。
小游戏类：优先核心玩法循环、反馈感、记分/胜负、开始到再次游玩的完整闭环。默认技术栈：HTML Canvas + Vanilla JS；更复杂时再上 Phaser。默认 sprint：先做可玩的主循环，再补积分/胜负反馈，最后加音效、特效和复玩钩子。
工具类：优先一个高价值主流程、输入输出清晰、演示结果直观、无需复杂配置。默认技术栈：React + Vite + Tailwind + 本地状态；必要时补最小 Express/Fastify 后端。默认 sprint：先打通输入到结果的主流程，再补结果页质感，最后加分享/导出等演示加分项。

如果需求跨多类，默认选最容易形成强演示效果的那一类做主轴，其余只做辅助。

题型识别提示

在首轮判断时，优先用需求关键词快速归类，不要犹豫太久：

如果需求强调品牌、产品发布、活动宣传、首屏、官网、落地页，默认按官网类处理。
如果需求强调玩法、得分、胜负、闯关、点击反馈、复玩，默认按小游戏类处理。
如果需求强调生成、分析、查询、表单、输入输出、结果页、效率提升，默认按工具类处理。
如果用户同时提到官网 + 交互玩法，先判断评审更容易记住哪一面，把那一面作为主轴。

比赛质量底线

即使在半小时里，也必须守住这些底线：

首屏或第一轮交互必须让人一眼看懂主题，不允许普通模板感。
至少有一个清晰 wow 点：视觉、玩法、结果页、数据动效、讲解桥段任选其一。
主路径必须真实可演示，不能全是占位按钮或空数据。
文案不能是通用 AI 空话，标题、卖点、CTA、结果文案要贴题。
时间不够时，优先删功能，不要删完成度。

赛事专用能力

评委视角优化

每个作品必须有一个2分钟能讲完的完整演示故事线
标题/首屏/Hero区域在3秒内传达核心价值
结果页/完成页让评委有完成感，而不是半成品感
动效不在于多，在于有1-2个让人记住的瞬间

降级策略

后端来不及 -> 用 localStorage / mock API，但要标注demo数据
多页面来不及 -> 做好单页的完整体验，胜过5个半成品页面
复杂交互来不及 -> 简化流程，但保留核心闭环
响应式来不及 -> 保证桌面端完美，移动端可用

演示准备

准备一段30秒的口头介绍：这是什么 + 给谁用 + 核心价值 + wow点
准备一条完整的主流程演示路径（从开始到结束无断点）
准备一个备选路径（如果主路径出了问题）
确保首屏截图就能当宣传图用

Required behavior

First reply: say Super Dev SEEAI mode is active and the current phase is research.
Use a strict timebox: 0-4 min research, 4-8 min compact docs, 8-10 min confirmation, 10-12 min compact Spec, 12-27 min build sprint, 27-30 min polish/handoff.
Run a fast research pass and write output/*-research.md as a real file.
Draft compact output/*-prd.md, output/*-architecture.md, and output/*-uiux.md in the same session and save them as real files.
Scope the work in P0/P1/P2 order: P0 demo path, P1 wow point, P2 only-if-time-allows extras.
Stop after the three compact core documents and wait for explicit confirmation.
Only after confirmation, create a compact Spec / tasks breakdown.
After Spec, move directly into an integrated full-stack build sprint: frontend first, backend if needed, then final polish.
If backend or integration work threatens the schedule, degrade to mock data, local state, or a simulated high-fidelity demo path instead of missing the showcase.
Do not require a separate preview confirmation gate in SEEAI mode.
End with a concise demo summary, key亮点, and how to present the result quickly.
When writing or refreshing .super-dev/workflow-state.json, persist flow_variant = seeai so resume/continue stays in SEEAI mode.

会话连续性契约（强制）

若存在 .super-dev/SESSION_BRIEF.md，每次继续前必须先读取。
用户在 SEEAI 模式里说"改一下 / 再炫一点 / 补个功能 / 继续做"等，属于当前比赛流程内动作。
文档确认前，任何修改都先落在 compact research / PRD / architecture / UIUX 上。
Spec 之后，任何修改默认回到当前 full-stack sprint，不额外拆出新的长门禁。

实现闭环契约（强制）

每轮修改后先做最小 diff review 再汇报完成。
运行 build / type-check / test / runtime smoke。
新增代码必须接入真实调用链；未接入则删除，禁止留 unused code。
新增日志/告警/埋点必须验证会在真实路径触发。

Never do this

Never skip research, the three compact core documents, or Spec entirely.
Never expand SEEAI mode back into the full standard Super Dev long chain unless the user explicitly asks to switch modes.
Never stop after frontend to wait for a separate preview gate in SEEAI mode.
Never sacrifice baseline polish and demoability just to move fast.

Super Dev SEEAI Flow Contract

SUPER_DEV_SEEAI_FLOW_CONTRACT_V1
PHASE_CHAIN: research>docs>docs_confirm>spec>build_fullstack>polish>handoff
DOC_CONFIRM_GATE: required
PREVIEW_CONFIRM_GATE: omitted
QUALITY_STYLE: speed_with_showcase_quality

name	super-dev-seeai
description	Activate the Super Dev SEEAI competition mode inside Codex CLI.
when_to_use	Use when the user says /super-dev-seeai, super-dev-seeai:, or super-dev-seeai： followed by a requirement. Activate the fast competition delivery mode.
version	2.4.0

Super Dev SEEAI - 赛事极速版 (Codex)

关键约束提醒（每次操作前必读）

以下规则在整个开发过程中始终有效，不得以任何理由违反：

图标系统: 功能图标只能来自 Lucide / Heroicons / Tabler 图标库。绝对禁止使用 emoji 表情作为功能图标、装饰图标或临时占位。如果你发现自己即将输出包含 emoji 的 UI 代码，停下来，改用图标库组件。
AI 模板化禁令: 禁止紫/粉渐变主色调、禁止 emoji 图标、禁止无信息层级的卡片墙、禁止默认系统字体直出。
代码即交付: 不允许“先用 emoji 顶上后面再换”。图标库必须在第一行 UI 代码前就锁定。
自检规则: 在向用户展示任何 UI 代码或预览前，必须自检源码中不存在任何 emoji 字符（Unicode range U+2600-U+27BF, U+1F300-U+1FAFF）。发现后先替换为正式图标库再继续。

Direct Activation Rule（强制）

If this skill is invoked, Super Dev SEEAI competition mode is already active.
Do not spend a turn explaining the skill or deciding whether to enter the workflow.
Treat this as a distinct fast-delivery contract optimized for time-boxed competition work.
Keep quality, but compress the path aggressively after Spec.

触发方式（强制）

Treat super-dev-seeai: <需求描述> and super-dev-seeai：<需求描述> as the AGENTS-driven natural-language SEEAI entry.
Treat $super-dev-seeai as the explicit Codex CLI Skill entry for the competition mode.
In Codex App/Desktop, selecting /super-dev-seeai from the slash Skill list is the official app entry.
Do not route SEEAI requests back to ordinary chat or to the full standard Super Dev contract.

Runtime Contract（强制）

Super Dev SEEAI is still Super Dev governance, but with a competition-fast contract.
The host remains responsible for model execution, tools, search, terminal, and edits.
Use Codex native web/search/edit/terminal capabilities for research, building, and validation.
Keep local super-dev CLI for governance artifacts only when it materially helps the fast path.
The mode is designed for 30-minute showcase builds such as a polished landing page, mini-game, or focused demo tool.
Default decision rule: protect one demo path first, one wow point second, and only then add extra engineering depth.

首轮响应契约（强制）

首次触发时第一轮回复必须说明：Super Dev SEEAI 赛事模式已激活，当前阶段是 research。
先快速理解需求，再做极短顺位思考：作品类型、评委 wow 点、必须完成项、主动放弃项。
如果用户需求模糊，最多只补 1 个关键问题；能合理假设时直接给出假设并推进，不展开长澄清。
先完成 fast research，再写 compact research / PRD / architecture / UIUX。
文档确认后创建 compact Spec，然后直接进入 full-stack sprint。
不要在 SEEAI 模式里重新切回标准 Super Dev 的 preview confirm / 长质量闭环。
若会落盘 workflow state，必须把 flow_variant = seeai 一起写入。

首轮输出模板（强制）

SEEAI 首轮回复不要展开成长讨论。优先用极短结构锁定范围，然后立即进入 research：

作品类型：官网类 / 小游戏类 / 工具类，三选一。
评委 wow 点：本次成品最值得被记住的一个亮点。
P0 主路径：半小时内必须真正跑通的一条演示路径。
主动放弃项：本轮明确不做的部分，避免范围失控。
关键假设：只有在用户没说清时才写，最多 1 到 2 条。

如果需求不缺关键信息，就不要反问。直接按这个模板给出判断，然后开始 fast research 和 compact 文档。

比赛短文档模板（强制）

SEEAI 的文档必须真实落盘到 output/*，但只保留比赛需要的信息：

research.md：题目理解、目标观众、参考风格、评委 wow 点、风险与主动放弃项。
prd.md：作品目标、P0 主路径、P1 wow 点、P2 可选项、非目标。
architecture.md：页面/玩法主循环、技术栈、数据流、是否需要最小后端、降级方案。
uiux.md：视觉关键词、主 KV、页面骨架、关键交互、动效重点、设计 token。
spec：只保留一个 sprint 清单，按 P0 -> P1 -> polish 排序。

技术栈快速决策矩阵（核心）

收到题目后，根据作品类型立刻选择技术栈。不纠结，不混搭。

决策树

题目类型？
|-- 小游戏 / 互动动画
|   |-- 纯2D休闲 -> HTML Canvas + Vanilla JS（零依赖，开箱即用）
|   |-- 复杂2D游戏 -> Phaser.js（场景管理、物理引擎、精灵动画一体化）
|   `-- 3D/沉浸感 -> Three.js + React Three Fiber（如果用React）
|
|-- 官网 / 展示页 / 落地页
|   |-- 纯静态展示 -> HTML + Tailwind CDN + GSAP/Framer Motion
|   |-- 需要路由/多页 -> React + Vite + Tailwind + Framer Motion
|   `-- 需要SSR/SEO -> Next.js + Tailwind + Framer Motion
|
|-- 工具 / 应用
|   |-- 纯前端工具 -> React + Vite + Tailwind + Zustand
|   |-- 需要后端API -> React前端 + Express/Fastify后端
|   `-- 实时协作 -> React + Socket.io / WebSocket
|
`-- 数据看板 / 可视化
    |-- 简单图表 -> React + Recharts / Chart.js
    |-- 复杂交互 -> React + D3.js
    `-- 实时数据 -> React + ECharts + WebSocket

赛事推荐组合（已验证能30分钟内交付）

组合	适用场景	CDN快速启动	需要构建
HTML+Tailwind CDN+GSAP	展示页/官网	是	否
React+Vite+Tailwind+Framer	工具/应用/多页	否	是
HTML Canvas+Vanilla JS	2D小游戏/互动	是	否
Phaser.js	复杂2D游戏	是	否
Three.js	3D展示/沉浸	是	否

赛事铁律: 能用 CDN 零构建的优先用 CDN，省掉构建和配置时间。

小游戏开发模板库（核心）

模板1: HTML Canvas 游戏骨架

适用于所有 2D 休闲游戏（贪吃蛇、打砖块、弹球、飞机大战等）。骨架包含：Canvas 初始化、游戏主循环、HUD、菜单/结束 Overlay、localStorage 最高分。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>GAME_TITLE</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { background: #0a0a0a; display: flex; justify-content: center; align-items: center; min-height: 100vh; font-family: 'Inter', sans-serif; }
    #gameContainer { position: relative; }
    canvas { display: block; border-radius: 12px; box-shadow: 0 0 40px rgba(59,130,246,0.3); }
    #hud { position: absolute; top: 0; left: 0; right: 0; padding: 16px 24px; display: flex; justify-content: space-between; color: #fff; font-size: 14px; font-weight: 600; pointer-events: none; z-index: 10; }
    #overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; background: rgba(0,0,0,0.8); border-radius: 12px; z-index: 20; transition: opacity 0.3s; }
    #overlay.hidden { opacity: 0; pointer-events: none; }
    #overlay h1 { color: #fff; font-size: 36px; margin-bottom: 8px; }
    #overlay p { color: #94a3b8; margin-bottom: 24px; }
    #overlay button { padding: 12px 32px; border: none; border-radius: 8px; background: #3b82f6; color: #fff; font-size: 16px; font-weight: 600; cursor: pointer; transition: transform 0.15s, background 0.15s; }
    #overlay button:hover { transform: scale(1.05); background: #2563eb; }
    .score-display { background: rgba(255,255,255,0.1); padding: 6px 16px; border-radius: 20px; backdrop-filter: blur(8px); }
  </style>
</head>
<body>
  <div id="gameContainer">
    <canvas id="gameCanvas"></canvas>
    <div id="hud">
      <div class="score-display">Score: <span id="score">0</span></div>
      <div class="score-display">Level: <span id="level">1</span></div>
      <div class="score-display">Best: <span id="best">0</span></div>
    </div>
    <div id="overlay">
      <h1>GAME_TITLE</h1>
      <p>游戏描述</p>
      <button id="startBtn">Start Game</button>
    </div>
  </div>
  <script>
    const CONFIG = { width: 800, height: 600, bgColor: '#0a0a0a', accentColor: '#3b82f6', fps: 60 };
    const STATE = { MENU: 0, PLAYING: 1, PAUSED: 2, OVER: 3 };
    let gameState = STATE.MENU, score = 0, level = 1;
    let bestScore = parseInt(localStorage.getItem('game_best') || '0');
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');
    canvas.width = CONFIG.width; canvas.height = CONFIG.height;
    const keys = {};
    document.addEventListener('keydown', e => { keys[e.key] = true; e.preventDefault(); });
    document.addEventListener('keyup', e => { keys[e.key] = false; });
    let lastTime = 0;
    function gameLoop(timestamp) {
      const dt = (timestamp - lastTime) / 1000; lastTime = timestamp;
      ctx.fillStyle = CONFIG.bgColor;
      ctx.fillRect(0, 0, CONFIG.width, CONFIG.height);
      if (gameState === STATE.PLAYING) { update(dt); draw(); }
      requestAnimationFrame(gameLoop);
    }
    function update(dt) { /* game logic */ }
    function draw() { /* render */ }
    function addScore(pts) {
      score += pts;
      document.getElementById('score').textContent = score;
      if (score > bestScore) {
        bestScore = score; localStorage.setItem('game_best', bestScore);
        document.getElementById('best').textContent = bestScore;
      }
    }
    function startGame() {
      score = 0; level = 1; gameState = STATE.PLAYING;
      document.getElementById('overlay').classList.add('hidden');
    }
    function gameOver() {
      gameState = STATE.OVER;
      const o = document.getElementById('overlay');
      o.classList.remove('hidden');
      o.querySelector('h1').textContent = 'Game Over';
      o.querySelector('p').textContent = 'Final Score: ' + score;
      o.querySelector('button').textContent = 'Play Again';
    }
    document.getElementById('startBtn').addEventListener('click', startGame);
    document.getElementById('best').textContent = bestScore;
    requestAnimationFrame(gameLoop);
  </script>
</body>
</html>

模板2: 碰撞检测工具箱

// 矩形碰撞
function rectCollision(a, b) {
  return a.x < b.x + b.w && a.x + a.w > b.x && a.y < b.y + b.h && a.y + a.h > b.y;
}
// 圆形碰撞
function circleCollision(a, b) {
  const dx = a.x - b.x, dy = a.y - b.y;
  return dx*dx + dy*dy < (a.r + b.r) * (a.r + b.r);
}
// 粒子效果
class Particle {
  constructor(x, y, color) {
    this.x=x; this.y=y; this.vx=(Math.random()-0.5)*8; this.vy=(Math.random()-0.5)*8;
    this.life=1; this.decay=0.02+Math.random()*0.03; this.size=2+Math.random()*4; this.color=color;
  }
  update() { this.x+=this.vx; this.y+=this.vy; this.life-=this.decay; this.vy+=0.1; }
  draw(ctx) {
    ctx.globalAlpha=this.life; ctx.fillStyle=this.color;
    ctx.fillRect(this.x-this.size/2, this.y-this.size/2, this.size, this.size);
    ctx.globalAlpha=1;
  }
  get dead() { return this.life <= 0; }
}

模板3: 常见游戏模式速查

游戏类型	核心循环	关键对象	反馈重点
贪吃蛇	移动->吃食->变长->碰撞检测	蛇身数组、食物坐标	吃到食物闪烁、蛇身渐变色
打砖块	发球->挡板->砖块碰撞	挡板、球、砖块网格	砖块破碎粒子、连击特效
飞机大战	移动->射击->躲避->Boss	玩家飞机、敌机数组、子弹数组	爆炸粒子、屏幕震动
消除游戏	选择->匹配->消除->下落	网格数组、选中状态、动画队列	消除爆炸、连锁得分飞字
跑酷	跳跃->障碍->加速->距离	角色、障碍物队列、地面	跳跃拉伸、落地压缩、速度线

模板4: 游戏HUD/UI组件

// 屏幕震动
function screenShake(intensity=5, duration=200) {
  const c = document.getElementById('gameContainer');
  const start = Date.now();
  function shake() {
    const elapsed = Date.now() - start;
    if (elapsed < duration) {
      const f = 1 - elapsed/duration;
      c.style.transform = `translate(${(Math.random()-0.5)*intensity*f}px,${(Math.random()-0.5)*intensity*f}px)`;
      requestAnimationFrame(shake);
    } else { c.style.transform = ''; }
  }
  shake();
}
// 得分飞字
function floatingText(x, y, text, color='#fbbf24') {
  const el = document.createElement('div');
  el.textContent = text;
  Object.assign(el.style, { position:'absolute', left:x+'px', top:y+'px', color, fontSize:'20px', fontWeight:'bold', pointerEvents:'none', transition:'all 0.8s ease-out', zIndex:'30' });
  document.getElementById('gameContainer').appendChild(el);
  requestAnimationFrame(() => { el.style.top=(y-60)+'px'; el.style.opacity='0'; });
  setTimeout(() => el.remove(), 800);
}

游戏开发铁律

核心玩法循环必须完整：开始->游玩->结束->再来一次
反馈感 > 真实物理：夸张的视觉反馈比物理精确更重要
操作延迟 < 50ms：任何卡顿都会毁掉游戏体验
分数/进度必须实时可见

精美页面模板库（核心）

设计Token预设（6套赛事验证主题）

主题A: 暗夜科技（适合科技/AI/数据类）

:root {
  --bg-primary: #0a0a0f;
  --bg-secondary: #111827;
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --accent: #3b82f6;
  --accent-glow: rgba(59,130,246,0.4);
  --gradient-hero: linear-gradient(135deg, #0a0a0f 0%, #1e1b4b 50%, #0a0a0f 100%);
  --card-bg: rgba(17,24,39,0.8);
  --card-border: rgba(59,130,246,0.15);
}

主题B: 日出暖橙（适合教育/社交/正能量）

:root {
  --bg-primary: #fffbf5; --bg-secondary: #fef3e2;
  --text-primary: #1c1917; --text-secondary: #78716c;
  --accent: #f97316; --accent-glow: rgba(249,115,22,0.3);
  --gradient-hero: linear-gradient(135deg, #fffbf5 0%, #fed7aa 100%);
  --card-bg: rgba(255,251,245,0.9); --card-border: rgba(249,115,22,0.15);
}

主题C: 翡翠绿意（适合环保/健康/生活）

:root {
  --bg-primary: #f0fdf4; --bg-secondary: #dcfce7;
  --text-primary: #14532d; --text-secondary: #4d7c0f;
  --accent: #16a34a; --accent-glow: rgba(22,163,74,0.3);
  --gradient-hero: linear-gradient(135deg, #f0fdf4 0%, #bbf7d0 100%);
  --card-bg: rgba(240,253,244,0.9); --card-border: rgba(22,163,74,0.15);
}

主题D: 极简黑白（适合工具/效率/专业）

:root {
  --bg-primary: #fafafa; --bg-secondary: #f4f4f5;
  --text-primary: #18181b; --text-secondary: #71717a;
  --accent: #18181b; --accent-glow: rgba(24,24,27,0.1);
  --gradient-hero: linear-gradient(180deg, #fafafa 0%, #e4e4e7 100%);
  --card-bg: #ffffff; --card-border: rgba(24,24,27,0.08);
}

主题E: 深海蓝绿（适合海洋/探索/游戏）

:root {
  --bg-primary: #042f2e; --bg-secondary: #134e4a;
  --text-primary: #ccfbf1; --text-secondary: #5eead4;
  --accent: #14b8a6; --accent-glow: rgba(20,184,166,0.4);
  --gradient-hero: linear-gradient(135deg, #042f2e 0%, #0f766e 50%, #042f2e 100%);
  --card-bg: rgba(19,78,74,0.6); --card-border: rgba(20,184,166,0.2);
}

主题F: 赛博朋克（适合潮流/音乐/创意）

:root {
  --bg-primary: #0c0015; --bg-secondary: #1a002e;
  --text-primary: #f0e6ff; --text-secondary: #c084fc;
  --accent: #e879f9; --accent-secondary: #06ffa5;
  --accent-glow: rgba(232,121,249,0.4);
  --gradient-hero: linear-gradient(135deg, #0c0015 0%, #2d1b69 50%, #0c0015 100%);
  --card-bg: rgba(26,0,46,0.8); --card-border: rgba(232,121,249,0.2);
}

禁止使用: 紫粉渐变、默认蓝色模板感配色。

动效预设工具箱

// 1. 滚动渐入（Intersection Observer）
function setupScrollReveal() {
  const observer = new IntersectionObserver(entries => {
    entries.forEach(e => { if(e.isIntersecting) { e.target.classList.add('revealed'); observer.unobserve(e.target); } });
  }, { threshold: 0.1 });
  document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
}
// CSS: .reveal { opacity:0; transform:translateY(30px); transition:all 0.6s cubic-bezier(0.16,1,0.3,1); }
// .reveal.revealed { opacity:1; transform:translateY(0); }

// 2. 数字滚动动画
function animateNumber(el, target, duration=1500) {
  const start = parseInt(el.textContent)||0; const t0 = performance.now();
  function update(now) {
    const p = Math.min((now-t0)/duration, 1);
    const eased = 1 - Math.pow(1-p, 3);
    el.textContent = Math.round(start + (target-start)*eased).toLocaleString();
    if(p<1) requestAnimationFrame(update);
  }
  requestAnimationFrame(update);
}

// 3. 鼠标跟随光晕
function setupCursorGlow(container) {
  const glow = document.createElement('div');
  Object.assign(glow.style, { position:'absolute', width:'400px', height:'400px',
    borderRadius:'50%', pointerEvents:'none',
    background:'radial-gradient(circle, var(--accent-glow) 0%, transparent 70%)',
    transform:'translate(-50%,-50%)', zIndex:'0', opacity:'0.6' });
  container.style.position = 'relative';
  container.appendChild(glow);
  container.addEventListener('mousemove', e => {
    const r = container.getBoundingClientRect();
    glow.style.left = (e.clientX-r.left)+'px';
    glow.style.top = (e.clientY-r.top)+'px';
  });
}

// 4. 打字机效果
function typeWriter(el, text, speed=60) {
  let i = 0; el.textContent = '';
  function type() { if(i<text.length) { el.textContent += text.charAt(i++); setTimeout(type, speed); } }
  type();
}

// 5. 卡片3D倾斜
function setupTiltCard(card, intensity=15) {
  card.addEventListener('mousemove', e => {
    const r = card.getBoundingClientRect();
    const x = (e.clientX-r.left)/r.width - 0.5;
    const y = (e.clientY-r.top)/r.height - 0.5;
    card.style.transform = `perspective(800px) rotateY(${x*intensity}deg) rotateX(${-y*intensity}deg) scale(1.02)`;
  });
  card.addEventListener('mouseleave', () => { card.style.transform = ''; });
}

Hero区域模板（3种高转化布局）

Hero A: 大标题+CTA+背景动画（通用）

<section style="min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background:var(--bg-primary)">
  <div style="position:absolute;inset:0;opacity:0.5;background:var(--gradient-hero)"></div>
  <div style="position:relative;z-index:10;text-align:center;max-width:800px;padding:0 24px">
    <div style="display:inline-block;padding:6px 16px;border-radius:20px;background:var(--accent);color:#fff;font-size:13px;font-weight:600;margin-bottom:24px">Tagline</div>
    <h1 style="font-size:clamp(36px,6vw,72px);font-weight:800;color:var(--text-primary);line-height:1.1;margin-bottom:16px">主标题 <span style="color:var(--accent)">关键词高亮</span></h1>
    <p style="font-size:18px;color:var(--text-secondary);margin-bottom:32px;max-width:600px;margin-left:auto;margin-right:auto">副标题</p>
    <div style="display:flex;gap:12px;justify-content:center">
      <a href="#cta" style="padding:14px 32px;border-radius:8px;background:var(--accent);color:#fff;text-decoration:none;font-weight:600">Primary CTA</a>
    </div>
  </div>
</section>

Hero B: 左文右图（产品/工具类）

<section style="min-height:100vh;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:48px;padding:80px 48px;background:var(--bg-primary)">
  <div>
    <h1 style="font-size:48px;font-weight:800;color:var(--text-primary)">标题</h1>
    <p style="font-size:18px;color:var(--text-secondary);margin-bottom:24px">描述</p>
    <button style="padding:12px 28px;border-radius:8px;background:var(--accent);color:#fff;border:none;font-weight:600;cursor:pointer">Get Started</button>
  </div>
  <div style="aspect-ratio:4/3;border-radius:16px;background:var(--card-bg);border:1px solid var(--card-border)"></div>
</section>

Hero C: 全屏动态背景+居中标题（展示类）

<section style="height:100vh;display:flex;align-items:center;justify-content:center;position:relative">
  <div style="position:absolute;inset:0;background:var(--gradient-hero);z-index:1"></div>
  <div style="position:relative;z-index:10;text-align:center;color:#fff">
    <h1 style="font-size:clamp(40px,8vw,80px);font-weight:900;text-shadow:0 2px 20px rgba(0,0,0,0.3)">主标题</h1>
    <p style="font-size:20px;max-width:600px;margin:16px auto 0;opacity:0.85">副标题</p>
  </div>
</section>

页面开发铁律

首屏3秒内传达核心价值，不允许普通模板感
至少一个让人记住的动效瞬间（鼠标跟随/数字滚动/粒子背景）
所有颜色使用 CSS 变量，不硬编码 hex
移动端至少可用，桌面端完美

赛事文档模板库（核心）

比赛不只看代码，文档和演示决定最终名次。以下模板在 Spec 确认后立即生成。

模板1: 参赛项目 README

# PROJECT_NAME

> 一句话描述项目核心价值（评委3秒内能理解）

## 项目亮点
- 亮点1（技术实现/设计/创新）
- 亮点2
- 亮点3

## 技术栈

| 层级 | 技术 | 选型理由 |
|------|------|----------|
| 前端 | XXX | 快速/美观/生态 |
| 后端 | XXX（如无则写"纯前端"） | 必要性 |
| 数据 | XXX | 轻量/够用 |
| 部署 | XXX | 一键/零配置 |

## 快速开始
```bash
npm install && npm run dev

功能演示路径

打开首页 -> 看到XXX
点击XXX -> 触发XXX
完成XXX -> 看到结果


### 模板2: 技术亮点文档

```markdown
## 1. 创新点：XXX
**问题**: 为什么要做这个
**方案**: 具体怎么实现的
**效果**: 数据/截图/对比

## 2. 技术难点突破：XXX
**挑战**: 遇到什么问题
**解决**: 怎么解决的
**收获**: 学到了什么

模板3: 演示脚本（30秒版 + 2分钟版）

## 30秒电梯演讲
大家好，我们是TEAM_NAME。我们做了PROJECT_NAME。
它解决的核心问题是【痛点】。我们的方案是【一句话方案】。
最大的亮点是【wow点】。谢谢！

## 2分钟完整演示
### 开场（15秒）：我们注意到一个问题... 切到首页展示痛点场景
### 核心演示（60秒）：按功能顺序走一条完整主路径
### 亮点展示（30秒）：展示技术亮点/创新设计
### 总结（15秒）：一句话总结核心价值 + 未来展望

## 演示注意
- 准备备用演示路径（主路径出问题时的Plan B）
- 数据预填充，不要现场输入
- 不依赖网络，本地运行

模板4: 答辩准备卡

## 必答题
1. 技术方案为什么这样选？ -> 性能/生态/时间权衡
2. 再给一周时间优先做什么？ -> 核心体验/用户反馈
3. 最大的技术挑战？ -> 具体问题+解决方案
4. 和竞品相比核心差异？ -> 创新点+用户价值
5. 用户体验有什么特别设计？ -> 细节+数据支撑

## 加分回答（主动提及）
- 我们不只做了功能，还关注了XXX细节
- 我们在有限时间内做了降级方案确保演示稳定

## 减分避免
- 不要说"时间不够所以没做完"
- 不要说"这个功能比较简单"
- 不要说"AI帮我们写的"（改说"我们利用AI辅助提升了开发效率"）

赛事文档铁律

文档必须落盘到 output/* 和项目根目录 README.md
技术亮点不能空泛，必须有具体的方案描述
演示脚本必须提前演练一遍，确保路径完整无断点
答辩回答不要说"时间不够"或"AI写的"

作品类型决策模板

进入 SEEAI 后，优先先判断当前更像哪一类题，再决定研究和实现重心：

官网类：优先主视觉、品牌故事、信息层级、首屏转化、滚动节奏与演示动效。默认技术栈：React/Vite 或 Next.js + Tailwind + Framer Motion。默认 sprint：先做 Hero 与主叙事，再做亮点区和 CTA，最后统一动效与滚动节奏。
小游戏类：优先核心玩法循环、反馈感、记分/胜负、开始到再次游玩的完整闭环。默认技术栈：HTML Canvas + Vanilla JS；更复杂时再上 Phaser。默认 sprint：先做可玩的主循环，再补积分/胜负反馈，最后加音效、特效和复玩钩子。
工具类：优先一个高价值主流程、输入输出清晰、演示结果直观、无需复杂配置。默认技术栈：React + Vite + Tailwind + 本地状态；必要时补最小 Express/Fastify 后端。默认 sprint：先打通输入到结果的主流程，再补结果页质感，最后加分享/导出等演示加分项。

如果需求跨多类，默认选最容易形成强演示效果的那一类做主轴，其余只做辅助。

题型识别提示

在首轮判断时，优先用需求关键词快速归类，不要犹豫太久：

如果需求强调品牌、产品发布、活动宣传、首屏、官网、落地页，默认按官网类处理。
如果需求强调玩法、得分、胜负、闯关、点击反馈、复玩，默认按小游戏类处理。
如果需求强调生成、分析、查询、表单、输入输出、结果页、效率提升，默认按工具类处理。
如果用户同时提到官网 + 交互玩法，先判断评审更容易记住哪一面，把那一面作为主轴。

比赛质量底线

即使在半小时里，也必须守住这些底线：

首屏或第一轮交互必须让人一眼看懂主题，不允许普通模板感。
至少有一个清晰 wow 点：视觉、玩法、结果页、数据动效、讲解桥段任选其一。
主路径必须真实可演示，不能全是占位按钮或空数据。
文案不能是通用 AI 空话，标题、卖点、CTA、结果文案要贴题。
时间不够时，优先删功能，不要删完成度。

赛事专用能力

评委视角优化

每个作品必须有一个2分钟能讲完的完整演示故事线
标题/首屏/Hero区域在3秒内传达核心价值
结果页/完成页让评委有完成感，而不是半成品感
动效不在于多，在于有1-2个让人记住的瞬间

降级策略

后端来不及 -> 用 localStorage / mock API，但要标注demo数据
多页面来不及 -> 做好单页的完整体验，胜过5个半成品页面
复杂交互来不及 -> 简化流程，但保留核心闭环
响应式来不及 -> 保证桌面端完美，移动端可用

演示准备

准备一段30秒的口头介绍：这是什么 + 给谁用 + 核心价值 + wow点
准备一条完整的主流程演示路径（从开始到结束无断点）
准备一个备选路径（如果主路径出了问题）
确保首屏截图就能当宣传图用

Required behavior

First reply: say Super Dev SEEAI mode is active and the current phase is research.
Use a strict timebox: 0-4 min research, 4-8 min compact docs, 8-10 min confirmation, 10-12 min compact Spec, 12-27 min build sprint, 27-30 min polish/handoff.
Run a fast research pass and write output/*-research.md as a real file.
Draft compact output/*-prd.md, output/*-architecture.md, and output/*-uiux.md in the same session and save them as real files.
Scope the work in P0/P1/P2 order: P0 demo path, P1 wow point, P2 only-if-time-allows extras.
Stop after the three compact core documents and wait for explicit confirmation.
Only after confirmation, create a compact Spec / tasks breakdown.
After Spec, move directly into an integrated full-stack build sprint: frontend first, backend if needed, then final polish.
If backend or integration work threatens the schedule, degrade to mock data, local state, or a simulated high-fidelity demo path instead of missing the showcase.
Do not require a separate preview confirmation gate in SEEAI mode.
End with a concise demo summary, key亮点, and how to present the result quickly.
When writing or refreshing .super-dev/workflow-state.json, persist flow_variant = seeai so resume/continue stays in SEEAI mode.

会话连续性契约（强制）

若存在 .super-dev/SESSION_BRIEF.md，每次继续前必须先读取。
用户在 SEEAI 模式里说"改一下 / 再炫一点 / 补个功能 / 继续做"等，属于当前比赛流程内动作。
文档确认前，任何修改都先落在 compact research / PRD / architecture / UIUX 上。
Spec 之后，任何修改默认回到当前 full-stack sprint，不额外拆出新的长门禁。

实现闭环契约（强制）

每轮修改后先做最小 diff review 再汇报完成。
运行 build / type-check / test / runtime smoke。
新增代码必须接入真实调用链；未接入则删除，禁止留 unused code。
新增日志/告警/埋点必须验证会在真实路径触发。

Never do this

Never skip research, the three compact core documents, or Spec entirely.
Never expand SEEAI mode back into the full standard Super Dev long chain unless the user explicitly asks to switch modes.
Never stop after frontend to wait for a separate preview gate in SEEAI mode.
Never sacrifice baseline polish and demoability just to move fast.

Super Dev SEEAI Flow Contract

SUPER_DEV_SEEAI_FLOW_CONTRACT_V1
PHASE_CHAIN: research>docs>docs_confirm>spec>build_fullstack>polish>handoff
DOC_CONFIRM_GATE: required
PREVIEW_CONFIRM_GATE: omitted
QUALITY_STYLE: speed_with_showcase_quality

super-dev-seeai

Mehr aus diesem Repository

Super Dev SEEAI - 赛事极速版 (Codex)

关键约束提醒（每次操作前必读）

Direct Activation Rule（强制）

触发方式（强制）

Runtime Contract（强制）

首轮响应契约（强制）

首轮输出模板（强制）

比赛短文档模板（强制）

推荐标题骨架

技术栈快速决策矩阵（核心）

决策树

赛事推荐组合（已验证能30分钟内交付）

小游戏开发模板库（核心）

模板1: HTML Canvas 游戏骨架

模板2: 碰撞检测工具箱

模板3: 常见游戏模式速查

模板4: 游戏HUD/UI组件

游戏开发铁律

精美页面模板库（核心）

设计Token预设（6套赛事验证主题）

主题A: 暗夜科技（适合科技/AI/数据类）

主题B: 日出暖橙（适合教育/社交/正能量）

主题C: 翡翠绿意（适合环保/健康/生活）

主题D: 极简黑白（适合工具/效率/专业）

主题E: 深海蓝绿（适合海洋/探索/游戏）

主题F: 赛博朋克（适合潮流/音乐/创意）

动效预设工具箱

Hero区域模板（3种高转化布局）

Hero A: 大标题+CTA+背景动画（通用）

Hero B: 左文右图（产品/工具类）

Hero C: 全屏动态背景+居中标题（展示类）

页面开发铁律

赛事文档模板库（核心）

模板1: 参赛项目 README

功能演示路径

模板3: 演示脚本（30秒版 + 2分钟版）

模板4: 答辩准备卡

赛事文档铁律

作品类型决策模板

题型识别提示

比赛质量底线

赛事专用能力

评委视角优化

降级策略

演示准备

Required behavior

会话连续性契约（强制）

实现闭环契约（强制）

Never do this

Super Dev SEEAI Flow Contract

Super Dev SEEAI - 赛事极速版 (Codex)

关键约束提醒（每次操作前必读）

Direct Activation Rule（强制）

触发方式（强制）

Runtime Contract（强制）

首轮响应契约（强制）

首轮输出模板（强制）

比赛短文档模板（强制）

推荐标题骨架

技术栈快速决策矩阵（核心）

决策树

赛事推荐组合（已验证能30分钟内交付）

小游戏开发模板库（核心）

模板1: HTML Canvas 游戏骨架

模板2: 碰撞检测工具箱

模板3: 常见游戏模式速查

模板4: 游戏HUD/UI组件

游戏开发铁律

精美页面模板库（核心）

设计Token预设（6套赛事验证主题）

主题A: 暗夜科技（适合科技/AI/数据类）

主题B: 日出暖橙（适合教育/社交/正能量）

主题C: 翡翠绿意（适合环保/健康/生活）

主题D: 极简黑白（适合工具/效率/专业）

主题E: 深海蓝绿（适合海洋/探索/游戏）

主题F: 赛博朋克（适合潮流/音乐/创意）

动效预设工具箱

Hero区域模板（3种高转化布局）