我正在参加Trae「超级体验官」创意实践征文， 本文所使用的 Trae 免费下载链接： www.trae.ai/?utm_source…
当前市面上有许多ai编程IDE和ai编程插件，这些ai工具的特色功能一般为ai代码补全和ai聊天框，这次我们体验一下字节新推出的AI编程IDE Trae，使用他来创建一个基于react的figma插件(不使用任何第三方依赖的figma插件过于简单，增加一个基于react条件可以增加难度，也更接近真实项目的场景)。
安装
点击文章首部链接即可进入下载安装，在第一次启动软件时，可以直接导入vsCode的配置，IDE语言可以选择中文
通过chat开始初始化figma插件应用
打开一个文件夹目录，作为我们的项目仓库路径。开始在侧栏chat里对话。 可以看到会话里主要提供的两个功能
- 提供命令行代码，可以直接点击运行
- 提供代码变更建议，可以直接应用。IDE会在chat输入框上方和变动文件处提示是否接受变更，点击确认才会生效。 这里我们依次选择"运行"和"应用"
执行完毕，我们就看到了一个貌似还不错的文件结构，填充了主要的代码内容
调试过程
先run起来项目
文件结构看起来很不错，继续运行启动项目的命令，我们看到并不成功（果然没有那么简单啊），这里可以很方便的把报错信息填充到chat栏
项目启动了，打开figma插件看看，figma直接报错
我们把报错信息粘到chat栏看一看
可以启动figma插件了，但是body是空的，明显react元素没有填进去
我们直接截图到chat试一下，是可以识别内容并继续给出解决方案的，这点做的还是不错的。但是后续给出的修改意见始终无法让react元素加载出来，笔者只好自己去人肉排查，发现是figma的ui.html里并不能支持外链js，只能内联到html内。
至此，一个figma插件基本就完成了，我们再让他添加一点小功能
成品展示
一个简单的figma插件成型，看起来还不错
总结
- 本文以创建一个figma插件为切入点，走了一遍一个简单项目的创建全过程，主要涉及chat相关功能。
- 在chat栏可以便捷的执行命令行操作以及修改代码。
- chat支持不错的图片理解
- 总体来说，trae是很不错的ai工具，作为IDE，其AI的嵌入也比插件更顺畅。但针对特殊应用场景，依然需要人工矫正~
