-
Notifications
You must be signed in to change notification settings - Fork 8
Expand file tree
/
Copy paththinking-framework.html
More file actions
388 lines (362 loc) · 28.2 KB
/
Copy paththinking-framework.html
File metadata and controls
388 lines (362 loc) · 28.2 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<link rel="stylesheet" href="site-mobile.css">
<title>AI第一思考 — Ideate·Ask·Plan·Debug·Agent — AINav</title>
<meta name="description" content="AI时代提效底层逻辑：创想Ideate定方向，再Ask问对、Plan路径、Debug修好、Agent放大。">
<link rel="canonical" href="https://aiv123.com/thinking-framework.html">
<meta property="og:type" content="website">
<meta property="og:title" content="AI第一思考 — Ideate·Ask·Plan·Debug·Agent">
<meta property="og:description" content="先创想定方向，再问对问题→想清楚路径→修好错误→让它自己跑。">
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect rx='18' width='100' height='100' fill='%230969da'/><text x='50' y='72' font-size='60' text-anchor='middle' fill='white' font-family='system-ui' font-weight='700'>AI</text></svg>">
<style>
::root,html[data-theme="dark"]{--bg:#0f1419;--panel:#151b23;--card:#1c2430;--border:#2d3848;--text:#e6edf3;--muted:#8b9cb3;--accent:#58a6ff;--accent2:#3fb950;--warn:#d29922;--danger:#f85149;--hot:#ff6b6b;--af:#f97316;--af2:#06b6d2;--af3:#a78bfa}
html[data-theme="light"]{--bg:#f6f8fa;--panel:#fff;--card:#fff;--border:#d0d7de;--text:#1f2328;--muted:#59636e;--accent:#0969da;--accent2:#1a7f37;--warn:#9a6700;--danger:#cf222e;--hot:#e53935;--af:#ea580c;--af2:#0891b2;--af3:#7c3aed}
@media(prefers-color-scheme:light){html[data-theme="system"]{--bg:#f6f8fa;--panel:#fff;--card:#fff;--border:#d0d7de;--text:#1f2328;--muted:#59636e;--accent:#0969da;--accent2:#1a7f37;--warn:#9a6700;--danger:#cf222e;--hot:#e53935;--af:#ea580c;--af2:#0891b2;--af3:#7c3aed}}
*{box-sizing:border-box}body{margin:0;font-family:"Segoe UI",system-ui,"PingFang SC","Microsoft YaHei",sans-serif;background:var(--bg);color:var(--text);line-height:1.6}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
.cp-top{padding:.75rem 1rem;border-bottom:1px solid var(--border);background:var(--panel);position:sticky;top:0;z-index:10}
.cp-top-inner{max-width:76rem;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;justify-content:space-between}
.cp-nav a{font-weight:600;margin-right:1rem;font-size:.88rem}
.cp-toolbar{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
.theme-btn{font-size:.72rem;padding:.2rem .5rem;border-radius:5px;border:1px solid var(--border);background:var(--card);color:var(--muted);cursor:pointer;font-family:inherit}
.theme-btn.is-active{color:var(--accent);border-color:var(--accent);font-weight:600}
.cp-wrap{max-width:76rem;margin:0 auto;padding:1rem}h1{font-size:1.35rem;margin:0 0 .3rem}
.cp-subtitle{font-size:.88rem;color:var(--muted);margin-bottom:1rem}
.cp-updated-line { font-size: 0.76rem; color: var(--muted); margin: 0 0 0.3rem; }
.cp-footer {max-width:76rem;margin:2rem auto 1rem;padding:0 1rem;font-size:.76rem;color:var(--muted);text-align:center}
.cp-footer a{color:var(--muted)}
.tf-hero{text-align:center;padding:2rem 1rem 1rem}
.tf-hero-icons{display:flex;justify-content:center;gap:1.2rem;margin-bottom:1.2rem;flex-wrap:wrap}
.tf-hero-icon{padding:.8rem 1.2rem;border-radius:12px;font-size:1.1rem;font-weight:700;display:flex;flex-direction:column;align-items:center;gap:.3rem;text-decoration:none;transition:transform .15s,box-shadow .15s}
.tf-hero-icon:hover{text-decoration:none;transform:translateY(-3px);box-shadow:0 4px 16px rgba(0,0,0,.2)}
.tf-hero-icon span:first-child{font-size:2.2rem}
.tf-hero-subtitle{font-size:.92rem;color:var(--muted);max-width:42rem;margin:0 auto;line-height:1.8}
.tf-flow{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;justify-content:center;margin:1.5rem 0;font-size:.85rem;font-weight:600}
.tf-flow-step{padding:.4rem .8rem;border-radius:8px;border:1.5px solid var(--border);background:var(--card);text-align:center}
.tf-flow-arrow{color:var(--muted);font-size:1rem}
.tf-card{padding:1.2rem;border-radius:12px;border:1px solid var(--border);background:var(--card);margin-bottom:1rem;transition:border-color .15s}
.tf-card:hover{border-color:var(--accent)}
.tf-card a{text-decoration:none;color:inherit}
.tf-card-hd{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}
.tf-card-icon{font-size:1.4rem}
.tf-card-name{font-weight:700;font-size:1.1rem}
.tf-card-tag{font-size:.7rem;padding:.15rem .4rem;border-radius:3px;margin-left:auto;font-weight:600}
.tf-card p{font-size:.85rem;color:var(--muted);line-height:1.7;margin:0 0 .6rem}
.tf-card-points{display:flex;flex-wrap:wrap;gap:.3rem;margin-bottom:.6rem}
.tf-card-point{font-size:.72rem;padding:.2rem .5rem;border-radius:4px;border:1px solid var(--border);color:var(--muted);background:var(--panel)}
.tf-card-link{font-size:.82rem;font-weight:600}
.tf-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin:1.5rem 0}
.tf-grid .tf-card.tf-card-lead{grid-column:1 / -1}
@media(max-width:640px){.tf-grid{grid-template-columns:1fr}}
</style>
</head>
<body>
<div class="cp-top">
<div class="cp-top-inner">
<div class="cp-nav"><a href="index.html">AINav</a><a href="thinking-framework.html" style="color:var(--accent)">AI第一思考</a></div>
<div class="cp-toolbar">
<button class="theme-btn is-active" data-theme-set="dark">Dark</button>
<button class="theme-btn" data-theme-set="light">Light</button>
<button class="theme-btn" data-theme-set="system">System</button>
</div>
</div>
</div>
<div class="cp-wrap">
<!-- Hero -->
<div class="tf-hero">
<div class="tf-hero-icons">
<a href="ideate.html" class="tf-hero-icon" style="background:rgba(167,139,250,.08);border:1px solid rgba(167,139,250,.25);color:var(--af3)"><span>✨</span><span>Ideate</span></a>
<a href="ask.html" class="tf-hero-icon" style="background:rgba(88,166,255,.08);border:1px solid rgba(88,166,255,.2);color:var(--accent)"><span>💬</span><span>Ask</span></a>
<a href="plan.html" class="tf-hero-icon" style="background:rgba(249,115,22,.08);border:1px solid rgba(249,115,22,.2);color:var(--af)"><span>🗺️</span><span>Plan</span></a>
<a href="debug.html" class="tf-hero-icon" style="background:rgba(210,153,34,.08);border:1px solid rgba(210,153,34,.2);color:var(--warn)"><span>🔧</span><span>Debug</span></a>
<a href="agent.html" class="tf-hero-icon" style="background:rgba(63,185,80,.08);border:1px solid rgba(63,185,80,.2);color:var(--accent2)"><span>🤖</span><span>Agent</span></a>
</div>
<h1>AI第一思考</h1>
<div class="tf-hero-subtitle">
不管你是做AI编程、AI剪辑、AI客服、AI造物……提效之前先想清楚「创什么」，再走执行四步：<br>
<strong style="color:var(--text)">创想定方向 → 问对问题 → 想清楚路径 → 修好错误 → 让它自己跑</strong><br>
Ideate 解决「值不值得做」；Ask·Plan·Debug·Agent 解决「怎么做得快」。
</div>
</div>
<!-- 循环图 -->
<div class="tf-flow">
<div class="tf-flow-step" style="border-color:rgba(167,139,250,.35);color:var(--af3)">✨ 你 Ideate</div>
<span class="tf-flow-arrow">→</span>
<div class="tf-flow-step" style="border-color:rgba(88,166,255,.3);color:var(--accent)">💬 你 Ask</div>
<span class="tf-flow-arrow">→</span>
<div class="tf-flow-step" style="border-color:rgba(249,115,22,.3);color:var(--af)">🗺️ AI Plan</div>
<span class="tf-flow-arrow">→</span>
<div class="tf-flow-step" style="border-color:var(--accent2);color:var(--accent2)">⚡ AI Execute</div>
<span class="tf-flow-arrow">→</span>
<div class="tf-flow-step" style="border-color:rgba(210,153,34,.3);color:var(--warn)">🔧 你 Debug</div>
<span class="tf-flow-arrow">→</span>
<div class="tf-flow-step" style="border-color:rgba(63,185,80,.3);color:var(--accent2)">🤖 Agent循环</div>
</div>
<!-- 五大卡片 -->
<div class="tf-grid">
<div class="tf-card tf-card-lead" id="ideate">
<a href="ideate.html">
<div class="tf-card-hd">
<span class="tf-card-icon">✨</span>
<span class="tf-card-name" style="color:var(--af3)">Ideate · 创想</span>
<span class="tf-card-tag" style="background:rgba(167,139,250,.12);color:var(--af3)">方向</span>
</div>
<p><strong>先想清楚「创什么」，再问 AI「怎么做」。</strong>发散选项、找差异化、筛到一个值得推进的选题——否则 Ask 再精准，也只是高效地做错题。</p>
<div class="tf-card-points">
<span class="tf-card-point">痛点发现</span>
<span class="tf-card-point">选项发散</span>
<span class="tf-card-point">可复制提示词</span>
<span class="tf-card-point">差异化一句话</span>
<span class="tf-card-point">交给 Ask</span>
</div>
<div class="tf-card-link" style="color:var(--af3)">查看详细解读 →</div>
</a>
</div>
<div class="tf-card">
<a href="ask.html">
<div class="tf-card-hd">
<span class="tf-card-icon">💬</span>
<span class="tf-card-name" style="color:var(--accent)">Ask</span>
<span class="tf-card-tag" style="background:rgba(88,166,255,.1);color:var(--accent)">提问</span>
</div>
<p><strong>问对问题，比得到答案更重要。</strong>AI不是不行，是你没问对。同一需求，笼统问得废话，精准问直接可用。</p>
<div class="tf-card-points">
<span class="tf-card-point">5个层级</span>
<span class="tf-card-point">万能公式</span>
<span class="tf-card-point">可复制模板</span>
<span class="tf-card-point">闭环迭代</span>
</div>
<div class="tf-card-link" style="color:var(--accent)">查看详细解读 →</div>
</a>
</div>
<div class="tf-card">
<a href="plan.html">
<div class="tf-card-hd">
<span class="tf-card-icon">🗺️</span>
<span class="tf-card-name" style="color:var(--af)">Plan</span>
<span class="tf-card-tag" style="background:rgba(249,115,22,.1);color:var(--af)">蓝图</span>
</div>
<p><strong>先想清楚，再让AI动手。</strong>没有Plan的AI = 高速公路上蒙着眼开车。5分钟Plan省2小时返工。</p>
<div class="tf-card-points">
<span class="tf-card-point">5个必答题</span>
<span class="tf-card-point">Plan模板</span>
<span class="tf-card-point">可复制提示词</span>
<span class="tf-card-point">闭环验收</span>
</div>
<div class="tf-card-link" style="color:var(--af)">查看详细解读 →</div>
</a>
</div>
<div class="tf-card">
<a href="debug.html">
<div class="tf-card-hd">
<span class="tf-card-icon">🔧</span>
<span class="tf-card-name" style="color:var(--warn)">Debug</span>
<span class="tf-card-tag" style="background:rgba(210,153,34,.1);color:var(--warn)">保障</span>
</div>
<p><strong>AI一定会出错，关键是修得快。</strong>会不会Debug，决定你用AI是"提效"还是"添堵"。3层方法解决100%问题。</p>
<div class="tf-card-points">
<span class="tf-card-point">3层方法</span>
<span class="tf-card-point">场景速查</span>
<span class="tf-card-point">可复制定位词</span>
<span class="tf-card-point">模板防复发</span>
</div>
<div class="tf-card-link" style="color:var(--warn)">查看详细解读 →</div>
</a>
</div>
<div class="tf-card">
<a href="agent.html">
<div class="tf-card-hd">
<span class="tf-card-icon">🤖</span>
<span class="tf-card-name" style="color:var(--accent2)">Agent</span>
<span class="tf-card-tag" style="background:rgba(63,185,80,.1);color:var(--accent2)">放大器</span>
</div>
<p><strong>从你做，到AI做，到AI自己跑。</strong>10x→100x→1000x的底层逻辑：把"人必须参与"的环节越来越少。</p>
<div class="tf-card-points">
<span class="tf-card-point">3个阶段</span>
<span class="tf-card-point">工具矩阵</span>
<span class="tf-card-point">造工具</span>
<span class="tf-card-point">可复制提示词</span>
<span class="tf-card-point">人审设置</span>
</div>
<div class="tf-card-link" style="color:var(--accent2)">查看详细解读 →</div>
</a>
</div>
</div>
<!-- 总结 -->
<div style="margin-top:1rem;padding:1rem;border-radius:10px;background:var(--card);border:1px solid var(--border);text-align:center">
<div style="font-size:.92rem;color:var(--text);font-weight:700;margin-bottom:.3rem">Ideate是方向，Ask是输入，Plan是蓝图，Debug是保障，Agent是放大器</div>
<div style="font-size:.82rem;color:var(--muted);line-height:1.8">
五者循环：你 Ideate → 你 Ask → AI Plan → AI Execute → 你 Debug → Agent 自动循环<br>
方向错了，后面提效倍率越高越浪费；方向对了，每多掌握一项，提效再翻一番
</div>
<div style="font-size:.76rem;color:var(--muted);margin-top:.65rem;line-height:1.7;opacity:.9">
熟悉 PDCA？对照一下：<strong style="color:var(--text);font-weight:600">Ideate</strong>≈定课题 · <strong style="color:var(--text);font-weight:600">Plan</strong>≈P · <strong style="color:var(--text);font-weight:600">Execute/Agent</strong>≈D · <strong style="color:var(--text);font-weight:600">Debug/验收</strong>≈C · <strong style="color:var(--text);font-weight:600">闭环迭代</strong>≈A — Ask 是 AI 时代把课题翻译成可执行提问的桥梁。
</div>
</div>
<!-- 五步提示词速查 -->
<div style="margin-top:1.35rem;padding:1rem 1.1rem;border-radius:10px;border:1px solid var(--border);background:var(--card)">
<div style="font-weight:700;font-size:.95rem;margin-bottom:.45rem">📝 五步可复制提示词</div>
<p style="font-size:.8rem;color:var(--muted);margin:0 0 .65rem;line-height:1.6">每步页面底部有整段可粘贴 Prompt。总览只做入口：</p>
<div style="display:flex;flex-wrap:wrap;gap:.4rem;font-size:.8rem">
<a href="ideate.html#prompts" style="padding:.3rem .65rem;border-radius:6px;border:1px solid rgba(167,139,250,.25);background:rgba(167,139,250,.08);color:var(--af3);font-weight:600;text-decoration:none">Ideate 脑暴</a>
<a href="ask.html#prompts" style="padding:.3rem .65rem;border-radius:6px;border:1px solid rgba(88,166,255,.25);background:rgba(88,166,255,.08);color:var(--accent);font-weight:600;text-decoration:none">Ask 公式</a>
<a href="plan.html#prompts" style="padding:.3rem .65rem;border-radius:6px;border:1px solid rgba(249,115,22,.25);background:rgba(249,115,22,.08);color:var(--af);font-weight:600;text-decoration:none">Plan 只出计划</a>
<a href="debug.html#prompts" style="padding:.3rem .65rem;border-radius:6px;border:1px solid rgba(210,153,34,.25);background:rgba(210,153,34,.08);color:var(--warn);font-weight:600;text-decoration:none">Debug 定位</a>
<a href="agent.html#prompts" style="padding:.3rem .65rem;border-radius:6px;border:1px solid rgba(63,185,80,.25);background:rgba(63,185,80,.08);color:var(--accent2);font-weight:600;text-decoration:none">Agent 执行/造工具</a>
<a href="prompt-guide.html" style="padding:.3rem .65rem;border-radius:6px;border:1px solid var(--border);background:var(--panel);color:var(--muted);font-weight:600;text-decoration:none">提示词指南 →</a>
</div>
</div>
<!-- 链路补充（来自实战） -->
<div style="margin-top:1.25rem;padding:1rem 1.1rem;border-radius:10px;border:1px solid rgba(167,139,250,.25);background:rgba(167,139,250,.05)">
<div style="font-weight:700;font-size:.95rem;margin-bottom:.55rem;color:var(--af3)">链路还要补上的实战原则</div>
<div style="display:grid;grid-template-columns:1fr;gap:.55rem;font-size:.82rem;color:var(--muted);line-height:1.65;text-align:left">
<div><strong style="color:var(--text)">1. 人负责判断，AI 负责执行</strong> — 「100% AI 写代码」说的是 Execute；选题、好玩与否、砍范围、何时停，必须人拍板（Ideate / Debug）。</div>
<div><strong style="color:var(--text)">2. 好玩 > 物理真实</strong> — Ideate/Debug 时可以故意调「不真实」的参数（如食物堆更容易倒），体验优先于仿真。</div>
<div><strong style="color:var(--text)">3. 做不出产物，就先造工具</strong> — Agent 放大器：AI 画不了整张地图 → 让它做地图编辑器 → 你用工具搭。这是 Vibe Coding 最高杠杆之一。</div>
<div><strong style="color:var(--text)">4. 多会话 + 上下文策略</strong> — 新功能用干净会话；修 Bug 用长上下文会话；2～3 路并行各管模块，减少互相踩文件。</div>
<div><strong style="color:var(--text)">5. 把约束写进 Rules / CLAUDE.md</strong> — 赛制、编码约定、禁止事项提前固化，减少每次 Ask 重复解释（Capybara 把 VibeJam 规则丢进 <code>/rules</code>）。</div>
<div><strong style="color:var(--text)">6. 模块化提问，别一次「做亚马逊」</strong> — Plan/Ask 拆成可验收小目标；大上下文会「忘」——独立产品里也常见「过长单会话质量掉崖」。</div>
</div>
</div>
<!-- 实战案例 -->
<div style="margin-top:1.5rem">
<div style="font-size:1.05rem;font-weight:700;margin-bottom:.75rem;padding-bottom:.3rem;border-bottom:2px solid var(--border)">📚 实战案例 · 五步怎么走的</div>
<p style="font-size:.8rem;color:var(--muted);margin:0 0 .85rem;line-height:1.6">公开案例用来对照链路，不是背书。读完问自己：哪一步是我在做，哪一步我甩给了 AI。案例持续增补。</p>
<div class="tf-card" style="margin-bottom:.85rem">
<div class="tf-card-hd">
<span class="tf-card-icon">🐹</span>
<span class="tf-card-name" style="color:var(--text)">Capybara 外卖 · Vibe Jam 2026 冠军</span>
<span class="tf-card-tag" style="background:rgba(63,185,80,.12);color:var(--accent2)">完整五步</span>
</div>
<p style="font-size:.82rem;color:var(--muted);line-height:1.7;margin:0 0 .55rem">
@leocoout · 9 年 iOS · 15 天 · 约 <$150 · Claude Code ≈2.7 万行 / 188+ commit · 奖金 $25k。Three.js；贴图/3D/音频分给图像与音频模型；还用过 <a href="https://github.com/OpusGameLabs/game-creator" target="_blank" rel="noopener noreferrer">game-creator Skill</a>。
</p>
<div style="font-size:.78rem;color:var(--muted);line-height:1.75;border:1px solid var(--border);border-radius:8px;padding:.65rem .8rem;background:var(--panel)">
<strong style="color:var(--af3)">Ideate</strong>：一句「水豚骑摩托送外卖」→ GPT/Grok 脑暴；堆叠掉落因「真实不一定好玩」。<br>
<strong style="color:var(--accent)">Ask</strong>：精力在 Prompt；赛制规则进 <code>/rules</code>；非一句 Prompt 出成品。<br>
<strong style="color:var(--af)">Plan</strong>：周 1 核心玩法闭环；周 2 风格、联机、编辑器。<br>
<strong style="color:var(--warn)">Debug</strong>：Sandbox 调手感；长会话修 Bug；整城生成失败后改思路。<br>
<strong style="color:var(--accent2)">Agent</strong>：2～3 路并行；地图/道路/过场编辑器 = 造工具放大产能。
</div>
<p style="font-size:.76rem;margin:.55rem 0 0;color:var(--muted)">
<a href="https://eu.36kr.com/zh/p/3896358295029383" target="_blank" rel="noopener noreferrer">36氪</a> ·
<a href="https://leocoout.medium.com/how-i-made-25k-in-15-days-with-a-game-built-entirely-by-claude-code-94b3b817f0ce" target="_blank" rel="noopener noreferrer">作者 Medium</a> ·
<a href="https://www.reddit.com/r/vibecoding/comments/1urz4mc/i_won_25k_with_a_capybara_game_entirely_made_with/" target="_blank" rel="noopener noreferrer">Reddit</a> ·
<a href="https://capybara-vibejam26.leocoout.dev/" target="_blank" rel="noopener noreferrer">试玩</a> ·
评委综述：<a href="https://levels.io/vibe-jam-2026-winners-quality" target="_blank" rel="noopener noreferrer">levels.io</a>
</p>
</div>
<div class="tf-card" style="margin-bottom:.85rem">
<div class="tf-card-hd">
<span class="tf-card-icon">🛒</span>
<span class="tf-card-name" style="color:var(--text)">Vibe Jam 2026 二三名（对照赛道）</span>
<span class="tf-card-tag" style="background:rgba(249,115,22,.1);color:var(--af)">Ideate 多样性</span>
</div>
<p style="font-size:.82rem;color:var(--muted);line-height:1.7;margin:0">
🥈 <strong>Fanto's Mega-Mart</strong>（$10k）· 🥉 <strong>WenWare</strong>（$5k，兼 Most Played）。同年还有 Best Art / Most Original / Most Polished 等专项奖。说明同一赛制下，Ideate 选题可以走玩法、美术、气氛、荒诞完全不同的方向——链路相同，创想不同。<br>
试玩索引：<a href="https://vibej.am/2026/" target="_blank" rel="noopener noreferrer">vibej.am/2026</a> ·
Mega-Mart <a href="https://fantos-megamart.vercel.app/" target="_blank" rel="noopener noreferrer">打开</a> ·
WenWare <a href="https://wen-ware.com/" target="_blank" rel="noopener noreferrer">打开</a>
</p>
</div>
<div class="tf-card" style="margin-bottom:.85rem">
<div class="tf-card-hd">
<span class="tf-card-icon">🛠️</span>
<span class="tf-card-name" style="color:var(--text)">「造工具」杠杆（同一冠军项目拆解）</span>
<span class="tf-card-tag" style="background:rgba(88,166,255,.1);color:var(--accent)">Agent 专项</span>
</div>
<p style="font-size:.82rem;color:var(--muted);line-height:1.7;margin:0">
整城一次生成失败 → 不做硬刚，改为让 Claude 做<strong>游戏内编辑器</strong>（地形、刷材质、摆模型、自动铺路、过场时间轴）。作者认为最大提效来自工具链，而非业务代码行数。对照 <a href="agent.html">Agent</a>：放大器 = 提高下一轮产能。
</p>
</div>
<div class="tf-card" style="margin-bottom:.85rem">
<div class="tf-card-hd">
<span class="tf-card-icon">📸</span>
<span class="tf-card-name" style="color:var(--text)">Photo AI · levelsio 一人公司产品</span>
<span class="tf-card-tag" style="background:rgba(167,139,250,.12);color:var(--af3)">Ideate+Plan 商业</span>
</div>
<p style="font-size:.82rem;color:var(--muted);line-height:1.7;margin:0">
非比赛向：抓住「AI 写真」窗口，极简栈（PHP/SQLite 等）+ API 算力（Replicate）快速上线，公开迭代至高 MRR。五步映射偏：
<strong style="color:var(--af3)">Ideate</strong> 选对浪头与一句话价值（Fire your photographer）→
<strong style="color:var(--af)">Plan</strong> 砍复杂度、付费从第一天起 →
<strong style="color:var(--warn)">Debug</strong> 用真实付费用户反馈调「好看」→
Coding Agent 是加速器，分发与品味仍是人。<br>
综述：<a href="https://www.indiehackers.com/post/photo-ai-by-pieter-levels-complete-deep-dive-case-study-0-to-132k-mrr-in-18-months-3a9a2b1579" target="_blank" rel="noopener noreferrer">Indie Hackers 案例</a> ·
产品 <a href="https://photoai.com/" target="_blank" rel="noopener noreferrer">photoai.com</a>
</p>
</div>
<div class="tf-card" style="margin-bottom:.85rem">
<div class="tf-card-hd">
<span class="tf-card-icon">🕹️</span>
<span class="tf-card-name" style="color:var(--text)">经典游戏 Web 移植（小时级）</span>
<span class="tf-card-tag" style="background:rgba(63,185,80,.12);color:var(--accent2)">Agent 极限</span>
</div>
<p style="font-size:.82rem;color:var(--muted);line-height:1.7;margin:0">
levelsio 公开称用 AI 约 1 小时把 <em>Return to Castle Wolfenstein</em> 搬到 Web 并加多人；另有旧 Quake 2 地图复活为网页联机。映射：目标极清晰（移植+联机）时，Ask/Plan 很短，Agent 吞吐拉满；但仍依赖人对「可玩边界」的验收（Debug）。<br>
<a href="https://levels.io/vibe-jam-2026-winners-quality" target="_blank" rel="noopener noreferrer">相关博文索引（文内链接）</a>
</p>
</div>
<div class="tf-card" style="margin-bottom:.85rem">
<div class="tf-card-hd">
<span class="tf-card-icon">📱</span>
<span class="tf-card-name" style="color:var(--text)">国内：两周半上线微信小程序 / 7 天周报工具</span>
<span class="tf-card-tag" style="background:rgba(88,166,255,.1);color:var(--accent)">完整五步·轻量</span>
</div>
<p style="font-size:.82rem;color:var(--muted);line-height:1.7;margin:0">
中文圈常见模式：Cursor/Claude「先对话定需求 → MVP 验证 → 模式扩展」；另有 7 天「AI 周报生成器」（骨架→核心→样式→部署）叙事。共同点：<strong>需求对话先于代码</strong>，与 Ideate→Ask→Plan 同构，规模比比赛游戏小，更适合日常产品。<br>
参考：<a href="https://www.80aj.com/2026/05/08/ai-wechat-minicode-dev/" target="_blank" rel="noopener noreferrer">小程序两周半上线</a> ·
<a href="https://cloud.tencent.com/developer/article/2680241" target="_blank" rel="noopener noreferrer">7 天周报生成器</a>
</p>
</div>
<div class="tf-card" style="margin-bottom:.85rem">
<div class="tf-card-hd">
<span class="tf-card-icon">🎮</span>
<span class="tf-card-name" style="color:var(--text)">Vibe Jam 赛制本身</span>
<span class="tf-card-tag" style="background:rgba(249,115,22,.1);color:var(--af)">Ideate+Plan 约束</span>
</div>
<p style="font-size:.82rem;color:var(--muted);line-height:1.7;margin:0">
Pieter Levels 主办，赞助含 Cursor / Bolt / Glif / Tripo 等；规则要求代码绝大部分由 AI 生成。等于赛前写死 Ideate/Plan 边界：必须意图驱动。评委称 2026 作品质量接近「真游戏」门槛。<br>
<a href="https://vibej.am/2026/" target="_blank" rel="noopener noreferrer">vibej.am/2026</a> ·
<a href="https://levels.io/vibe-jam-2026-winners-quality" target="_blank" rel="noopener noreferrer">获奖综述</a>
</p>
</div>
<div class="tf-card">
<div class="tf-card-hd">
<span class="tf-card-icon">📦</span>
<span class="tf-card-name" style="color:var(--text)">资产墙：代码 Agent ≠ 全栈造梦</span>
<span class="tf-card-tag" style="background:rgba(210,153,34,.1);color:var(--warn)">Plan 专项</span>
</div>
<p style="font-size:.82rem;color:var(--muted);line-height:1.7;margin:0">
Coding Agent 擅玩法/脚手架；贴图、Sprite、3D、音频仍要图像/3D/音频管线（Capybara：GPT Images / Grok / Tripo / Suno / ElevenLabs）。Plan 时拆清「代码一路 + 资产多路」，避免在 Ask 里空耗。<br>
延伸阅读（游戏资产墙实测）：<a href="https://sorceress.games/blog/use-claude-code-for-vibe-coding-game-dev-test" target="_blank" rel="noopener noreferrer">Claude Code × 游戏资产</a>
</p>
</div>
</div>
<div class="cp-footer">
<p class="cp-updated-line"><span class="cp-updated">最后更新：2026-07-27</span></p>
<p>AI第一思考 · Ideate·Ask·Plan·Debug·Agent · 一切提效的底层逻辑</p>
<p><a href="index.html">← 返回 AINav 首页</a> · <a href="free-tier.html">🆓 免费额度</a> · <a href="token-optimization.html">Token优化</a> · <a href="ai-factory-plan.html">AI造物流水线</a> · <a href="coding-plan.html">编程套餐横评</a> · <a href="ideate.html">Ideate</a> · <a href="agent.html">Agent</a></p>
</div>
</div>
<script>
(function(){
var saved=localStorage.getItem('theme')||'dark';
document.documentElement.setAttribute('data-theme',saved);
document.querySelectorAll('.theme-btn').forEach(function(b){
b.classList.toggle('is-active',b.getAttribute('data-theme-set')===saved);
});
document.querySelectorAll('.theme-btn').forEach(function(b){
b.addEventListener('click',function(){
var t=b.getAttribute('data-theme-set');
document.documentElement.setAttribute('data-theme',t);
localStorage.setItem('theme',t);
document.querySelectorAll('.theme-btn').forEach(function(x){x.classList.toggle('is-active',x.getAttribute('data-theme-set')===t)});
});
});
})();
</script>
<script src="./back-to-top.js"></script>
</body>
</html>