[Trea]-AI编程实战案例
数据可视化
准备基础环境
mcp-server-chart介绍
一个用于通过AntV生成图表的模型上下文协议(ModelContextProtocol)服务器。我们可以使用这个MCP服务器来进行图表生成和数据分析
- MCP (Model Context Protocol)是让AI助手能调用外部工具和数据的协议，Trae能做更多事情，编程效率直接起飞
- 安装Node.js和npm
- 在Trae 配置 MCP Server
- 添加完成, MCP会自动配置到智能体
输入提示词让ai干活
文档可视化
把用到的文件放到文件夹中
使用提示词调用 builder智能体 帮我们完成任务
运行结果
图1是国内版的Trea生成的效果
图2是国外版的Trea生成的效果
坦克大战小游戏
输入提示词让ai干活
你现在是一名资深的网页游戏开发工程师，请帮我用原生 HTML + CSS + JavaScript 编写一个可以直接在浏览器中运行的网页版《坦克大战》小游戏，要求如下： 🎮 游戏功能要求： 1. 玩家控制一辆坦克（用矩形或简易图形表示）。 - 键盘方向键 ↑ ↓ ← → 控制移动； - 空格键发射子弹； 2. 敌方坦克会自动移动并随机发射子弹； 3. 当玩家子弹击中敌方坦克时，敌方坦克消失并在几秒后重新生成； 4. 当玩家被敌方子弹击中时，游戏结束，屏幕中央显示 “Game Over”； 5. 在画面上方显示当前得分（击中敌人数量）； 6. 游戏区域固定为 800x600 像素； 7. 坦克、子弹、障碍物都用简单几何图形绘制，不用图片； 8. 添加几个障碍物，子弹不能穿透障碍物； 9. 添加一个“重新开始”按钮，在 Game Over 时出现。 🧩 技术要求： - 只使用原生 HTML、CSS、JavaScript； - 所有代码写在一个 HTML 文件里； - 使用 Canvas 绘图； - 使用 requestAnimationFrame 实现动画循环； - 保持结构清晰、有详细注释。 🖼️ 界面要求： - 游戏区域居中； - 有一个标题“坦克大战小游戏”； - 有简单的背景颜色（例如浅灰）； - 游戏结束时弹出提示并允许重新开始。 ⚙️ 输出格式要求： - 文件保存为 `tank_game.html`； - 代码可直接保存为 HTML 文件并在浏览器中打开即可运行。基本功能有了, 需要一些优化
请增加或修改如下功能 1. 击中坦克后，增加爆炸效果 2. 敌人的坦克，保持在三个 3. 记录击中敌人坦克的数量翻译插件
先把需求说明文档设计好
根据需求文档, 让ai生成UI设计文档
添加 Doc
- 了解kimi Api
Kimi模型是由中国人工智能公司月之暗面(Moonshot AI)研发的一款大型语言模型(Large Language ModelLLM)，其最显著的特点是支持超长文本的输入和处理能力
- 申请Kimi API Key
- Add Doc
程序生成
测试
- 添加扩展程序
- 程序设置
- 测试效果
生成前端页面
Trae + Figma MCP自动生成前端页面
Figma介绍
Figma是一款基于云端的界面设计和协作工具，主要用于用户界面(UI)和用户体验(UX)设计口
- 简单来说，它是可以用来设计网站、手机App、软件等数字产品界面的强大工具
- 地址: https://www.figma.com/
- 注册Figma/登录Figma
- 通过邮箱来注册，过程比较简单，按照提示一步一步操作即可。
- 创建访问Figma的Token
- 说明: token的名字随意, token的过期时间默认就行, 权限的话建议勾选全部,
- 说明: token只会展示一次, 忘记后需重新生成
添加Figma MCP
说明: MCP添加成功后, 使用Trea的 Builder with MCP智能体时, 智能体就能获取Figma的访问授权
生成前端页面
- 在Figma找到你要生成的页面地址
- 在Trae生成前端页面
- 查看还原效果