第一场：零基础AI Coding入门

本场Workshop目标

从零开始使用本地AI IDE（集成开发环境，如Trae、Cursor等）开发一个大家都能访问的网页！
理解AI Coding Agent是如何运行的

一个简单的基础概念～

IDE \& AI IDE

IDE（Integrated Development Environment，集成开发环境），相当于程序员的智能工作台。它把写代码、查错、运行程序的工具都整合在一个窗口里，不用来回切换软件。就像Word帮你写文章一样，IDE帮你写程序，还能自动提示、一键运行，让编程更简单。

AI IDE 是在传统 IDE 的基础上装了一个\"AI 编程助手\"的开发工具。它直接听懂你的自然语言描述——你说\"帮我做一个登录页面\"，它就能自动生成代码（不再需要从网页端复制粘贴！）；遇到报错，你可以把错误信息丢给它，它会告诉你哪里错了并帮你修好；需要进行本地配置，把任务丢给它，它可以操纵电脑帮你配置好。

开始动手！

真正的保姆级教程！

安装一个AI IDE（以TRAE为例）

在官网下载安装包（强烈建议提前下载）

https://www.trae.cn/ide/downloadwww.trae.cn

选择左侧的TRAE IDE，下载对应系统的安装包。

（注意：苹果macbook需要选择是否为Apple Silicon芯片，点击屏幕左上角  → 关于本机，查看芯片信息，如果是 Apple M1/M2/M3/M4/M5 则选 Apple Silicon 版本）

安装软件
点击开始
导入偏好设置。如果原本安装并使用过VS Code（图标见下图），可以选择导入配置。没有的话直接选择跳过。
选择自己喜欢的主题配色
添加命令行（这里推荐安装，点击安装即可）
登录账号（选择个人用户）
安装完成！已经进入trae的软件啦！点击右上方叉叉即可。过程中可能会跳转注册登录，正常注册即可。
选择一个文件夹进行接下来的开发（建议新建一个文件夹）

到这里，你已经可以正常使用TRAE CN了！TRAE CN是完全免费的，不需要任何付费。

如果你有自己的模型API，如何接入TRAE CN？（点击左侧展开教程）

在TRAE CN中，点击界面右上角齿轮状图标“设置”，进入设置页面。

选择“模型”——“添加模型”

在弹出的对话框中选择你自己的模型API提供商，选择模型，并填入自己的API KEY。

因此这种自己带API KEY的使用方式也被叫做BYOK模式（Bring Your Own Key）。

（⚠️注意区分模型服务商是否为CN节点。如Kimi有Kimi Global和Kimi CN，一般在国内开通的都是CN节点的api）

点击“添加模型”即可。然后就可以在对话时的模型列表中选择自定义的模型。

让AI帮你配置代码环境！

在开发代码的过程中，通常会遇到环境配置问题（比如Python环境，C++环境，node.js环境等等），配置起来十分复杂，而且经常会有一些意想不到的问题，但是在我们安装了AI IDE之后，我们就可以直接让AI来操作我们的电脑，帮我们安装好需要的环境。

什么是代码环境？

想象你买了一台全新的电脑，它就像一间刚交付的毛坯房——有墙有地，但没有家具、没有厨具、没有水电煤气。\"环境\"就是你在这间毛坯房里，为做某一道菜而搭建的一整套厨房设施。

现实厨房	电脑里的\"环境\"
煤气管道、电路	Node.js / Python / Java —— 基础设施，让电脑能\"听懂\"某种编程语言
冰箱、储物柜	硬盘上的文件夹 —— 食材（代码库）存在哪里
采购员（去超市买菜）	npm / pip —— 自动去网上下载别人写好的工具包
菜谱上的\"需要烤箱 200 度\"	环境变量（PATH） —— 告诉电脑各种工具放在哪个抽屉里
不同菜系需要不同厨具	不同项目需要不同环境 —— 做网页要 Node.js，做 AI 要 Python，做嵌入式要 C++

而AI IDE相当于你请了一个全能装修队长住在你家。

你只需要对他说：

\"我要做网页，帮我装好厨房。\"

配置网页开发环境（Node.js+Vite+React+TS）

在TRAE中，AI默认不能操作你打开的文件夹外的文件，像是一个“沙箱”保护你的电脑不被AI轻易破坏。

但是这会导致我们开发环境配置失败，因为我们需要把环境安装到系统路径中。因此如果我们需要AI帮我们安装环境，需要打开“在沙箱外运行命令”。

在TRAE CN中，点击界面右上角齿轮状图标“设置”，进入设置页面，选择“对话流”选项卡，按下图指引选择命令“自动运行”。（免责声明：现在的AI模型已经非常强大安全，几乎不会对你的电脑造成破坏性的损坏，但仍不排除极小的风险。请自行选择是否“自动运行”，如介意自动运行，下方有手动安装教程）

接下来，回到对话框，复制以下提示词执行：

Markdown


## Step 1: 系统检测与现有环境排查
请依次执行以下检测命令，根据输出结果严格分流：

### macOS 检测命令：
```bash
echo "OS: $(uname -s)" && echo "ARCH: $(uname -m)" && echo "SHELL: $SHELL" && node -v 2>/dev/null || echo "Node: NOT_FOUND" && npm -v 2>/dev/null || echo "NPM: NOT_FOUND" && (command -v nvm >/dev/null 2>&1 && echo "NVM: FOUND") || echo "NVM: NOT_FOUND" && (command -v fnm >/dev/null 2>&1 && echo "FNM: FOUND") || echo "FNM: NOT_FOUND"

Windows 检测命令（PowerShell）：

对于windows，请先执行Set-ExecutionPolicy RemoteSigned -Scope CurrentUser，否则后续的脚本都无法成功执行。

powershell

Write-Host "OS: Windows"; Write-Host "ARCH: $env:PROCESSOR_ARCHITECTURE"; try { $v = node -v; Write-Host "Node: $v" } catch { Write-Host "Node: NOT_FOUND" }; try { $n = npm -v; Write-Host "NPM: $n" } catch { Write-Host "NPM: NOT_FOUND" }; try { Get-Command nvm -ErrorAction Stop | Out-Null; Write-Host "NVM: FOUND" } catch { Write-Host "NVM: NOT_FOUND" }

分流逻辑（请严格遵守）：

如果 Node >= 22：立即输出"检测到 Node.js >= 22，跳过环境安装，直接创建项目"，并跳到 Step 4。
如果 Node < 22 或不存在：继续执行 Step 2。
如果检测到 nvm / fnm：在 Step 2 安装前输出警告："检测到系统已安装 Node 版本管理器（nvm/fnm），本次安装将额外写入用户级 PATH，可能与现有版本管理器冲突。如需避免，请手动使用 nvm/fnm 切换到 Node 22 后跳过本脚本。"

Step 2: 永久安装 Node.js（国内镜像，前置优先）

根据 Step 1 结果，选择对应平台执行。不要询问我，直接执行。

macOS 永久安装方案（写入 ~/.zshrc，无需 sudo，前置优先）

bash

# 1. 确定架构
ARCH=$(uname -m)
if [ "$ARCH" = "x86_64" ]; then NODE_ARCH="x64"; else NODE_ARCH="arm64"; fi

# 2. 创建安装目录
mkdir -p ~/.local/lib/nodejs

# 3. 从国内镜像下载 Node.js 22 LTS
curl -L "https://cdn.npmmirror.com/binaries/node/v22.14.0/node-v22.14.0-darwin-${NODE_ARCH}.tar.gz" -o /tmp/node.tar.gz

# 4. 解压
tar -xzf /tmp/node.tar.gz -C ~/.local/lib/nodejs --strip-components=1

# 5. 永久写入 PATH（前置优先 + 重复检查）
if echo "$SHELL" | grep -q "zsh"; then
  CONFIG_FILE="$HOME/.zshrc"
else
  CONFIG_FILE="$HOME/.bash_profile"
fi

# 先检查是否已存在该路径，避免重复追加
if ! grep -q "$HOME/.local/lib/nodejs/bin" "$CONFIG_FILE" 2>/dev/null; then
  # 前置追加：新路径放在 PATH 最前面，确保 Workshop 调用 Node 22
  echo 'export PATH="$HOME/.local/lib/nodejs/bin:$PATH"' >> "$CONFIG_FILE"
fi

source "$CONFIG_FILE"

# 6. 验证（此时 node -v 应显示 v22.x.x）
node -v && npm -v

Windows 永久安装方案（写入用户级 PATH，无需管理员，前置优先）

powershell

# 1. 定义安装目录（用户目录下，无需管理员）
$installDir = Join-Path $env:LOCALAPPDATA "Programs\nodejs"
New-Item -ItemType Directory -Force -Path $installDir

# 2. 从国内镜像下载
$nodeUrl = "https://cdn.npmmirror.com/binaries/node/v22.14.0/node-v22.14.0-win-x64.zip"
$zipPath = "$env:TEMP\node.zip"
Invoke-WebRequest -Uri $nodeUrl -OutFile $zipPath -UseBasicParsing

# 3. 解压
Expand-Archive -Path $zipPath -DestinationPath $installDir -Force

# 4. 处理嵌套目录（zip 解压后可能多一层）
$subDir = Get-ChildItem -Path $installDir -Directory | Select-Object -First 1
if ($subDir) {
    Get-ChildItem -Path $subDir.FullName | Move-Item -Destination $installDir -Force
    Remove-Item $subDir.FullName -Force
}

# 5. 永久写入用户级 PATH（前置优先 + 去重）
$userPath = [Environment]::GetEnvironmentVariable("Path", "User")
if ($userPath -notlike "*$installDir*") {
    # 前置追加：新路径放在 Path 最前面，确保 Workshop 调用 Node 22
    [Environment]::SetEnvironmentVariable("Path", "$installDir;$userPath", "User")
}

# 6. 刷新当前 Session 的 PATH
$env:Path = [Environment]::GetEnvironmentVariable("Path", "User") + ";" + [Environment]::GetEnvironmentVariable("Path", "Machine") + ";" + $env:Path

# 7. 验证（此时 node -v 应显示 v22.x.x）
node -v
npm -v

如果上述命令执行后 node -v 仍失败或版本不是 22.x，请输出："自动安装失败，请手动下载 Node.js 22 LTS（https://nodejs.org/zh-cn/）安装后重试。"

## Step 3: 配置 npm 国内镜像（永久）
执行以下命令，确保后续依赖安装速度：
```bash
npm config set registry https://registry.npmmirror.com
npm config set disturl https://cdn.npmmirror.com/dist
npm config get registry

Step 4: 创建完整的 React + TypeScript 项目

使用官方 Vite 模板创建完整项目（保留所有标准文件，不做删减）：

bash

npm create vite@latest my-react-app -- --template react-ts

进入项目目录并安装全部依赖：

bash

cd my-react-app && npm install

Step 5: 确认完整项目结构

请列出 my-react-app 目录下的文件树（至少 2 层深度），确认包含以下标准文件：

index.html
vite.config.ts
tsconfig.json / tsconfig.app.json / tsconfig.node.json
package.json
src/main.tsx
src/App.tsx
src/App.css
src/index.css
src/vite-env.d.ts
public/ 目录

Step 6: 启动开发服务器

执行：

bash

npm run dev

告诉我本地预览地址（通常是 http://localhost:5173/）。启动成功后，总结汇报："Node.js 已永久安装，React + TypeScript 完整项目已就绪，开发服务器运行中。"

执行约束

全程使用国内镜像，禁止访问官方 npm registry。
macOS 优先写入 ~/.zshrc；Windows 必须写入用户级 Path 环境变量。
所有命令执行后汇报结果，不要跳过验证步骤。
如果创建项目时询问"Install dependencies?"，选择"Yes"或自动回车确认。


大家看到下面这个提示不要慌张，点击“仍要运行”即可。这个命令是删除临时下载的安装包。



#### 手动安装方法

安装node\.js

[https://blog.csdn.net/Natsuago/article/details/145567734]()

构建Vite\+React\+TS项目

[https://www.cnblogs.com/doseoer/p/19947351]()





### 构思自己的第一个网站！

安装好环境，接下来，我们可以开始构思和开发我们的第一个网站啦！



利用网页端的deepseek或者GPT等，先和AI一起头脑风暴idea。

请复制下面的提示词到网页端聊天框：

```Markdown
我正在参与一场零基础上手AI Coding的Workshop，希望借助TRAE（一款AI IDE）来完成一个网页或web app的开发。
请你和我一起头脑风暴。思考包括：
1. 一句话定位
2. 网站详细介绍
3. 给谁看
4. 页面地图
5. 放什么内容
6. 视觉氛围
7. 用户能做什么
8. 有没有对标网站

同时，请遵循一下注意事项：
1. 因为是一次短时的workshop，请把网页设计限制在一到两个主要页面。当然在前期头脑风暴时可以想的全面一些，但是最后请收敛到最值得实现的主要页面。避免项目过于复杂。
2. 技术栈请使用React+vite+TS
3. 数据存储请优先使用浏览器本地方案（如 localStorage 或 IndexedDB），本场 Workshop 暂不涉及后端服务器与远程数据库。

下面是我的想法：

当你和AI讨论觉得想法差不多了之后，可以让AI写一段结构化的提示词，引导本地的AI IDE（TRAE）来完成代码构建。

一些创意参考～

打开思路！我们希望看到你的创意！

西浦wokshop验收问卷

workshop#1验收问卷

AI 开始写代码！

把提示词拷贝进trae，ai就开始写代码啦！

以下是一个示例：音效刮刮乐，随着刮开的涂层越多，谜底的音效慢慢从白噪音中显露出来，音效有不同的稀有程度。

AI生成完成之后，一般会启动一个本地服务器给到你一个http://localhost:8000/ 这样的链接供你查看。你在查看之后可以继续给ai反馈，让他继续修改。

小知识点

本地服务器就像在你自己电脑上临时搭了一个展台，localhost:8000 是这个展台的内部门牌号——只有你自己的电脑能找到它。它并没有真正连接到互联网的大街上，所以你把链接发给朋友，他们的电脑根本找不到你的展台。想让全世界看到，需要把网页\"搬\"到公网服务器上，就像从自家客厅搬到真正的展览馆。

让大家能访问你的作品！

正如上面所说，让大家能访问到你的作品，需要把网页搬到公网服务器上，这个过程叫“网站部署”。传统的网站部署比较繁琐，但是我们今天使用的字节火山引擎IGA Pages服务，可以让你的网站三分钟得到一个所有人可以访问的网站链接。

安装IGA Pages Skill

小知识点

Skills 就像是给 AI 准备的「岗位操作手册SOP」。以前每次都要重新教 AI 怎么做一件事，现在把\"怎么部署网站\"这类经验写成一本固定手册，AI 需要的时候自己翻阅，一次写好到处复用。火山云的 IGA Pages Skill 就是这样一本「自动部署网站」的手册，AI 一看就知道怎么把你的网页搬到公网，不用你自己翻文档一步一步教他做。

在trae里面新建一个会话，复制以下这一段提示词。

复制以下提示词，让AI IDE帮你安装这个skill。

Markdown

请你帮我安装火山引擎IGA Pages Skill。
**## 1. IGA Pages Skill 简介**
用于将前端和全栈项目部署到 IGA Pages（字节跳动火山引擎边缘函数平台）。支持 Next.js、Vite、Vue CLI、React 等框架。
**功能：**
一键部署前端项目
支持 API 服务端函数
自动生成预览链接
**## 2. npx skills 安装方式**
npm i -g skills
skills add volc-iga-pages/iga-pages-skills -g -y
**## 3. 国内 GitHub 镜像源方式（备用）**
如果 skills add 因 GitHub 访问问题失败，使用镜像源：
git clone https://kkgithub.com/volc-iga-pages/iga-pages-skills.git /tmp/iga-pages-skills
cp -r /tmp/iga-pages-skills/skills/* ~/.agents/skills/
ls ~/.agents/skills/iga-pages
**## 4. IGA CLI 安装方式**
npm i -g @iga-pages/cli@latest
iga --version
确保版本 >= 1.0.5
**使用方式**
安装完成后，用户可直接用自然语言触发：
部署："帮我把这个项目部署到 IGA Pages"

Trae开始帮你安装这个技能。

安装IGA CLI（命令行界面）时，会打开一个浏览器界面，需要你登录字节跳动火山引擎，正常输入手机号登录即可。

小知识点

命令行/终端是电脑的\"对讲机\"——一个黑色窗口，你打字，电脑立刻照做，没有图形按钮。命令就是你输入的\"暗号\"，比如\"登录\"或\"上传\"，电脑听懂直接执行。

登录完成后，返回TRAE页面。

告诉AI：“已经登录完成，帮我继续完成网站的线上IGA Pages部署。”

部署完成！

可以分享给你的朋友和同学查看啦！

（注意⚠️：查看/分享网址时，请记得复制完整的网址，包括后面的“iga_token= ”的部分！！！否则会返回410错误）

Workshop总结

本地 AI IDE 让编程变成对话。Trae 能直接听懂自然语言描述，自动生成代码、修 bug、配环境，不需要再从网页端复制粘贴。
本地AI IDE 可以操作你的电脑，帮你配置环境，也可以配置和操作更多的东西。
结构化提示词是可以精准控制 AI 。先用\"网站创意描述卡\"填空想清楚需求，再丢给 AI，生成结果比零散聊天慢慢修改靠谱。
localhost 并不能让大家访问，需要在公网部署。理解了本地服务器只在当前电脑生效，必须通过部署才能让全世界访问你的作品。
Skill 是给 AI 的\"操作手册\"。装上 EdgeOne Pages Skill 后，AI 就拥有了自动部署网站的标准化能力，这是未来 AI Agent 协作的基础概念。
终端是电脑的\"对讲机\"。不再害怕黑窗口，知道输入命令就能直接操控电脑，EdgeOne CLI 在终端里一步步交互完成登录和部署。

这场workshop的设计思路

为什么用本地的ide，而非线上网页开发web应用？

在网页demo开发这个场景下，线上的网页开发web应用（如V0、ai studio、扣子等）确实会更好上手，而且更快捷好用。

但是，从长远的使用来看，本地ide（集成开发环境）有以下几个优势：

可以直接利用本地ide完成后续SRTP和科研项目代码等项目级生产级开发工作。
可以直接利用本地ide解决如配置python 环境等非常复杂且个性化的问题。
可以逐步本地沉淀自己的私有工作流、技能等，避免web端新开一个会话就忘记你是谁的尴尬处境。
为什么希望让大家学会部署一个大家都能访问的网页？
方便大家分享和展示自己的创意作品。
帮助大家理解本地和云端的概念，理解什么是部署。
通过安装和使用字节跳动IGA Skill技能，带领大家理解最近很火的技能包Skill的概念和使用。

拓展部分：AI Agent是如何运行的？

在今天的workshop中，我们使用了AI IDE TRAE来帮助我们完成环境配置，代码编写和网页部署。

那AI IDE究竟是怎么完成这些任务的呢？为什么平时只会在网页上吐文字的大模型，突然就能干活了呢？

Agent能力 = 模型 × Harness（马具）

模型
环境
Tools 工具 —— 读写搜、Bash工具（执行）、浏览器、mcp
Feedback 反馈 —— 工具反馈定义的好坏（是否提供了足够的信息，是否提供了高质量信息）
Sandbox 范围 —— Agent的权限、安全策略

Agent的上下文

大模型其实没有记忆，每一次请求，都是一次全新的开始。

那agent是如何做到让大模型多步骤地完成一个任务的呢？其实关键在于构建每次发给大模型的上下文，让大模型能接着知道目标、工具和之前的状态，接着干活。

拓展问题：如果每一次请求大模型，都会把这么多内容重新发一遍，岂不是资费爆炸？可以自行问问AI 提示：缓存

国内国外主要的大模型

国内：

Deepseek系列——幻方量化
GLM系列（目前国内最强）——智谱
Kimi系列——月之暗面
MiniMax系列——稀宇科技
Qwen系列——阿里巴巴
Doubao系列——字节跳动
Hunyuan系列——腾讯
StepFun系列——阶跃星辰

国外：

GPT系列——OpenAI
Claude系列——Anthropic
Gemini系列——谷歌
Grok系列——XAI（马斯克）

IF.Learn Workshop第一场

第一场：零基础AI Coding入门

本场Workshop目标

一个简单的基础概念～

开始动手！

安装一个AI IDE（以TRAE为例）

如果你有自己的模型API，如何接入TRAE CN？（点击左侧展开教程）

让AI帮你配置代码环境！

什么是代码环境？

配置网页开发环境（Node.js+Vite+React+TS）

Windows 检测命令（PowerShell）：

Step 2: 永久安装 Node.js（国内镜像，前置优先）

macOS 永久安装方案（写入 ~/.zshrc，无需 sudo，前置优先）

Windows 永久安装方案（写入用户级 PATH，无需管理员，前置优先）

Step 4: 创建完整的 React + TypeScript 项目

Step 5: 确认完整项目结构

Step 6: 启动开发服务器

执行约束

AI 开始写代码！

让大家能访问你的作品！

Workshop总结

这场workshop的设计思路

拓展部分：AI Agent是如何运行的？

Agent的上下文

国内国外主要的大模型