收到字节的短信：Trae SOLO上线了？尝尝鲜，浅浅做个音乐播放器
稀
风止何安啊约 5 分钟
风止何安啊约 5 分钟前言
【字节跳动】亲爱的 TRAE 友，感谢您的耐心等待。TRAE 中国版现已正式上线 SOLO 模式；请将 TRAE 中国版升级至最新版本，并使用您填写中国版官网 waitlist 所用的手机号登录，便可立即免费享受 SOLO 带来的开发体验！
当时还在想是谁哪个同学的恶作剧，点开一看真的是官方！
当时正好在听「周杰伦」的「爱在西元前」，这消息直接把我的摸鱼时间拐成了 “浅浅整活” 时间：不如用 Trae SOLO 搭个音乐播放器？毕竟主打的 “全流程打通”，正好能试试从架构到部署到底有多丝滑。
一、生成完整框架
我先写好了大致的音乐播放器框架，当然是非常简易的，就是简单的 div 了一堆，规划好了布局。
类似这样：
让 SOLO 帮我完善整个布局：
<body><divclass="music"><divclass="head"><divclass="back"><iclass="iconfont icon-zuojiantou"></i></div><divclass="title"><divclass="name">爱在西元前</div><divclass="author">周杰伦</div></div><divclass="more"><iclass="iconfont icon-sandian"></i></div></div><divclass="main"><divclass="logo"><imgsrc="https://img2.baidu.com/it/u=1469800619,2890014870&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"alt=""></div><divclass="songs"><divclass="song-info"><divclass="song-name">爱在西元前</div><divclass="song-author">周杰伦 - 范特西</div><divclass="lyric">我给你的爱写在西元前</div></div><divclass="progress"><divclass="time current">1:17</div><divclass="progress-bar"><divclass="progress-inner"></div><divclass="progress-dot"></div></div><divclass="time total">3:54</div></div></div><divclass="control"><divclass="prev"><iclass="iconfont icon-shangyishou"></i></div><divclass="play"><iclass="iconfont icon-bofang"></i></div><divclass="next"><iclass="iconfont icon-xiayishou"></i></div></div></div><divclass="foot"><divclass="foot-left"><divclass="foot-logo"><imgsrc="https://img2.baidu.com/it/u=1469800619,2890014870&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"alt=""></div><divclass="foot-info"><divclass="foot-song-name">爱在西元前</div><divclass="foot-song-author">周杰伦</div></div></div><divclass="foot-right"><divclass="foot-heart"><iclass="iconfont icon-aixin_shixin"></i></div><divclass="foot-menu"><iclass="iconfont icon-caidan"></i></div></div></div></div></body>
当然，图标是在 「iconfont」 上面找的。10 秒就给我生成了我想要的完整框架，而且自动帮我填充了所有代码，这... 已经感受到强大了。
二、填充 css 文件
这个部分简直没动脑子，自己写了最上面的部分，然后中间的下面的部分直接帮我生成好了...
*{padding: 0;margin: 0;}body, html{height: 100%;}.music{background-color: #2A2A2A;height: 100%;display: flex;flex-direction: column;}.head{height: 76px;background-color: #161616;color: white;position: relative;display: flex;justify-content: space-between;align-items: center;padding: 0 16px;}
*{padding: 0;margin: 0;}body, html{height: 100%;}.music{background-color: #2A2A2A;height: 100%;display: flex;flex-direction: column;}.head{height: 76px;background-color: #161616;color: white;position: relative;display: flex;justify-content: space-between;align-items: center;padding: 0 16px;}.back, .more{width: 40px;height: 40px;background: rgba(255,255,255,0.05);border-radius: 50%;display: flex;justify-content: center;align-items: center;}.title {text-align: center;flex: 1;}.name {font-family: Roboto, Roboto;font-weight: 500;font-size: 18px;color: #FFFFFF;line-height: 28px;}.author {font-family: Roboto, Roboto;font-weight: 400;font-size: 14px;color: rgba(255, 255, 255, 0.8);line-height: 20px;}.main{padding: 10px 32px;display: flex;flex-direction: column;align-items: center;justify-content: center;flex: 1;overflow: hidden;}.logo{width: 240px;height: 240px;background-color: #fff;border-radius: 24px;overflow: hidden;display: flex;align-items: center;justify-content: center;}.logo img{width: 100%;}.songs {margin-top: 20px;color: white;width: 100%;max-width: 400px;}.song-info {text-align: center;margin-bottom: 20px;}.song-name {font-size: 20px;font-weight: 500;margin-bottom: 8px;color: #FFFFFF;}.song-author {font-size: 14px;color: rgba(255, 255, 255, 0.6);margin-bottom: 12px;}.lyric {font-size: 16px;color: rgba(255, 255, 255, 0.8);font-style: italic;}.progress {display: flex;align-items: center;justify-content: space-between;margin-bottom: 20px;}.time {font-size: 12px;color: rgba(255, 255, 255, 0.6);width: 40px;text-align: center;}.progress-bar {flex: 1;height: 4px;background-color: rgba(255, 255, 255, 0.2);border-radius: 2px;margin: 0 12px;position: relative;cursor: pointer;}.progress-inner {height: 100%;background-color: white;border-radius: 2px;width: 50%;}.progress-dot {width: 12px;height: 12px;background-color: white;border-radius: 50%;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);cursor: pointer;}.control {display: flex;align-items: center;justify-content: center;gap: 40px;margin-top: 30px;}.prev, .next {width: 48px;height: 48px;display: flex;justify-content: center;align-items: center;color: white;font-size: 24px;}.play {width: 56px;height: 56px;background-color: white;border-radius: 50%;display: flex;justify-content: center;align-items: center;color: #161616;font-size: 24px;}.iconfont {font-size: inherit;}.foot {height: 80px;background-color: #161616;display: flex;align-items: center;justify-content: space-between;padding: 0 20px;border-top: 1px solid rgba(255, 255, 255, 0.1);}.foot-left {display: flex;align-items: center;gap: 12px;}.foot-logo {width: 56px;height: 56px;border-radius: 8px;overflow: hidden;}.foot-logo img {width: 100%;height: 100%;object-fit: cover;}.foot-info {color: white;}.foot-song-name {font-size: 14px;font-weight: 500;color: #FFFFFF;margin-bottom: 4px;}.foot-song-author {font-size: 12px;color: rgba(255, 255, 255, 0.6);}.foot-right {display: flex;align-items: center;gap: 24px;color: white;font-size: 20px;}.foot-heart, .foot-menu {width: 40px;height: 40px;display: flex;justify-content: center;align-items: center;}
到这里几乎已经出成果了：
三、最后神之一手 (完善错误)
我发现下面的那一栏被撑下去了：
这样上面就看不到了，于是继续 SOLO：
SOLO 不但帮你完善代码，还自动帮你增添属性，让布局更加完善：
看看成果 (用 iPhone6 视图)：
一段代码敲下来，发现自己只构建了一个框架和想法，程序员确实已经离不开 AI 了... 当然并不是说程序员会被取代，但是 AI 大模型很可能是未来的大方向。
结语
当我不到一节课的时间做完这个音乐播放器，我才算摸透 Trae SOLO 的 “省心”—— 从 SOLO coder 自动生成的接口文档，到 DiffView 帮我秒修的代码兼容问题，甚至部署时一键拉起的服务容器，都把 AI 开发里的 “脏活累活” 啃了个干净。要是你也想拿它练手，建议从 “小工具 + 强流程” 的场景切入，保准能 get 到它的香。
❝第一次用 SOLO 写网页，所以很多都不懂，但是 SOLO 每次都能 get 到我的点。可能结果没有符合我的要求，但是你 SOLO，它马上又帮你完善了。
❞