【免费版】AI 编程实践：零基础上手AI编程

👍

完整 Vibe Coding 零基础 AI 编程课：https://vibecoding.hot

AI 编程能力越来越强，用来写插件易如反掌，推荐大家使用 AI 编程工具写插件实现个性化需求。本教程适用于有编程经验的工程师；没有编程经验的同学也可以上手尝试，门槛很低，有手就会。​

视频：

https://live.juejin.cn/5982/aiforcode2025vol10

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，编程能力更强

•

Cursor

•

windsurf

案例 1：多维表格插件

💡

思路

1.
确定要做的产品类型，找到示例代码，让 AI 参考已有的代码以及配置好相关依赖，从而避免 AI 自由发挥导致的问题。​

2.
将开发指南、API 文档发给 AI 做参考，这样写出来的代码会更准确。其中 Markdown 格式比较方便 AI 读取，因此将开发指南和 API 文档处理成 Markdown 格式，供大家下载，并在 Trae 中调用。​

3.
需求的颗粒度尽可能比较小，先写一个小功能，再不断添加和优化功能，不要一次性写一个完整的复杂功能。​

4.
碰到报错、需求实现不符合预期，不断和 AI 沟通修改。这是 AI 编程最消耗时间、最难的地方，请务必保持耐心，把它当做探索、解谜的过程。​

边栏插件

•

Demo 代码

◦

在线版：

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

•
开发指南​

边栏插件开发指南.md

32.54KB

Markdown 版本的开发指南，可以更好的让 AI 理解，因此推荐把这个版本保存到 trae 项目下。 在线版：​边栏插件开发指南​

•
API 文档 ​

Base-js-sdk-docs.md

159.89KB

在线版本：GitHub - Lark-Base-Team/js-sdk-docs: JS SDK Docs、https://lark-base-team.github.io/js-sdk-docs/zh/api/guide

•
设计规范​

【免费版】AI 编程实践：零基础上手AI编程​

【免费版】AI 编程实践：零基础上手AI编程