适配 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
• 同步延迟 < 3s

3.4 兼容性测试

• Chrome / Firefox / Safari / Edge 最新版本
• 移动端：iOS Safari / Android Chrome
• 不同屏幕尺寸（375px ~ 1920px）

---

交付要求

1. 每个阶段完成后，提供该阶段的功能清单和测试报告
2. 代码规范：提供 ESLint/Prettier 配置，TypeScript 类型完整
3. 文档：提供 API 文档（Swagger/OpenAPI）和部署文档
4. Demo 数据：提供初始化种子数据用于测试
5. 最终交付：完整源代码 + Docker Compose 一键部署配置

---

注意事项

• 每个阶段必须先完成测试，确认通过后再进入下一阶段
• 如遇到技术难点，请及时说明并提供备选方案
• 加分功能可按优先级排序开发（建议顺序：2.1 → 2.2 → 2.5 → 2.3 → 2.4 → 2.8 → 2.6 → 2.7）
• 所有 UI 设计应参考原网站风格：简洁、多彩、卡片式

---