用 Codex 或 Claude 帮你安装 复制这段 Prompt,粘贴到 Codex、Claude 或其他助手里,让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt;运行前请先检查来源。
npx skills add https://github.com/shangyankeji/super-dev --skill super-dev-seeai命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地?可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
基于 SOC 职业分类
| 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 |
以下规则在整个开发过程中始终有效,不得以任何理由违反:
图标系统: 功能图标只能来自 Lucide / Heroicons / Tabler 图标库。绝对禁止使用 emoji 表情 作为功能图标、装饰图标或临时占位。如果你发现自己即将输出包含 emoji 的 UI 代码,停下来,改用图标库组件。
AI 模板化禁令: 禁止紫/粉渐变主色调、禁止 emoji 图标、禁止无信息层级的卡片墙、禁止默认系统字体直出。
代码即交付: 不允许“先用 emoji 顶上后面再换”。图标库必须在第一行 UI 代码前就锁定。
自检规则: 在向用户展示任何 UI 代码或预览前,必须自检源码中不存在任何 emoji 字符(Unicode range U+2600-U+27BF, U+1F300-U+1FAFF)。发现后先替换为正式图标库再继续。
super-dev-seeai: <需求描述> and super-dev-seeai:<需求描述> as the AGENTS-driven natural-language SEEAI entry.$super-dev-seeai as the explicit Codex CLI Skill entry for the competition mode./super-dev-seeai from the slash Skill list is the official app entry.super-dev CLI for governance artifacts only when it materially helps the fast path.research。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:# 视觉方向 # 首屏/主界面 # 关键交互 # 动效重点 # 设计 Tokenspec:# 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
| 组合 | 适用场景 | CDN快速启动 | 需要构建 |
|---|---|---|---|
| HTML+Tailwind CDN+GSAP | 展示页/官网 | 是 | 否 |
| React+Vite+Tailwind+Framer | 工具/应用/多页 | 否 | 是 |
| HTML Canvas+Vanilla JS | 2D小游戏/互动 | 是 | 否 |
| Phaser.js | 复杂2D游戏 | 是 | 否 |
| Three.js | 3D展示/沉浸 | 是 | 否 |
赛事铁律: 能用 CDN 零构建的优先用 CDN,省掉构建和配置时间。
适用于所有 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; : ; : ; : ; : ; : flex; : space-between; : ; : ; : ; : none; : ; }
{ : absolute; : ; : flex; : column; : center; : center; : (,,,); : ; : ; : opacity ; }
{ : ; : none; }
{ : ; : ; : ; }
{ : ; : ; }
{ : ; : none; : ; : ; : ; : ; : ; : pointer; : transform , background ; }
{ : (); : ; }
{ : (,,,); : ; : ; : (); }
Score: 0
Level: 1
Best: 0
GAME_TITLE
游戏描述
Start Game
// 矩形碰撞
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; .=+.()*; .=+.()*; .=color;
}
() { .+=.; .+=.; .-=.; .+=; }
() {
ctx.=.; ctx.=.;
ctx.(.-./, .-./, ., .);
ctx.=;
}
() { . <= ; }
}
| 游戏类型 | 核心循环 | 关键对象 | 反馈重点 |
|---|---|---|---|
| 贪吃蛇 | 移动->吃食->变长->碰撞检测 | 蛇身数组、食物坐标 | 吃到食物闪烁、蛇身渐变色 |
| 打砖块 | 发球->挡板->砖块碰撞 | 挡板、球、砖块网格 | 砖块破碎粒子、连击特效 |
| 飞机大战 | 移动->射击->躲避->Boss | 玩家飞机、敌机数组、子弹数组 | 爆炸粒子、屏幕震动 |
| 消除游戏 | 选择->匹配->消除->下落 | 网格数组、选中状态、动画队列 | 消除爆炸、连锁得分飞字 |
| 跑酷 | 跳跃->障碍->加速->距离 | 角色、障碍物队列、地面 | 跳跃拉伸、落地压缩、速度线 |
// 屏幕震动
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:, :x+, :y+, color, :, :, :, :, : });
.().(el);
( { el..=(y-)+; el..=; });
( el.(), );
}
: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);
}
: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);
}
: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);
}
: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);
}
: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);
}
: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);
eased = - .(-p, );
el. = .(start + (target-start)*eased).();
(p<) (update);
}
(update);
}
() {
glow = .();
.(glow., { :, :, :,
:, :,
:,
:, :, : });
container.. = ;
container.(glow);
container.(, {
r = container.();
glow.. = (e.-r.)+;
glow.. = (e.-r.)+;
});
}
() {
i = ; el. = ;
() { (i<text.) { el. += text.(i++); (type, speed); } }
();
}
() {
card.(, {
r = card.();
x = (e.-r.)/r. - ;
y = (e.-r.)/r. - ;
card.. = ;
});
card.(, { card.. = ; });
}
<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</>
<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>
<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>
比赛不只看代码,文档和演示决定最终名次。以下模板在 Spec 确认后立即生成。
# PROJECT_NAME
> 一句话描述项目核心价值(评委3秒内能理解)
## 项目亮点
- 亮点1(技术实现/设计/创新)
- 亮点2
- 亮点3
## 技术栈
| 层级 | 技术 | 选型理由 |
|------|------|----------|
| 前端 | XXX | 快速/美观/生态 |
| 后端 | XXX(如无则写"纯前端") | 必要性 |
| 数据 | XXX | 轻量/够用 |
| 部署 | XXX | 一键/零配置 |
## 快速开始
```bash
npm install && npm run dev
### 模板2: 技术亮点文档
```markdown
## 1. 创新点:XXX
**问题**: 为什么要做这个
**方案**: 具体怎么实现的
**效果**: 数据/截图/对比
## 2. 技术难点突破:XXX
**挑战**: 遇到什么问题
**解决**: 怎么解决的
**收获**: 学到了什么
## 30秒电梯演讲
大家好,我们是TEAM_NAME。我们做了PROJECT_NAME。
它解决的核心问题是【痛点】。我们的方案是【一句话方案】。
最大的亮点是【wow点】。谢谢!
## 2分钟完整演示
### 开场(15秒):我们注意到一个问题... 切到首页展示痛点场景
### 核心演示(60秒):按功能顺序走一条完整主路径
### 亮点展示(30秒):展示技术亮点/创新设计
### 总结(15秒):一句话总结核心价值 + 未来展望
## 演示注意
- 准备备用演示路径(主路径出问题时的Plan B)
- 数据预填充,不要现场输入
- 不依赖网络,本地运行
## 必答题
1. 技术方案为什么这样选? -> 性能/生态/时间权衡
2. 再给一周时间优先做什么? -> 核心体验/用户反馈
3. 最大的技术挑战? -> 具体问题+解决方案
4. 和竞品相比核心差异? -> 创新点+用户价值
5. 用户体验有什么特别设计? -> 细节+数据支撑
## 加分回答(主动提及)
- 我们不只做了功能,还关注了XXX细节
- 我们在有限时间内做了降级方案确保演示稳定
## 减分避免
- 不要说"时间不够所以没做完"
- 不要说"这个功能比较简单"
- 不要说"AI帮我们写的"(改说"我们利用AI辅助提升了开发效率")
进入 SEEAI 后,优先先判断当前更像哪一类题,再决定研究和实现重心:
如果需求跨多类,默认选最容易形成强演示效果的那一类做主轴,其余只做辅助。
在首轮判断时,优先用需求关键词快速归类,不要犹豫太久:
即使在半小时里,也必须守住这些底线:
research.output/*-research.md as a real file.output/*-prd.md, output/*-architecture.md, and output/*-uiux.md in the same session and save them as real files..super-dev/workflow-state.json, persist flow_variant = seeai so resume/continue stays in SEEAI mode..super-dev/SESSION_BRIEF.md,每次继续前必须先读取。