一篇关于 Dewhale 最初如何逆向工程 v0.dev 实现原理的博客。
Dewhale 是一个 v0.dev 的开源替代品，结合提示工程与 GitHub 集成，以实现高效的 UI 生成和代码优化。Dewhale 的架构包含三个主要组件：
- 提示工程：利用 AI 模型输出满足特定要求的代码。
- 代码生成优化：通过操作代码的抽象语法树(AST)调整有缺陷的 AI 生成结果。
- GitHub 集成：利用 GitHub API 和 GitHub Actions 进行用户交互和工作流自动化。
提示构成了 Dewhale 的核心，在指导 AI 模型生成高质量代码方面发挥着关键作用。我们精心设计了提示词，以密切匹配 v0.dev 的输出样式和质量。这涉及：
- UI 组件库：我们使用
@shadcn/ui作为 UI 组件库，将其使用文档作为提示中的示例，并作了轻微修改。 - 图标库：经过试验，我们允许 AI 在已知的
lucide图标集中更自由地选择图标。图标导入中的错误将在代码生成优化阶段更正。 - 图表库：根据 v0.dev 的输出，我们在提示中包含了
@nivo/pie、@nivo/line、@nivo/heatmap、@nivo/scatterplot和@nivo/bar的使用示例。
从 v0.dev 获得的一个重要经验是生成完全静态的 JSX 代码，尽管这似乎限制了使用场景，但它显著提高了稳定性。
实践中，AI 倾向于重复一些通过调整词也难以消除的错误。遇到的典型问题包括：
- UI 组件的导入路径不正确。
- 从 lucide 导入图标时导入不正确或缺少，或导入不存在的图标。
在逆向工程 v0.dev 的方法之后，我们开发了一种通过分析代码 AST 来纠正这些问题的方法。
我们识别使用的变量及其正确的导入源。lucide 项目甚至提供了一个 API 来获取所有可用的图标，这使我们能够简化提示并基于 lucide API 优化生成的代码。
这种优化极大地增强了代码生成的稳定性。
与 GitHub 的集成涉及基于 issue 和 issue 评论事件触发工作流程。工作流程包括：
- 根据标签、发起者和内容进行过滤，以决定是否应触发代码生成。
- 为首次代码生成创建分支和相应的 PR。
- 从用户输入中提取文本和图像，与系统提示相结合，为 AI 模型提供数据。生成的代码然后进入优化流程，在那里它被精炼和改进，之后优化后的代码被包含在 PR 中。