适配 Claude 的分阶段开发提示词项目提示词仿「好用便签」Web 应用开发项目概述请帮我开发一个类似 https://www.haoyong333.cn/ 的便签/笔记类 Web 应用。该产品是一个功能丰富的在线便签工具核心定位是轻量、易用、跨设备同步的云端便签应用。请严格分阶段完成每个阶段完成后需进行充分测试确认无误后再进入下一阶段。技术栈建议前端React / Vue 3 TypeScript Tailwind CSS后端Node.js (Express) / Python (FastAPI)数据库PostgreSQL Redis缓存/会话认证JWT部署Docker 容器化第一阶段基础功能MVP 核心功能目标完成可用的最小可行产品满足个人便签的基本使用需求。1.1 用户认证模块用户注册邮箱/手机号 密码用户登录含记住我功能登录状态持久化JWT localStorage退出登录1.2 便签基础 CRUD创建便签支持纯文本内容输入查看便签便签列表展示按创建时间倒序编辑便签点击便签进入编辑模式支持内容修改删除便签支持单个删除含二次确认便签数据结构{ id, user_id, title, content, created_at, updated_at }1.3 便签展示样式多彩卡片式布局每个便签不同颜色预设 6-8 种颜色响应式设计适配桌面和移动端1.4 数据持久化所有便签数据存储到数据库页面刷新后数据不丢失1.5 基础测试第一阶段完成后注册/登录/退出流程正常创建便签后列表立即刷新编辑便签内容保存成功删除便签成功并从列表移除刷新页面后数据正确恢复不同用户的便签相互隔离第二阶段加分功能进阶特色功能目标在 MVP 基础上增加核心差异化功能提升产品竞争力。2.1 待办事项Todo便签在便签内添加待办事项列表支持勾选/取消勾选事项自动标记完成时间自动整理已完成事项置底或折叠支持待办事项的增删改2.2 提醒功能单次提醒指定日期时间提醒循环提醒每天提醒每周提醒可选择每周哪几天每月提醒可选择每月哪几天每年提醒阳历/农历可选提醒方式浏览器通知 站内消息提示2.3 时间轴便签基于时间线组织便签内容每个便签可关联一个时间节点时间轴视图展示所有便签的时间线2.4 便签集分组功能将同类便签组合成「便签集」支持在「组合模式」和「独立模式」之间自由切换便签集的增删改2.5 私密便签加密为便签设置密码锁查看加密便签需输入密码登录密码验证加密便签在列表中模糊显示标题2.6 团队/共享便签将个人便签一键转为团队便签邀请团队成员加入通过链接或邮箱多人实时协作编辑需 WebSocket 支持团队成员提醒功能2.7 云同步多端支持同一账号在多设备登录数据实时同步冲突处理策略最后写入优先 或 手动合并2.8 UI/UX 增强贴边隐藏模式便签贴边自动隐藏鼠标滑过不误触多彩皮肤切换深色/浅色模式2.9 加分功能测试第二阶段完成后待办事项勾选/取消正常完成时间正确记录各类提醒设置生效通知正常推送时间轴视图按时间正确排序便签集创建、切换模式正常私密便签加密/解密正常团队便签共享、协作、提醒正常多设备登录数据同步一致贴边隐藏/皮肤切换/深色模式正常第三阶段全链路集成测试目标完成端到端全流程测试确保系统稳定可靠。3.1 功能集成测试完整用户旅程注册 → 创建便签 → 添加待办 → 设置提醒 → 创建便签集 → 转为团队便签 → 多端同步验证边界条件测试空数据、超长文本、大量便签100性能并发测试多人同时编辑同一团队便签离线场景网络断开后的操作处理3.2 安全测试JWT 过期/无效 token 处理SQL 注入防护XSS 防护便签内容渲染私密便签加密强度验证跨用户数据隔离验证3.3 性能测试页面首屏加载时间 2s便签列表渲染100条 500ms同步延迟 3s3.4 兼容性测试Chrome / Firefox / Safari / Edge 最新版本移动端iOS Safari / Android Chrome不同屏幕尺寸375px ~ 1920px交付要求每个阶段完成后提供该阶段的功能清单和测试报告代码规范提供 ESLint/Prettier 配置TypeScript 类型完整文档提供 API 文档Swagger/OpenAPI和部署文档Demo 数据提供初始化种子数据用于测试最终交付完整源代码 Docker Compose 一键部署配置注意事项每个阶段必须先完成测试确认通过后再进入下一阶段如遇到技术难点请及时说明并提供备选方案加分功能可按优先级排序开发建议顺序2.1 → 2.2 → 2.5 → 2.3 → 2.4 → 2.8 → 2.6 → 2.7所有 UI 设计应参考原网站风格简洁、多彩、卡片式