彭骋：AI 编程实践-零基础上手AI编程

彭骋：AI 编程实践 零基础上手AI编程 彭骋：AI 编程实践 零基础上手AI编程 Modified April 27 边栏插件开发指南.md 32.54KB Base js sdk docs.md 159.89KB Base 开放设计规范.zip 12.68MB field demo main.zip 7.66KB 字段捷径插件开发指南（FaaS 版）.md 58.84KB • 打开 Trae，新建窗口 field demo main.zip 7.66KB 因为在新建 Tab 的时候，去搜索、查找相关文档等等，多数情况下都是和当前 Tab 相关的，在右侧新建 Tab 后，左右切换成本是最低的。浏览器默认值是在最右侧新建，经常需要手动拖动 Tab。所以这是一个懒人友好的插件，欢迎使用。代码：https://github.com/littleben/TabMagnet 插件已上线：https://chromewebstore.google.com/detail/tabmagnet/hcjodleodhbpnjcdfgdahdfnadfmfikn 在编写插件的过程中，发现 AI 掌握的 Chrome API 已经过时了，因此需要参考 Chrome 最新的 API 和示例 https://github.com/GoogleChrome/chrome extensions samples 惨痛教训：如果做出来一个功能正常的版本，一定要记得存档！存档！存档！再去优化。没存档就优化的后果是，AI 把功能改坏了，但尝试了很多轮，依然修复不了，陷入到无尽的循环中。 Icon 和背景图是用 ChatGPT 生成的，效果还可以。 文件转换文本（Markdown）字段捷径 万能文件转换器 • 支持将多种常用文件格式一键转换为文本或 Markdown 格式。支持 PDF、Office 文档、音频文件、HTML 等多种格式，提高文件处理效率，方便调用 AI 处理。 简单操作，全能转换 • 使用方法简单：上传您想要转换的文件，插件会自动识别文件类型并进行转换，文件中的图片将自动调用 AI 进行处理。 https://larkcommunity.feishu.cn/base/extension/replit 30c6b123ea3323e3 「附件转文本」字段捷径 • 支持将纯文本附件转成文本字段 https://bytedance.larkoffice.com/base/extension/replit 30f1c3883764a3e3 Word to Markdown 网站 • 支持批量将 Word 文档转换成 Markdown，在浏览器上进行处理，不上传到服务器，不用担心安全隐私问题。 • 传送门：https://word2md.net PDF to Markdown 网站 • 支持批量将 PDF 文档转换成 Markdown，在浏览器上进行处理，不上传到服务器，不用担心安全隐私问题。 • 传送门：https://www.pdf2md.net 「短链生成器」字段捷径 短链生成器 • 长链接瞬间变短，轻松追踪点击数据。支持文本和链接字段，可批量转换多个链接。 一键转换，即时统计 • 选择需转换的字段，点击生成按钮。短链接自动生成并记录点击次数，随时查看传播效果，助力精准营销决策。 https://larkcommunity.feishu.cn/base/extension/replit 30cbdef3020ba3e4 Labubu 动态壁纸 免费获取最新 labubu 动态壁纸 https://labubuwallpaper.live 案例复盘：【AI 编程案例分享】从云端到低谷：我是如何抓住爆火 labubu 新词获得流量，又在一夜之间失去它 AI Banner 几秒钟内用AI创建精美横幅，为您的营销活动即时生成专业、符合品牌的横幅。无需设计技能。 https://www.aibanner.art 案例复盘：AI 编程 Hackathon 分享：两个小时做的网站，如何拿到 5000 美金特等奖 其他工具 智能小助手 开发过程中碰到任何问题，可以问这个机器人，它了解所有多维表格的 API，会帮助你排查问题 • Bot 版本：https://applink.larkoffice.com/T8W7txPDdHsC • web 版本：https://dcniaqwtmoca.feishuapp.cn/ai/gui/chat/a 5da467dcb5af480ba6a994c3774efd0e 或者加入交流群，在群里提问，智能助手会自动为你回答问题 Code Agent https://github.com/All Hands AI/OpenHands • Code Agent，可以帮你编写代码 AI 编程自定义规则 • 可配置在 Trae 规则里，以提升编程的准确性和鲁棒性 Code block Markdown Copy 开发规范 【代码生成原则（按优先级）】 1. First Principles（第一性原理）：梳理最核心需求与边界 2. YAGNI：只实现当前真正需要的功能 3. KISS：保持设计和实现的简单性 4. SOLID：面向对象/模块化设计时，遵循单一职责、开放封闭等 5. DRY：消除重复，提炼公用逻辑 根据场景动态调整顺序 架构级／需求分析（Project Kickoff） First Principles → YAGNI → KISS → SOLID → DRY 新功能迭代／增量开发：YAGNI → KISS → SOLID → DRY → First Principles 小函数／工具库实现：KISS → DRY → YAGNI → SOLID → First Principles 复杂业务组件／面向对象建模：First Principles → SOLID → YAGNI → KISS → DRY 来源：MooreAI@即刻 关于作者 user 9480 独立AI开发者，字节跳动、豌豆荚 • All In AI 出海 • WaytoAGI 从1 10 策划人 复盘故事 • 主导将 DeepSeek 接入飞书多维表格 复盘故事 • AI 编程实践者 【免费版】零基础 AI 编程分享 • 个人网站：https://benx.ai • 社交媒体： 公众号：AI 工具进化论 小红书：Ben.AI工具进化论 微信：littlebena 【AI 编程案例分享】从云端到低谷：我是如何抓住爆火 labubu 新词获得流量，又在一夜之间失去它 AI 编程 Hackathon 分享：两个小时做的网站，如何拿到 5000 美金特等奖 MooreAI@即刻 复盘故事 复盘故事 【免费版】零基础 AI 编程分享 边栏插件开发指南.md 32.54KB 边栏插件开发指南.md 32.54KB Base js sdk docs.md 159.89KB Base js sdk docs.md 159.89KB Base 开放设计规范.zip 12.68MB Base 开放设计规范.zip 12.68MB field demo main.zip 7.66KB field demo main.zip 7.66KB 字段捷径插件开发指南（FaaS 版）.md 58.84KB 字段捷径插件开发指南（FaaS 版）.md 58.84KB • 打开 Trae，新建窗口 field demo main.zip 7.66KB • 打开 Trae，新建窗口 field demo main.zip 7.66KB • 打开 Trae，新建窗口 field demo main.zip 7.66KB field demo main.zip 7.66KB field demo main.zip 7.66KB 因为在新建 Tab 的时候，去搜索、查找相关文档等等，多数情况下都是和当前 Tab 相关的，在右侧新建 Tab 后，左右切换成本是最低的。浏览器默认值是在最右侧新建，经常需要手动拖动 Tab。所以这是一个懒人友好的插件，欢迎使用。代码：https://github.com/littleben/TabMagnet 插件已上线：https://chromewebstore.google.com/detail/tabmagnet/hcjodleodhbpnjcdfgdahdfnadfmfikn 在编写插件的过程中，发现 AI 掌握的 Chrome API 已经过时了，因此需要参考 Chrome 最新的 API 和示例 https://github.com/GoogleChrome/chrome extensions samples 惨痛教训：如果做出来一个功能正常的版本，一定要记得存档！存档！存档！再去优化。没存档就优化的后果是，AI 把功能改坏了，但尝试了很多轮，依然修复不了，陷入到无尽的循环中。 Icon 和背景图是用 ChatGPT 生成的，效果还可以。 文件转换文本（Markdown）字段捷径 万能文件转换器 • 支持将多种常用文件格式一键转换为文本或 Markdown 格式。支持 PDF、Office 文档、音频文件、HTML 等多种格式，提高文件处理效率，方便调用 AI 处理。 简单操作，全能转换 • 使用方法简单：上传您想要转换的文件，插件会自动识别文件类型并进行转换，文件中的图片将自动调用 AI 进行处理。 https://larkcommunity.feishu.cn/base/extension/replit 30c6b123ea3323e3 「附件转文本」字段捷径 • 支持将纯文本附件转成文本字段 https://bytedance.larkoffice.com/base/extension/replit 30f1c3883764a3e3 Word to Markdown 网站 • 支持批量将 Word 文档转换成 Markdown，在浏览器上进行处理，不上传到服务器，不用担心安全隐私问题。 • 传送门：https://word2md.net PDF to Markdown 网站 • 支持批量将 PDF 文档转换成 Markdown，在浏览器上进行处理，不上传到服务器，不用担心安全隐私问题。 • 传送门：https://www.pdf2md.net 「短链生成器」字段捷径 短链生成器 • 长链接瞬间变短，轻松追踪点击数据。支持文本和链接字段，可批量转换多个链接。 一键转换，即时统计 • 选择需转换的字段，点击生成按钮。短链接自动生成并记录点击次数，随时查看传播效果，助力精准营销决策。 https://larkcommunity.feishu.cn/base/extension/replit 30cbdef3020ba3e4 Labubu 动态壁纸 免费获取最新 labubu 动态壁纸 https://labubuwallpaper.live 案例复盘：【AI 编程案例分享】从云端到低谷：我是如何抓住爆火 labubu 新词获得流量，又在一夜之间失去它 【AI 编程案例分享】从云端到低谷：我是如何抓住爆火 labubu 新词获得流量，又在一夜之间失去它 AI Banner 几秒钟内用AI创建精美横幅，为您的营销活动即时生成专业、符合品牌的横幅。无需设计技能。 https://www.aibanner.art 案例复盘：AI 编程 Hackathon 分享：两个小时做的网站，如何拿到 5000 美金特等奖 AI 编程 Hackathon 分享：两个小时做的网站，如何拿到 5000 美金特等奖 其他工具 智能小助手 开发过程中碰到任何问题，可以问这个机器人，它了解所有多维表格的 API，会帮助你排查问题 • Bot 版本：https://applink.larkoffice.com/T8W7txPDdHsC • web 版本：https://dcniaqwtmoca.feishuapp.cn/ai/gui/chat/a 5da467dcb5af480ba6a994c3774efd0e 或者加入交流群，在群里提问，智能助手会自动为你回答问题 Code Agent https://github.com/All Hands AI/OpenHands • Code Agent，可以帮你编写代码 AI 编程自定义规则 • 可配置在 Trae 规则里，以提升编程的准确性和鲁棒性 来源：MooreAI@即刻 MooreAI@即刻 关于作者 user 9480 独立AI开发者，字节跳动、豌豆荚 • All In AI 出海 • WaytoAGI 从1 10 策划人 复盘故事 • 主导将 DeepSeek 接入飞书多维表格 复盘故事 • AI 编程实践者 【免费版】零基础 AI 编程分享 • 个人网站：https://benx.ai • 社交媒体： 公众号：AI 工具进化论 小红书：Ben.AI工具进化论 微信：littlebena 复盘故事 复盘故事 【免费版】零基础 AI 编程分享 关于作者 user 9480 独立AI开发者，字节跳动、豌豆荚 • All In AI 出海 • WaytoAGI 从1 10 策划人 复盘故事 复盘故事 • 主导将 DeepSeek 接入飞书多维表格 复盘故事 复盘故事 • AI 编程实践者 【免费版】零基础 AI 编程分享 【免费版】零基础 AI 编程分享 • 个人网站：https://benx.ai • 社交媒体： 公众号：AI 工具进化论 小红书：Ben.AI工具进化论 微信：littlebena 公众号：AI 工具进化论 小红书：Ben.AI工具进化论 微信：littlebena 源文档：AI 编程实践：多维表格插件 x TraeAI AI 编程实践：多维表格插件 x TraeAI 源文档：AI 编程实践：多维表格插件 x TraeAI AI 编程实践：多维表格插件 x TraeAI AI 编程能力越来越强，用来写插件易如反掌，推荐大家使用 AI 编程工具写插件实现个性化需求。本教程适用于有编程经验的工程师；没有编程经验的同学也可以上手尝试，门槛很低，有手就会。 视频： https://live.juejin.cn/5982/aiforcode2025vol10 用Trae体验AI 编程实践：多维表格插件｜AI for Code工作坊 Vol.10 用Trae体验AI 编程实践：多维表格插件｜AI for Code工作坊 Vol.10 https://www.feishu.cn/community/course/content?course id=7501980762679197724&class id=7501980762719797276&lesson id=7501980984715329564&content id=7501980984739069980 飞行社 飞行社 工具准备 • https://trae.com.cn //主推版本，一般选这个就 OK。支持 DeepSeek R1、V3 等等模型 • https://trae.ai //需要魔法上网，支持 Claude 3.7、3.5，编程能力更强 • Cursor Cursor • windsurf windsurf 多维表格插件：快速开始 💡 思路 1. 确定要做的产品类型，找到示例代码，让 AI 参考已有的代码以及配置好相关依赖，从而避免 AI 自由发挥导致的问题。 2. 将开发指南、API 文档发给 AI 做参考，这样写出来的代码会更准确。其中 Markdown 格式比较方便 AI 读取，因此将开发指南和 API 文档处理成 Markdown 格式，供大家下载，并在 Trae 中调用。 3. 需求的颗粒度尽可能比较小，先写一个小功能，再不断添加和优化功能，不要一次性写一个完整的复杂功能。 4. 碰到报错、需求实现不符合预期，不断和 AI 沟通修改。这是 AI 编程最消耗时间、最难的地方，请务必保持耐心，把它当做探索、解谜的过程。 思路 1. 确定要做的产品类型，找到示例代码，让 AI 参考已有的代码以及配置好相关依赖，从而避免 AI 自由发挥导致的问题。 2. 将开发指南、API 文档发给 AI 做参考，这样写出来的代码会更准确。其中 Markdown 格式比较方便 AI 读取，因此将开发指南和 API 文档处理成 Markdown 格式，供大家下载，并在 Trae 中调用。 3. 需求的颗粒度尽可能比较小，先写一个小功能，再不断添加和优化功能，不要一次性写一个完整的复杂功能。 4. 碰到报错、需求实现不符合预期，不断和 AI 沟通修改。这是 AI 编程最消耗时间、最难的地方，请务必保持耐心，把它当做探索、解谜的过程。 边栏插件 • Demo 代码 ◦ 在线版： i. HTML 模板：github地址 入口为 src/index.ts 文件 ii. React 模板：github地址 入口为 src/App.tsx 文件 iii. Vue 模板：github地址 入口为src/App.vue文件 ◦ 下载版： ▪ html template main.zip ▪ react template main.zip ▪ vue template main.zip github地址 github地址 github地址 ◦ 在线版： i. HTML 模板：github地址 入口为 src/index.ts 文件 ii. React 模板：github地址 入口为 src/App.tsx 文件 iii. Vue 模板：github地址 入口为src/App.vue文件 github地址 github地址 github地址 i. HTML 模板：github地址 入口为 src/index.ts 文件 github地址 ii. React 模板：github地址 入口为 src/App.tsx 文件 github地址 iii. Vue 模板：github地址 入口为src/App.vue文件 github地址 ◦ 下载版： ▪ html template main.zip ▪ react template main.zip ▪ vue template main.zip ▪ html template main.zip html template main.zip ▪ react template main.zip react template main.zip ▪ vue template main.zip vue template main.zip • 开发指南 Markdown 版本的开发指南，可以更好的让 AI 理解，因此推荐把这个版本保存到 trae 项目下。 在线版：边栏插件开发指南 边栏插件开发指南 Markdown 版本的开发指南，可以更好的让 AI 理解，因此推荐把这个版本保存到 trae 项目下。 在线版：边栏插件开发指南 边栏插件开发指南 • API 文档 在线版本：GitHub Lark Base Team/js sdk docs: JS SDK Docs、https://lark base team.github.io/js sdk docs/zh/api/guide GitHub Lark Base Team/js sdk docs: JS SDK Docs 在线版本：GitHub Lark Base Team/js sdk docs: JS SDK Docs、https://lark base team.github.io/js sdk docs/zh/api/guide GitHub Lark Base Team/js sdk docs: JS SDK Docs • 设计规范 包含 Markdown 版本和相关图片，将设计规范给到 AI，可以让编写的插件符合多维表格的规范，视觉和风格统一。在线版本：Base 开放设计规范 Base 开放设计规范 包含 Markdown 版本和相关图片，将设计规范给到 AI，可以让编写的插件符合多维表格的规范，视觉和风格统一。在线版本：Base 开放设计规范 Base 开放设计规范 字段捷径 • Demo 代码 ◦ 在线版：https://github.com/Lark Base Team/field demo ◦ 下载版： ◦ 在线版：https://github.com/Lark Base Team/field demo ◦ 下载版： • 开发指南 字段捷径插件开发指南（FaaS 版） 字段捷径插件开发指南（FaaS 版） 字段捷径插件开发指南（FaaS 版） 字段捷径插件开发指南（FaaS 版） 详细教程 字段捷径 步骤 描述 截图 了解 Trae Trae 整体的结构是左、中、右三个面板，AI 能力在最右侧。 1. 资源管理器：用来显示项目文件，包括代码、说明文档、上下文等等 2. 代码、文件查看器：显示代码 3. AI 对话框：提需求、应用代码的操作区域，这是最重要的地方。 4. 终端：运行代码，查看调试日志的地方 准备工作 ◦ 在线版本：选择「克隆 Git 仓库」，输入 https://github.com/Lark Base Team/field demo ◦ 下载版：如果你克隆 github 代码存在卡点，请直接下载代码，解压后，在 Trae 上选择「打开文件夹」： ◦ 将下载好的「字段捷径插件开发指南（FaaS 版）.md」拖到项目里，方便后续让 AI 参考。 字段捷径插件开发指南（FaaS 版）.md 输入需求 • Prompt：引用已有的 demo 代码和开发指南 • AI 生成代码后，点击「应用」，继续点击「全部接受」 调试、修改 • 在右上角点击「面板」，呼出「终端」 • 看到「服务已经启动，端口 8080」，说明代码已经运行成功。 • 基于 FaaS字段捷径调试模板复制副本，然后点击右侧边栏的「字段捷径调试助手」。 ◦ 流程：FaaS 调试 添加字段 配置字段 确认 ​ FaaS字段捷径调试模板 ◦ 流程：FaaS 调试 添加字段 配置字段 确认 • 顺利的话，就能正常运行功能。 • 不顺利，复制报错信息，发给 Trae 做修改。 发布上架 在项目目录下执行 npm run pack（nodejs版本14.16.0及以上），然后将output/output.zip文件上传即可。 然后提交多维表格捷径插件表单 多维表格捷径插件表单 进阶版 • 字段捷径进阶版，带有 API 授权的模板，参考这个：https://github.com/Lark Base Team/field demo/tree/feat real ocr • 申请第三方凭证 字段捷径插件开发指南（FaaS 版） 字段捷径插件开发指南（FaaS 版） • 授权组件，调试阶段看不到，得使用config.json模拟用户授权输入 如何使用 AI 写一个后端服务 在做「万能 Markdown 转换器」字段捷径时，其中核心的功能将 Word、PPT、Excel 转换成 Markdown 的服务，无法运行在字段捷径 FaaS 环境中，因此需要单独部署一个后端服务。 万能 Markdown 转换器 最近微软开源了一个 Markdown 转换服务：Markitdown，它支持各种文件转换成 Markdown。 Markitdown 后端服务跑在 replit.com 上，用它作为案例。（也可以在本地电脑上用 Trae 写完，然后部署到服务器上，逻辑是类似的） replit.com 步骤 描述 截图 注册 replit 账号 replit.com（注册时需要科学上网） fork 开源代码 创建 app，选从 github 导入，输入 https://github.com/microsoft/markitdown 给 AI 提需求 在右侧打开「Assistant」，引用 readme.md 文件，让 AI 基于当前项目，写一个调用的服务。 Prompt 模板： 请参考 readme.md 文件中的功能，请将它部署成一个后端服务。 输入：文件链接或者上传一个文件 输出：转换成 Markdown 的文件，放在公开目录下，提供下载 url。下载文件的时效性为 30 分钟， 超时后自动删除。 调试后端服务 • AI 写完代码之后，点击 Run 运行 • 点开 Preview 在新窗口打开 • 在 API 地址后面加 /docs，就能去查看对应的 API 调用方式，并点Try it out验证接口是不是符合自己的预期。 • 如果功能不太符合预期、碰到 bug，则回到上一步，继续让 Claude 给你修改代码。 发布服务 • 调试到符合自己预期之后，就可以正式发布服务了，点击 Deployments，将它发布成一个正式的服务 • 然后就可以获得固定的服务地址，例如：https://markitdown.replit.app 安全指南 后端服务的调用，如果是免鉴权可用，可能容易被恶意利用，因此推荐配置一个 API key，请求的时候加上 key 进行鉴权。 • Key 配置在「secret」里 排坑指南 问题：API 有多个输入方式，但调用的时候总是失败。 解决方案：去掉「空数据」的勾选，只传输需要处理的参数。 问题：修改 key 之后，没有生效的，无法使用新的 key 解决方案：修改 key 需要重新发布服务，在部署里参数里修改。 问题：启用 Markitdown LLM 识别图片的服务之后，自定义 Prompt 无法生效。 解决方案：http 请求时，需要在请求 url 里加上 Prompt，例如 Code block Bash POST /convert?url=https://example.com/image.jpg&llm prompt=your custom prompt 这个解决方案是在使用 deepwiki 问答时找到的方案：https://deepwiki.com/microsoft/markitdown，deepwiki 可以针对任意一个 github 仓库进行分析、提问。 replit.com 步骤 步骤 描述 描述 截图 截图 注册 replit 账号 注册 replit 账号 replit.com（注册时需要科学上网） replit.com replit.com（注册时需要科学上网） replit.com fork 开源代码 fork 开源代码 创建 app，选从 github 导入，输入 https://github.com/microsoft/markitdown 创建 app，选从 github 导入，输入 https://github.com/microsoft/markitdown 给 AI 提需求 给 AI 提需求 在右侧打开「Assistant」，引用 readme.md 文件，让 AI 基于当前项目，写一个调用的服务。 Prompt 模板： 请参考 readme.md 文件中的功能，请将它部署成一个后端服务。 输入：文件链接或者上传一个文件 输出：转换成 Markdown 的文件，放在公开目录下，提供下载 url。下载文件的时效性为 30 分钟， 超时后自动删除。 在右侧打开「Assistant」，引用 readme.md 文件，让 AI 基于当前项目，写一个调用的服务。 Prompt 模板： 请参考 readme.md 文件中的功能，请将它部署成一个后端服务。 输入：文件链接或者上传一个文件 输出：转换成 Markdown 的文件，放在公开目录下，提供下载 url。下载文件的时效性为 30 分钟， 超时后自动删除。 请参考 readme.md 文件中的功能，请将它部署成一个后端服务。 输入：文件链接或者上传一个文件 输出：转换成 Markdown 的文件，放在公开目录下，提供下载 url。下载文件的时效性为 30 分钟， 超时后自动删除。 调试后端服务 调试后端服务 • AI 写完代码之后，点击 Run 运行 • 点开 Preview 在新窗口打开 • 在 API 地址后面加 /docs，就能去查看对应的 API 调用方式，并点Try it out验证接口是不是符合自己的预期。 • 如果功能不太符合预期、碰到 bug，则回到上一步，继续让 Claude 给你修改代码。 • AI 写完代码之后，点击 Run 运行 • 点开 Preview 在新窗口打开 • 在 API 地址后面加 /docs，就能去查看对应的 API 调用方式，并点Try it out验证接口是不是符合自己的预期。 • 如果功能不太符合预期、碰到 bug，则回到上一步