大家好!我是瓜哥。前互联网技术副总裁,现在带队死磕 AI 编程。
现在自己单干,日常就两件事:持续学习和内容输出,以及 vibe coding(跟着手感快速迭代)自己的软件产品。
为了沉淀个人品牌,个人站的搭建早就在计划里,最近总算腾出手来开干。

这个站叫 AI 编程瓜哥(guage lab)。
我会把自己在公网的内容输出都放这儿,包括文章和知识库。我手搓的 skill 和产品,面向企业的真实案例做复盘,顺带记录自己创业路上的思考,也都放在这集中整理分享。
今天不聊虚的,就讲一个真实迭代:我用国产模型 Doubao-Seed-Evolving 配合 Claude Code,把站上 Skill 详情页从「能用」打磨到「顺手」的全过程。
tips:Doubao-Seed-Evolving 是字节推出的、面向写代码和智能体场景的大模型,在写代码、做开发、调用工具、规划并跑完一长串任务这些事上持续优化,保持周级更新。
*「AI编程瓜哥」这个号只更一件事:我用 AI 真实做项目的全过程,踩的坑、跑通的路都写出来。先点个关注,咱们一起把 AI 编程这件事琢磨透。*
正片开始...
01 | 要解决的问题
站点当前的状态不是从 0-1,而是从 1-10。
这次要优化的是:站点 Skill 的分享详情页。用户点进来,诉求很明确:下载之前,先看清楚这个技能包里到底有什么。
改版前的页面有两个硬伤。

① 布局没到位
设计上是左中右三栏,实际只显示出两栏。左边的「文件目录」就算把浏览器拉到全屏,也没法独立成一栏,文件结构被塞到了一个不合适的位置。
② 信息是乱的
「资源概览」本来是技能包的基础信息,却和顶部介绍各放一处,互相割裂。详情区也没做到我想要的样子:顶部是简介,正文默认显示 SKILL.md,点左边的目录,右边内容跟着切换。
一句话:用户进来,一眼看不明白这个技能包是干嘛的,也翻不动它的文件。
③ 改版前后对比
| 维度 | 改版前 | 改版后 |
|---|---|---|
| 页面布局 | 只有两栏,文件目录挤在一边 | 左中右三栏,文件目录独立在左侧 |
| 打开后看什么 | 信息分散,不知道先看哪 | 顶部是简介,正文默认打开 SKILL.md |
| 左侧目录 | 灰色文字,点不动 | 每个文件夹都能点,点了跳到对应文件 |
| 上下对齐 | 左右栏比顶部宽一截 | 全页共用一条边线,上下对齐 |
| 下载 | 只有一个按钮 | 顺带显示压缩包多大 |
20多分钟,改了 5 个文件,这下就清晰了多了。

任务一次性完成,没有返工。Doubao-Seed-Evolving 模型的执行质量还是不错的。下面展开过程细节,给大家交代清楚如何实现的。
02 | 先把方案钉死,再让模型动手
① 四条需求一次讲死
我没有让模型上来就改,而是先开 plan 模式,把要什么一次性讲清楚:
- 「资源概览」属于基础信息,并进顶部介绍区;
- 「文件浏览」改名「文件目录」,独立成左栏,做成真正的三栏;
- 顶部第二条分割线上方放「agent 安装」;
- 详情区只放文件内容,默认显示
SKILL.md,点左侧目录,右边内容跟着切换。
对话截图:plan 模式下我提这四条需求!需求明细
② 方案我也会打回
我的习惯是边界先钉死再动手,看着慢,实际省返工。
模型给了方案,我会做一轮批注。比如这一条:
真正的问题不是「目录该不该出现」,而是「目录现在是死的」,要把所有可见节点都做成可点的导航。
再比如布局,我否掉了「左右栏从页面一开始就跟大标题并排悬浮」,因为那会把顶部介绍区搞得很挤。我的要求是左右栏跟顶部共用一条边线,等页面滚到文件区再固定在顶部。
下面是当时那段对话的原文,我是这样把要求钉死再动手的:

这些决定,连同不同屏幕宽度下怎么显示、点文件夹该跳到哪、哪些文件能改哪些不许碰,我都一并写进了指令里。
03 | 三栏搭起来,再打磨一轮
① 骨架先搭起来
三栏很快就位:左边文件目录,中间文件预览,右边信息栏。默认打开 SKILL.md,点左边目录,中间内容跟着换。

到这一步只是「能用」,我把第一版打回来,又做了一轮收口。这一轮才真正看出模型在严格约束下的工程习惯,挑几个点讲。
② 先找根因,不瞎调
改完第一眼就别扭:左右栏比顶部介绍区宽出一截。
智能水平在这体现。模型没急着去改数字,而是去翻样式代码,结果发现顶部和文件区用了两套不一样的宽度和左右留白:顶部实际是 1180 像素,文件区是 1600 像素。
而且同一条样式规则在文件里写了两次,后面的值把前面的盖掉了。
找到了真正生效的那组,把文件区统一到和顶部同一条边线上。
下面是它当时定位根因的真实输出,可以看到它先注意到样式被重复定义,再锁定真正生效的值,没有上来就瞎改:

另一个问题是左边的文件夹之前是灰字、点不动。
文件夹层级本身有用,能告诉用户压缩包里的真实结构,不能删。
把每个文件夹都改成可点击,点文件夹就跳到里面第一个能看的文件;空文件夹直接不显示,不再出现点不动的死节点。
codedocs/ ← 点这里 decisions/ step2-verify-mode.md ← 自动跳到它
③ 做减法,再照顾不同屏幕
我让它去掉了三处没用的信息:
- 文件树不再显示每个文件多大,一串字节数对判断「要不要看」没帮助;
- 文件内容头部去掉那行长路径,只留文件名和「只读」标记,完整路径交给左边目录和鼠标移上去的提示;
- 下载按钮旁补上整个压缩包的体积(实测 39.5 KB)。这里有个细节我挺认可:它显示的是压缩包本身的大小,不是解压后的大小,避免用户误判下载流量。外链拿不到大小就不显示,也不擅自发网络请求去试探。
右栏「滚到文件区就固定在顶部」的效果,原来只在特别宽的屏幕(1440 像素以上)生效,1280 这种很常见的桌面宽度反而不固定。
最后把规则补齐:宽屏三栏固定,中屏左边目录收成下拉选择,窄屏回到上下排列,手机上单列显示。
04 | 三个让我敢把项目交给它的细节
比起「改了什么」,我更在意它「怎么改的」。这一轮有三个细节。
① 越界的改动,自己退了回去
我把能改、不能改的范围写死:不许动数据库结构、前后端约定、导入流程和第三方库。
模型中途顺手在两处架构文档里补了说明,核对后发现那不属于「跟新行为冲突的旧内容」,属于越界,又自己改了回去。
这点很好:不是改完再说,是真把边界读进去了。
当然,有效的前提是你的提示词做好了边界约束。

② 不接受「嘴上说通过」
我在指令里写了「必须真实复跑」。
它真跑了三层:代码规范、类型检查、打包构建、流程校验全过;又在浏览器里按不同宽度实测对齐和目录点击;还专门拿一个没有文件目录的旧页面验证,确认这次改动没把老页面带坏。
中途自己把任务状态标成了「待评审」,发现验证还没跑完,立刻自己改回「进行中」,全绿了才翻回去。

③ 出了异常先查自己
测试阶段,用脚本连续快速点多个文件夹做测试,中间内容区短暂卡了一下加载。
观察执行细节。先确认数据请求正常,再手动单次点击复现一遍,确认正常后在汇报里如实写明:这是我脚本连发挤在一起造成的,不是正常使用会遇到的情况。

自测后,人工复核依然是不能缺少的环节。
05 | 工具和模型
① 我用的两样东西
开发工具是 Claude Code,用它先出方案再执行的 plan 模式,把需求讲清楚再动手。模型这次换成字节的 Doubao-Seed-Evolving,通过火山方舟 Agent Plan 接入,在 Claude Code 里直接选就能用。
Claude Code 不用多介绍。Seed-Evolving 让我比较买账的有两点:
- 是它保持周级更新,迭代速度还挺快;
- 是接入一次就不用折腾,新版本自动生效,不用跟着换接入地址、改配置。
② 我重点看三件事
现在对于新模型,我早就不看评测和榜单了,就拿真实的项目去跑,观察后自行过程和结果。
- 跨好几个文件改,能不能一次改对;
- 一长串任务跑下来,能不能稳住不掉链子;
- 遇到它不确定的,会不会胡编。
整个过程,说实话,肉眼可见的输出质量提升。
📸 模型切换:在 Claude Code 中配置/切换到 Doubao-Seed-Evolving 模型
>

06 | 写在最后
最后这轮打磨,从读代码、拆任务、改 5 个文件,到代码检查加浏览器多宽度实测,大概 26 分钟。
数据库结构和前后端约定没动,也没引入新的第三方库。
我的体感是:现在的写代码模型,能不能把代码改对,已经不是主要问题。
能不能在我划定的范围内做到「不多改、不错改、自己验证、出了异常如实说」,才真正决定我敢不敢把真实项目交给它。这几点上,Doubao-Seed-Evolving 这次的表现是达标的。
提交反馈
图文26 分钟、5 个文件、0 返工:我把个人站交给了国产模型 Seed-Evolving