技术分享：高质量全栈开发提示词设计实践 —— 覆盖简单到复杂

> **分享摘要**：本文基于《Web Dev Text Prompt 抓取规范 V3》对全栈题目的分级要求（简单：单一资源 CRUD；中等：多资源关联 + 本地用户体系；复杂：多服务协同 + 硬指标如 WebSocket/Redis 队列等），设计了 5 条可直接用于全栈项目实训或面试考核的高质量提示词。难度覆盖简单至复杂，中等 + 复杂占比 80%，所有技术栈现代、可自托管，无陈旧组合或外部 API 依赖，适合技术团队内部训练、课程设计或开源贡献者自测。

一、背景与设计原则

**难度分层**：简单（单一资源 CRUD） → 中等（多资源关联 + 本地用户体系） → 复杂（多服务协同 + 实时/队列等硬指标）
**真实场景**：题目来自实际开发需求，无 AI 生成的"假大空"描述
**技术现代**：Next.js App Router、FastAPI、NestJS、Vue 3、React、PostgreSQL、Redis、MinIO、BullMQ 等
**完全自托管**：无需任何外部 API（如 OAuth、云存储、邮件服务），所有依赖可通过 Docker Compose 或本地命令一键运行
**细节充实**：包含数据校验、分页、文件上传、限流、幂等键、自动迁移等真实要求

基于以上原则，我们生成了以下 5 条全栈开发提示词，难度分布为简单（1 条）、中等（2 条）、复杂（2 条），供内部训练或对外分享使用。

二、提示词列表

1. 全栈（0-2）｜简单难度

**标题：** 个人书签收藏夹 -- Next.js + SQLite 基础 CRUD

**Prompt 描述**

使用 Next.js (App Router) + SQLite (better-sqlite3) 实现一个"书签收藏夹"应用。功能：

首页展示所有已保存书签（标题、URL、简短描述）；
提供表单：用户可添加书签（标题、URL、描述）；
每条书签右侧带"编辑"和"删除"按钮；编辑支持修改标题和 URL；
数据存储于 SQLite 数据库，无需用户登录，所有用户共享数据。

API 路由要求：

`GET /api/bookmarks` -- 返回所有书签
`POST /api/bookmarks` -- 新增书签（请求体：`{ title, url, description }`）
`PUT /api/bookmarks?id=xxx` -- 更新书签
`DELETE /api/bookmarks?id=xxx` -- 删除书签

前端使用 React Server Components，表单交互使用 Client Components。URL 格式校验（必须包含 `http://` 或 `https://`），标题非空且长度 ≤ 100。样式采用简洁卡片布局，支持暗色/亮色切换（可选）。提供 `npm run dev` 一键启动，数据库自动创建。

**技术要求**

Next.js 14+ (App Router)
SQLite + better-sqlite3 或 Prisma
无认证、无文件上传
纯前端组件（CSS Modules 或 Tailwind）
一键运行，无 Docker 要求

**难度等级：** 简单（全栈）

**类型标签：** 全栈｜0-2｜简单

2. 全栈（0-2）｜中等难度

**标题：** 团队任务看板 -- Express + React + JWT + PostgreSQL

**Prompt 描述**

实现一个团队任务看板（类 Trello 最小化版本）。使用 Express + PostgreSQL (Prisma) 作为后端，React + React Query 作为前端，支持本地账号体系（邮箱+密码，JWT 存储在 httpOnly Cookie）。数据表：User、Project、Task。关系：一个用户可创建多个项目，一个项目包含多个任务，任务分配给用户（外键）。功能要求：

注册/登录/登出；登录后跳转看板首页；
创建项目（仅登录用户可见）；
在项目下添加任务（标题、描述、截止日期、状态：待办/进行中/已完成）；
支持拖拽改变任务状态（前端模拟，调用 PATCH 更新）；
任务列表支持按状态分组展示，支持分页（每页 10 条）；
每个任务可评论（Comment 表，关联用户和任务），评论内容支持简单文本；
文件上传：任务附件可上传单个图片文件（存于本地 `uploads/` 目录，限制 2MB，仅限 jpg/png），并在前端展示下载链接；
路由保护：未登录重定向至登录页；
表单校验（Zod 前后端）；加载状态与错误处理。

提供 `docker-compose.yml`（仅 PostgreSQL 和 app）及 README 启动说明。不接任何第三方 OAuth。

**技术要求**

后端：Express + Prisma + PostgreSQL + bcrypt + JWT (httpOnly cookie)
前端：React + React Query + Axios + React DnD (或简单拖拽)
文件上传：multer，存储到本地目录
分页、模糊搜索（按任务标题）
无 WebSocket，无实时通信

**难度等级：** 中等（全栈）

**类型标签：** 全栈｜0-2｜中等

3. 全栈（0-2）｜中等难度

**标题：** 个人记账本 -- FastAPI + SQLite + Vue 3 (JWT 本地认证)

**Prompt 描述**

使用 FastAPI (Python) + SQLite + Vue 3 (Composition API) 开发一个个人记账本应用。支持用户注册/登录（JWT，非 httpOnly 可存 localStorage），每个用户只能查看/管理自己的收支记录。数据表：User、Transaction（字段：金额、类型：收入/支出、分类：餐饮/交通/购物/工资等、日期、备注）。功能要求：

登录后显示 Dashboard：本月总收入、总支出、结余；
交易记录列表：支持按日期范围筛选、按分类筛选、按金额排序；
添加/编辑/删除交易（CRUD）；
简单图表：使用 ECharts 展示近 7 天每日支出趋势（静态数据，无动画）；
数据导出：一键导出当前筛选结果为 CSV 文件（后端生成）；
前端路由（Vue Router），受保护页面需 token 验证；
后端 API 使用 Pydantic 校验，所有路由需验证 JWT。

无需文件上传，无需邮件服务。提供 `requirements.txt` 及运行命令（`uvicorn main:app --reload`）。SQLite 数据库自动迁移（使用 Alembic 可选）。样式为深色主题，移动端适配。

**技术要求**

后端：FastAPI + SQLAlchemy + SQLite + python-jose (JWT) + passlib
前端：Vue 3 + Vite + Vue Router + Axios + ECharts
无 Docker 要求，本地可运行
无实时通信，无复杂队列

**难度等级：** 中等（全栈）

**类型标签：** 全栈｜0-2｜中等

4. 全栈（0-2）｜复杂难度

**标题：** 实时协作文档编辑器 -- NestJS + PostgreSQL + Redis + WebSocket

**Prompt 描述**

构建一个类似 Google Docs 的实时协作文档编辑器（最小可行版）。技术栈：NestJS (后端) + PostgreSQL (Prisma) + Redis (用于 WebSocket 状态及 session 存储) + WebSocket (Socket.IO) + React (前端)。功能硬指标：

用户系统：邮箱+密码注册/登录，JWT 认证（httpOnly cookie）；
文档管理：每个用户可以创建文档（标题、内容），文档可分享给其他用户（基于文档权限表：Viewer/Editor）；
**实时协作**：多个用户打开同一文档时，通过 Socket.IO 房间同步光标位置和文本编辑操作（使用操作转换或简单全量广播）。要求：
用户 A 的编辑内容实时显示在用户 B 的屏幕上（延迟 ≤ 200ms）；
显示当前在线用户列表及其光标位置；
冲突处理：使用"最后写入胜出"或基础版本号（不要求完美 OT，但需说明策略）；
Redis 存储在线用户 session 和文档临时状态；
前端使用 React + Slate.js 或 Quill（支持实时更新），通过 Socket.IO 发送变更；
文档自动保存（防抖，每 30 秒保存到数据库）；
写接口使用幂等键（Idempotency-Key）防止重复提交；
所有依赖可自托管：PostgreSQL、Redis、App 通过 `docker-compose up` 一键启动，无需外部 API Key。

提供完整的种子数据（测试用户）和 README。

**技术要求**

后端：NestJS + Prisma + PostgreSQL + Redis + Socket.IO
前端：React + Socket.IO Client + 富文本编辑器（Quill 或 Slate）
实时通信：WebSocket（Socket.IO）
限流：Redis 实现基础速率限制（登录接口）
Docker Compose 编排全套服务

**难度等级：** 复杂（全栈）

**类型标签：** 全栈｜0-2｜复杂

5. 全栈（0-2）｜复杂难度

**标题：** 异步缩略图生成与邮件通知服务 -- Express + BullMQ + Redis + MinIO

**Prompt 描述**

实现一个"图片上传 + 异步缩略图生成 + 完成后邮件通知"的全栈应用。用户注册/登录后，可上传高分辨率图片（JPG/PNG，最大 10MB），系统异步生成三种尺寸的缩略图（小 150x150、中 300x300、大 600x600），并将原图和缩略图存储到自托管的 MinIO (S3 兼容)。生成完成后通过 Mailhog (自托管 SMTP) 发送通知邮件给用户。功能硬指标：

基于 Express + PostgreSQL (Prisma) + Redis (BullMQ 队列) + MinIO + Mailhog；
用户系统：邮箱+密码登录，JWT；
上传接口：接收图片，存入 MinIO 原图桶，同时创建任务推入 BullMQ 队列；
队列消费者：从 MinIO 读取原图，使用 Sharp 生成缩略图，存入 MinIO 缩略图桶，更新数据库记录状态（pending → completed/failed）；
完成后触发邮件：通过 Mailhog 发送邮件（含缩略图预览链接）；
前端展示用户所有上传记录（原图 URL、缩略图状态、生成时间），支持轮询或 SSE 获取任务进度（可简单采用轮询）；
要求限流（每个用户每分钟最多 5 次上传），幂等键防止重复上传；
错误重试机制：失败任务自动重试最多 3 次；
提供 `docker-compose.yml` 一键启动所有服务（app + postgres + redis + minio + mailhog），无需任何外部账号或 API Key。

前端使用 React + Tailwind，简洁风格。

**技术要求**

后端：Express + BullMQ + Redis + Prisma + PostgreSQL + MinIO SDK + Sharp + Nodemailer (对接 Mailhog)
前端：React + Axios + 轮询（或 Server-Sent Events）
异步队列、自托管对象存储、自托管邮件服务
数据库事务（状态更新一致性）
完整 docker-compose 编排

**难度等级：** 复杂（全栈）

**类型标签：** 全栈｜0-2｜复杂

三、使用建议

**新人上手**：从简单难度（书签收藏夹）开始，熟悉前后端交互与基础 CRUD，无需考虑认证和部署。
**团队协作训练**：中等难度的任务看板或记账本适合 2-3 人小组，一人负责后端 API，一人负责前端，体验 JWT 认证与文件上传。
**高级挑战**：复杂题目建议使用 Docker Compose 本地模拟微服务架构。实时协作文档考察 WebSocket 编程与状态同步；异步缩略图生成则让开发者掌握消息队列、对象存储和邮件通知的完整链路。
**评估标准**：可依据 Prompt 中的每一条功能点设计验收清单，例如"是否实现幂等键？""限流是否生效？""WebSocket 延迟是否达标？"等。

四、总结

以上 5 条提示词严格遵循分级策略，同时保证技术栈的先进性与自托管能力。无论是用于技术培训、编程马拉松还是求职考核，都能有效评估开发者在不同复杂度下的全栈实战能力。欢迎根据实际需求调整细节（如数据库选型、前端框架），但请保留核心难度指标，以维持题目有效性。

> **文档版本**：V1.0

> **维护者**：技术分享团队

> **更新日期**：2026-06-09