Building a Music Player UI in Minutes with TRAE SOLO AI
The author demonstrates how TRAE SOLO's AI-powered code generation quickly created a complete music player web page, detailing the initial HTML scaffold, automatic CSS styling, layout fixes, and final deployment, all illustrated with code snippets and screenshots.
Introduction
I upgraded to the Chinese version of TRAE and logged in with the phone number from the waitlist, then used the SOLO mode to instantly generate a music‑player web page while listening to Jay Chou’s “Love Before the Era”.
Step 1 – Generate the full HTML framework
I started with a very simple <div> layout and asked SOLO to complete the rest. In about ten seconds it produced a complete HTML skeleton containing header, title, author, song info, progress bar, controls, and footer sections.
<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 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>
</div>
</body>The icons were sourced from the iconfont library, and the entire layout was generated automatically.
Step 2 – Fill the CSS file
I wrote the top part of the stylesheet manually, then let SOLO generate the rest of the styles for the player.
*{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{flex:1;text-align:center;}
.name{font-family:Roboto;font-weight:500;font-size:18px;color:#FFFFFF;line-height:28px;}
.author{font-family: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:rgba(255,255,255,0.2);border-radius:2px;margin:0 12px;position:relative;cursor:pointer;}
.progress-inner{height:100%;background:white;border-radius:2px;width:50%;}
.progress-dot{width:12px;height:12px;background: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: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:#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;}The generated CSS styles the entire player, including layout, colors, typography, and interactive elements.
Result and Final Tweaks
After the initial generation, the footer was pushed down and obscured part of the page. I used SOLO again to add missing attributes and adjust the layout, resulting in a clean view on an iPhone 6 screen.
In less than a class period I had a functional music player, demonstrating how AI‑assisted code generation can handle boilerplate, diff‑view corrections, and one‑click container deployment, freeing developers from repetitive tasks.
Conclusion
While AI won’t replace developers, tools like TRAE SOLO can dramatically speed up front‑end prototyping and reduce “dirty work”. For newcomers, starting with small utilities combined with strong workflows is an effective way to explore AI‑driven development.
Rare Earth Juejin Tech Community
Juejin, a tech community that helps developers grow.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.