用 Claude Code 和 Tidewave 重构 Phoenix LiveView 应用

我向来对 AI 编程工具持怀疑态度——大多数代码生成最终都落入“乍一看没问题，一跑就出错”的范畴。

不过最近，我尝试用 Claude Code 搭配 Tidewave（一个专为 Phoenix 项目构建的 MCP 服务器）来重构一个副项目。以下是这个工作流在实际操作中的真实情况。

目标：DaisyUI 重构

我有一个 Phoenix LiveView 应用，使用自定义的玻璃拟态 CSS，维护起来越来越繁琐。我想把几个视图彻底改造成标准的 DaisyUI 组件：更干净的 Hero 区块、标准标签页、规范的表单输入，以及响应式表格。

我没有手工逐个编写模板，而是决定用 Claude Code 搭配 Tidewave 来试试。

连接 Claude Code 与 Tidewave

启动 Claude Code 时，你可以将它连接到 MCP（模型上下文协议）服务器：

在我的配置中，我把 Tidewave 和上下文及错误追踪工具放在一起：

Tidewave 让 Claude 能直接获取 Phoenix 应用结构的上下文：schema、路由定义和 LiveView 组件。这意味着你不需要手动把 schema 和辅助函数粘贴到提示词里。

在一个复杂视图上测试

我在一个成员资料 LiveView（lib/pulse_board_web/live/member_live/show.ex）上测试了这个配置：

“lib/pulseboardweb/live/member_live/show.ex 看起来不太好，用 daisyUI 把它做得现代、UI/UX 出色”

Claude 把任务拆解成了系统性的步骤：

它系统地用 DaisyUI 类替换了自定义 CSS，覆盖了 Hero 头部、指标卡片、标签导航、筛选表单和移动端响应式表格：

它甚至处理了暂存 diff、编写描述性的提交信息，并推送到上游：

效果不错的地方

1. 首次通过准确率高：由于 Tidewave 提供了 schema 和组件上下文，生成的 HEEx 模板和 Phoenix 事件处理器没有出现缺失 assign 的错误。
2. UI 现代化速度快：在多个组件中用 DaisyUI 替换自定义 CSS 类，所花的时间只是手写的一小部分。
3. 学习更好的惯用模式：审查生成的 LiveView 代码让我接触到了自己想不到的干净 DaisyUI 组件组合。

实际限制与缺点

1. Token 成本迅速累积：在大型代码库中重度使用会快速消耗 API 限额。对于日常的高强度迭代，成本很容易攀升至每月 100–200 美元。
2. 过度重构的倾向：有时只是要求微调样式，Claude 却会重写整个组件结构。你必须仔细审查 diff，确保它没有移除有意的边界情况处理。
3. 提示词的精确性仍然重要：模糊的提示词仍会导致通用布局。最佳结果来自指定确切的组件类型（例如“使用 daisyUI 卡片和标签页”）。

总结

将 Claude Code 与 Tidewave 这类项目感知的 MCP 工具结合，显著缩小了通用聊天式代码生成与实际项目级开发之间的差距。虽然它不能替代你对架构的理解，但在构建和重构 LiveView 应用时，它消除了大量重复的样板工作。