todolist网站学习开发记录

AIcoding>AI编程知识>网站项目实战
2.2k words

原提示词

帮我生成一个todolist的web项目，架构是：前后端分离，前端用Vue3，后端用NestJS，数据库用PostgreSQL，功能是：1.条目可以增删改查；2.可以选择重要性A-D、紧急程度1-5；3.可以排序（先按重要性再按紧急程度）；4.可手机号/邮箱或微信登录；5.可接入智谱GLM4.7大模型进行历史分析，归纳总结个人目标完成情况并提出改进建议。

氛围编程

提示词模板：

  • 角色与气质（谁在做）
  • 产品氛围（给谁用、什么感觉）
  • 技术边界（用什么、不用什么）
  • 输出方式（一步到位 or 可演进）

SDD编程

人工版

提示词模板：

  1. 网站目标：智能todolist工具
  2. 目标用户：普通用户
  3. 技术栈约束：前端Vue，后端NestJs，数据库PostgreSQL+TypeORM
  4. 部署环境：云服务器+Docker
  5. 功能性需求：条目可以增删改查；可以选择重要性A-D、紧急程度1-4；可以排序，先按重要性再按紧急程度；AI分析和建议（可方便切换不同大模型）；可手机号/邮箱或微信登录；
  6. 非功能性需求：毫秒级响应，界面简洁有美感
  7. 非目标：
  8. 质量要求：结构清晰、易维护（维护>3年），可拓展
  9. 我的角色：有经验

优化提示词：
帮我针对下面的开发提示词，进行优化得更具体和准确，并给出几版优化后的提示词：xxx

极简需求版（针对个人使用）

开发一个智能TodoList应用，要求：

  1. 技术栈：Vue 3 + NestJS + PostgreSQL
  2. 核心功能：
    • 任务管理（含优先级矩阵）
    • AI智能建议（支持多模型）
    • 多方式登录（微信/邮箱）
    • 国际化+主题切换
  3. 性能：响应<200ms
  4. 部署：Docker容器化

敏捷开发版（个人或企业级通用）

开发一个智能待办事项系统，需要：

  1. 技术选型：

    • 前后端分离架构
    • 前端：Vue 3 + Element Plus
    • 后端：NestJS + TypeORM
    • 数据库：PostgreSQL

  2. MVP功能：

    • 任务卡片式管理（含优先级矩阵）
    • 智能排序算法（重要性>紧急程度）
    • AI助手集成（预留多模型切换接口）
    • 多渠道登录（支持微信OAuth）
    • 国际化+主题系统

  3. 性能指标：

    • 首屏加载<1s
    • 操作响应<200ms
    • 支持并发1000+用户

  4. 开发要求：

    • 采用TDD开发模式
    • 每周交付可演示版本
    • 代码需通过SonarQube质量检查

结构化专业版（企业级）

请基于以下需求设计一个智能TodoList系统，要求：

  1. 技术栈：

    • 前端：Vue 3 + TypeScript + Vite + Pinia
    • 后端：NestJS + TypeScript + TypeORM
    • 数据库：PostgreSQL 14+
    • 部署：Docker Compose（包含Nginx反向代理配置）

  2. 核心功能：
    a) 任务管理：

    • 增删改查（CRUD）操作，支持富文本描述
    • 优先级矩阵：重要性(A-D)×紧急程度(1-4)
    • 自动排序规则：先按重要性(A→D)，再按紧急程度(1→4)
    • 支持拖拽调整排序

    b) AI增强功能：

    • 可插拔式AI接口设计（支持OpenAI/Claude/文心一言等）
    • 智能任务建议（基于历史数据分析）
    • 自动生成任务分解方案

    c) 用户系统：

    • 多种登录方式（手机号/邮箱/微信）
    • JWT认证 + RefreshToken机制
    • 用户数据隔离

    d) 国际化与主题：

    • i18n实现中英文切换
    • 主题系统支持浅色/深色模式（持久化存储）

  3. 非功能需求：

    • API响应时间<100ms（P99）
    • 遵循SOLID原则设计架构
    • 前端采用组件化设计，后端实现DDD分层架构
    • 完善的错误处理和日志系统

  4. 交付要求：

    • 数据库ER图
    • API接口文档（Swagger）
    • 部署文档（Docker/Kubernetes）
    • 单元测试覆盖率>80%

详细实现版（企业级）

请设计一个企业级智能任务管理系统，具体要求：

  1. 架构设计：

    • 微服务架构（用户服务/任务服务/AI服务）
    • 前端采用Vue 3 + Composition API
    • 后端使用NestJS模块化设计
    • 数据库分表分库策略（按用户ID哈希）

  2. 功能模块：
    a) 任务核心：

    • 四象限优先级模型
    • 时间轴视图+看板视图
    • 智能提醒（基于地理位置/时间）

    b) AI能力：

    • 任务相似度分析
    • 自动生成子任务
    • 工作效率报告
    • 模型热切换（配置化实现）

    c) 基础服务：

    • OAuth 2.0认证
    • 多租户支持
    • 实时同步（WebSocket）

  3. 技术细节：

    • 前端状态管理：Pinia
    • 后端缓存：Redis集群
    • 搜索引擎：ElasticSearch
    • 消息队列：RabbitMQ

  4. 质量保障：

    • 自动化测试流水线
    • 性能压测报告（JMeter）
    • 安全审计（OWASP Top 10）

引导方式

提示词模板：

请你先输出：

  1. 整体系统架构
  2. 核心模块划分
  3. 数据模型草案
  4. 接下来推荐的开发迭代顺序
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
你是一名同时具备产品经理、资深前端工程师和审美能力的开发者。

我要开发一个【网站类型】的网站，目标用户是【用户画像】。
这个网站整体气质是【3–5 个形容词，例如：克制、专注、极客感、安静、有力量】，
希望用户打开后有一种【情绪或状态】的感觉。

功能不是堆砌，而是围绕一个核心目标：
【一句话说清这个网站的“唯一价值”】。

技术要求：
- 使用【技术栈，如 Next.js + Tailwind + TypeScript】
- 优先可读性与可维护性，而不是炫技
- 代码结构清晰，适合长期迭代
- 默认支持响应式设计

请你：
1. 先给出整体信息架构与页面划分
2. 再给出首页的设计思路（不是设计稿，而是设计逻辑）
3. 最后实现一个可运行的首页代码示例