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

上一章我们重点聊了开发过程中好用的技能，这一章我们会聊到：
- 开发流程中的核心实践：重构、版本控制、进度管理
- 技能进阶：创建技能、测试技能、提高技能引用率
- Claude Design 使用体验

## 先汇报一下进度
感觉越来越像4399小游戏了……

本周新增功能：

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

![背包.gif](https://developer.qcloudimg.com/http-save/yehe-6190096/175376fe013054e4e9b399a808e60672.gif)

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

![辩证.gif](https://developer.qcloudimg.com/http-save/yehe-6190096/39be27ed4a328170b650102bdbe28811.gif)

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

![煎药.gif](https://developer.qcloudimg.com/http-save/yehe-6190096/4e7ee5420da64ea71ed522ed270d3316.gif)

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


## 第一部分：聊聊开发流程
### 【refactor】开发不是线性的，而是螺旋上升的
> **当你反复多次修复相似的问题时，或许说明你该定义标准或者重新抽象了。**

举个例子：做游戏会有很多弹窗——游戏引导要弹窗，每个小游戏有弹窗。

当我反复看到不同弹窗出现相同的问题时：
- 弹窗大小不一，花里胡哨，毫无统一配色和风格
- 文字溢出现象在多个弹窗反复出现
- 多个弹窗只能打开没有退出按钮，或退出按钮无法点击

这个时候就该重构、抽象了。

我的做法还是superpowers的技能串联
- Explore：先让AI分析当前现状，找出问题
- brainstorming：给出重构和抽象设计
- writing-plans：提供测试验收方案
- subagent：进行重构开发

![图片](https://developer.qcloudimg.com/http-save/yehe-6190096/ea46ff14e77d61c0c3a81e98bf7e8461.jpg)

但是！反过来，并不推荐AI一上来写代码就进行高度抽象。

相反，上来的代码应该以简洁为主。

这里推荐 andrej-karpathy-skills:simplicity-first 原则：

> 先让代码跑起来，再让代码优雅起来。

![图片](https://developer.qcloudimg.com/http-save/yehe-6190096/28f40004f9687b6c90d278451ea5ba15.jpg)

### 【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 要好用，不做总结和摘要，只是单纯描述当前状态 + 下一步该做啥，类似条件马尔可夫的特性。

![image](https://developer.qcloudimg.com/http-save/yehe-6190096/3707f4ed2bba90154e85a0889055ad39.jpg)

### 【一切皆版本控制】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个不同的中药组图“

![图片](https://developer.qcloudimg.com/http-save/yehe-6190096/2c52a2b25fa45abc24499b177e53091a.jpg)

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

这样素材后续就能自动添加到游戏里了。
![图片](https://developer.qcloudimg.com/http-save/yehe-6190096/32c100426eb0a445893fc6b6f2fa37f2.jpg)

但是！做不到全自动。

因为很多中药比较少见，画出来错误比例很高——正确率也就70%。

这里一定会有人说让AI做Verifier呀，哈哈哈那准确率更低，柴胡的图片，AI连续4次识别出4种不一样的作物....

所以还是需要懂中医的人一张张来筛选！谁说AI完全替代人类的？那做错素材的锅谁来背？


### 【skill-evaluator】没有通过检验的技能不是可用的技能

之前提到，试用过Anthropic在 skill-creator 里面更新的技能评估模块。

但个人使用体验感觉：evaluator的思路可借鉴，但不必完全使用。

至于验证技能的必要性…… 直接看图片吧。

如果你不验证，你会得到下面的药材素材图（哈哈哈，又是AI逗我开心的一天）：

![人参](https://developer.qcloudimg.com/http-save/yehe-6190096/e61b04dbbf3e0aa54b206b5a4b80a6f4.jpg)

至于技能的评估，说复杂也很简单：

技能的测试要尽可能接近真实使用场景——也就是可能缺少上下文的情况下，也要实现：
- 技能的有效触发
- 完整流程的遵循

因此 skill-evaluator 需要保证每个测试query都有干净完整的上下文。

Anthropic 用子进程起命令行实现的，但我个人使用感觉：
> "与其在对话里用，不如直接脚本评估来得干净整洁。"

还不受到对话执行时间、gateway超时时间的影响。

总共几个步骤：
- 创建测试query集
- bash命令行遍历，每个query是一行claude 命令
- 把中间所有Agent结果解析到md文件
- 让AI直接批量评估结果

简单、直接、高效。

### 提高技能引用率

好用的技能有不少，但在使用中往往都面临有效技能引用率不高的问题。

比如：
- 碰到bug修复，并无法自动触发`systematic-debugging`技能
- 开始写规划文档，也无法触发`writing-plans` 技能

如果把所有技能触发都手工命令触发的话，又偏离了让AI自主进行长运行时coding的思路。

所以在开发流程中，有以下几个提高关键技能引用率的方案：

**方案1：链表式技能引用**

类似`superpowers`，在每个技能文档最后，明确 handoff 到下一个技能。


![image](https://developer.qcloudimg.com/http-save/yehe-6190096/db30f3c66c2862d4477162abf09da647.png)


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

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

![图片](https://developer.qcloudimg.com/http-save/yehe-6190096/e234b270cd071021feade06069e1625e.jpg)

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

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

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

## 第三部分：Claude Design初体验

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

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

### 先看对比图

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

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

并且我还对比了下不同对话框的风格，然后有了下面的效果……
![截图_选择区域_20260429154546](https://developer.qcloudimg.com/http-save/yehe-6190096/a9cfe842471b336400c294384bbf0644.png)

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

下面是Claude Design的效果：

![图片](https://developer.qcloudimg.com/http-save/yehe-6190096/37dd8a5ae964bfa83a94a1f142e94db2.png)

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

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

1. Brainstorming（设计澄清）

对设计中的要点进行澄清，包括：
- 风格
- 配色
- 元素
- 动效
- Tweaks：哪些元素你希望可以调整

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

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

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

![截图_选择区域_20260504091210](https://developer.qcloudimg.com/http-save/yehe-6190096/058dc4314ef26dd1cbebf33ea2d22e14.png)

2. TaskList（任务拆分）

拆分多个执行步骤，开始分步骤进行Coding。
![image](https://developer.qcloudimg.com/http-save/yehe-6190096/8e55faf1b4669f41a4a87c4cb42702b2.png)

3. Fork Verifier Agent（校验Agent）

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

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

![image](https://developer.qcloudimg.com/http-save/yehe-6190096/21e72f34588421f14e15c8d3d311c1bf.png)

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

![图片](https://developer.qcloudimg.com/http-save/yehe-6190096/7ffc6d34e9d6efcc4cd7f685114cc756.jpg)

### 总结

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

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

所以反反复复回到那个观点：
> AI干掉了之前的边界，但并不会完全抹平人和人的差距。

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

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

## 写在最后

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


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

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

话接上文，咱接着做中医小游戏。这一章我们会聊到：
- 开发流程中的核心实践：重构、版本控制、进度管理
- 技能进阶：创建技能、测试技能、提高技能引用率
- Claude Design 使用体验

人工智能

中医小游戏开发笔记：分享游戏开发中的重构技巧、版本控制实践与进度管理方法。详解技能创建与测试流程，提升AI开发效率。介绍ClaudeDesign原型设计体验，展示游戏新增的背包系统、辨证游戏和煎药玩法。探讨AI开发中的版本控制重要性及技能引用优化方案。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

和AI一起搞事情#5：技能进阶与Claude Design初体验-腾讯云开发者社区-腾讯云

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

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

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐