super-dev-seeai

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)

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

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

1. 图标系统: 功能图标只能来自 Lucide / Heroicons / Tabler 图标库。绝对禁止使用 emoji 表情 作为功能图标、装饰图标或临时占位。如果你发现自己即将输出包含 emoji 的 UI 代码，停下来，改用图标库组件。

2. AI 模板化禁令: 禁止紫/粉渐变主色调、禁止 emoji 图标、禁止无信息层级的卡片墙、禁止默认系统字体直出。

3. 代码即交付: 不允许“先用 emoji 顶上后面再换”。图标库必须在第一行 UI 代码前就锁定。

4. 自检规则: 在向用户展示任何 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 排序。

推荐标题骨架

• research.md：# 题目理解 # 参考风格 # Wow 点 # 主动放弃项
• prd.md：# 作品目标 # P0 主路径 # P1 Wow 点 # P2 可选项 # 非目标
• architecture.md：# 主循环 # 技术栈 # 数据流 # 最小后端 # 降级方案
• uiux.md：# 视觉方向 # 首屏/主界面 # 关键交互 # 动效重点 # 设计 Token
• spec：# Sprint Checklist 下只列 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

功能演示路径

1. 打开首页 -> 看到XXX
2. 点击XXX -> 触发XXX
3. 完成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

1. First reply: say Super Dev SEEAI mode is active and the current phase is research.
2. 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.
3. Run a fast research pass and write output/*-research.md as a real file.
4. Draft compact output/*-prd.md, output/*-architecture.md, and output/*-uiux.md in the same session and save them as real files.
5. Scope the work in P0/P1/P2 order: P0 demo path, P1 wow point, P2 only-if-time-allows extras.
6. Stop after the three compact core documents and wait for explicit confirmation.
7. Only after confirmation, create a compact Spec / tasks breakdown.
8. After Spec, move directly into an integrated full-stack build sprint: frontend first, backend if needed, then final polish.
9. 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.
10. Do not require a separate preview confirmation gate in SEEAI mode.
11. End with a concise demo summary, key亮点, and how to present the result quickly.
12. 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