最近动手实践了下 Vibe Coding，想尝试一行代码不写，纯通过 Prompt 让 AI 写了一个富文本渲染引擎。
整体花了两天时间不到，效果如上图，支持的特性有：
类似前端的 Block、InlineBlock、Inline 布局
文本样式：加粗、斜体、下划线、删除线，前景色，背景色，同一行不同字体大小混排等
Attachment：图文混排或插入自定义 View 等
异步排版和算高：基于 CoreText API，支持子线程布局算高，主线程渲染
单测覆盖
项目用的 Claude AI，差不多耗费了 50$（是真的贵！但也是真的强！），本文将记录整个过程和一些经验总结。
二、过程记录
2.1 Claude 安装和项目初始化
Claude 安装和使用在网上有很多教程，细节这里不再赘述，推荐直接使用 VSCode 的 Claude AI 插件；后文「经验总结」部分也会总结 Claude AI 的常用命令，感兴趣可以直接跳转。
首先，我们需要新建一个空的 iOS 项目和富文本渲染引擎的 pod（这里我们叫 RichView），创建完成之后在 VSCode 中打开，点击右上角 Claude AI 的图标开启会话，输入/init 命令初始化工程。
/init命令的作用是让 Claude 理解整个项目，这是在项目中使用 Claude 的第一步，只需要执行一次就好。
/init会在根目录下自动创建一个CLAUDE.md文件，这个文件可以理解成全局上下文，即每次新开 Claude 会话都会自动加载其中的内容，我们可以在这里记录一些如修改历史、全局说明等内容。
2.2 技术选型、架构
让 AI 写代码，和我们自己写代码基本类似，不过是将我们的思路转换成 Prompt 告诉 AI。
编码之前需要先确定几件事情：这些确定好之后，我们后续的任务拆分才会更顺利。 1）需要支持哪些 Feature
由于我们参考了前端的布局模型，因此我们需要告诉 AI 在 CSS 中 Block、InlineBlock、Inline 的布局规范，这个在 MDN 中可以直接摘录，当然也可以直接让 AI 帮我们生成（如上图）。
接着，我们需要告诉 AI 怎么构建 ElementTree，也就是上图所示 Prompt。
最后，我们就可以让 AI 参照 Prompt，生成 ElementTree 了。
ElementTree 生成完成后，我们发现遗漏了单测环节，继续完善 ElementTree 的 Prompt，然后明确告诉 AI xx 文件新增了 xx 任务，让 AI 继续完成任务，如下图：
ElementTree 的创建还算比较顺利，AI 理解也比较到位，生成的代码基本符合预期。
2.4 子任务：LayoutTree
同样，我们定义好 Prompt，让 AI 生成 LayoutTree。
LayoutTree 的生成不太顺利，而且从最后的测试效果看也有很多 Bug，主要如下：
MCP：常用的 MCP 是context7，context7是用于帮助 AI 查找最新文档的，避免使用过时 API
3.2 经验总结
不得不感叹，AI 编程实在太强大了，相信在不久的将来，一个只会写 Prompt 的非专业程序员，也能完整交付一个 App 了。
让 AI 编程，并不是说给一句话就能让 AI 完成代码，各种细节还是需要人来提前想清楚，毕竟最终维护代码和解决问题的还是我们自己，AI 只是帮我们提效和扩展思路的工具；有句话总结的蛮好：你可以将 AI 视为一个非常聪明，甚至资深，但是没有业务经验的程序员。
下面我想总结下最近实战的一些经验，希望对各位有帮助： 1）架构设计需要提前规划好，尽量想清楚细节
谋定而后动，不管是我们自己写代码，还是让 AI 写代码，我觉得提前想好要做什么，怎么做是非常重要的。
架构设计好了，细节想清楚了，那怎么拆分子任务，其实也就明确了。 2）任务拆分越小越好，上下文越明确越好
AI 最适合做有明确输入输出的事情，给的上下文越明确，AI 产生幻觉的概率越低，输出结果也会越准确。
当然，如果是输入输出明确的任务，也可以让 AI 先输出测试用例，测试用例人工检测完备之后，再让 AI 编码也是可以的（测试驱动开发/TDD）。 3）每一项目任务做好之后再进行下一项任务
基础不牢，地动山摇！
推荐打磨好每一项子任务再继续下一项任务，否则千里之堤毁于蚁穴，每个任务都留一点坑，最终可能带来灾难性的结果！
另外，单测是个好东西，对每项任务补齐单测，可以有效防止后续 AI 改出问题。
4）善用 Git，防止代码污染
Claude 在 Edit automatically 模式下会直接修改文件，为了防止污染其他代码，每次让 AI 修改前尽量保证工作区干净，这样也能方便我们 Review 代码。 5）写 Prompt 尽量用明确的词汇，不要表意不清
比如在构建 ElementTree 时，我会明确告诉 AI 要支持哪些 Style，可以有效避免 AI 臆测
与之相反的反例是，在构建 LayoutTree 时，限定不足，导致 AI 自由发挥，最终实现出很多 Bug。
6）善用提示词：think < think hard < think harder < ultrathink
可以在 Prompt 中追加 think hard / think harder 等词汇，来让 AI 进入深度思考，这并不是什么黑魔法，而是 Claude AI 官方认证的，参见：https://www.anthropic.com/engineering/claude-code-best-practices
实践下来，确实还是有效果的，如下是让 AI 修复文本对齐问题，加了 think hard AI 会更深入理解代码，找到问题原因；当然，这种方式也有弊端，就是会耗费更多的 token（money）
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜
