收到字节的短信：Trae SOLO上线了？尝尝鲜，浅浅做个音乐播放器

前言

【字节跳动】亲爱的TRAE友，感谢您的耐心等待。TRAE中国版现已正式上线SOLO模式；请将TRAE中国版升级至最新版本，并使用您填写中国版官网waitlist所用的手机号登录，便可立即免费享受SOLO带来的开发体验！

当时还在想是谁哪个同学的恶作剧，点开一看真的是官方！

当时正好在听周杰伦 的爱在西元前，这消息直接把我的摸鱼时间拐成了 "浅浅整活" 时间：不如用 Trae SOLO 搭个音乐播放器？毕竟主打的 "全流程打通"，正好能试试从架构到部署到底有多丝滑。

一、生成完整框架

我先写好了大致的音乐播放器框架，当然是非常简易的，就是简单的div了一堆，规划好了布局。

类似这样：

让SOLO帮我完善整个布局：

ini 复制代码

<body>
    <div class="music">
        <div class="head">
            <div class="back">
                <i class="iconfont icon-zuojiantou"></i>
            </div>
            <div class="title">
                <div class="name">爱在西元前</div>
                <div class="author">周杰伦</div>
            </div>
            <div class="more">
                <i class="iconfont icon-sandian"></i>
            </div>
        </div>
        <div class="main">
            <div class="logo">
                <img src="https://img2.baidu.com/it/u=1469800619,2890014870&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="">
            </div>
            <div class="songs">
                <div class="song-info">
                    <div class="song-name">爱在西元前</div>
                    <div class="song-author">周杰伦 - 范特西</div>
                    <div class="lyric">我给你的爱写在西元前</div>
                </div>
                <div class="progress">
                    <div class="time current">1:17</div>
                    <div class="progress-bar">
                        <div class="progress-inner"></div>
                        <div class="progress-dot"></div>
                    </div>
                    <div class="time total">3:54</div>
                </div>
            </div>
            <div class="control">
                <div class="prev">
                    <i class="iconfont icon-shangyishou"></i>
                </div>
                <div class="play">
                    <i class="iconfont icon-bofang"></i>
                </div>
                <div class="next">
                    <i class="iconfont icon-xiayishou"></i>
                </div>
            </div>
        </div>
        <div class="foot">
            <div class="foot-left">
                <div class="foot-logo">
                    <img src="https://img2.baidu.com/it/u=1469800619,2890014870&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="">
                </div>
                <div class="foot-info">
                    <div class="foot-song-name">爱在西元前</div>
                    <div class="foot-song-author">周杰伦</div>
                </div>
            </div>
            <div class="foot-right">
                <div class="foot-heart">
                    <i class="iconfont icon-aixin_shixin"></i>
                </div>
                <div class="foot-menu">
                    <i class="iconfont icon-caidan"></i>
                </div>
            </div>
        </div>
    </div>
</body>

当然，图标是在iconfont上面找的。10秒就给我生成了我想要的完整框架，而且自动帮我填充了所有代码，这...已经感受到强大了。

二、填充css文件

这个部分简直没动脑子，自己写了最上面的部分，然后中间的下面的部分直接帮我生成好了...

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;
}

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;
}
.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，它马上又帮你完善了。