别人在测 Demo，我已经用MiniMax M2.1跑通了整个产品开发流程-AI Express News

黄叔最近花了大量时间研究 Claude Agent Skills 系统，也发布了一款产品「降噪」，整个产品的数据采集和处理完全使用 Skills 构建，数据库用多维表格，我自己是比较满意的。

正好 MiniMax 发布了 M2.1 模型。这次更新有个让我特别感兴趣的点：多语言优化。

啥意思呢？说实话，过去大部分模型「偏科」很严重——写前端 JS/TS 流畅好看，写 Python 脚本能跑能用，但一到 Java 后端、Go 服务、TypeScript 全栈就开始拉胯：结构不对、工程习惯不对、接口设计一塌糊涂。

M2.1 系统性提升了 Rust/Java/Golang/C++/Kotlin/TypeScript 等语言的能力，覆盖从底层系统到应用层开发的完整链路。这是开始理解：不同岗位写代码，到底在解决什么问题。

那就来真刀真枪地测一测：用 M2.1 帮我迭代「降噪」，看看生成的代码能不能直接上线生产环境！

这篇文章，黄叔用自己正在开发的产品「降噪」作为测试素材，从 Skills 优化、页面样式、沉浸式交互、智能搜索四个维度，完整测试 M2.1 的实战能力。

结论先放这里：惊喜远大于预期。

01 任务一：优化 Claude Agent Skills

黄叔现在花大量时间精力在研究 Claude 的 Skills，这是 Claude Code 里面一个非常重要的组成部分。

所以我的第一个考验，就是看 M2.1 能否帮我优化之前写的一个 Skills——这个 Skills 能够半自动化地帮我完成内容的抓取和改写工作。

需要优化的是什么呢？我发现这个 Skills 对于 YouTube 视频源没有做时长过滤，导致一些 Shorts（短视频）会被错误地加载进来。希望 M2.1 能帮我把这个逻辑补齐。

Prompt：

请帮我优化这个 Skills，增加对 YouTube 视频时长的过滤，排除时长小于 60 秒的 Shorts 短视频。

M2.1 不仅理解了我的需求，还：

✅ 正确识别了 YouTube API 的时长字段
✅ 添加了 duration 过滤逻辑
✅ 保持了原有代码结构的一致性
✅ 甚至还加了注释说明为什么要这样改

让我惊讶的是，M2.1 对于 Skills 的理解和优化能力，比过去要进化了一大截。

这个 Skills 是用 TypeScript 写的，涉及到异步处理、API 调用、数据过滤等逻辑。M2.1 不仅「写得出」，而且「写得对」——它没有用前端思维强行套后端逻辑，而是正确理解了 YouTube API 的数据结构，用合理的方式添加了过滤条件。

这种「在已有代码上精准修改」的能力，是「从 1 到 100」的 SWE-Coding 能力。像一个真正的工程师一样，读懂上下文、找到切入点、最小化改动。

国内其他模型？说实话，大部分连 Skills 是什么都理解不了，更别说在复杂的 TypeScript 工程里精准定位和修改了。

02 任务二：根据 PRD 实现页面组件

接下来测试M2.1的「从0到1」Web开发能力——能不能看懂PRD，直接生成可用的前端页面代码。

我把「降噪」产品的 PRD 文档喂给它，要求生成首页的内容卡片组件。

PRD 核心需求：

┌─────────────────────────────────────────────────┐
│                                                 │
│   封面图 (16:9 比例)                            │
│                                                 │
│   ┌─────────────────────────────────────────┐   │
│   │  ● 嘉宾头像     小宇宙 ↗               │   │ ← 毛玻璃叠层
│   └─────────────────────────────────────────┘   │
├─────────────────────────────────────────────────┤
│                                                 │
│   🏷️ AI产品  🏷️ 创业访谈                       │ ← 彩色标签
│                                                 │
│   如何打造一个让人喜爱的 AI 产品                │ ← 粗体标题
│   吴恩达 · 2024年12月15日                       │ ← 次要信息
│                                                 │
│   ┃ "创业最重要的是找到真正的用户痛点，         │
│   ┃  而不是自己臆想的需求。"                    │ ← 引述金句
│                                                 │
└─────────────────────────────────────────────────┘

设计规范要求：

测试结果：

上面的图是线上的版本，下面的图是 M2.1 优化后的版本，一把过！可以发现毛玻璃实现的不错，配色也很清楚，有点让我吃惊！

为啥吃惊呢？过去没想到，国产模型能对细节样式的美学上面做到这个程度。

而且这是直接用在生产环境。M2.1 生成的代码结构清晰、TypeScript 类型完整、还自带响应式适配——这才是真正有「工程感」的输出，不是那种只能跑一跑、看一看的玩具代码。

03 任务三：创建沉浸式探索页

第三个任务难度升级——我要测试 M2.1 的交互动效能力。

需求是为「降噪」创建一个沉浸式的洞察卡片组件，核心交互是 3D 翻转效果：

卡片正面：
┌─────────────────────────────────────┐
│       " 金句内容 "                  │
│                                     │
│       👤 作者名字                   │
│       #标签1  #标签2                │
└─────────────────────────────────────┘

卡片背面（翻转后显示）：
┌─────────────────────────────────────┐
│  原文标题（突出显示，加粗）         │
│                                     │
│  📺 来源平台                        │
│  📅 日期                            │
│                                     │
│  ┌─────────────────────────────┐    │
│  │      ▶️ 阅读完整洞察         │    │
│  └─────────────────────────────┘    │
│                                     │
│  ↗ 原视频链接                       │
└─────────────────────────────────────┘

样式规范：
卡片尺寸：320px × 384px
圆角：rounded-2xl
主色调：#FF6B35（暖橙）
背景：毛玻璃效果 backdrop-blur-xl
翻转动画：rotateY 180°，duration 0.8s

这个开发的还挺快，运行了几分钟后出来了：

黄叔点评：

这个 Case 涉及到 CSS 3D Transform、状态管理、事件处理多个技术点，整个样式和交互，我还挺满意的。

特别是翻转动画转的很自然，不生硬，而是有一点弹性的，让整个交互感觉很高级。

04 任务四：智能搜索组件

最后一个任务是最复杂的——为「降噪」创建一个智能搜索功能。

# 任务：为「降噪」产品创建内容搜索功能
## 背景
「降噪」是一个 AI 行业访谈精华策展平台。首页有多张内容卡片，
包含嘉宾访谈的标题、封面、标签和金句摘要。
**用户痛点**：内容越来越多，很难快速找到「那位嘉宾」或「那个话题」。
---
## 需求（用户视角）
作为用户，我希望：
1. **搜索嘉宾名** → 看到该嘉宾的所有卡片
2. **筛选标签** → 看到带该标签的所有卡片  
3. **搜索关键词** → 看到包含该关键词的卡片
### 关键约束
- ✅ 结果直接**复用首页已有的 ContentCard 组件**
- ✅ 简单字符串匹配即可，不需要复杂算法
- ❌ 不需要匹配度百分比
- ❌ 不需要知识图谱可视化
---
## 验收标准
1. 点击首页「搜索金句」按钮，弹出搜索弹窗
2. 输入嘉宾名或选择嘉宾筛选 → 立即显示该嘉宾的卡片（与首页样式一致）
3. 选择标签筛选 → 立即显示相关卡片
4. 点击搜索结果卡片 → 跳转到内容详情页
5. 无需输入搜索词，仅设置筛选条件也应显示结果

但这恰恰说明了一个问题：真实的业务逻辑，就是比 Demo 复杂得多。搜索功能涉及到多条件组合（嘉宾 + 标签 + 关键词）、状态管理、组件复用、URL 路由……这不是写个 TodoList 能比的。

经过几轮调试后，最终效果很不错。我直接把这个功能发布到线上了——是的，现在你去访问降噪（https://aihuangshu.com/），用的就是 M2.1 帮我写的搜索功能。

亮点：

1.搜索交互设计精美 —— 弹窗动画、输入框样式都很舒服

2.筛选逻辑完整 —— 嘉宾筛选、标签筛选、关键词搜索都能正确工作
3.还自己加了快捷键！ —— Cmd+K 可以快速打开搜索，这个我没要求，M2.1 自己加的
4.结果复用了已有的 ContentCard —— 完全按照约束来

整体的美观度和样式都非常棒，我很喜欢。

特别是快捷键这个细节，说明 M2.1 不仅能「听懂」需求，还能「想到」用户体验的优化点。这种主动性，在国产模型里很少见。

05 综合评价：M2.1 的能力边界在哪里？

经过四个任务的完整测试，总结一下 M2.1 的表现：

M2.1 的优势

1.Skills 支持领先 —— 国内模型里，M2.1 对 Claude Code Skills 的理解是最好的
2.前端审美在线 —— 毛玻璃、渐变、动效这些细节都处理得很好
3.指令遵从度高 —— 给的 PRD 约束基本都能准确执行
4.代码质量稳定 —— 执行速度还不错，有问题修复的也比较好
5.多语言工程理解力 —— 这次测试虽然主要是 TypeScript/React，但从 M2.1 的表现来看，它确实开始理解「不同场景下代码应该怎么写」。不是一套模板打天下，而是会根据上下文调整代码风格和架构。