.png)
AI零代码编程体验-我的专属助理-20260123.docx
目录
一、介绍
这是一个面向所有人（包括非程序员的）AI趣味编程体验，手把手教你做一个AI私人工作助理（或者叫“我的上班搭子”）。
整个过程，不用编写任何一行传统意义上的“代码”，而是用现在最流行的“编程语言”——中文自然语言（提示词）——来完成。
通过这个体验，你可以：
1.学会跟AI沟通——掌握基本的AI提示词技巧。
2.了解AI应用软件的开发过程——基本的步骤。
二、环境准备
步骤0 准备一台电脑（日常办公笔记本电脑就行）
0.1 电脑：Windows10或11，至少1GB剩余磁盘空间，能访问互联网。
0.2 浏览器：Google Chrome（Microsoft Edge也行，仅步骤5.2不同）。
0.3 办公软件：金山WPS或Microsoft Office都可以。
步骤1 安装开发环境（正常网速估计需要10分钟）
1.1 安装开发工具（Node.js）
1.1.1在浏览器地址栏输入https://nodejs.org/zh-cn/download
1.1.2点击"Windows安装程序"按钮下载安装包**（详见下图）**
1.1.3下载后，双击安装包node-v24.13.0-x64.msi，用默认选项进行安装。
1.2 安装编程环境：TRAE
1.2.1在浏览器地址栏输入https://www.trae.cn/ide/download
1.2.2点击"下载Windows版本"按钮下载安装包**（详见下图）。**
1.2.3下载后，双击安装包Trae CN-Setup-x64.exe，用默认选项进行安装。
1.2.4安装后，从Windows桌面双击Trae CN图标（
），进入编程环境。
1.2.5如果第一次进入，输入手机号，获取验证码，快速完成登录。
步骤2 获得一个DeepSeek开发秘钥（可跳过）
2.1 如果你有兴趣持续学习AI，请申请一个自己的开发秘钥
2.1.1在浏览器地址栏输入https://platform.deepseek.com
2.1.2如果第一次访问，输入手机号，获取验证码，快速完成登录。
2.1.3 点击右侧菜单"充值"，用微信或支付宝充值10元。
2.1.4 点击右侧菜单"API Keys"，点击"创建API Key"按钮**（详见下图）**
2.1.5 重要提示：把创建好的Key，复制粘贴到本地文件中，保存备用
------如果没有及时保存，以后就看不到了。
三、第一轮迭代：做个最小可用原型
步骤3 需求、设计和开发一气呵成
3.1 创建项目
3.1.1登录Trae后，点击左上角
切换到IDE模式**（详见下图）。**
3.1.2首页上点击"新建项目"**，**选本地目录（如D:\），录入项目名称（如myApp），点击确认就会创建【项目目录】（如D:\myApp）。
3.1.3点"是，我信任此作者"，授权Trae读写【项目目录】下的文件。
3.2 生成代码
3.2.1把下面这段提示词复制粘贴到Trae右下角聊天框中，再点击聊天框右下角的发送按钮**（详见下图）。**
3.2.2观察Trae编写代码的过程，完成时大概是下面这样子**（详见下图），**如果Trae生成的项目文件跟下图不同，也不用感到意外：
------下图的效果，算是Trae表现比较一般的，导致在后续操作步骤中，我们还要手工修改配置文件。
------有同事试过，当Trae表现得更好时，还能自动生成【配置界面】；后续操作要求一样，只是操作过程稍作调整，且更加便捷（详见附录A）。
3.3 修改秘钥
3.3.1 点击Trae左上角"资源管理器"中config.js，打开配置文件。
3.3.2 中间编辑区提示是否接受或采纳（AI自动生成的代码），点击采纳**。**
3.3.3 将步骤2你获得的开发秘钥，修改到Key的值中**（详见下图）**
------如果你跳过了步骤2，也可先使用下面的临时秘钥：
复制粘贴下面这行，替换掉原配置文件中Key这行。
key: 'sk-ccddcab9286a4306a8e938ddac0800d2',
步骤4 单元测试、BUG修改和验证
4.1 单元测试
4.1.1 从Windows文件资源管理器进入【项目目录】（如D:\myApp）。
4.1.2 双击（即用浏览器打开）popup.html聊天界面**（详见下图）。**
4.1.3 在下方输入框录入下面提示词，点击发送，观察AI回复**。**
红烧肉怎么做？
4.1.4 看到AI回复排版混乱，且有#、*等乱码，影响阅读**。**
4.2 BUG修改
4.2.1 回到Trae开发环境，资源管理器"中的popup.js，打开代码文件。
4.2.2 在右下角聊天框输入"#"字符，弹出菜单中选popup.js**（详见下图）。**
4.2.3 继续在聊天框输入下面提示词，再点击右下角的发送按钮**。**
调用DeepSeekAPI返回的结果默认为markdown格式，不美观，请转换为HTML后，再更新到用户界面。
4.2.4 观察Trae修改BUG的过程，大概是下面这样子**（详见下图）。**
------聊天框可能会提示是否运行命令，进行代码检查，点击确认运行。
4.2.5 完成后，中间编辑区提示是否接受或采纳代码，点击采纳**。**
4.3 BUG验证
4.3.1 重新按照步骤4.1进行验证，观察AI回复，看到排版格式已正常**。**
步骤5 部署上线
5.1 图标制作
5.1.1 在浏览器地址栏输入https://iconmaker.cn
5.1.2 在文本框输入"马"，背景颜色选择红色（马年新春快乐）
5.1.3 点击"生成并下载"按钮，分别把16像素、32像素、48像素三个图标文件下载到【项目目录】下图标文件夹中（如D:\myApp\images）
------Trae生成的图标文件夹也可能是icons（目录则是D:\myApp\icons）
5.1.4 用Windows文件资源管理器进入图标文件夹，修改这三个图标文件名（比如icon16.png，icon32.png，icon48.png）。注意文件名要跟【项目目录】下的manifest.json文件中设定的图标文件名保持一致**（详见下图）。**
5.2 部署上线
5.1.1 在Chrome浏览器地址栏输入chrome://extensions
或在Edge浏览器地址栏输入edge://extensions
5.1.2 打开"开发者模式"，点击"加载未打包（解压缩）扩展程序"，选择【项目目录】（如D:\myApp），Chrome和Edge操作方式分别见下图。
5.1.3 在浏览器地址栏右侧点击"扩展程序"按钮，在下拉菜单中选择将AI聊天助手固定到地址栏，
按钮就会出现在地址栏右侧。
四、第二轮迭代：完成个性化变身
步骤6 测试驱动开发：用测试用例细化需求
6.1 需求分析与系统设计
6.1.1 以下为思考过程，阅读即可，不需要操作
- 用户：我，一位医疗信息系统软件开发工程师。
- 业务分析：我负责根据客户现场提出的工单，进行需求开发和故障处理。
- 业务痛点：有些医学术语听不懂，需求难理解；工作压力大，经常心情不好。
- 需求分析：有个助手帮我解疑释惑，快速完成工作；最好能提供些情绪价值。
- 设计约束：这个助手的思维方式，要符合我们公司的企业文化和价值观。
- 技术路径：用系统提示词（岗位指导书）规定我想要的人设，再不断测试调优。
- 技术风险：不知基础模型能力如何，先用一个成熟人设，验证一下技术可行性。
- 未来展望：增强上下文及能力，如调用本地数据和工具，自动帮我完成些工作。
6.2 测试计划
6.2.1 在【项目目录】中，创建一个"测试记录.docx"文档。
6.2.2 将下面内容复制粘贴到这个word或wps文档中，保存备用。
步骤7 修改和测试系统提示词：成熟人设扮演
7.1 修改系统提示词
7.1.1 点击Trae左上角"资源管理器"中的config.js，打开配置文件。
7.1.2 把下面提示词复制粘贴到编辑区中，覆盖原有系统提示词**。**
------由于该项目技术限制，提示词换行需在右侧增加半角"\"字符，
并注意维持好提示词前后半角单引号的前后呼应**（详见下图）。**
7.2 测试用例1：打招呼
7.2.1 点击浏览器右上角按钮，调出AI助手窗口。
7.2.2 发送下面用户提示词，把AI回复截图保存到【测试记录】文档中**。**
你好
步骤8 修改和测试系统提示词：专业人设打造
8.1 修改系统提示词
8.1.1 点击Trae左上角"资源管理器"中的config.js，打开配置文件。
8.1.2 把下面提示词复制粘贴到编辑区中，覆盖原有系统提示词**。**
8.2 测试用例2：无关话题
8.2.1 点击浏览器右上角按钮，调出AI助手窗口。
8.2.2 发送下面用户提示词，把AI回复截图保存到【测试记录】文档中**。**
今天中午吃什么好呢？
8.3 测试用例3：业务咨询
8.3.1 点击浏览器右上角按钮，调出AI助手窗口。
8.3.2 发送下面用户提示词，把AI回复截图保存到【测试记录】文档中**。**
医嘱频次BID是什么意思？
8.4 测试用例4：工单查询
8.4.1 点击浏览器右上角按钮，调出AI助手窗口。
8.4.2 发送下面用户提示词，把AI回复截图保存到【测试记录】文档中**。**
我还有几条急诊工单未处理？
8.5 测试用例5：负面情绪纾解
8.5.1 点击浏览器右上角按钮，调出AI助手窗口。
8.5.2 发送下面用户提示词，把AI回复截图保存到【测试记录】文档中**。**
这事我干不了，别找我。
8.6 测试用例6：情绪价值分享
8.6.1 点击浏览器右上角按钮，调出AI助手窗口。
8.6.2 发送下面用户提示词，把AI回复截图保存到【测试记录】文档中**。**
终于下班了，又是充实满满的一天。
8.7 测试用例7：泛化和记忆能力
8.7.1 点击浏览器右上角按钮，调出AI助手窗口。
8.7.2 单独先后发送下面两句提示词，把截图保存到【测试记录】文档中**。**
步骤9 产品发布
9.1 发布与验收
9.1.1 把你的【测试记录】文档"测试记录.docx"发到企业微信【米健26年动员会郑州分会场沟通群】中。
9.1.2 前三个发布的同事（以【测试记录】发到群里时间为准），经培训老师现场查验合格后，可获得小红包。
附录A、感受AI的"想象力"
A.1 概述
跟人一样，AI也有想象力（也叫创造力或幻觉）：相同的提示词，AI可能有不同的生成结果。也跟人一样，提示词（任务要求）越明确，结果确定性越高。所以真实的AI4SE（软工3.0），还需要更多的方法和工具，才能真正达到软件研发效能成倍提升的效果。
下面通过实际案例和扩展实验，让大家直观感受。
A.2 使用配置界面
A.2.1使用跟步骤3.2中完全一样的提示词，Trae不仅会按照要求，将"DeepSeek调用参数和系统提示词在单独配置文件中维护"，还可能会开发个【配置界面】，让用户能够可视化地修改这些参数配置**（详见下图）。**
------这个【配置界面】，通常是调用浏览器（Chrome或Edge）插件本地存储功能来实现，所以对后续操作步骤的顺序稍微有些影响。
A.2.2原步骤3.3修改秘钥，可直接在【配置界面】DeepSeek API Key输入框中修改，不必手工修改config.js配置文件。
A.2.3原步骤4测试和5部署，顺序要颠倒一下，因为【配置界面】不能脱离浏览器（Chrome或Edge）插件的运行环境单独运行。
------步骤4.1和4.3的测试验证工作，需要在部署环境中进行。
A.2.4原步骤7和8系统提示词，可直接在【配置界面】系统提示词输入框中修改，不必手工修改config.js配置文件。
------下面是这两个提示词，可直接复制粘贴到【配置界面】的版本。
A.2.5调整【配置界面】的温度参数，可调控AI的想象力**（详见下图）**
------在这个场景中，比温度更重要的，其实还是提示词的语义精准度。
评论