Trae与Builder模式初体验

说明

下载的国际版:https://www.trae.ai/

建议

要选新模型
在这里插入图片描述

效果

还是挺不错的,遇到问题反馈一下,AI就帮忙解决了,真是动动嘴(打打字就行了),做些小的原型效果或演示Demo很方便呀!

安装好 Trae 后,我们直接打开,主页面如下:
在这里插入图片描述
Builder 模式,Builder 模式可以帮助你从 0 到 1 开发一个完整的项目。你可以将它无缝融入到项目构建的流程中。 在 Builder 模式下,AI 助手在回答时会根据需求调用不同的工具,包括分析代码文件的工具、编辑代码文件的工具、运行命令的工具等等

一开始输入的提示词如下(搞自网络):

### 你是谁你是一位资深全栈工程师和设计工程师,拥有丰富的全栈开发经验和卓越的审美能力,擅长现代化设计风格,尤其精通移动端设计与开发。### 你要做什么1. 需求分析与构思- 用户将提供一个【App需求】。- 以产品经理的视角,分析需求并构思网站的功能需求和信息架构。- 自行定义网站的主题、目标用户和核心功能,确保设计与需求的契合度。2. UI/UX 设计与开发- 根据构思的功能需求,使用 HTML 和 Tailwind CSS 设计高质量的 UI/UX 参考图。- 按功能模块划分(每个功能可能包含多个页面),为每个功能输出一个独立的 HTML 文件。- 每个 HTML 文件中包含该功能的所有页面,页面以横向排列的 mockup 边框形式展示,彼此独立且互不干扰。- 每完成一个功能的 UI/UX 参考图后,提示用户“是否继续”。若用户回复“继续”,则根据步骤设计并输出下一个功能的 UI/UX 参考图。### 具体要求1. 设计标准- 设计需高级且有质感,运用玻璃拟态等视觉效果提升层次感。遵守现代化设计规范,注重 UI 细节,确保界面美观、直观且用户友好。- 特别关注移动端响应式设计,确保在不同设备上均有良好展示效果。2. 技术实现- 使用 Tailwind CSS CDN(例如 `https://cdn.tailwindcss.com`)完成样式设计,避免手动编写内联或外部 CSS。- 图片素材从 Unsplash 获取,确保高质量且与设计风格匹配,界面中不得出现滚动条。- 图标使用 Lucide Static CDN 引入(格式如 `https://unpkg.com/lucide-static@latest/icons/XXX.svg`),保持一致性和易用性。- 每个功能的页面在单个 HTML 文件中实现,使用简单的 mockup 边框(例如虚线或阴影)分隔,横向排列,互不影响。3. 代码规范- 代码需简洁高效,易于维护,避免复杂的嵌套和冗余选择器。- 仅在最终输出结果中提供完整的 HTML 代码,思考过程不包含代码片段。

过程中让trae继续完善demo
在这里插入图片描述

最终的项目效果,工程目录文件
在这里插入图片描述
页面效果

首页

在这里插入图片描述
样式是适应屏幕布局的,这很不错!
在这里插入图片描述

子页面

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

修正提示

预览失败

由于我当前环境没有安装python,所以是没有办法启动一个最简单的Http服务,去加载页面的。但我们可以直接用浏览器index.html
在这里插入图片描述

子页面的跳转

在这里插入图片描述

未完成的页面

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/34263.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Canoe Panel常用控件

文章目录 一、Panel 中控件分类1. 指示类控件2. 功能类控件3. 信号值交互类控件4. 其他类控件 二、控件使用方法1. Group Box 控件2. Input/Output Box控件3. Static Text控件4. Button控件5. Switch/Indicator 控件 提示:Button 和 Switch 的区别参考 一、Panel 中…

睡不着运动锻炼贴士

在快节奏的现代生活中,失眠似乎已成为许多人的“夜间伴侣”。夜晚辗转反侧,白天精神不振,这样的恶性循环让许多人苦不堪言。其实,除了调整作息和饮食习惯,适当的运动也是改善睡眠的一剂良药。今天,就让我们…

java数据结构(复杂度)

一.时间复杂度和空间复杂度 1.时间复杂度 衡量一个程序好坏的标准,除了能处理各种异常,还有就是时间效率,当然,对于一些配置好的电脑数据处理起来就是比配置低的高,但从后期发展来看,当数据量足够庞大时&…

NAT和NAPT的介绍

一、NAT的介绍以及作用 二、NAPT的介绍以及作用 三、NAT vs NAPT 一、NAT的介绍以及作用 1.1 NAT的介绍 NAT(Network Address Translation)是一种广泛应用于互联网的技术,主要用于解决IPv4地址耗尽问题,同时提供网络安全和网络…

VSCode通过SSH免密远程登录Windows服务器

系列 1.1 VSCode通过SSH远程登录Windows服务器 1.2 VSCode通过SSH免密远程登录Windows服务器 文章目录 系列1 准备工作2 本地电脑配置2.1 生成密钥2.2 VS Code配置密钥 3. 服务端配置3.1 配置SSH服务器sshd_config3.2 复制公钥3.3 配置权限(常见问题)3.…

大模型训练全流程深度解析

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站。https://www.captainbed.cn/north 文章目录 1. 大模型训练概览1.1 训练流程总览1.2 关键技术指标 2. 数据准备2.1 数据收集与清洗2.2 数据…

export、export default 和 module.exports 深度解析

文章目录 1. 模块系统概述1.1 模块系统对比1.2 模块加载流程 2. ES Modules2.1 export 使用2.2 export default 使用2.3 混合使用 3. CommonJS3.1 module.exports 使用3.2 exports 使用 4. 对比分析4.1 语法对比4.2 使用场景 5. 互操作性5.1 ES Modules 中使用 CommonJS5.2 Com…

AI芯片设计

目的:未来的时代,一定会是AI的时代,那么,AI时代的三个重要组成部分,我要参与其中之一! 参考视频:AI芯片设计第一讲_哔哩哔哩_bilibili 端处理 云端

动手学深度学习:CNN和LeNet

前言 该篇文章记述从零如何实现CNN,以及LeNet对于之前数据集分类的提升效果。 从零实现卷积核 import torch def conv2d(X,k):h,wk.shapeYtorch.zeros((X.shape[0]-h1,X.shape[1]-w1))for i in range(Y.shape[0]):for j in range(Y.shape[1]):Y[i,j](X[i:ih,j:jw…

【开源代码解读】AI检索系统R1-Searcher通过强化学习RL激励大模型LLM的搜索能力

关于R1-Searcher的报告: 第一章:引言 - AI检索系统的技术演进与R1-Searcher的创新定位 1.1 信息检索技术的范式转移 在数字化时代爆发式增长的数据洪流中,信息检索系统正经历从传统关键词匹配到语义理解驱动的根本性变革。根据IDC的统计…

使用Node的http模块创建web服务,给客户端返回html页面时,css失效的根本原因(有助于理解http)

最近正在尝试使用node写后端,使用node创建http服务的时候,碰到了这样的一个问题: 这是我的源代码: import { createServer } from http import { join, dirname, extname } from path import { fileURLToPath } from url import…

JVM 2015/3/15

定义:Java Virtual Machine -java程序的运行环境(java二进制字节码的运行环境) 好处: 一次编写,到处运行 自动内存管理,垃圾回收 数组下标越界检测 多态 比较:jvm/jre/jdk 常见的JVM&…

IP风险度自检,互联网的安全“指南针”

IP地址就像我们的网络“身份证”,而IP风险度则是衡量这个“身份证”安全性的重要指标。它关乎着我们的隐私保护、账号安全以及网络体验,今天就让我们一起深入了解一下IP风险度。 什么是IP风险度 IP风险度是指一个IP地址可能暴露用户真实身份或被网络平台…

【鸿蒙】封装日志工具类 ohos.hilog打印日志

封装一个ohos.hilog打印日志 首先要了解hilog四大日志类型: info、debug、warm、error 方法中四个参数的作用 domain: number tag: string format: string ...args: any[ ] 实例: //普通的info日志,使用info方法来打印 //第一个参数 : 0x0…

走路碎步营养补充贴士

走路碎步,这种步伐不稳的现象,在日常生活中并不罕见,特别是对于一些老年人或身体较为虚弱的人来说,更是一种常见的行走状态。然而,这种现象可能不仅仅是肌肉或骨骼的问题,它还可能是身体在向我们发出营养缺…

Python软件和搭建运行环境

目录 一、Python安装全流程(Windows/Mac/Linux) 1. 下载官方安装包 2. 详细安装步骤(以Windows为例) 3. 环境变量配置(Mac/Linux) 二、虚拟环境管理(关键!) 为什么需…

【蓝桥杯】省赛:神奇闹钟

思路 python做这题很简单,灵活用datetime库即可 code import os import sys# 请在此输入您的代码 import datetimestart datetime.datetime(1970,1,1,0,0,0) for _ in range(int(input())):ls input().split()end datetime.datetime.strptime(ls[0]ls[1],&quo…

RabbitMQ (Java)学习笔记

目录 一、概述 ①核心组件 ②工作原理 ③优势 ④应用场景 二、入门 1、docker 安装 MQ 2、Spring AMQP 3、代码实现 pom 依赖 配置RabbitMQ服务端信息 发送消息 接收消息 三、基础 work Queue 案例 消费者消息推送限制(解决消息堆积方案之一&#…

HW基本的sql流量分析和wireshark 的基本使用

前言 HW初级的主要任务就是看监控(流量) 这个时候就需要我们 了解各种漏洞流量数据包的信息 还有就是我们守护的是内网环境 所以很多的攻击都是 sql注入 和 webshell上传 (我们不管对面是怎么拿到网站的最高权限的 我们是需要指出它是…

camellia redis proxy v1.3.3对redis主从进行读写分离(非写死,自动识别故障转移)

1 概述 camellia-redis-proxy是一款高性能的redis代理(https://github.com/netease-im/camellia),使用netty4开发,主要特性如下: 支持代理到redis-standalone、redis-sentinel、redis-cluster。支持其他proxy作为后端…