超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次文案生成次数,欢迎大家使用体验!

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

相关推荐
sinat_267611914 天前
Trae AI 进行 Android 从0 到 1的一键开发
kotlin·android studio·trae
阆遤5 天前
利用TRAE对nanobot进行安全分析并优化
python·安全·ai·trae·nanobot
Molesidy5 天前
【VSCode】VSCode或者Trae的扩展文件夹以及用户设置文件夹的路径更改到指定位置
ide·编辑器·trae
yosh'joy!!5 天前
下载Trae使用
ai·trae
豆包MarsCode6 天前
只需一个指令,让 OpenClaw 安排 TRAE 干活
trae
sugar15696 天前
Trae快速构建自己项目的docker镜像
docker·容器·trae
sugar15696 天前
Trae 添加项目规则,快速完成crmeb项目本地开发环境搭建
docker·容器·trae
欧简墨7 天前
kotlin Android Extensions插件迁移到viewbinding总结
android·trae
arbboter7 天前
【AI编程】约束即设计:AI时代的人机边界重构
ai编程·ai工作流·人机协作·trae·声明式执行·流程编排
进击的雷神9 天前
Trae AI IDE 完全指南:从入门到精通
大数据·ide·人工智能·trae