WEB系统极速开发指南

全过程的读法与各本分工,见 写作指南总览。

本指南说明如何借助带技能的 AI 编辑器,按软件工程顺序完成一个可登录、并能走完业务闭环的 WEB 系统。附图见 论文用图指南。说明书的章节与摘要见 毕业设计写作指南。交稿前的 AIGC 检测见 AI智评介绍。

宜先写成用户故事,再据此拟定实现计划。每一步均先写测试,而后编码。

编辑器与环境

编辑器任选其一。

亦可在编辑器对话中直接要求安装 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 后再改选型。

需求分析:用户故事

需求分析从用户故事开始。先确定本系统的角色(来自实际业务,不套用固定身份),再写故事,然后再绘制用例图、设计表结构。

故事格式:

作为〈角色〉,希望〈能力〉,以便〈价值〉。

验收条件便于随后写成测试:

给定:……(已登录,且存在一条待处理记录)
当:……(选择「通过」)
则:……(状态为已通过,提交者可见)

示例(将角色名换为业务中的真实称呼):

  1. 作为〈角色甲〉,希望提交申请,以便形成待处理记录。
  2. 作为〈角色乙〉,希望通过或驳回申请,以便关闭待办。
  3. 作为〈角色甲〉,希望查阅处理结果,以便确认是否办结。

每角色 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、启动命令、含样例数据的数据库文件、测试通过记录。

常见偏差

大模型设置

设置保存在您的浏览器,服务端不保存。