站长昆山小程序制作

站长,昆山小程序制作,网站网页优化怎么做,淘宝开店需要多少钱一、先上效果图最近动手实践了下 Vibe Coding#xff0c;想尝试​一行代码不写#xff0c;纯通过 Prompt 让 AI 写了一个富文本渲染引擎​。整体花了两天时间不到#xff0c;效果如上图#xff0c;支持的特性有#xff1a;类似前端的 Block、InlineBlock、Inline 布局文本…一、先上效果图最近动手实践了下 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支持文本样式加粗、斜体、下划线、删除线前景色背景色同一行不同字体大小混排等支持 Attachment图文混排或插入自定义 View 等支持子线程排版算高支持单元测试2技术选型自定义富文本渲染引擎最难的点在于如何实现精确的文本分词排版原理可以参考从 0 到 1 自定义文字排版引擎原理篇iOS 有内置的 CoreText API见链接用于文本分词排版当然也可以基于开源的跨端排版引擎 HarfBuzz见链接进行处理。我们这里不需要跨端因此选择 CoreText 作为方案选型。官方封装的 NSAttributedString 当然也能做这件事情但是从工程实践看NSAttributedString 在扩展性比如支持列表、表格等自定义布局、使用方便性以及长文本的性能方面不尽如人意。3技术架构文本分词之后还需要进行布局排版为方便后续拓展布局我们这里参考前端的布局模型引入 Block、InlineBlock、Inline 的概念。同时参考浏览器的布局渲染过程引入三棵树的概念ElementTree用户输入整个富文本可以通过一颗 ElementTree 来表示LayoutTree负责布局排版会在这一层处理好文本的分词、图文混排时各自的位置等RenderTree负责渲染这一层接收布局完成的结果进行最终的上屏绘制敲定技术选型、技术架构之后我们就可以按思路拆分子任务了。2.3 子任务ElementTree由于我们参考了前端的布局模型因此我们需要告诉 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主要如下AI 将绘制相关逻辑也加到了 LayoutTree 中但预期绘制是单独的 RenderTree布局问题InlineBlock 无法整体换行多个 Inline 在同一行时被换行展示margin、padding 不生效等对齐问题同一行包含不同字号的文本时对齐方式不对attachment 无法显示…2.5 子任务RenderTree由于 LayoutTree 这个底层基础没扎实RenderTree 的搭建也不顺利RenderTree 的 Prompt 如上。2.6 BugFix至此AI 生成了初版的富文本渲染引擎接下来就是让 AI 写个 Demo 试用一下在使用过程中发现了很多上面罗列的 Bug针对这些 Bug也可以让 AI 来修复在让 AI 修 Bug 过程中也踩了一些坑参见下文经验总结。三、一些经验总结3.1 Claude AI 常用命令/init项目初始化第一次使用 Claude AI 时执行​每个项目只需要执行一次即可​会生成一个CLAUDE.md文件这是​项目的全局上下文​每次新建 Claude 会话时会自动读取其中的内容可以在CLAUDE.md文件中补充修改历史、全局说明等可以输入来添加文件到会话窗口将文件作为上下文给 AI/exit关闭当前会话/clear清除当前会话上下文和退出会话然后新开一个会话效果一样/compact压缩和总结当前会话上下文和/clear的区别是/compact会将当前会话上下文总结后作为当前会话的新上下文/clear会直接清除所有上下文/resume显示和恢复历史上下文自定义 command可以将通用的 Prompt 做成自定义 command文件位置在.claude/commands/还可以通过 $ARGUMENUTS 来接收自定义参数/agents有的任务比较复杂或上下文较多那可以拆分成多个 agents 进行组合比如写业务逻辑 - 构建单元测试 - CI/CD 等可以拆分多个 agents 组合使用会话模式在最新版本的 Claude AI 插件中除了之前命令行风格的 GUI 以外还提供了会话框风格的 GUI切换会话模式查看历史会话等会更方便如下会话模式可以在输入框左下角切换Edit automaticallyAI 根据输入 Prompt 进行理解并直接编辑文件一般使用该模式即可Plan modeAI 根据输入 Prompt 列出修改计划你可以进一步校验和修改 PlanAsk before editsAI 修改文件前询问MCP常用的 MCP 是context7context7是用于帮助 AI 查找最新文档的避免使用过时 API3.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 会更深入理解代码找到问题原因当然这种方式也有弊端就是会耗费更多的 tokenmoney​7善用​ /compact​​​ ​​ /clear​命令减少模型幻觉如果不主动清除Claude AI 会话中的上下文是会一直保存的当一个会话中问答轮次过多可能会导致 AI 理解不准确幻觉。可以通过/compact 或/clear命令来压缩/清除上下文。一般我在修复有关联性的 Bug 时会使用/compact命令这样 AI 就不需要重新理解工程理解 Bug 了可以提高效率。8BugFix 尽量构造最小可复现 DemoBugFix 其实也是一个子任务最小可复现 Demo 减少 AI 的理解负担。9及时人工介入避免在一个问题上死磕有时候让 AI 修复 Bug 时可能反复修改都解决不了这时候大概率是 AI 没有真正理解问题或者就是输入的 Prompt 有问题这种情况下就没必要让 AI 死磕问题了我们可以及时人工介入避免浪费时间。10善用 Plan 模式在任务拆分时我们自己可能也没想明白应该怎么做那可以切换到 Plan 模式让 AI 和我们一起拆任务。3.3 Vibe Coding 的一些弊端1付费而且还挺贵这是一个挺现实的问题一些好的模型都挺贵而且还是消耗的刀乐国内厂商的模型质量又不尽如人意。2编码风格问题 扩展性、易用性、鲁棒性不足AI 写的代码还是挺容易看出来的感觉很难带有程序员的个人风格一个明显的表现是会用一些比较少见的 API虽然这可能也是 AI 的厉害之处。另外AI 在一些函数复用性、扩展性、使用方便性上有时候差强人意比如 AI 生成代码如下如果要配置 Element 的 Style需要不断的调用text.style.xxx但其实写成链式调用使用起来会更舒服如下注释部分let text TextElement(text: 一、晨光初照)text.style.color .redtext.style.font UIFont.systemFont(ofSize: 17)// 更好的写法// text.style.setColor(xxx).setFont(xxx)鲁棒性方面AI 不会主动考虑调用场景比如我虽然告诉了 AI 我要支持子线程布局但是 AI 生成的代码并不是线程安全的。