用AI开发
网页端应用

现有成果：【程序、相关文件与已验证功能】。
目标：把【现有程序】改为供【使用者】使用的网页。
保留【业务规则与数据】，增加【界面交互】。
运行方式：【本地浏览器或服务器】；数据保存：【位置与范围】。
本轮不做【排除项】。验收：【操作及预期结果】。
先读资料，复述需求与缺少的信息，不修改代码。

在解压的lesson15-starter目录创建Comate日常任务。
先读lesson14_desktop/todo_core.py、todo_app.py和README.md，核对runtime/pyodide的本地运行时。
将桌面ToDoList改为网页，原样复用TodoCore。保留新增、完成/恢复、删除确认、三种筛选和全局统计。
Python通过Pyodide在浏览器执行；数据保存到当前站点localStorage，刷新恢复，提供JSON导出。
不加登录、云同步、导入或发布，不改原桌面项目。
验收：两条任务完成一条，显示2/1/1/50.0%；刷新后编号和状态保留。先复述，不写代码。

根据【确认的需求】和【已有项目】，先给计划，不写代码。
列出【拟创建文件、各自职责、数据流与实现顺序】。
说明【核心如何复用、运行资源如何加载、数据如何保存】。
安排【基础功能验收→设计美化→回归验收】。
处理【加载失败、输入错误、保存失败】；不增加【排除项】。
每步写明验证方式，等待审核后再执行。

为ToDoList新建lesson15_browser的方案，只规划。
todo_core.py原样复制；web_api.py调用TodoCore；bridge.js连接Python与存储；app.js接事件和呈现。
index.html放内容，css/style.css管布局，runtime/pyodide复制后同源加载固定314.0.2版本。
先完成并验证基础版，再保存检查点、设计美化、重复浏览器验收。
列出加载失败重试、空名拒绝、损坏数据保护和保存失败提示；不加入撤销、导入或发布。
对照功能和文件逐项说明验证方法，先等我审核。

按已审核计划，只在【独立目录】实现【本轮功能】。
原样复用【核心文件】，不修改【已有成果与数据】。
先打通【一个完整操作】，再接【其余操作与保存】。
先写调用真实接口的检查，再实现；不要复制一套测试用业务逻辑。
页面包含【加载、空列表、错误、禁用和确认状态】。
提供【启动命令与实际自测】，未执行的检查如实标记。先不美化。

计划审核通过，只实现lesson15_browser基础版。
原样复制桌面TodoCore，SHA-256保持一致；运行时从runtime/pyodide复制到应用pyodide/。
按计划生成HTML/CSS/JS、web_api.py和serve.py；只绑定127.0.0.1:8795，不自动发布。
实现新增、完成/恢复、删除确认、筛选、Python全局统计和JSON导出。
localStorage键用lesson15.browser.v1；损坏数据保留，保存失败明确提示。加载失败有重试。
测试调用真实web_api.dispatch；先完成基础样式，提供启动说明，不做清理删除，等我浏览器验收。

请使用我从技能菜单选中的【实际技能】，为【使用场景】制作设计参考。
主要操作：【输入、操作及结果】；参考数据：【虚构样例】。
设计要求：【布局、层级、字号、间距、颜色、交互状态与窄屏】。
只输出【参考稿与设计说明】，不要修改【真实业务代码】。
先说明设计规则，再生成预览；参考稿不是功能验收结果。
如果所选技能不可用，如实说明，不假装调用成功。

先从Comate“技能”菜单选中Canvas交互式产出物，再发送。
为ToDoList制作lesson15_design.canvas.tsx和lesson15_design_notes.md，不改lesson15_browser。
首屏为待办工作区：标题、统计、输入、筛选、列表和导出。用两条虚构任务，完成一条。
浅灰底、白色内容、深色正文；青绿主操作、蓝色筛选、红色删除。正文16px，标题30px，字距0。
讲清对齐、留白、层级与焦点状态，考虑390px手机；不做宣传页或渐变大标题。
使用内置视觉设计流程，生成设计参考和迁移说明；参考稿不是Python实测，不发布。

【基础功能】已经验证，先保存【基础版检查点】。
参考【设计稿或设计说明】，审核后只修改【允许的界面文件】。
明确布局：【宽屏与窄屏】；层级：【字号】；间距：【尺度】；颜色：【语义】。
保留【业务接口、数据字段、存储键与已有数据】。
覆盖【加载、空列表、错误、焦点、禁用与确认状态】。
不增加【新业务】，完成后用原有输入重新验收。

基础版已验证并保存为lesson15_browser_basic，只美化lesson15_browser。
先读Canvas参考及说明。只改index.html、css/style.css和必要的app.js呈现逻辑。
桌面最大宽960px，390px手机自适应；正文16px、标题30px，间距优先8/16/24/32px。
主标题“我的待办”，去掉UUID小字和技术宣传副标题；统计、输入、筛选与任务行对齐。
主操作#0f766e，筛选#2563eb；辅助字保持可读对比度，完成状态同时有勾选与删除线。
TodoCore、web_api.py、bridge.js、存储键和已有任务不变；不新增功能，完成后停止等待复验。

请按【原需求】整理验收清单，不增加功能。
使用【隔离环境与虚构数据】，检查【具体操作及目标结果】。
同时检查【刷新、错误、键盘和窄屏】；对比【改前改后】。
记录【操作、预期、实际、证据与未验证项】。
若失败，依据【复现步骤、截图与相关文件】最小修复，再重跑原检查。
不能将测试目标、设计稿或AI自述当成已通过的结果。

复验ToDoList美化版，不增加业务。实际浏览器新增“完成Python练习”和“整理课堂笔记”，完成第一条。
核对2/1/1/50.0%，筛选已完成仍是全局50.0%；恢复、取消/确认删除、空名、刷新和导出逐项检查。
390px查看长标题、按钮、对话框与键盘焦点；筛选aria-selected与实际状态一致。
比较基础版与成品：Python核心、接口、存储键和已有任务不变。
失败时记录操作、预期、实际和截图，只改相关文件，重跑原检查；保存失败不能显示已保存。
未执行的加载故障、存储故障或其他浏览器检查标为未验证，不把目标当结论。本轮不发布。