超nice,我和编程搭子Trae solo builder一起重构了我的项目前端

大家好呀,我是程序员夏叶,深度AI编程使用者,专注于分享AI编程方面的使用技巧、经验以及前沿资讯,有兴趣的可以关注我,一起学习,共同进步。

先说结论, Trae 2.0新增的内置智能体solo builder不愧是前端专家,帮我重构的项目前端界面,我很满意,相比之前IDE模式写的前端,无论是从审美还是界面流畅度上比,都强多了,十分适合我这种没有写过前端的纯后端程序员,哈哈!

项目背景

这个项目其实起源于我想偷懒,一直以来我是用markdown写文章发公众号,然后会同步到其他平台,别的平台还好,主要就是小红书比较麻烦,需要转成图文形式,在此之前,我是在网站1转成图片,在网站2转成符合小红书风格的文案,然后发小红书时还要重新组织标题和标签之类的,比较费时间,还要切界面。

于是我想到可以使用Trae帮我做一个工具,直接一键生成图片、文案、标题、标签,这样我markdown文章同步小红书就超简单了,在SOLO模式发布之前,项目后端已经完成了,之前我还写过一篇文章介绍了Trae结合MCP写后端程序的最佳实践:

Trae最佳编程实践,写一个sftp MCP,把Trae每一次请求都压榨的干干净净

其实当时前端界面也写了一部分,但是界面风格以及细节调整,总是调整不到位,恰好#TRAE2.0SOLO出道,内置了一个智能体,叫做SOLO Builder,它的功能是这样:

擅长写web 前端,还擅长使用vue框架,于是我突发奇想,既然它是一个前端专家,那不如直接用SOLO Builder重构下前端,看看效果咋样,结果相当炸裂,反正重构出来的界面我很满意。

编程搭子--SOLO Builder

SOLO Builder是Trae 2.0新增的一个内置智能体,只有在切换到SOLO模式时才可使用,默认只能使用Claude-4-Sonnet模型,SOLO模式刚出的时候它只擅长写前端,不过今天Trae刚刚更新了,SOLO Builder也增加了后端生成能力。

毋庸置疑,SOLO Builder肯定是针对前端比如vue框架或者react框架做了专门训练的,相比通用智能体Builder而言,前端能力肯定是更为突出的。

使用SOLO Builder配合SOLO模式下Trae AI对终端和内置浏览器的掌控,可以做到不切换界面,就在Trae中完成写代码、启动开发服务器、浏览器预览和测试这一套前端开发标准流程,再加上SOLO Builder出色的前端能力,对我这种不会也不想写前端代码的人而言,真的是一大福音了。

SOLO模式下还有一大亮点也是友好前端,那就是元素选择 功能,在此之前,前端哪里需要修改,我们需要很小心的跟AI描述,它还不一定能正确理解,现在有了元素选择功能,就能辅助AI迅速的定位到你想改的界面元素上,超方便。

如果你跟我一样,也是一个不想写web界面的后端程序员或者根本就不是程序员,十分建议你试一下SOLO Builder

项目功能介绍

MD2XHS(Markdown to 小红书)是一个专为小红书内容创作者设计的前端工具,能够将 Markdown 格式的文本转换为精美的小红书风格图片,同时调用AI一键归纳总结出符合小红书风格的标题和文案。该项目基于 Vue 3 + TypeScript 构建,提供了直观易用的界面和强大的功能。

核心功能特性

1. 多样化模板系统

项目提供 9 种精美的视觉模板:

  • 经典渐变:蓝紫渐变背景,适合大多数内容
  • 简约白底:简洁白色背景,突出内容本身
  • 极简灰调:专业简洁的灰色调设计
  • 经典边框:白底配红色边框,商务风格
  • 霓虹科技:深色背景配霓虹边框,科技感十足
  • 优雅黑金:黑色背景配金色装饰,奢华优雅
  • 可爱粉色:粉色渐变背景,温馨可爱风格
  • 日落橙黄:温暖的日落色调,充满活力
  • 复古怀旧:复古色调配装饰边框,怀旧风格
2. 实时预览功能
  • 即时渲染:编辑内容时实时显示预览效果
  • 小红书标准尺寸:预览区域采用 375×667px 标准手机屏幕比例
  • 模板切换:可在预览区域直接切换不同模板风格
  • 响应式设计:支持不同设备尺寸的预览
3. 图片生成工具
  • 标准尺寸:生成 750×1334px 的小红书标准图片尺寸
  • PNG 格式:高质量 PNG 格式输出,保证图片清晰度
  • 批量生成:支持生成多张图片并提供轮播预览
  • 一键下载:支持单张下载或批量下载所有生成的图片
  • 图片预览:内置图片轮播器,方便查看和选择
4. AI 智能文案生成
  • 智能生成:基于输入内容生成小红书风格文案
  • 结构化输出:生成的文案包含标题、内容和标签三个部分
  • 一键复制:支持复制完整文案或单独复制标题、内容、标签
5. 用户系统
  • 用户注册/登录:完整的用户认证系统
  • 使用次数管理:显示 AI 功能剩余使用次数
  • 个人资料:用户可管理个人信息
  • 权限控制:AI 功能需要登录后使用,图片预览与下载功能免费开放
6. 用户体验优化
  • 响应式设计:完美适配桌面端、平板和手机
  • 三栏布局:编辑器、预览区、工具面板的科学布局
  • 实时通知:操作成功/失败的即时反馈
  • 加载状态:清晰的加载动画和进度提示
  • 帮助系统:内置帮助文档和使用指南
7. 技术特性
  • 快速响应:基于 Vite 构建,开发和生产环境都极速响应
  • 类型安全:完整的 TypeScript 支持,减少运行时错误
  • 状态管理:使用 Pinia 进行高效的状态管理
  • 组件化:高度模块化的组件设计,易于维护和扩展
  • 现代化 UI:使用 Tailwind CSS 和 Lucide Icons 构建现代化界面

使用场景

如果你跟我一样,也使用markdown写文章,但是需要同步小红书,那么可以体验一下。

工具体验方式

体验网址如下:

traefrontend243si-guanyz0117-2503-xia-yes-projects.vercel.app

当前图片预览与下载无需登录可直接使用,但是AI文案生成需要注册登录,新注册用户免费送10次文案生成次数,欢迎大家使用体验!

好了,感谢你能看到这里,既然已经看到最后了,麻烦来个三连支持一下吧,十分感谢!

相关推荐
Y234 小时前
Trae 2.0 Solo 模式,人人都能做游戏
trae
创码小奇客5 小时前
从 0 到 1 落地 SpringBoot+RocketMQ:架构师亲授分布式通信最优解
spring boot·rocketmq·trae
CF14年老兵6 小时前
📝 如何在 MySQL 中创建存储过程:从基础到实战
java·sql·trae
CF14年老兵6 小时前
🔥 2025 年开发者必试的 10 款 AI 工具 🚀
前端·后端·trae
晴殇i10 小时前
前端视角下的单点登录(SSO)从原理到实战
前端·面试·trae
查尔的AI次方11 小时前
从「复刻」到「一键生成」:我的AI流程图工具开发实录
trae
飞哥数智坊1 天前
AI编程实战:写作助手进化,Trae+Kimi-K2两小时搞定“带样式复制”
人工智能·trae
豆包MarsCode1 天前
奖品激励+官方认证!TRAE最佳实践征文大赛来了
trae
bytebeats1 天前
如何使用Trae和Claude-3.5-Sonnet在Flutter中从图片生成自定义按钮
trae