Trae AI工具之——基于原型图定制开发(2)

发表于 分类于 ， ， 阅读时长 ≈ 1 分钟

一 概述

上篇文章介绍了使用Cursor进行基于原型图的定制化开发，本文使用Trae实现相同的效果

  • 运行环境及软件
  • 实现步骤
  • 关键词提取
  • 项目定制开发
  • 运行及效果预览

二 运行环境及软件

  • 系统：Windows 11 专业版 23H2
  • AI工具：Trae
  • 开发环境：node(v22.14.0)
  • 开发语言：前端开发语言

三 实现步骤

  • 将项目原型图导入Trae提示词区域
  • 书写关键词，让Trae根据原型图生成项目
  • 运行并查看项目

四 关键词提取

1
这是Web端的原型图，请根据原型图，帮我制作前端项目，要求页面按照图示制作

五 项目定制开发

5.1 原型图

5.2 原型图放入Trae提示词区域(无法直接托文件进入提示词)

1-点击引用，弹出框选择File，继而选择原型图

2-选择后的图示，如下

5.3 基于原型图定制开发

1-输入提示词

1
这是Web端的原型图，请根据原型图，帮我制作前端项目，要求页面按照图示制作，并将文件放入trae-sample2文件夹中

图示

2-我尝试了Trae提供的三种模型，(第一种无法识别，第2/3种无法实现)均无法到达效果

5.4 Trae生成过程(无法生成，仅查看生成效果)

1-创建项目结构(点击运行)

2-运行后执行相关操作，生成的目录结构如右图(trae-sample2)

3-点击Header右侧的应用添加组件

4-点击Slidebar右侧的应用添加组件

5-点击App右侧的应用添加文件

6-点击App.css右侧的应用添加样式文件

六 运行及效果预览

6.1 安装依赖

1
nmp install

图示

6.2 运行项目

1
npm start

6.3 问题处理

1-错误现象

说明：

  • 缺少组件：MainContent、Footer
  • 缺少样式：Header.css、Sidebar.css

2-问题处理

6.4 运行效果图

说明：

  • Trae基于原型定制开发出的页面完全不是我们想要的页面
  • 可能当前模型无法满足定制化开发需求
  • 用户使用其他模型，可能实现定制化开发需求
  • 期待Trae的完善