AIGC神助攻！Trae让代码小白也能使用DIY自己专属的浏览器插件，从想法到上线全攻略！

🚀 前言

作为完全不懂代码的新手，你是否曾在浏览器应用商店里因找不到心仪的插件而失落？💔想 DIY 一个专属插件实现小需求，却被技术门槛拦住脚步？👩💻❌现在，AIGC 时代来啦！✨ 无需写一行代码，AI 就能帮你生成完整 Chrome 插件，彻底打破技术壁垒！跟着这个保姆级教程，体验 AI 如何让开发门槛消失不见～这就是普通人也能享受的 AI 红利！🚀现在就出发，让想象力成为唯一限制！💡

🛠️ AIGC 开发流程

第一步：选择开发工具 🛠️

工欲善其事，必先利其器！ 想玩转 AIGC 开发，选对工具是关键～

• Cursor：编程能力超强，但需要付费（💰💔）

• Trae：免费白嫖党首选！🌟 虽然编程能力稍弱，但应对简单插件完全够用，还有充足试错机会～👉 推荐新手用 Trae 练手，随便改需求不心疼！

第二步：掌握 Prompt Engineering 魔法咒语 🧙♀️

想让 AI 乖乖听话，必须学会「提示工程」！简单说，就是用自然语言写指令，让 AI 生成你想要的代码～ 掌握这 5 个窍门，让 AI 更懂你：

1. 身份设定与角色定义 🎭

👉 明确告诉 AI：「你现在是资深 Chrome 插件开发者！」
优势：让 AI 用专业视角输出，减少无效内容～

2. 任务拆解与具象化 🧩

❌ 模糊指令：「做个背景色切换插件」✅ 清晰指令：「点击图标弹出窗口，包含蓝色默认的颜色选择器和切换按钮，点击按钮切换背景色并记忆原始颜色」
优势：减少返工，一次生成更精准！

3. 流程引导与分步提示 📝

把复杂任务拆成小步骤：「先写界面代码，再写逻辑代码，最后加注释」
优势：降低 AI 理解难度，输出更有条理～

4. 规则约束与输出控制 📌

👉 加上限制：「必须使用 Manifest V3 规范，代码带详细注释」
优势：确保生成代码符合技术标准，方便后续修改～

5. 验证与迭代优化 🔄

AI 输出后别急着用！先测试功能，发现问题就反馈：比如「按钮颜色不对，改成蓝色」
优势：通过「生成→验证→修正」闭环，让插件更完美～

第三步：着手开发「魔法变色插件」🎨

现在，我们来实战开发一个能切换网页背景色的插件「myplugin」～

1. 准备素材 📁

打开 Trae，准备好：

• 程序图标（非必须，这里用尤大的 Vue 图标代替～）
• ux 设计图（非必须，心中有界面就行！）
• 一段清晰的 Prompt 提示词

2. 唤醒 AI，输入指令👩💻

按下 CRTL + U 唤醒 Trae 聊天框，按步骤操作：➀ 选 AI 大模型，➁ @智能体 Builder，让它专注开发➂ #上传提示词文件，输入具体需求：「请你根据文件内容完成插件开发」

3. 加载插件，见证奇迹！🌐

➀ 浏览器输入 chrome://extensions/，开启「开发者模式」（右上角开关点亮～）➁ 点击「加载已解压的扩展程序」，选择 AI 生成的「myplugin」文件夹➂ 右上角出现插件图标，点击选颜色→点按钮，网页秒变你喜欢的颜色！🌈

选择打开掘金首页进行测试

写给完全不懂代码的你：这真的不是魔法 ✨

以前开发插件像建高楼，需要学遍所有技术；现在有了 AIGC，就像搭积木！🧩 你只需告诉 AI「我要这样的积木房子」，它会把所有零件摆好，连说明书都写好～

下一步挑战： ✅ 让 AI 做一个「网页字体变大插件」（再也不怕字太小！）✅ 开发「护眼模式插件」（自动调亮度和对比度，保护眼睛～）✅ 甚至「一键隐藏广告插件」（告别烦人的广告！🚫）

做一个「网页字体变大插件」（再也不怕字太小！）✅ 开发「护眼模式插件」（自动调亮度和对比度，保护眼睛～）✅ 甚至「一键隐藏广告插件」（告别烦人的广告！🚫）

不需要懂代码！ 只用日常语言描述需求，AI 就能帮你实现～现在就打开 AI 工具，开始创造你的第一个浏览器魔法吧！🚀记住：唯一限制你的，是还没行动的双手！💪

零基础入门AI大模型

今天贴心为大家准备好了一系列AI大模型资源，包括AI大模型入门学习思维导图、精品AI大模型学习书籍手册、视频教程、实战学习等录播视频免费分享出来。

有需要的小伙伴，可以点击下方链接免费领取【保证100%免费】

点击领取 《AI大模型&人工智能&入门进阶学习资源包》

1.学习路线图

第一阶段： 从大模型系统设计入手，讲解大模型的主要方法；

第二阶段： 在通过大模型提示词工程从Prompts角度入手更好发挥模型的作用；

第三阶段： 大模型平台应用开发借助阿里云PAI平台构建电商领域虚拟试衣系统；

第四阶段： 大模型知识库应用开发以LangChain框架为例，构建物流行业咨询智能问答系统；

第五阶段： 大模型微调开发借助以大健康、新零售、新媒体领域构建适合当前领域大模型；

第六阶段： 以SD多模态大模型为主，搭建了文生图小程序案例；

第七阶段： 以大模型平台应用与开发为主，通过星火大模型，文心大模型等成熟大模型构建大模型行业应用。

2.视频教程

网上虽然也有很多的学习资源，但基本上都残缺不全的，这是我自己整理的大模型视频教程，上面路线图的每一个知识点，我都有配套的视频讲解。

（都打包成一块的了，不能一一展开，总共300多集）

3.技术文档和电子书

这里主要整理了大模型相关PDF书籍、行业报告、文档，有几百本，都是目前行业最新的。

4.LLM面试题和面经合集

这里主要整理了行业目前最新的大模型面试题和各种大厂offer面经合集。

??学会后的收获：??

? 基于大模型全栈工程实现（前端、后端、产品经理、设计、数据分析等），通过这门课可获得不同能力；

? 能够利用大模型解决相关实际项目需求： 大数据时代，越来越多的企业和机构需要处理海量数据，利用大模型技术可以更好地处理这些数据，提高数据分析和决策的准确性。因此，掌握大模型应用开发技能，可以让程序员更好地应对实际项目需求；

? 基于大模型和企业数据AI应用开发，实现大模型理论、掌握GPU算力、硬件、LangChain开发框架和项目实战技能， 学会Fine-tuning垂直训练大模型（数据准备、数据蒸馏、大模型部署）一站式掌握；

? 能够完成时下热门大模型垂直领域模型训练能力，提高程序员的编码能力： 大模型应用开发需要掌握机器学习算法、深度学习框架等技术，这些技术的掌握可以提高程序员的编码能力和分析能力，让程序员更加熟练地编写高质量的代码。

1.AI大模型学习路线图
2.100套AI大模型商业化落地方案
3.100集大模型视频教程
4.200本大模型PDF书籍
5.LLM面试题合集
6.AI产品经理资源合集

5.免费获取

这份完整版的大模型 AI 学习资料已经上传CSDN，朋友们如果需要可以微信扫描下方CSDN官方认证二维码或者点击以下链接都可以免费领取【保证100%免费】

点击领取 《AI大模型&人工智能&入门进阶学习资源包》