AI-Native 软件工程:01. Context & PRD

AI FRIDAY / ENGINEERING KIT

AI-Native Engineering Kit

01. Context & PRD

《AI-Native 软件工程实战：从一句需求到可运行产品》

三篇文章分别解决三个问题：

篇章	核心问题	最终产物
01 AI-Native PRD	AI 怎么帮我们把模糊需求变成完整的软件规格？	PRD + 状态机 + 时序图 + API Contract
02 AI-Native Prototype	AI 怎么从 PRD 直接生成真正可以操作的原型？	可运行高保真 Prototype
03 Prototype → Production Code	AI 怎么把原型变成真正能进项目的代码？	工程化前端代码 + 测试

相比绝大多数没有软件开发背景的用户而言，写代码并且看懂代码，并把代码运行起来，不能说不简单，实在是很困难。

该系列后续会作为付费增值内容的一部分参与AI Friday & AI Agent通过自我运营的方式养活这个品牌（自己挣token消耗的费用）。

概念驱动的交互式数学启蒙 Web 应用

它的核心定位不是枯燥的机械刷题机，而是用游戏化的可视化交互来建立底层的数学概念（例如 100 以内的加减乘除），真正做到重理解而非死记硬背。

这个项目作为《AI-Native Engineering Kit》的实战之一，有几个无法替代的优势：

业务逻辑的精准提炼（对应 PRD 阶段）：它的状态流转非常严密。从“题目生成”、“用户交互”、“错误触发引导”到“概念图解展开”，这些都可以引导 AI 生成清晰的 State Machine 和 Sequence Diagram，完美展示 AI 如何解构并接管教育产品的交互逻辑。

独特的视觉冲击力（对应 Prototype 阶段）：我们可以抛弃市面上传统教育应用那种高饱和度的低幼卡通风，利用 AI 直接驱动生成一套 16-bit 复古 RPG 像素风的 UI，并配合低饱和度暗紫色的护眼主题色调。这不仅极其吸睛，更能向读者证明：AI-Native 工作流完全能够精准驾驭极客、小众且深度的 Design System，打破“AI 只能生成千篇一律后台模板”的刻板印象。

绝对可控的工程边界（对应 Code 阶段）：它不需要庞杂的后端微服务或复杂的并发处理，所有的核心工程挑战（游戏化的状态管理、动画队列、前端组件解耦）都可以在 Web/PWA 前端完美闭环。你可以非常纯粹地展示如何用 AI 将复杂的交互 Context 转化为高质量的生产级代码。

言归正传：

传统软件工程中，需求是从一句话开始，逐渐膨胀成几十页没有人愿意看的文档。

但在 AI-Native 时代，这一链路被彻底重构。我们不再需要把业务逻辑翻译给人类程序员，而是要建立一套极其严密的“上下文（Context）”，将其直接投喂给全栈工程 Agent。

为了验证这套标准的落地，我们不写 Todo List，也不做 CRUD 后台。我们将从零构建一款真实投入使用的概念驱动交互式数学启蒙 Web 应用。

市面上的刷题软件往往只提供枯燥的机械练习，却无法解决小学二年级在“100 以内四则运算”上的底层认知痛点。我们需要用 AI 接管物理引擎与认知状态机，让抽象的算理在屏幕上变成可见、可触摸的魔法实体。

这是《AI-Native Engineering Kit》实战系列的第一篇。我们将演示：如何剥离感性的语言，用结构化的工程语境去定义需求。

01. 抛离“写文档”，定义“上下文”

AI 不是读心者。如果你对它说“帮我做一个加减乘除的学习应用”，你得到的只会是一个带有提交按钮的表单界面。

真正的 AI-Native PRD，其形态更像是一份提供给 OpenCode 的系统运行配置（project-context.md）。在暗黑模式的终端里，我们首先需要注入全局的约束规则。

[全局业务与视觉规范]

核心目标：
为二年级学生构建 100 以内四则运算的物理交互引擎。摒弃文本填空，专注底层数学概念（CRA 模型）的具象化操作。
技术栈限制：
Vue 3 + TypeScript + VueDraggable + Supabase。
视觉基准：
全局禁用高饱和度原色。强制采用 16-bit 复古 RPG 像素风，主题基准采用低饱和度暗紫系（Background: #2B2532）。

当这份 Context 生效后，AI 便不再是一个文案生成器，而是一位与你拉齐了架构审美的系统设计师。

02. 认知流转：CRA 模型与柔性干预

教育产品的核心壁垒，在于对“错误”的处理。

在传统的业务逻辑里，10 + 2 = 11 是一个直接触发 Error 弹窗的非法输入。但在我们的设计中，界面绝不直接判定对错，而是将数学纠错包装为 RPG 游戏机制。

我们让 AI 将 CRA（具象-图解-抽象）认知模型与后台异常捕获结合，自动输出了这套无缝流转的系统状态机。

stateDiagram-v2    [*] --> Context_Init: 初始化 RPG 场景    state CRA_Engine {        Context_Init --> Concrete_State: 开放物理引擎 (拖拽/拼接)        Concrete_State --> Validation_Check: 触发交互边界校验        %% 正常流转        Validation_Check --> Representational_State: [校验通过] 图解转化        Representational_State --> Abstract_State: [概念剥离] 展现数学符号        Abstract_State --> [*]: 关卡完成        %% 异常与干预        Validation_Check --> Validation_Failed: [逻辑越界] 容量溢出/阵列缺角        Validation_Failed --> Narrative_Intervention: 后台静默捕获        Narrative_Intervention --> Guided_Interact: 渲染 16-bit NPC 剧情提示        Guided_Interact --> Concrete_State: 维持错误现场，允许重试    }

03. 降维解析：时序级别的执行约束

状态机只是骨架，真正的血液在于组件间的异步通信。

以加法的“满十进一”为例，这不仅是一个进位概念，更是一个关于“容器阈值”的物理碰撞规则。当用户试图将第 11 个魔法碎片塞入只能容纳 10 个的初级背包时，我们需要严密的时序来接管这一动作。

这份由 AI 逆向推演生成的时序图，直接确立了前端视图、状态库与云端日志的调用契约。

sequenceDiagram    autonumber    actor User as 用户    participant UI as 物理引擎 (VueDraggable)    participant State as 状态机 (Pinia)    participant NPC as 叙事干预模块    participant DB as 云端日志 (Supabase)    User->>UI: 强行将第11个碎片拖入【初级背包】    UI->>State: Dispatch Action(ADD_ITEM)    rect rgb(43, 37, 50)        Note over State: 校验容量阈值 (Capacity = 10)    end    alt 校验失败 (触发越界异常)        State-->>UI: 抛出拦截，触发物理排斥阻尼        State->>DB: 异步上报状态切片 (Error: OVERFLOW)        State->>NPC: 派发异常事件，请求剧情干预        NPC-->>UI: 挂载对话框组件        UI-->>User: 提示：“磁场不稳定，快去炼金炉合成高阶魔石！”    else 校验通过 (正确合成进位)        User->>UI: 将10个碎片拖入【炼金炉】        UI->>State: Dispatch Action(MERGE)        State-->>UI: 触发低饱和紫色高亮，生成高阶魔石        State->>DB: 异步上报转化日志    end

至此，我们已经用 AI 把模糊的教育需求，推演成了极其严密的状态机和时序图。这就是上下文工程（Context Engineering）的威力：消除歧义，收敛边界。

有了这些强逻辑的底层规格约束，下一篇，我们不再打开任何 UI 设计软件。

我们将直接把这些上下文丢给 OpenCode，让它接管 NES.css，在一小时内，无缝渲染出一个真正能触发剧情的高保真 16-bit 数学魔法世界。

在后续的工程设计及开发中会大量使用我们之前所提及的思维模型与方法论，有兴趣的小伙伴也可温故知新，如果你需要相关资料也可关注私信我

极简行动法则：奥卡姆剃刀

顶级认知模型：乔哈里视窗 × AI

AI 星期五｜AI FRIDAY. 把 AI 用进真实工作