全栈 on 姚玉亮的网络日志

独立完成前端页面：Vibe Coding 下的全栈闭环

Thu, 18 Jun 2026 10:30:00 +0800

排期等两周，不如自己上

我是后端出身，Go 和 Python 写得顺手，前端一直停留在"能改 Vue 模板、写点 jQuery"的水平。

alchemy-furnace 立项时，我想做一个多人格融合 Agent 的演示平台，需要一个能配置技能包、展示融合血统、对比生成结果的界面。前端同学的排期要等两周，我决定自己上，用 Claude Code 和 Cursor 做 Vibe Coding。

三周后，我一个人交付了 Go 网关 + Python 合成引擎 + Next.js 前端的完整 DEMO，前端包括技能包编辑器、融合过程可视化、多模型结果对比三个主页面。

分三步走，不让 AI 一把梭

第一步，先把后端契约定死。用 Go（Gin + GORM）把 API 写好，Swagger 文档直接生成。前端只需要对着文档调接口，不让 AI 猜后端长什么样。这是后端工程师做全栈的最大优势：你能自己定义契约。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


// alchemy-furnace 网关侧的技能包接口
r.POST("/api/skills", func(c *gin.Context) {
 var req CreateSkillReq
 if err := c.ShouldBindJSON(&req); err != nil {
 c.JSON(400, gin.H{"error": err.Error()})
 return
 }
 skill, err := skillSvc.Create(c.Request.Context(), &req)
 if err != nil {
 c.JSON(500, gin.H{"error": err.Error()})
 return
 }
 c.JSON(200, skill)
})

第二步，用 Cursor 的 Composer 搭骨架。我描述需求：“用 Next.js App Router + shadcn/ui + Tailwind，做一个三栏布局，左侧技能包列表，中间编辑器，右侧预览”，它生成初始代码后我再逐块调整。这里的关键是给足上下文：把 Swagger 文档、设计参考截图、已有的组件目录一起喂给它。

第三步，复杂交互用 Claude Code 细抠。比如融合血统的树形可视化（Promptbreeder 变异算子 + 血统追溯），我在 Claude Code 里打开相关组件，直接说"这里要改成 DAG 布局，节点颜色按代数区分，点击节点展示该代的 Prompt 全文"，它会读现有代码再精准改。

五个教训

第一，别指望 AI 生成的样式一次到位。布局错乱、响应式断点不对、暗色模式漏色，它经常顾头不顾尾。我的办法是每生成一块就在浏览器里看，不对就截图丢回去让它修。小步快跑，别攒到最后。

第二，状态管理别过度设计。AI 一上来就喜欢套 Zustand/Redux，其实大部分页面用 React Query 管服务端状态、useState 管本地状态就够了。alchemy-furnace 这种 DEMO 规模，最后我什么全局状态库都没引入。

第三，类型安全一定要守住。TypeScript strict 模式全开，API 响应类型从 OpenAPI 生成（openapi-typescript），不让 AI 随手写 any。后端改字段，前端编译就能发现，比联调时互相甩锅高效太多。

第四，UI 库选 shadcn/ui 这类可复制的。组件源码直接进你的仓库，想怎么改都行，比黑盒组件库适合 Vibe Coding。AI 对它的代码也最熟，生成质量明显更高。

第五，后端思维得切换。后端是"请求-响应"，前端是"渲染是状态的函数"。一开始我总在 useEffect 里绕圈子，后来想明白这一点，写起来就顺了。该花半天过一遍 React 官方文档，比让 AI 反复擦屁股强。

后来

Vibe Coding 没有把前端变成"不需要学"，只是把门槛从"记住所有 API"降到了"理解核心概念 + 会描述需求 + 能判断对错"。

后端工程师独立交付前端的最大红利，是契约和实现都能自己掌控，联调成本归零。alchemy-furnace 上线后我反而觉得，至少在产品快速迭代期，这种全栈闭环比前后端分工还快。

封面图：juhansonin / Flickr · CC BY 2.0

AI Vibe Coding 工作流：用 Claude Code 全栈交付

Sun, 28 Dec 2025 10:30:00 +0800

一个人，三套技术栈

2026 年初我开源了 alchemy-furnace（炼丹炉），一个多人格融合 Agent 系统：Go(Gin+GORM) 做网关，Python(FastAPI) 做合成引擎，Next.js 做前端，三套技术栈一个人全栈交付。按传统写法，光是在语言和框架之间切上下文，就要吃掉大量业余时间。我拿 Claude Code 当主力开发助手，慢慢攒出了一套自己的 Vibe Coding 工作流。

先给 Agent 立规矩

第一步，先写 CLAUDE.md，把项目结构、技术栈、启动命令、代码规范和关键领域概念（金丹、丹炉、血统追溯）写清楚，作为 Agent 的长期记忆。

第二步，复杂功能（Promptbreeder 变异算子、合成提示词缓存、多供应商适配）先用 Plan 模式让它出实施计划，我审完再让它动手写代码。

第三步，小步提交，每个子任务一个 commit，方便 review，也方便回滚。

第四步，测试先行。让 Claude 按函数签名写 table-driven tests，我负责补边界 case。

第五步，用 Task 跟踪多步任务，让它自己跑 go build、go test，失败了读报错自己修。

两份配置

项目根的 CLAUDE.md 片段：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


# alchemy-furnace

## 架构
- gateway/ : Go 1.22, Gin + GORM, 负责 API Key 鉴权、路由、计费
- engine/ : Python 3.11, FastAPI, 多人格融合 + Promptbreeder 变异
- web/ : Next.js 14 App Router, Tailwind, shadcn/ui
- deploy/ : docker-compose, 单机部署

## 约定
- Go 代码通过 `make lint` 检查，禁止裸 ignore error
- Python 用 ruff + mypy，接口模型必须用 Pydantic
- 所有外部供应商调用走统一 provider 抽象
- API Key 入库前必须 AES-GCM 加密
- DEMO_MODE 下不调真实 LLM，返回内存 mock

settings.json 里放行高频命令，减少权限弹窗：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


{
 "permissions": {
 "allow": [
 "Bash(go build ./...)",
 "Bash(go test ./...)",
 "Bash(go vet ./...)",
 "Bash(ruff check *)",
 "Bash(pytest -q)",
 "Bash(docker compose config)"
 ]
 }
}

坑是真坑

第一，上下文是稀缺资源。我不会把整个仓库丢给 Claude，而是用子任务切给它：“只看 gateway/internal/provider 目录，给 OpenAI 兼容层加一个 DeepSeek 适配”。大范围重构先让它列影响文件清单，再逐个改。

第二，Vibe Coding 不等于不看代码。写完让它自己跑测试，但 API Key 加密、变异算子的血统追溯这类关键路径，我逐行 review。能跑通不代表逻辑对，尤其涉及金额、权限、加密的时候。

第三，幻觉 API 是真问题，它会编出不存在的 eino 函数签名。我的要求是先 go doc 或直接读 vendor 源码确认，不许凭印象写。

第四，多语言项目在同一会话里容易串味。我一般按服务分会话，或者明确说"接下来只写 Python，别把 Go 的错误处理风格带进来"。

第五，尽量用增量 Edit 而不是整体 Write。diff 清晰，跑偏了当场就能发现。

后来

Claude Code 让我这种以后端为主的人，敢一个人扛前端和算法服务。它最擅长样板代码、测试用例、跨文件重构和根据报错自修复；我负责架构、边界和验收。alchemy-furnace 能在业余时间快速做到 46 star，靠的就是这套工作流。

封面图：recursion_see_recursion / Flickr · CC BY 2.0