展开本页目录
开始前准备什么
- 下载独立练习包，保留 starter、reference 和原始输入。
- Node/npm、TypeScript与React；附可用锁文件和两版教学组件。
- 使用v0原生功能需相应账号和可用额度；本题作者参考可在本地独立运行。
- 对照两版真实教学组件API
- 在v0导入代码与消费示例
- 一起更新skill、引用和starter
- 确认已有app仍保留旧版本
- 单独迁移消费app且保留输入
- 用真实TypeScript拒绝旧prop
- 重装材料核对新版消费工程
starter、任务提示、具体输入、作者人工可运行参考与独立验证；不含账号/密钥/运行时数据库。
按本文环境运行，再对照原始输入和正反例。
1. 对照两版真实教学组件API
包内 packages/notice-card-v1 和 v2 是本站原创真实 React 组件包，tone 更名为 intent；先读 MIGRATION.md，保留旧消费页面的未保存表单。
2. 在v0导入代码与消费示例
把两版真实源码、归档和迁移说明提供给 v0，导入设计系统并检查 starter。私有 npm 凭据或真实团队默认设置不属于本练习。
交给目标 AI 工具的任务提示
读取教学 NoticeCard v1/v2 归档与迁移说明：tone 改为 intent，删除旧 color prop。先更新 saved design system 的 references/starter，再明确要求升级现有消费 app；保留表单状态与路由。按真实类型检查，不造 props，不只改颜色。3. 一起更新skill、引用和starter
更新 saved skill 时一起改 references、starter 和组件 API。原生步骤可查看修订历史，本地参考则用两个真实组件版本模拟消费关系，二者不能混作执行记录。
4. 确认已有app仍保留旧版本
在本地页面点“仅更新 skill/starter 到v2”，会看到 starter 已2.0.0、existing app 仍1.0.0。保存的上下文变化不会自动重写旧 app 源码。
5. 单独迁移消费app且保留输入
向原生已有 app 单独要求迁移；本地参考点“按新版API迁移已有app”。检查组件 prop、依赖版本与原来的表单内容是否还在。
6. 用真实TypeScript拒绝旧prop
在 reference 执行 npm ci 和 node verify-types.mjs，正例 intent 应通过、旧 tone 应被 TypeScript 拒绝。页面“查看真实旧属性类型错误”回读这份实际编译记录。
7. 重装材料核对新版消费工程
重新安装材料，确认旧属性负例失败、迁移后使用v2且草稿保留。两个教学 .tgz 可由包源码本地 npm pack 重建，不向公共 npm 发布。
怎样确认已经完成
- v2 类型下旧 tone/color 用法失败，迁移后消费 app 和 starter 均能安装/类型检查。
- 保存 skill 与修改消费 app 有两个明确操作和版本证据，不能宣称自动改写旧工程。
- 升级前后的交互输入与路由合同一致，不靠纯截图颜色相似判断升级成功。
常见问题
v0 设计系统更新了，老页面为什么还是旧组件？
在本地页面点“仅更新 skill/starter 到v2”，会看到 starter 已2.0.0、existing app 仍1.0.0。保存的上下文变化不会自动重写旧 app 源码。
怎么让 v0 按真实组件库升级页面而不是编不存在的属性？
在 reference 执行 npm ci 和 node verify-types.mjs，正例 intent 应通过、旧 tone 应被 TypeScript 拒绝。页面“查看真实旧属性类型错误”回读这份实际编译记录。
哪些结果已执行，哪些仍需原生账号验证？
作者两版真实React组件、skill/starter/app中间状态、迁移保留草稿及TypeScript旧prop失败已本地验证；v0原生saved skill/修订历史未执行。