数据可视化

准备基础环境

mcp-server-chart介绍

一个用于通过AntV生成图表的模型上下文协议(ModelContextProtocol)服务器。我们可以使用这个MCP服务器来进行图表生成和数据分析

1. MCP (Model Context Protocol)是让AI助手能调用外部工具和数据的协议，Trae能做更多事情，编程效率直接起飞
2. 安装Node.js和npm

1. 在Trae 配置 MCP Server

1. 添加完成, 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

1. 了解kimi Api

Kimi模型是由中国人工智能公司月之暗面(Moonshot AI)研发的一款大型语言模型(Large Language ModelLLM)，其最显著的特点是支持超长文本的输入和处理能力

1. 申请Kimi API Key

1. Add Doc

程序生成

测试

1. 添加扩展程序

1. 程序设置

1. 测试效果

生成前端页面

Trae + Figma MCP自动生成前端页面

Figma介绍

Figma是一款基于云端的界面设计和协作工具，主要用于用户界面(UI)和用户体验(UX)设计口

1. 简单来说，它是可以用来设计网站、手机App、软件等数字产品界面的强大工具
2. 地址: https://www.figma.com/
3. 注册Figma/登录Figma
4. 通过邮箱来注册，过程比较简单，按照提示一步一步操作即可。

1. 创建访问Figma的Token

• 说明: token的名字随意, token的过期时间默认就行, 权限的话建议勾选全部,
• 说明: token只会展示一次, 忘记后需重新生成

添加Figma MCP

说明: MCP添加成功后, 使用Trea的 Builder with MCP智能体时, 智能体就能获取Figma的访问授权

生成前端页面

1. 在Figma找到你要生成的页面地址

1. 在Trae生成前端页面

1. 查看还原效果