WEB系统极速开发指南
全过程的读法与各本分工,见 写作指南总览。
本指南说明如何借助带技能的 AI 编辑器,按软件工程顺序完成一个可登录、并能走完业务闭环的 WEB 系统。附图见 论文用图指南。说明书的章节与摘要见 毕业设计写作指南。交稿前的 AIGC 检测见 AI智评介绍。
宜先写成用户故事,再据此拟定实现计划。每一步均先写测试,而后编码。
编辑器与环境
编辑器任选其一。
- Cursor:在插件市场安装 Superpowers,于对话中以
/调用技能。 - Visual Studio Code + Cline:安装 Cline 后,由其 Skills 入口导入 Superpowers。
- Trae(trae.cn):在技能或插件入口导入同一套 Superpowers。
亦可在编辑器对话中直接要求安装 Superpowers 技能:
安装 Superpowers 技能
安装后输入 /brainstorming,应开始逐项提问。无响应时先检查技能是否启用。
环境与依赖用 uv 锁定。在项目目录执行:
uv init
uv add flask
uv add --dev pytest
uv lock
uv run python -m flask --app app run --host 127.0.0.1 --port 5000
uv run python -m pytest tests/ -q
浏览器访问 http://127.0.0.1:5000 能打开页面,即环境可用。此后增删依赖只经 uv add / uv remove,并提交 uv.lock,以便在另一台机器复现同一环境。
技能与调用顺序
| 技能 | 时机 | 出口 |
|---|---|---|
/brainstorming |
范围未定、拟增功能之前 | 一次一问;未经确认不得写实现代码 |
/writing-plans |
用户故事与技术选型已定 | 拆成可单独验证的小步,每步写明测试命令 |
/test-driven-development |
执行计划中的某一步 | 先写失败测试,再写最小实现 |
/systematic-debugging |
测试失败或行为与预期不符 | 先定位根因,再改一处 |
/code-review |
该增量已可操作 | 只列出缺陷,不顺手改代码 |
须按表中顺序推进。跳过用户故事直接实现,事后难以说明系统究竟完成哪一条业务。
技术选型
中小型 WEB 系统可采用下列组合。
| 层 | 选型 | 说明 |
|---|---|---|
| 环境 | uv |
锁文件保证依赖可复现 |
| 应用 | Flask | 路由对应页面或动作 |
| 数据 | SQLite | 单文件,便于拷贝演示 |
| 样式 | Tailwind CSS(本地编译) | 运行时不依赖外网样式表 |
| 交互 | HTMX | 刷新变更片段,状态留在服务端 |
题目已限定语言或框架时,将约束写入 /brainstorming 后再改选型。
需求分析:用户故事
需求分析从用户故事开始。先确定本系统的角色(来自实际业务,不套用固定身份),再写故事,然后再绘制用例图、设计表结构。
故事格式:
作为〈角色〉,希望〈能力〉,以便〈价值〉。
验收条件便于随后写成测试:
给定:……(已登录,且存在一条待处理记录)
当:……(选择「通过」)
则:……(状态为已通过,提交者可见)
示例(将角色名换为业务中的真实称呼):
- 作为〈角色甲〉,希望提交申请,以便形成待处理记录。
- 作为〈角色乙〉,希望通过或驳回申请,以便关闭待办。
- 作为〈角色甲〉,希望查阅处理结果,以便确认是否办结。
每角色 3~7 条即可。价值写业务结果。故事清单未完成前,不得开始建表。
/brainstorming
拟开发 WEB 系统,业务为:……
请先只写用户故事,技术选型稍后讨论。
先澄清有哪些角色,再按角色书写故事。
格式:作为<角色>,希望<能力>,以便<价值>。
每条附验收条件:给定 / 当 / 则。
一次只提出一个问题。不要绘制界面,不要设计表,不要编写代码。
/brainstorming
用户故事如下:……
请归纳角色及其权限边界,并将每条故事收为短名,例如「提交申请」。
另列本期不做的功能(如支付、短信)。
不要编写 SQL,不要编写代码。
「本期不做」用于冻结范围,避免实现阶段外接未列入基线的能力。
故事冻结之后的结构与数据
此时再讨论 Flask 与 SQLite,比较方案后选定其一。
/brainstorming
用户故事已定(附原文)。
技术约束:Python + Flask + SQLite + Tailwind + HTMX,环境用 uv。
请说明页面归属、数据存放位置、请求路径。
给出两种做法的利弊并推荐一种。未经确认不要编写代码。
确认后,功能模块图、ER 图、用例图用 论文用图指南 中的工具绘制。图中用语须与故事短名一致。
实现计划
/writing-plans
用户故事与技术选型已定(附原文)。
请拆为小步。每一步写明:涉及文件、先写何测试、如何运行、何谓完成。
单步宜在十余分钟内可做完。须先测试后编码。
先给出计划,不要编写功能代码。
合格之例:「新增测试:未登录不得提交申请;uv run python -m pytest tests/test_request.py -v 应失败。」
不合格之例:「一次完成申请模块。」
按计划逐步实现
/test-driven-development
执行计划第 N 步:……
先编写测试并运行:uv run python -m pytest tests/…… -v
将失败输出原样返回。
确认失败原因为功能尚未实现之后,再编写最小代码。
测试由失败转为通过后,再进入下一步。登录、提交、处理须分步交付。
界面可操作后,按 论文用图指南 截取运行图:登录、主界面、提交、处理结果。只保留工作区,裁去桌面与浏览器标签。
故障定位
/systematic-debugging
期望:……
实际:……
操作步骤:……
对应的用户故事:……
pytest 输出(原样):
请先给出根因假设,不要修改代码。
根因与操作能够对应之后,再允许修改;一次只改一处,并重跑同一测试。
评审与交付
/code-review
对照下列用户故事(附原文)与当前改动。
只列出:未完成的故事、越权、空数据异常、缺测。
不要修改代码,不要增加新功能。
按清单另开小步修复。交付物包括:uv.lock、启动命令、含样例数据的数据库文件、测试通过记录。
常见偏差
- 用户故事未成即建立数据库。
- 范围未冻结即开工,实现与业务无关的模块。
- 计划中的单步过大,无法单独验证。
- 先堆砌页面,测试付诸阙如。
- 故事用语与图中用语不一致。