和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.mdPROGRESS.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的工作流程拆解

先梳理下它的几个步骤:

  1. 首先claude design提供了很多的设计类型,覆盖prototype、slide-deck等等,每种设计类型背后应该有不同的Design.md的设计和必要template

  2. Brainstorming(设计澄清)

对设计中的要点进行澄清,包括:

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

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

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

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

  1. TaskList(任务拆分)

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

  1. Fork Verifier Agent(校验Agent)

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

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

  1. 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状态传递 了。

相关推荐
前端技术2 小时前
Spring AI Alibaba基础应用之提示词(Prompt)的基础理解及使用
人工智能·spring·prompt
拉拉拉拉拉拉拉马2 小时前
如何写好一个 Skill:把一次性 Prompt 变成可复用工作流
prompt
容智信息16 小时前
AI Agent(智能体)的输出格式应该从 Markdown 转向 HTML吗?
前端·人工智能·rust·编辑器·html·prompt
紫小米1 天前
Agent的范式
prompt·embedding·ai编程
2601_957780841 天前
GPT-5.5时代:从“指令集“到“任务契约“的Prompt工程范式迁移
大数据·人工智能·gpt·架构·prompt
南宫乘风1 天前
从 Prompt 到工程化能力:写好 AI Agent Skill 的实践方法
prompt·skills
水木流年追梦1 天前
大模型入门-应用篇1-prompt技术
开发语言·python·算法·prompt
qcx231 天前
GenericAgent 源码级拆解——3K 行种子如何长成全系统控制 Agent,Token 消耗仅 1/6
人工智能·prompt·ai agent·工作提效·harness
Jackzaker1 天前
Prompt工程在代码中的实现
人工智能·python·prompt