QODER · SKILL TO PRODUCT 用 Qoder 做了个电子书架 先验证想法,再做成能用的产品 一个小时 · 从 Skill 到产品 WEB → SKILL → BOOKSHELF 网页 / 文档 SKILL Website to Book MY BOOKSHELF 教程 蓝皮书 I 蓝皮书 II Browser Use · 检查与修正 想法验证 → 产品交付
4 PARTS · CONTENT MAP
PART 01
先造 Skill
轻量验证,模型对照
PART 02
做成电子书架
从网址到离线书库
PART 03
前端与边界
三个作品,看效果
PART 04
结语
一个下午,交付产品
大家好啊,我是甲木。
前段时间不是刚跟好朋友们一起发布了WorkAgent的蓝皮书么,正好看到这篇推文底下有条评论,说想看印刷的纸质版。
![]()
说实话我也想过这事。
但是 AI 领域的内容做书籍出版有个天然矛盾:出版周期长,但AI 更新太快,刚交付新东西又出来了。所以蓝皮书一直用网站形式在更新。
ps.但我们确实有一本书在路上...先行做个预告,跟 skill 相关的
不过转念一想:用户要的可能不是「纸」,是另一种翻阅方式。网站负责持续更新,电子书负责好翻好带,各干各的。
正好看到阿里的Qoder 8 月 27 号做了一次大升级,从 AI 编程 IDE 变成了智能体工作台。新用户上来就有两周 Pro 试用。我就拿这个需求去试它。
![]()
而且,现在 Qoder 桌面端有个桌宠,有想法不想打字的时候,可以直接对着它说就行,然后自己进入计划、Coding、执行和验证。
![]()
为什么要用Qoder来实现呢?过去⼀年,Qoder 持续深耕Coding Agent,已服务全球600 万⽤户和10 万家企业客户,看看这实力。。。
![]()
PART
01
先造 Skill:最轻的方式验证想法
Build a Skill
做东西我习惯先跑个最小版本。这里我先让 Qoder 写个 skill,做可行性验证。
为什么是 skill?因为它够轻。
一个 skill 就是一套打包好的提示词+ 指令,告诉 Agent 拿到输入以后该干什么、按什么顺序干、最后交付什么。
Qoder 有个扩展市场,里面技能就有两万多个 skill,可以指导 Agent 解决不同的问题。
![]()
比起直接做一整个软件,先用 skill 试水,成本低、反馈快。不行,换个思路也不心疼。
![]()
我把同一个任务分别丢给Auto 模式(它会自己挑选合适的模型)和选择千问 3.8 Max,看看各自跑成什么样。
Auto 模式这边,进来先规划,Plan Mode计划。
![]()
之后派了三个子 Agent 分头探路:一个勘察工作区结构,一个搜寻技能范式,一个查验证工具配置。
Qoder 右边面板能看到它挂了哪些技能和数据源,下面步骤条实时跟进度。
![]()
千问 3.8 Max这边,风格完全不同。没搞什么子 Agent 分头探索,直接就开始干:跑终端命令,找参考 skill 结构,curl 抓页面。
![]()
到写代码阶段差异更明显。千问 3.8 Max搭好 Python 环境,一口气写了116 行。
![]()
顺带一提,Qoder 9 月 4 号更新了自定义模型,在原有 GLM、Kimi、MiniMax 等模型的基础上,新增支持OpenAI 和 Anthropic 协议的BaseURL形式,免费版就可以用。在设置里切到「自定义」,添加供应商就能接自己的 API。
![]()
![]()
回到正题。
Auto 模式跑通 Skill 后,做了个简单的 benchmark。有 skill 的情况下通过率 100%,没 skill 的情况下只有 17%。时间差不多,都在 40 秒左右。
![]()
Website to Book这个 Skill 算是验证通过了。
我分别让它给 Qoder 的教程文档和我的两本蓝皮书生成了对应的 PDF,两个模型各跑一遍,效果大家自己对比:
Auto 模式:
千问 3.8 Max:
PART
02
从 Skill 到书架
Ship a Product
Skill 跑通了,说明这事能做。接下来让 Qoder 把它做成一个产品。
我的要求:做一个书架。可以输入任意网址,转换后保存成一本书。攒多了就是一个电子书库,离线也能看。
![]()
![]()
第一版肯定有问题。有些页面排版崩了,有些图片没抓到。
这时候 Qoder 的Browser Use 就派上用场了:它自己打开浏览器,把转换后的页面跟原站对着看,哪里不对自己回去改代码。
![]()
这个改的过程比结果还有意思。写代码 → 跑一遍 →打开浏览器看效果→ 发现排版错位 → 回去改 →再跑一遍验证。几轮下来,排版稳了。
PART
03
前端与边界:哪些成了,哪些还不行
Honest Verdict
书做完了,顺手试了下 Qoder 做前端。
给它的提示词里放了 basement.studio 和 locomotive.ca两个参考站链接。Qoder 有Browser Use,自己会打开参考站,看完再写代码。
CASE 01
HANDBUILT 工作室官网
左边代码区,右边浏览器实时预览。这个 HANDBUILT 工作室官网的效果我觉得可以,大字排版、hover 联动变化、滚动节奏都在。用的千问 3.8 Max。
![]()
CASE 02
OBSERVER PRESS 出版物官网
第二个是OBSERVER PRESS,模仿 Stripe Press 的出版物官网。六本虚拟书目,衬线标题,米白纸感底色,书封用 CSS 画的。这个我切了 Grok 4.6 跑,就是前面说的自定义模型,自己接 API 进来。
![]()
CASE 03
产品说明书网站
第三个Case 让他做了一个产品说明书网站,整体还挺有工业设计感的。
![]()
三个前端,两个模型。效果大家自己判断。
PART
04
结语
FINAL TAKE
回到开头那条评论。
蓝皮书的内容一直在网页上更新,缺的就是一个随手能翻的形式。这次从一个 skill 开始验证,跑通了做成书架,中间还顺手试了三个前端、换了两个模型。一个下午,从想法到能用的产品。
Qoder 8 月底这次升级,从写代码的工具变成了能帮你做东西的工具。编程的底子还在,但用的人不一定要懂代码了。做什么、做成什么样、哪里要改,这些还是你说了算。它负责执行,你负责拍板。
今天Qoder刚更新了手机远程控制能力,随时随地就能指挥本地电脑和云端Agent干活!
对了,官⽅这边也给了我一些粉丝福利,填码注册有额外福利,评论区见!
以上。
![]()
我是甲木,热衷于分享一些AI干货内容,同时也会分享AI在各行业的落地应用。觉得有用的话,点个赞、在看、转发三连,谢谢大家。
/// END · FROM SKILL TO PRODUCT
特别声明:以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布,本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.