MODULE · 05 · ROLE · 角色跃迁
1
2
3
4
5
6
7
8
9

点击继续 
01 / 04
// 语言 · 代码
function handleLogin(user) { 定义流程:处理用户登录
if (!user.valid) return showError("登录失败"); 如果 没通过校验 给出失败提示
redirect("/home"); 否则 跳转到首页
}

过去,难在「会不会写代码」。

现在,难在「能不能说清楚」。

说清楚需求,就是新的编程能力

 点击左侧返回 · 点击右侧前进 
01 / 04

AI 编程的四次范式跃迁

2010  →  2025  ·  编程被重新定义的十五年

+原始编程
程序员独自面对空白文件,每一行代码都是手敲。逻辑要自己拆解,语法依靠记忆,调试只能反复 console.log。生产力上限完全由开发者的熟练度决定,一个完整 Web 应用常需数月。
点击查看详情 ›
+补全时代(Copilot)
GitHub Copilot 在 6000 万开源 repo 上预训练,让 AI 记住了所有公开代码模式。从手敲变成 Tab 接受 AI 建议,开发者从打字员升级为决策者,跨语言学习成本骤降。
点击查看详情 ›
+对话改代码(Cursor)
Cursor、Windsurf 用 RAG + 长上下文让 AI 看到整个项目。一句"把支付页加上重试",AI 跨文件理解、定位、给出完整 diff。@ 引用让上下文精确传递,大段重构变成对话。
点击查看详情 ›
+生成应用(Claude Code)
Claude Code、Devin 等 Agent 工具让 AI 从协助者变为执行者,有了工具调用能力。给个想法,AI 自主拆解、写代码、调试、部署。门槛从"会写代码"降到"会描述需求"。
点击查看详情 ›

AI 编程的故事还在继续 ——
接下来,让我们看看如何用自然语言真正驾驭它

 点击左侧返回 · 点击右侧前进 
USER · 自然语言原始输入 · INPUT
用户给 AI 的
一句话需求
SEG · 01 · INTENT

帮我开发一个【支教记忆胶囊】Web 应用。

SEG · 02 · STRUCTURE

老师可以在系统里给学生建档案、贴多个性格标签、每天写评语和传照片。

SEG · 03 · LOGIC

在支教结束时,系统能抓取这些数据,调用 AI 自动为每个孩子生成一封专属临别信。最后还能一键导出为 PDF 或 Word 文档。

SEG · 04 · IMPLEMENTATION

信件支持选择不同的排版皮肤。

点下方「开始解析 ›」按钮,看 AI 如何一层一层拆开这句话
STEP 0 / 4
AI · 四层架构 · BLUEPRINT

AI 是怎么把这段话
变成程序的?

AI 不会一上来就写代码 —— 它会先把你的话
从「人话」翻译成「图纸」。这张图纸固定拆成 4 层
看懂它,你就拿到了和 AI 对话的通用语言

01
意图层 INTENT
理解你想解决什么问题
02
结构层 STRUCTURE
搭哪些页面 & 模块
03
逻辑层 LOGIC
每块怎么运转
04
实现层 IMPLEMENTATION
用什么技术真正落地
01

意图层INTENT

理解你想解决什么问题 · 一切设计的源头

解析中
📍 在这个例子里
  • 意图分类内容生成类(情感纪念向,非工具效率类)
  • 类型多端 Web 应用(而非 App / 小程序)
  • 功能日常记录 + AI 自动生成 + 一键导出
  • 场景支教告别 · 私人专属 · 仪式感 · 温度 > 功能
🧭 通用方法 · 任何 prompt 都该先想清楚
  • 这个产品要解决什么痛点
  • 它属于工具类 / 内容生成类 / 社交类 / 数据类
  • 用什么形态承载?Web / 小程序 / App / 命令行
  • 在什么场景下被使用?场景的细节决定产品的灵魂
💡 一句话总结:「为 [谁][什么场景][什么形态] 解决 [什么问题]」 —— 意图错了,下面三层全白做。
02

结构层STRUCTURE

有哪些页面、哪些模块、用户怎么走 · 应用的骨架

解析中
📍 在这个例子里
  • 页面结构学生列表页 · 学生详情页 · 标签选择层 · 每日打卡页
  • 功能模块档案 · 标签 · 评语 · 相册
  • 用户流程建档案 → 贴标签 → 日复一日(评语 + 照片)
🧭 通用方法 · 任何 prompt 都该这样拆
  • 这东西由哪些页面拼出来?用户能看到的几张界面
  • 拆成哪些功能模块每个模块只做一件事
  • 用户从打开到完成一遍,要走哪些步骤
  • 不要跳过这一步直接写代码 —— 骨架画歪了,后面全要返工
💡 像盖房子:先画好楼层布局图,再决定每间房间放什么家具。
03

逻辑层LOGIC

每个模块按什么顺序、什么规则在运转 · 应用的"动脉"

解析中
📍 在这个例子里
  • 触发逻辑「支教结束」按钮 → 启动批量生成
  • 核心流转抓取数据 ➔ 组装 Prompt ➔ 调用 AI ➔ 流式渲染
  • 数据流动档案 + 标签 + 评语 + 照片描述 → AI → 信件文本
  • 导出逻辑信件 → 模板渲染 → PDF / Word
🧭 通用方法 · 任何 prompt 都要理清
  • 每个模块的入口是什么?点击 / 上传 / 定时 / 条件触发
  • 一次完整动作包含哪几步步骤要原子化,方便定位 bug
  • 数据从哪里来 → 经过谁加工 → 到哪里去
  • 出错时怎么处理?兜底 / 重试 / 降级
💡 这一层决定的是"按下按钮后实际会发生什么" · 它一断,按钮就是假木偶。
04

实现层IMPLEMENTATION

用什么数据 / 接口 / 组件去落地 · 给 AI 的"砖块清单"

解析中
📍 在这个例子里
  • 数据结构students[] · tags[] · diaries[] · letters[]
  • API 调用Anthropic API · html-to-pdf · docx 导出
  • 前端组件主题切换器 · 信件预览卡 · 皮肤模板库
  • 状态管理全局学生状态 + 主题状态 + LocalStorage 持久化
🧭 通用方法 · 任何 prompt 都要落到这 4 件事
  • 数据用什么结构存?数组 / 对象 / 数据库表
  • 是否要调外部 APIAI 接口 / 第三方服务 / 工具库
  • 界面要哪些可复用的组件按钮 / 表单 / 卡片 / 模态
  • 状态怎么管理 + 持久化全局 / 局部 / LocalStorage / DB
💡 把"图纸"变成"砖块清单" · AI 拿到清单才能真正动工。
架构图纸已就绪 · 下一步去做身份觉醒,准备指挥 AI 把它一砖一瓦盖起来
AI 写的代码又丑又报错,我是不是该去学几个月编程再来改?
向下看 · 换一个视角看问题
TRADITIONAL · 传统思维
埋头苦干的全栈程序员
"低头继续干 —— 多熬几个通宵、多啃几门框架,每一行代码都自己写明白,才算真正属于我的产品。"
AI ERA · 觉醒状态
指挥 AI 的产品负责人
· 超级产品经理 ·
"抬起头来看清方向 —— 让 AI 去熬夜写代码,我负责决定『做什么 · 给谁做 · 什么样才算好』。"
拖动这里 · 看看 AI 时代的新身份
拖动以升级身份 · AWAKEN
AI ERA · 觉醒状态
指挥 AI 的产品负责人
指挥 AI 干活,不自己一行行写代码。
TRADITIONAL WORKFLOW 传统开发 · 亲手写每一行代码
想需求10%
亲手敲代码 · 反复调试70%
改 Bug · 返工20%
AI-NATIVE WORKFLOW AI 开发 · 当指挥 AI 的产品负责人
用四层框架画蓝图40%
AI 写1%
验收 · 挑毛病 · 指挥返工59%

在 AI 时代,写代码的时间被压缩到了 1%。 你的核心竞争力,不再是"如何亲手实现它", 而是 判断它对不对、好不好用(验收挑刺)。

▸ 下一步
看到差距了吗?你的工作 99% 已经从"写代码"变成了"验收"
下一步,亲手把 4 个真实任务,分配给 AI 和你自己 —— 这就是产品负责人的日常。
作为超级产品经理,请分配以下工作
THE QA SORTING GAME
把这张卡片,拖到下方任一区域
🤖
AI 执行域
交给 AI 的脏活累活 —— 底层代码、参数穷举、连表查询、语法细节。
🧠
人类决策域
你必须掌握的核心护城河 —— 业务规则、审美判断、同理心与防呆设计。
权限已升级 · ROLE SHIFT COMPLETE
不要害怕看到粗糙的初稿。
那只是 AI 在向你提交第一份验收单
现在,拿起你的「四层架构图纸」,去重塑它吧。
你已完成身份切换:从敲代码的工人 · 变成指挥 AI 的超级产品经理。
支教记忆胶囊 · v0.1
SURGERY CONSOLE · 自然语言下钻
关卡 01 / 05 · 排版遮挡问题
⚠ BUG REPORT 点击给学生"贴标签",弹出一个巨大无比的灰色选择框,把学生的脸和之前的评语全挡住了。
1 STEP 01 · 选择大层级 SINGLE · 单选
这属于哪一层出了问题?
HOW TO PLAY 三步玩转沙盘
体验 Bug · 左侧应用 可以直接点击,亲自看一下这条 Bug 长什么样
单选诊断 · 上方四层架构 · 单选 · 选你认为出问题的那一层
· 逐层下钻 · 再选细分,让 AI 用自然语言修复 · 共 5 关
2 STEP 02 · 锁定细分 SINGLE · 单选
结构层的哪个部分没设计好?
ACCESS GRANTED · 自然语言指令已就绪
AI · 执行修复
MODULE · 07 · TOOLKIT

外挂工具箱

把刚才学到的方法论 · 沉淀为立即可用的招式。
报错急救 · 提示词模板 · UI 美化关键词,三类卡片 · 拿来就用。

MODULE · 08 · CAPABILITY · BOUNDARY

认清 AI 的能力边界
它才能真正听懂你的话

作为 AI 编程的使用者,我们不需要会写代码。
但我们必须比谁都清楚 —— 它在哪一类任务上是神,在哪一类任务上是聋子

知道边界 · 把对的事交给它,效率成倍提升,AI 听得懂、跑得动、不返工
不知边界 · 反复改提示词,越改越乱,最终在 deadline 前弃坑跑路

点击任一象限 · 展开干货详情
GOLDEN · RULES · 黄金法则

写在启程之前。

把这两条钉在你的脑子里。
它们比任何一段提示词、任何一个工具,都更接近 AI 编程的底层心法

01
机器负责执行代码,
你负责定义边界。


代码能不能跑通,是机器的事;
这件事该不该做、做到哪一步停手,是你的事。
AI 跑得越快,你的边界感就越值钱。
02
不要让 AI 替你思考,
把梦想拆成积木。


一句"帮我做个 App"会让 AI 失焦;
一句"先做登录页 · 只支持邮箱注册"它就立刻起飞。
把模糊变明确,把巨石变积木 —— 才是你真正的活儿。
MODULE · 09 · BOARDING · PASS

你已掌握所需要的一切。
现在告诉我,你想用它改变什么

BOARDING · STUB
DATE 2026 · 05
GATE H1
SEAT 01A
CLASS FOUNDER
BOARDING PASS · AI · HACKATHON · 2026 LIVE
PASSENGER · 旅客
FLIGHT · 航班号
AI-2026
MISSION · 你想用 AI 赋能
FROM IDEA 你的想法
TO HACKATHON 黑客松现场
AI-XXXX-2026
想清楚再写 · 这一程的登机牌只能刻一次
我是 ,我想用 AI 赋能
你的首个 AI 产品已立项 · 黑客松见