最近用 Claude AI 完成了一个有趣的项目——MiniMax Cyberpunk Music Studio，一个赛博朋克主题的 AI 音乐生成工具。从构思到上线大概花了4天时间，把开发过程中的一些心得整理分享出来。
为什么做这个项目
其实挺简单的，我想做一个既能展示 MiniMax API 能力、又有视觉冲击力的工具。赛博朋克风格一直都是我很喜欢的美学方向，霓虹灯、扫描线、故障艺术……这些元素和 AI 生成音乐结合在一起，想想就觉得很有意思。
最初想过做纯前端方案，但很快就放弃了——API Key 不能暴露在客户端，所以必须有一个后端服务来处理认证和请求。
技术架构
┌─────────────┐ ┌─────────────┐ ┌─────────────────┐
│ 前端 │────▶│ Node.js │────▶│ MiniMax API │
│ (单页应用) │ │ Express │ │ │
└─────────────┘ └─────────────┘ └─────────────────┘
后端 (Node.js + Express)
Express 本身不复杂，但有几个地方值得说：
认证系统设计
一开始想用 JWT，但后来发现对于这种单用户工具来说有点过度设计。最后用了简单的用户名密码方案，凭证存在服务器端的 config.json 里，客户端只存一个登录状态的 flag。
// 核心思路：服务器端存储敏感信息，客户端不暴露任何凭证
const config = require('./config.json');
// 登录验证
app.post('/api/auth/login', (req, res) => {
const { username, password } = req.body;
if (username === config.auth.username &&
password === config.auth.password) {
res.json({ success: true });
} else {
res.status(401).json({ error: '认证失败' });
}
});
API Key 管理的艺术
API Key 不存在 localStorage，而是存在服务器的内存中。每次启动服务器时从 config.json 加载，这样即使浏览器被劫持也拿不到 Key。
前端 (HTML/CSS/JS)
纯前端单页应用，没有用任何框架。这样做的好处是简单、部署方便，坏处是……好吧，确实没有坏处，对于这种需求来说刚刚好。
赛博朋克 UI 打造
这是我觉得最有意思的部分。
颜色系统
:root {
--bg-dark: #0a0a0f;
--neon-cyan: #00fff9;
--neon-magenta: #ff00ff;
--neon-purple: #b026ff;
--neon-pink: #ff2d6a;
}
几个关键的视觉效果
1. 霓虹发光效果
.neon-border {
box-shadow:
0 0 5px var(--neon-cyan),
0 0 10px var(--neon-cyan),
0 0 20px var(--neon-cyan);
}
2. 扫描线动画
.scanlines::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: repeating-linear-gradient(
0deg,
rgba(0, 0, 0, 0.15),
rgba(0, 0, 0, 0.15) 1px,
transparent 1px,
transparent 2px
);
pointer-events: none;
animation: scanlines-move 8s linear infinite;
}
3. 故障文本效果
.glitch {
position: relative;
animation: glitch-skew 1s infinite linear alternate-reverse;
}
@keyframes glitch-skew {
0% { transform: skew(0deg); }
20% { transform: skew(-2deg); }
40% { transform: skew(0deg); }
60% { transform: skew(1deg); }
80% { transform: skew(0deg); }
100% { transform: skew(-1deg); }
}
使用 Claude 的实战心得
1. 需求描述要清晰但不要过度设计
一开始我跟 Claude 说"帮我做一个音乐生成工具"，结果它给了我一个过于复杂的方案，包含什么 Redux 状态管理、微前端架构之类的。
后来我把需求拆解成小目标：
- "创建一个 Express 服务器处理三个 API 端点"
- "做一个 Tab 切换组件"
- "实现 API Key 的服务端存储"
这样 Claude 给出的方案更接地气。
2. 边做边问，不要等到最后
遇到不确定的地方，我会随时问 Claude："这个写法对吗？""这里会不会有安全隐患？"它经常能指出一些我没想到的问题。
比如有次我准备把 API Key 直接存在前端代码里，Claude 立刻提醒我这样不安全，建议改成服务器端存储。
3. 它的代码要检查
Claude 写的代码大部分是好的，但偶尔会有小问题。比如有次它生成的 CSS 动画语法有小错误，导致某些浏览器不兼容。所以每次它给完方案，我会快速过一遍，确保没有问题再继续。
4. 让它解释原理
不只是让它写代码，我还会问"为什么这样设计？""还有其他方案吗？"这样能学到更多东西，也能找到更好的实现方式。
部署到阿里云
用宝塔面板 + PM2 部署，整个过程比想象中顺利：
# 用 PM2 管理进程
pm2 start server.js --name music-studio
pm2 save
pm2 startup
# 宝塔做反向代理
# 站点 → 设置 → 反向代理 → 添加
# 代理目录：/music-gen
# 目标URL：http://127.0.0.1:3001
总结
用 AI 辅助开发，效率确实提升了很多。以前可能需要一周的架构设计时间，这次压缩到了几个小时。当然，AI 不是万能的——它能帮你快速起步，但最终的质量还是取决于你对代码的理解和把控。
最让我惊讶的是 Claude 对赛博朋克风格的理解——它给出的配色方案和动画效果，几乎不需要修改就直接用上了。这种美学层面的配合，让整个开发过程变得非常顺畅。
如果你也想用 AI 辅助开发，我的建议是：想清楚你要做什么，把大目标拆成小任务，多问多验证。做到这三点，AI 会是你最好的开发伙伴。
项目已部署在：https://chefutang.com/music-gen
有问题欢迎留言交流！
文章评论