后端开发用Trae做了几个前端demo(感觉很棒

通过不断的对话修正,做了三个页面感觉很棒的。做第三个的时候有个小BUG一直反应不过来(问题是css节点层级的问题,Trae改的是对的但是外面之前已经有一层了,一直改不了了

下面是一个后端用Trae做的三个页面。

第一个便签

对话加不断修正,实现:可以拖动、双击创建、标题和内容都可以修改的功能

  • 1.想要写个可以创建贴纸的页面,贴纸之间可以有连线
  • 2.双击空白处创建没生效
  • 3.贴纸内容可以分为标题和内容
  • 4.内容没有显示出来
  • 5.贴纸移动不了了
  • 6.标题和内容的颜色区分下
  • 7.标题和内容缝隙小点
  • 8.标题也可以修改
  • 9.标题还不能被修改
  • 10.移动下 就不见了

第二个魔方

套路和上面一样不断的对话修正

  • 1.这个我让他给每个背景加了颜色,还有鼠标可以拖动魔方

第三个服务状态图

这个这里出了点问题、说了几次都没修改正确

  • 1·下面是Trae给的样式表,但是外面包了一层 .node导致css层位.node.node.circle
  • 2.然后就一直改不正确了
  • 3.整体感觉还是挺厉害的,让他在节点间画了个虚线页很快实现了。
  • 4.服务间的状态图,我没说客户端的事情Trae主动给我加了个客户端。
  • 5.整体效果超过我预期了。
css 复制代码
// ... 其他样式保持不变 ...
    // .node{ //这里是文件原来就有的节点 不知道Trae一直在这里面改样式导致 页面加载出来圆圈全是黑色的,幸好我这半吊子发现了问题
        .node circle {
            fill: #ffffff;  /* 白色背景 */
            stroke: #4a90e2;
            stroke-width: 3px;
            opacity: 0.8;  /* 80%透明度 */
        }
        .node text {
            font-size: 14px;
            font-weight: bold;
            fill: #333;
        }
        .node.server circle {
            stroke: #4CAF50;
            fill: #e8f5e9;  /* 浅绿色背景 */
        }
        .node.database circle {
            stroke: #FF5722;
            fill: #ffebee;  /* 浅红色背景 */
        }
        .node.cache circle {
            stroke: #9C27B0;
            fill: #f3e5f5;  /* 浅紫色背景 */
        }
        .node.client circle {
            stroke: #2196F3;
            fill: #e3f2fd;  /* 浅蓝色背景 */
        }
//}
// ... 其他代码保持不变 ...

最后

Trae感觉还是很强的!这几个demo对于后端来说实现应该是很有困难的(因为我是只能写点form表单那种的),但他能轻松应对并且能不断修复,虽然中间有点小问题但对前端开发应该能很快的发现问题的。后面可能会尝试下搞个小型的完整项目试下难度了。

相关推荐
是2的10次方啊16 分钟前
AI 能写代码了,还要学设计模式、Spring 源码和 JVM 吗?
ai编程
全栈弄潮儿9 小时前
不要先问“用哪个 AI”,先盘点你的开发工作流
aigc·openai·ai编程
杨杨杨大侠10 小时前
大模型的权重到底怎么用?拆开一个 token 的生成过程
aigc·openai·ai编程
吴佳浩 Alben10 小时前
Agent 怎么做自动化评测?构建端到端的 Agent Evaluation 体系
人工智能·语言模型·架构·自动化·ai编程
小虎AI生活11 小时前
从四大模型一周连发看企业 AI 落地,为什么 95% 的试点不赚钱
ai编程
孟健11 小时前
Gemini 3.8 Flash 没涨价,干活却贵了 40%?
ai编程
举个栗子。14 小时前
SwarmForge:AI 智能体协同编程框架,让多个 Agent 在隔离工作区并行协作
人工智能·开源·ai编程
MuYi042016 小时前
71.6 万行 Flutter 重写成 112.5 万行原生双端:一次 AI 驱动的百万行架构迁移复盘
ai编程
晚安code16 小时前
Claude Fable 5.1 发布解读:科研智能体跑分翻倍,Agent 成本降45%
ai编程·claude
9i编程16 小时前
15.对SKILL进行一次全新尝试,改为框架+细节方式的实践及验证:三次联调(4)——第一次测试与事故
人工智能·openai·ai编程