Claude Design 使用体验先汇报一下进度感觉越来越像4399小游戏了……本周新增功能✅ 背包系统包括原始中药、中药饮片、方剂、书籍。其中原始中药部分已提供AI生图素材。背包.gif✅ 辨证游戏壳子舌诊 → 脉诊 → 问诊 → 辨证 → 选方哈哈没看错, 我又又又重构了把分散的小游戏整合成了一整个辨证游戏辩证.gif✅ 煎药游戏壳子选方结束触发配伍煎药游戏学习方剂配伍。煎药.gif✅ Hermes Agent backendAI对话层跑通但未接入游戏。第一部分聊聊开发流程【refactor】开发不是线性的而是螺旋上升的当你反复多次修复相似的问题时或许说明你该定义标准或者重新抽象了。举个例子做游戏会有很多弹窗——游戏引导要弹窗每个小游戏有弹窗。当我反复看到不同弹窗出现相同的问题时弹窗大小不一花里胡哨毫无统一配色和风格文字溢出现象在多个弹窗反复出现多个弹窗只能打开没有退出按钮或退出按钮无法点击这个时候就该重构、抽象了。我的做法还是superpowers的技能串联Explore先让AI分析当前现状找出问题brainstorming给出重构和抽象设计writing-plans提供测试验收方案subagent进行重构开发图片但是反过来并不推荐AI一上来写代码就进行高度抽象。相反上来的代码应该以简洁为主。这里推荐 andrej-karpathy-skills:simplicity-first 原则先让代码跑起来再让代码优雅起来。图片【PROGRESS.md】长线任务进度跟踪是核心最初看到有人单独使用 TODO.md、PROGRESS.md我当时觉得纯属多此一举“又又又用产品经理管开发的方式来管AI了。直接把进度写到 CLAUDE.md 中每次重启对话直接重新加载不行吗”再一次证明纸上谈兵终是浅。这里面最核心的一个问题其实是我之前在渐进式加载这个技术本身一直没想明白的点如果这个信息模型需要完全阅读那还需要渐进式加载吗我原本以为是不需要的。但这里遗漏了一个问题模型在使用 read 工具读取文件时默认一般会读取100行不同Agent架构和工具会存在差异核心是工具设计为了避免无用信息充斥模型上文这样可以视获取信息决定是否继续读取。这就导致当你提供给模型的文件过于庞大、又杂糅了太多信息时模型会出现因为部分读取文件而带来信息遗漏。体现在我把项目架构、已完成状态、进行中状态全部写入 CLAUDE.md 中。结果发现模型在update项目状态时只更新了已完成但没有及时更新进行中状态导致反反复复围着一个任务来来回回地搞还有一次在 CLAUDE.md 中写了好多遍进度跟踪结果有的位置显示该任务已完成有的显示进行中最后连AI自己也搞不明白究竟做完了没有所以我做了调整PROGRESS.md当前正在做的任务细分进度TODO.md记录已完成信息大幅缩减 CLAUDE.md 的篇幅只保留最新项目架构、进度摘要初步试验这个组合效果最好。等我再确认下这两个文件的颗粒度感觉就可以搞到 precompact 的hook里面自动更新了——感觉比 compact 要好用不做总结和摘要只是单纯描述当前状态 下一步该做啥类似条件马尔可夫的特性。image【一切皆版本控制】AI作为顶尖牛马工作更要留痕事实证明不论是人在工作中还是AI在工作中留痕都是最重要的不论是 Git worktree还是 branch 管理其实都是为了一切行动皆被记录一切状态都可回滚这一点对于AI来说尤其重要。尤其对于一些测试性功能A、B、C三个方案不知道哪个好让AI都开发一遍直接用效果作为唯一对比标准但是需要注意版本控制绝对不要让测试性功能直接在主分支上哐哐造。因为上下文有限所以你不要天真地以为可以根据上下文进行回滚——不可能的。只有Git提交记录是唯一真相源。所以不论是测试性代码、设计文档、多版本对比、各种临时feature请一切皆留痕一切皆用分支或 git worktree 进行管理。确认无误再合入主分支如果效果不及预期直接废弃。这其实不是AI编程规范人类编程规范也是如此。第二部分技能进阶——创建、测试与引用【skill-creator】请把开发中每一次重复都变成技能请务必在开发中无数次想到该使用/skill-creator了上一章末尾就提到需要批量制作素材。比如背包中我需要批量生产中药素材所以就顺带手做了个中药素材生成技能。于是我用 /skill-creator 这个meta技能来制作技能支持“先通过豆包同时生成4个或9个不同的中药组图“图片对组图切割通过多模态模型识别图片文字进行文件命名代码自动扫描路径完成新素材的加入这样素材后续就能自动添加到游戏里了。图片但是做不到全自动。因为很多中药比较少见画出来错误比例很高——正确率也就70%。这里一定会有人说让AI做Verifier呀哈哈哈那准确率更低柴胡的图片AI连续4次识别出4种不一样的作物…所以还是需要懂中医的人一张张来筛选谁说AI完全替代人类的那做错素材的锅谁来背【skill-evaluator】没有通过检验的技能不是可用的技能之前提到试用过Anthropic在 skill-creator 里面更新的技能评估模块。但个人使用体验感觉evaluator的思路可借鉴但不必完全使用。至于验证技能的必要性…… 直接看图片吧。如果你不验证你会得到下面的药材素材图哈哈哈又是AI逗我开心的一天人参至于技能的评估说复杂也很简单技能的测试要尽可能接近真实使用场景——也就是可能缺少上下文的情况下也要实现技能的有效触发完整流程的遵循因此 skill-evaluator 需要保证每个测试query都有干净完整的上下文。Anthropic 用子进程起命令行实现的但我个人使用感觉“与其在对话里用不如直接脚本评估来得干净整洁。”还不受到对话执行时间、gateway超时时间的影响。总共几个步骤创建测试query集bash命令行遍历每个query是一行claude 命令把中间所有Agent结果解析到md文件让AI直接批量评估结果简单、直接、高效。提高技能引用率好用的技能有不少但在使用中往往都面临有效技能引用率不高的问题。比如碰到bug修复并无法自动触发systematic-debugging技能开始写规划文档也无法触发writing-plans 技能如果把所有技能触发都手工命令触发的话又偏离了让AI自主进行长运行时coding的思路。所以在开发流程中有以下几个提高关键技能引用率的方案方案1链表式技能引用类似superpowers在每个技能文档最后明确 handoff 到下一个技能。image方案2中心式引用我当前的思路在 CLAUDE.md 的核心开发原则中通过中心式引用告知AI在哪些位置需要触发什么技能。图片方案3Hook中嵌入find skill我还看到有人在hook里面嵌入 find skill 技能默认任务开始前先搜技能。但个人感觉技能还是要符合开发者的习惯并且要切实解决当前AI Coding存在的问题。完全自动化搜索并接入并不一定是更好的方案。第三部分Claude Design初体验该说不说Claude Design来得太是时候了完全补齐我缺失的审美和空间想象力。在做出Claude Design高仿技能前先用Claude Design来画原型吧。先看对比图下面是文字描述直接转换成问诊对话框的效果。你说我没用设计技能不巧我还真用了并且我还对比了下不同对话框的风格然后有了下面的效果……截图_选择区域_20260429154546嗯……一定是我审美有问题……嗯。下面是Claude Design的效果图片当然在重复用了多次后发现缺少更多人的输入的话其实配色、效果会有些单一可能技能有几套visual rule覆盖了调色盘视觉元素规范等Claude Design的工作流程拆解先梳理下它的几个步骤0. 首先claude design提供了很多的设计类型覆盖prototype、slide-deck等等每种设计类型背后应该有不同的Design.md的设计和必要templateBrainstorming设计澄清对设计中的要点进行澄清包括风格配色元素动效Tweaks哪些元素你希望可以调整感觉就是 brainstorming 技能的UI版本。抛开低效的AI一问一答直接用页面多项选择呈现。这个技能应该有一个 tweaks 脚本或基类用于提供嵌入到HTML中的一些可变元素比如不同风格、不同配色截图_选择区域_20260504091210TaskList任务拆分拆分多个执行步骤开始分步骤进行Coding。imageFork Verifier Agent校验Agent触发校验Agent对代码进行验收。中间应该也隐藏了类似 webapp-testing 的技能因为我看页面打开了console会根据报错进行修复。imageExportClaude提供了代码打包以及html等各种格式的下载。不过最核心的是直接handoff to claude code的功能。会把整个项目打包并提供必要的README.md文件直接提供Claude Code 可以直接开始工作的完整上下文。图片总结哈哈说复杂流程也很简单。感觉核心在那个“handoff to claude code”的按钮为了把从设计到coding上
和AI一起搞事情#5：技能进阶与Claude Design初体验
Claude Design 使用体验先汇报一下进度感觉越来越像4399小游戏了……本周新增功能✅ 背包系统包括原始中药、中药饮片、方剂、书籍。其中原始中药部分已提供AI生图素材。背包.gif✅ 辨证游戏壳子舌诊 → 脉诊 → 问诊 → 辨证 → 选方哈哈没看错, 我又又又重构了把分散的小游戏整合成了一整个辨证游戏辩证.gif✅ 煎药游戏壳子选方结束触发配伍煎药游戏学习方剂配伍。煎药.gif✅ Hermes Agent backendAI对话层跑通但未接入游戏。第一部分聊聊开发流程【refactor】开发不是线性的而是螺旋上升的当你反复多次修复相似的问题时或许说明你该定义标准或者重新抽象了。举个例子做游戏会有很多弹窗——游戏引导要弹窗每个小游戏有弹窗。当我反复看到不同弹窗出现相同的问题时弹窗大小不一花里胡哨毫无统一配色和风格文字溢出现象在多个弹窗反复出现多个弹窗只能打开没有退出按钮或退出按钮无法点击这个时候就该重构、抽象了。我的做法还是superpowers的技能串联Explore先让AI分析当前现状找出问题brainstorming给出重构和抽象设计writing-plans提供测试验收方案subagent进行重构开发图片但是反过来并不推荐AI一上来写代码就进行高度抽象。相反上来的代码应该以简洁为主。这里推荐 andrej-karpathy-skills:simplicity-first 原则先让代码跑起来再让代码优雅起来。图片【PROGRESS.md】长线任务进度跟踪是核心最初看到有人单独使用 TODO.md、PROGRESS.md我当时觉得纯属多此一举“又又又用产品经理管开发的方式来管AI了。直接把进度写到 CLAUDE.md 中每次重启对话直接重新加载不行吗”再一次证明纸上谈兵终是浅。这里面最核心的一个问题其实是我之前在渐进式加载这个技术本身一直没想明白的点如果这个信息模型需要完全阅读那还需要渐进式加载吗我原本以为是不需要的。但这里遗漏了一个问题模型在使用 read 工具读取文件时默认一般会读取100行不同Agent架构和工具会存在差异核心是工具设计为了避免无用信息充斥模型上文这样可以视获取信息决定是否继续读取。这就导致当你提供给模型的文件过于庞大、又杂糅了太多信息时模型会出现因为部分读取文件而带来信息遗漏。体现在我把项目架构、已完成状态、进行中状态全部写入 CLAUDE.md 中。结果发现模型在update项目状态时只更新了已完成但没有及时更新进行中状态导致反反复复围着一个任务来来回回地搞还有一次在 CLAUDE.md 中写了好多遍进度跟踪结果有的位置显示该任务已完成有的显示进行中最后连AI自己也搞不明白究竟做完了没有所以我做了调整PROGRESS.md当前正在做的任务细分进度TODO.md记录已完成信息大幅缩减 CLAUDE.md 的篇幅只保留最新项目架构、进度摘要初步试验这个组合效果最好。等我再确认下这两个文件的颗粒度感觉就可以搞到 precompact 的hook里面自动更新了——感觉比 compact 要好用不做总结和摘要只是单纯描述当前状态 下一步该做啥类似条件马尔可夫的特性。image【一切皆版本控制】AI作为顶尖牛马工作更要留痕事实证明不论是人在工作中还是AI在工作中留痕都是最重要的不论是 Git worktree还是 branch 管理其实都是为了一切行动皆被记录一切状态都可回滚这一点对于AI来说尤其重要。尤其对于一些测试性功能A、B、C三个方案不知道哪个好让AI都开发一遍直接用效果作为唯一对比标准但是需要注意版本控制绝对不要让测试性功能直接在主分支上哐哐造。因为上下文有限所以你不要天真地以为可以根据上下文进行回滚——不可能的。只有Git提交记录是唯一真相源。所以不论是测试性代码、设计文档、多版本对比、各种临时feature请一切皆留痕一切皆用分支或 git worktree 进行管理。确认无误再合入主分支如果效果不及预期直接废弃。这其实不是AI编程规范人类编程规范也是如此。第二部分技能进阶——创建、测试与引用【skill-creator】请把开发中每一次重复都变成技能请务必在开发中无数次想到该使用/skill-creator了上一章末尾就提到需要批量制作素材。比如背包中我需要批量生产中药素材所以就顺带手做了个中药素材生成技能。于是我用 /skill-creator 这个meta技能来制作技能支持“先通过豆包同时生成4个或9个不同的中药组图“图片对组图切割通过多模态模型识别图片文字进行文件命名代码自动扫描路径完成新素材的加入这样素材后续就能自动添加到游戏里了。图片但是做不到全自动。因为很多中药比较少见画出来错误比例很高——正确率也就70%。这里一定会有人说让AI做Verifier呀哈哈哈那准确率更低柴胡的图片AI连续4次识别出4种不一样的作物…所以还是需要懂中医的人一张张来筛选谁说AI完全替代人类的那做错素材的锅谁来背【skill-evaluator】没有通过检验的技能不是可用的技能之前提到试用过Anthropic在 skill-creator 里面更新的技能评估模块。但个人使用体验感觉evaluator的思路可借鉴但不必完全使用。至于验证技能的必要性…… 直接看图片吧。如果你不验证你会得到下面的药材素材图哈哈哈又是AI逗我开心的一天人参至于技能的评估说复杂也很简单技能的测试要尽可能接近真实使用场景——也就是可能缺少上下文的情况下也要实现技能的有效触发完整流程的遵循因此 skill-evaluator 需要保证每个测试query都有干净完整的上下文。Anthropic 用子进程起命令行实现的但我个人使用感觉“与其在对话里用不如直接脚本评估来得干净整洁。”还不受到对话执行时间、gateway超时时间的影响。总共几个步骤创建测试query集bash命令行遍历每个query是一行claude 命令把中间所有Agent结果解析到md文件让AI直接批量评估结果简单、直接、高效。提高技能引用率好用的技能有不少但在使用中往往都面临有效技能引用率不高的问题。比如碰到bug修复并无法自动触发systematic-debugging技能开始写规划文档也无法触发writing-plans 技能如果把所有技能触发都手工命令触发的话又偏离了让AI自主进行长运行时coding的思路。所以在开发流程中有以下几个提高关键技能引用率的方案方案1链表式技能引用类似superpowers在每个技能文档最后明确 handoff 到下一个技能。image方案2中心式引用我当前的思路在 CLAUDE.md 的核心开发原则中通过中心式引用告知AI在哪些位置需要触发什么技能。图片方案3Hook中嵌入find skill我还看到有人在hook里面嵌入 find skill 技能默认任务开始前先搜技能。但个人感觉技能还是要符合开发者的习惯并且要切实解决当前AI Coding存在的问题。完全自动化搜索并接入并不一定是更好的方案。第三部分Claude Design初体验该说不说Claude Design来得太是时候了完全补齐我缺失的审美和空间想象力。在做出Claude Design高仿技能前先用Claude Design来画原型吧。先看对比图下面是文字描述直接转换成问诊对话框的效果。你说我没用设计技能不巧我还真用了并且我还对比了下不同对话框的风格然后有了下面的效果……截图_选择区域_20260429154546嗯……一定是我审美有问题……嗯。下面是Claude Design的效果图片当然在重复用了多次后发现缺少更多人的输入的话其实配色、效果会有些单一可能技能有几套visual rule覆盖了调色盘视觉元素规范等Claude Design的工作流程拆解先梳理下它的几个步骤0. 首先claude design提供了很多的设计类型覆盖prototype、slide-deck等等每种设计类型背后应该有不同的Design.md的设计和必要templateBrainstorming设计澄清对设计中的要点进行澄清包括风格配色元素动效Tweaks哪些元素你希望可以调整感觉就是 brainstorming 技能的UI版本。抛开低效的AI一问一答直接用页面多项选择呈现。这个技能应该有一个 tweaks 脚本或基类用于提供嵌入到HTML中的一些可变元素比如不同风格、不同配色截图_选择区域_20260504091210TaskList任务拆分拆分多个执行步骤开始分步骤进行Coding。imageFork Verifier Agent校验Agent触发校验Agent对代码进行验收。中间应该也隐藏了类似 webapp-testing 的技能因为我看页面打开了console会根据报错进行修复。imageExportClaude提供了代码打包以及html等各种格式的下载。不过最核心的是直接handoff to claude code的功能。会把整个项目打包并提供必要的README.md文件直接提供Claude Code 可以直接开始工作的完整上下文。图片总结哈哈说复杂流程也很简单。感觉核心在那个“handoff to claude code”的按钮为了把从设计到coding上
