和AI一起搞事情#5：技能进阶与Claude Design初体验

极客资料网推荐和AI一起搞事情#5：技能进阶与Claude Design初体验这篇文章给大家，欢迎收藏极客资料网享受知识的乐趣

话接上文，咱接着做中医小游戏。

上一章我们重点聊了开发过程中好用的技能，这一章我们会聊到：

• 开发流程中的核心实践：重构、版本控制、进度管理
• 技能进阶：创建技能、测试技能、提高技能引用率
• Claude Design 使用体验

先汇报一下进度

感觉越来越像4399小游戏了……

本周新增功能：

✅ 背包系统：包括原始中药、中药饮片、方剂、书籍。其中原始中药部分已提供AI生图素材。

✅ 辨证游戏壳子：舌诊 → 脉诊 → 问诊 → 辨证 → 选方
（哈哈没看错, 我又又又重构了，把分散的小游戏整合成了一整个辨证游戏）

✅ 煎药游戏壳子：选方结束触发配伍煎药游戏，学习方剂配伍。

✅ Hermes Agent backend：AI对话层跑通，但未接入游戏。

第一部分：聊聊开发流程

【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自己也搞不明白究竟做完了没有

所以我做了调整：

1. PROGRESS.md：当前正在做的任务细分进度
2. TODO.md：记录已完成信息
3. 大幅缩减 CLAUDE.md 的篇幅，只保留最新项目架构、进度摘要

初步试验，这个组合效果最好。

等我再确认下这两个文件的颗粒度，感觉就可以搞到 precompact 的hook里面自动更新了——感觉比 compact 要好用，不做总结和摘要，只是单纯描述当前状态 + 下一步该做啥，类似条件马尔可夫的特性。

【一切皆版本控制】AI作为顶尖牛马工作更要留痕

事实证明不论是人在工作中，还是AI在工作中留痕都是最重要的

不论是 Git worktree，还是 branch 管理，其实都是为了：

• 一切行动皆被记录
• 一切状态都可回滚

这一点对于AI来说尤其重要。尤其对于一些测试性功能：

• A、B、C三个方案，不知道哪个好？
• 让AI都开发一遍，直接用效果作为唯一对比标准

但是！需要注意版本控制，绝对不要让测试性功能直接在主分支上哐哐造。

因为上下文有限，所以你不要天真地以为可以根据上下文进行回滚——不可能的。

只有Git提交记录是唯一真相源。

所以不论是：测试性代码、设计文档、多版本对比、各种临时feature

请一切皆留痕，一切皆用分支或 git worktree 进行管理。

确认无误再合入主分支，如果效果不及预期直接废弃。

这其实不是AI编程规范，人类编程规范也是如此。

第二部分：技能进阶——创建、测试与引用

【skill-creator】请把开发中每一次重复都变成技能

请务必在开发中无数次想到该使用/skill-creator了

上一章末尾就提到，需要批量制作素材。

比如背包中，我需要批量生产中药素材，所以就顺带手做了个中药素材生成技能。

于是我用 /skill-creator 这个meta技能来制作技能，支持：

1. “先通过豆包同时生成4个或9个不同的中药组图“

2. 对组图切割
3. 通过多模态模型识别图片文字进行文件命名
4. 代码自动扫描路径完成新素材的加入

这样素材后续就能自动添加到游戏里了。

但是！做不到全自动。

因为很多中药比较少见，画出来错误比例很高——正确率也就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 到下一个技能。

方案2：中心式引用（我当前的思路）

在 CLAUDE.md 的核心开发原则中，通过中心式引用，告知AI在哪些位置需要触发什么技能。

方案3：Hook中嵌入find skill
我还看到有人在hook里面嵌入 find skill 技能，默认任务开始前先搜技能。

但个人感觉：技能还是要符合开发者的习惯，并且要切实解决当前AI Coding存在的问题。

完全自动化搜索并接入，并不一定是更好的方案。

第三部分：Claude Design初体验

该说不说，Claude Design来得太是时候了，完全补齐我缺失的审美和空间想象力。

在做出Claude Design高仿技能前，先用Claude Design来画原型吧。

先看对比图

下面是文字描述直接转换成问诊对话框的效果。

你说我没用设计技能？不巧我还真用了！

并且我还对比了下不同对话框的风格，然后有了下面的效果……

嗯……一定是我审美有问题……嗯。

下面是Claude Design的效果：

（当然，在重复用了多次后发现：缺少更多人的输入的话，其实配色、效果会有些单一，可能技能有几套visual rule，覆盖了调色盘，视觉元素规范等）

Claude Design的工作流程拆解

先梳理下它的几个步骤：
0. 首先claude design提供了很多的设计类型，覆盖prototype、slide-deck等等，每种设计类型背后应该有不同的Design.md的设计和必要template

1. Brainstorming（设计澄清）

对设计中的要点进行澄清，包括：

• 风格
• 配色
• 元素
• 动效
• Tweaks：哪些元素你希望可以调整

感觉就是 brainstorming 技能的UI版本。

抛开低效的AI一问一答，直接用页面多项选择呈现。

（这个技能应该有一个 tweaks 脚本或基类？，用于提供嵌入到HTML中的一些可变元素，比如不同风格、不同配色）

2. TaskList（任务拆分）

拆分多个执行步骤，开始分步骤进行Coding。

3. Fork Verifier Agent（校验Agent）

触发校验Agent对代码进行验收。

中间应该也隐藏了类似 webapp-testing 的技能，因为我看页面打开了console，会根据报错进行修复。

4. Export：Claude提供了代码打包以及html等各种格式的下载。不过最核心的是直接handoff to claude code的功能。会把整个项目打包，并提供必要的README.md文件，直接提供Claude Code 可以直接开始工作的完整上下文。

总结

哈哈，说复杂流程也很简单。感觉核心在那个“handoff to claude code”的按钮，为了把从设计到coding上线的全流程都在Claude Code内闭环。open codesign等开源方案也出来很多了，后面看看在PPT上能不能魔改一个最适合本牛马的。

当然，更复杂的"绘制草图""上传页面"之类的我还没用——毕竟你让我画，那也真的是画不出来一点

所以反反复复回到那个观点：

AI干掉了之前的边界，但并不会完全抹平人和人的差距。

相反，AI更多解决了 Doing，而 Thinking、审美、创意 的部分还在人。

并且AI无限放大了这部分的差异。

写在最后

下一章咱接着开发：hermes agent NPC对话、病案库、炮制游戏
以及该聊聊hooks和多session状态传递 了。

文章来源:https://www.cnblogs.com/gogoSandy/p/20027861
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：jacktools123@163.com进行投诉反馈，一经查实，立即删除！