使用 ai 搭建个人 sop 工作台的核心方法是：先明确周期性任务需求，再通过分阶段提示词让 ai 生成单文件 html 代码，最后进行数据持久化与移动端适配。这种方法无需编写复杂后端，即可在浏览器中实现习惯追踪、周期重置和轻量娱乐功能。
个人 SOP（标准作业程序）并非仅适用于企业流程，它同样适用于个人生活。将那些反复发生、容易遗忘且值得坚持的事项（如每日饮水、每周复盘、每月社交）固定为标准化流程，可以大幅减少决策疲劳。通过 AI 辅助，你可以快速构建一个专属的 Web 应用，将碎片化的待办事项整合在一个工作台中。
梳理核心需求与页面架构
在直接让 AI 写代码之前，必须先理清“做什么”。如果直接要求 AI 生成一个完整的工具，往往会导致功能混乱或逻辑缺失。正确的做法是先定义页面的骨架和视觉风格，确保结构清晰。
你需要确定工作台包含哪些核心模块。通常包括首页（显示问候、时钟、金句）、每日/每周/每月/每年的 SOP 列表页，以及一个用于放松的“开心一下”功能区。视觉风格建议采用干净、低饱和度的配色，以适应长期使用场景。
以下 Prompt 用于让 AI 搭建第一版页面框架。注意，此时不需要复杂的逻辑，只需关注布局和导航。
制作一个「个人 SOP」工作台，先完成页面框架、导航、模块布局和基础交互，不需要实现复杂的数据逻辑。代码结构清晰，适配电脑端和手机端。 一、整体页面 — 工具包含6个主要页面：首页、开心一下、每日、每周、每月、每年。 二、首页 — 问候卡片「Hi，[你的名字]」：大字号数字时钟+中文日期＋农历；今日金句（中英双语、按日期轮换、可换一句）；生日倒计时（可增删）；「今天要处理」汇总当天未完成事项。 三、开心一下 — 打地鼠、答案之书、深呼吸、随机夸夸4个入口；本轮只搭页面结构，暂不实现小游戏逻辑。 四、每日／每周／每月／每年 — 4页统一结构与交互：SOP列表、新增、编辑、删除、勾选完成、完成度环形图（手绘 SVG）+另外3个模块的进度胶囊。 五、视觉 — 现代软萌、干净清新：无衬线黑体；轻拟物圆角卡片；低饱和度马卡龙浅色系（如首页背景 #FCE8EF、强调色 #F24880），主背景纯色不渐变。 六、响应式 — PC 左侧固定导航+右侧内容；手机端底部 Tab 导航，内容自适应。
生成结果后，重点检查页面结构是否符合预期，导航是否合理，视觉风格是否舒适。如果骨架满意，再进入下一轮开发。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
实现周期性 SOP 核心逻辑
SOP 与普通 To-do 列表的最大区别在于“周期性”。普通待办完成后即消失，而 SOP 需要在每个新周期自动重置状态。例如，每日喝水的习惯，今天勾选完成后，明天应自动变为“未完成”状态。
这一阶段的目标是将模糊的想法转化为明确的数据结构和业务规则。你需要指导 AI 实现以下逻辑：
- 分组与标签：支持按组名（如身体、学习）分类，每条 SOP 带有分类标签。
- 状态重置：勾选仅代表“当前周期已完成”，进入新日/周/月/年后，状态自动恢复为未完成。
- 初始化数据：首次使用时，系统应自动写入预设的 SOP 内容，避免用户从零开始填写。
使用以下 Prompt 来开发核心功能。建议在同一个工作空间下新开任务，以保持上下文清晰。
请在已有页面结构和视觉风格的基础上继续开发【每日/周/月/年】。 【新增】按钮采用弹框样式 - 事项名称输入框 + 常用事项快捷标签（喝水、拉伸、读书、整理、早睡、拍照、写信、走路、做饭、发呆）； - 分类八选一（工作/学习/健康/生活/理财/社交/娱乐/灵感）； - 分组名自由输入。 SOP 列表按组名分组显示，每组显示完成小计，每条 SOP 显示分类标签。 【数据逻辑】 - 勾选 SOP 表示已完成； - 进入新日／周／月／年周期后，当前周期的完成状态自动重置为未完成。 【初始化数据】 每日｜【身体】7:00起床喝一杯温水•简单拉伸3-5分钟•白天喝够水（目标1.5-2L）•每隔1小时起身活动、远眺•午饭后散步10分钟•22:30放下手机准备入睡；【身心放松】碎片时间听播客／看书／音乐•睡前泡脚•冥想或静坐5分钟 每周｜【周五宠爱自己日】泡澡搓澡+身体护理•敷面膜+头发护理•写周复盘、记一件小确幸；【周六留白休息日】睡到自然醒•运动／散步／晒太阳•约会、看展、喝咖啡、看电影、不排任务，允许自己”什么都不做“ 每月｜【社交与奖励】安排一次小出行或小约会•复盘本月得失、奖励自己一次 每年｜设定新年 3 个核心目标·送自己一份礼物，犒劳辛苦一年
完成此步骤后，你的工作台将具备真正的 SOP 逻辑，能够根据时间周期自动管理任务状态。
数据持久化与云端同步方案
纯前端生成的网页在刷新后会丢失数据。为了解决这个问题，需要选择数据存储方案。对于个人使用，最简便的方式是使用浏览器的 `localStorage`；如果需要多设备同步，则需接入云端服务。
方案一：本地存储（推荐个人使用）
利用 `localStorage` 保存 SOP 列表、完成状态、分类、分组、标签以及首页生日数据。这种方式无需配置服务器，刷新或关闭页面后重新打开，数据依然存在。
现在为个人 SOP 工作台增加数据持久化。 使用浏览器 localStorage 保存用户数据。 需要保存：-每日、每周、每月、每年的 SOP、完成状态、分类、分组、标签；-首页的生日数据。 刷新页面、关闭页面后重新打开，数据都不能丢失。
方案二：云端同步（适合多设备需求）
如果需要手机和电脑数据实时同步，需升级为账号登录 + 云端存储版本。这通常需要额外的后端服务或第三方 BaaS 平台支持。若选择此方案，请确保不同账号之间的数据相互隔离。
保留现有页面、视觉和已经完成的 SOP 周期逻辑，不要重新设计已有功能。 现在将个人 SOP 工作台升级为支持账号登录和云端数据同步版本。 请先检查当前项目的技术方案，确认实现账号登录和云端存储还需要哪些服务或配置，再开始修改代码。 要求：-用户登录后，SOP 和生日数据保存到云端，并与账号绑定；-新增、编辑、删除或完成 SOP，以及新增、删除生日后，自动保存到云端；-同一个账号在不同设备登录后，可以使用同一份数据；-不同账号之间的数据相互隔离，用户只能访问自己的数据；-保留现有功能和页面，不要因为增加云端同步而重新设计整个产品。 需要同步的数据包括：每日、每周、每月、每年的 SOP，以及完成状态、完成时间、分类、分组、标签和生日数据。
完善体验与移动端适配
为了让工作台更具吸引力，可以加入“开心一下”功能区，提供打地鼠、答案之书、深呼吸练习和随机夸夸等轻量级情绪价值功能。这些功能不仅能缓解压力，还能提高用户打开工作台的频率。
此外，许多 AI 生成的网页在电脑上表现良好，但在手机上可能出现文字截断、按钮过小或布局错乱等问题。必须进行专门的移动端适配，以常见手机屏幕宽度（如 390px）为基准进行检查。
使用以下 Prompt 进行最后的验收和适配：
现在专门对「个人 SOP 工作台」做移动端适配：不加新功能，以 390px 宽度作为重点测试尺寸，兼容常见手机屏幕。 逐项检查：首页、每日、每周、每月、每年、开心一下、新增/编辑弹窗、删除确认、生日设置等。 重点检查—横向滚动／页面超出屏幕／标题截断／内容溢出／按钮大小／弹窗完整／输入框操作／底部导航遮挡／卡片间距／长文字换行／触屏操作。 要求：不适合显示的可调整信息层级，但不要删核心功能；完成后针对 390px 逐页检查并修复。不要只说“已经适配”，要实际检查代码和布局。
最后，让 AI 扮演测试人员角色，对整个项目进行完整验收，修复潜在 Bug，并提供部署地址。通过将网址添加到手机主屏幕，即可获得类似原生 App 的使用体验。
常见问题
Q1: 为什么我的 SOP 勾选后没有自动重置？
A: 请检查 AI 生成的代码中是否包含了基于日期/周/月/年的判断逻辑。普通的 To-do 逻辑只会标记完成，而 SOP 逻辑需要识别当前周期是否变化。如果未自动重置，可能需要手动添加周期判断函数，或使用上述 Prompt 中的初始化数据部分重新生成逻辑。
Q2: 如何在手机上像 App 一样使用？
A: 将生成的 HTML 文件部署到支持 HTTPS 的静态托管平台（如 GitHub Pages, Vercel 等）。在手机浏览器中打开该网址，然后点击浏览器的“分享”或“菜单”按钮，选择“添加到主屏幕”。这样会在桌面上生成图标，点击即可全屏启动，隐藏浏览器地址栏。
