摘要：本文记录了一次"极限施压"式的大模型编程实测——用一条 prompt，让小米 MiMo 从技术选型到完整代码一次性交付一个功能齐全的 Web 像素画编辑器。过程中涉及架构设计、Canvas 渲染、颜色量化算法、交互细节等多维度能力考验。以下是完整记录和模型能力评估。

---

一、前言：为什么要做这个测试？

Xiaomi MiMo-V2.5火热公测，为了赶上这波热潮，赶紧上线注册体验一番。https://mimo.xiaomi.com/zh
不过说真的，比起腾讯workbuddy持续送星星，longcat每天给token，小米真的比较扣，mimo claw体验开启后60分钟倒计时。。。体验结束清空所有。看的心惊肉跳，赶紧开测- -

之前体验得几个大模型一直是：嘴上说能写代码的不少，真正能不出错交付完整项目的不多。

这次我挑了一个看似简单、实则暗藏杀机的项目——像素画编辑器（其实我想叫乐高墙生成器，但大模型都爱起这个名字）。为什么说它"暗藏杀鸡"？

• 需要 Canvas 2D 像素级操作（不是画个 div 就完事的）
• 涉及 Median Cut 颜色量化算法（正经的计算机图形学）
• 画布交互：缩放、拖拽、坐标映射（数学不好写不出来）
• 网格线、高亮、批量改色（细节地狱）
• 还要适配移动端 WebView（工程化能力）

一条 prompt，不给任何代码提示，看它能不能一把梭。

---

二、测试 Prompt

我的需求描述如下（原文）：

帮我设计一个web app需求为：
用户导入一张图片，可以选择根据这张图片生成多种规格及自定义像素的像素图，
并且可以指定颜色数。生成的像素图片预览可以有以下几个功能：

1. 图像默认充满画布显示。图像在画布内可以拖拽、放大及缩小。
   放大最大倍数为画布5倍，缩小的最小规格为与画布同样大。
2. 有网格线开关，可以在画布内显示网格线，网格线以图像的像素为单位。
   网格线显示锐利、清晰。
3. 图像像素块显示清晰。像素块可以点击，
   点击与该像素块颜色相同的所有像素块高亮显示。再次点击取消高亮。
4. 画布下方有信息面板，显示如下信息：图像当前像素、
   列出图像每种颜色的像素数量，允许将图像中某个颜色色块批量修改颜色。
   显示x,y座标和一个小色块，当鼠标在像素块上悬停时显示该像素座标。
5. 画布可全屏，面板，开关等做悬浮菜单。

帮我选择技术栈，生成技术及项目概述文档，用最新技术实现，
项目安全可靠，性能优秀，将来可以嵌入手机app中使用。

这条 prompt 里我故意埋了几个"坑"：

• 没有指定技术栈 → 考察选型判断力
• “多种规格” → 考察对需求的理解和扩展性设计
• “像素块可以点击” → 考察性能方案（不可能用 DOM 实现几万个像素块的点击）
• “嵌入手机 app” → 考察工程化和适配能力

---

三、这条 Prompt 考验了大模型哪些能力？

这是我最想聊的部分。很多人觉得"写代码"就是考验大模型的全部，其实远不止。我把这次测试拆解为 7 个维度：

🧠 1. 需求理解与拆解能力

模型需要从一段自然语言描述中：

• 识别出 5 个核心功能点
• 理解隐含需求（比如"网格线锐利清晰"意味着需要用 Canvas API 而不是 CSS）
• 判断优先级和实现顺序

考察点：NLU（自然语言理解）+ 软件工程经验的融合。

🏗️ 2. 架构设计能力

模型需要：

• 选择合适的技术栈并给出理由
• 设计模块划分（渲染层、算法层、状态层、UI 层）
• 预判性能瓶颈并提前规避

考察点：系统设计思维，不是"写个函数"就行的。

🔬 3. 算法实现能力

这是硬核部分：

• 像素化算法：缩放 → nearest-neighbor 插值
• 颜色量化：Median Cut 算法（递归二分颜色空间）
• 坐标映射：屏幕坐标 → 视口变换 → 像素坐标

考察点：计算机图形学知识储备 + 算法实现能力。

🎨 4. 前端交互能力

• Canvas 渲染优化（requestAnimationFrame、脏区域检测）
• 鼠标/触控事件处理（拖拽、缩放、点击）
• 视口变换矩阵（缩放中心点、偏移量计算）

考察点：前端工程能力，不是 React 写个组件那么简单。

📐 5. 细节把控能力

• 网格线的像素对齐（0.5px 偏移避免模糊）
• 高亮边框的视觉反馈
• 悬浮菜单的 z-index 层级
• 滚动条美化、range slider 样式

考察点：UI 还原度和对细节的敏感度。

📝 6. 文档与工程化能力

• 技术文档撰写（项目概述、架构图、功能清单）
• 项目结构设计（合理的目录划分）
• 构建配置（Vite、TypeScript、Tailwind）

考察点：不只是写代码，还要把项目"交付"出来。

🛡️ 7. 安全意识

• 文件大小限制（50MB）
• 大图自动降采样防 OOM
• 无 eval、无动态代码执行
• 预留 CSP 策略

考察点：安全意识是否内建，而不是事后补丁。

---

四、MiMo 的表现：从 0 到 1 的全过程

第一步：技术选型与文档

MiMo 首先输出了一份完整的技术文档 PROJECT.md，包括：

层级	选择	理由
框架	React 19	组件化、生态成熟
构建	Vite 6	极速 HMR、ESM 原生
样式	Tailwind CSS 4	零运行时、原子化
渲染	Canvas 2D API	浏览器原生、性能最优
图标	Lucide React	Tree-shakeable

还给出了为什么不选其他方案的对比分析（比如为什么不选 P5.js、Redux 等）。这个细节让我眼前一亮——不是随便抓一个流行框架就往上堆。

第二步：核心算法实现

像素化算法

// 1. 将原图缩放到目标像素尺寸
smallCtx.drawImage(source, 0, 0, targetWidth, targetHeight);
// 2. 获取像素数据
const smallData = smallCtx.getImageData(0, 0, targetWidth, targetHeight);
// 3. 颜色量化（Median Cut）
palette = medianCut(allPixels, maxColors);
// 4. 映射每个像素到最近的调色板颜色

Median Cut 颜色量化

这个算法的实现让我比较意外——它正确地实现了：

• 计算每个颜色通道的范围
• 选择范围最大的通道排序
• 递归二分直到达到目标颜色数
• 计算每个分区的平均色作为代表色

function medianCut(pixels, maxColors) {
  // 找出范围最大的通道
  // 排序、二分、递归
  // 返回调色板
}

说实话，这个算法很多初级开发者都写不对。 MiMo 一次通过，没有逻辑错误。

第三步：Canvas 渲染引擎

渲染模块的实现考虑了几个关键细节：

1. 像素对齐：网格线使用 Math.floor(px) + 0.5 避免抗锯齿模糊
2. 视口变换：fitScale × view.scale 计算实际像素块大小
3. 裁剪优化：跳过 Canvas 可见区域外的像素块
4. 高亮渲染：非高亮区域降低透明度，高亮区域加金色边框

// 网格线锐利的关键
ctx.strokeStyle = 'rgba(255,255,255,0.25)';
ctx.lineWidth = 0.5;
// 0.5px 偏移确保线条落在像素边界上
const px = Math.floor(startX + x * blockSize) + 0.5;

第四步：交互系统

• 鼠标拖拽：mousedown/mousemove/mouseup 状态机
• 滚轮缩放：以 1.1/0.9 的比例因子，限制在 1x-5x
• 触控手势：单指拖拽 + 双指缩放（pinch-to-zoom）
• 坐标映射：screenToPixel() 函数将屏幕坐标反向变换为像素坐标

第五步：UI 组件

一共产出了 7 个组件：

组件	职责
ImportZone	拖拽导入 + 文件校验
PixelCanvas	核心画布 + 事件处理
Controls	左侧设置面板
InfoPanel	右侧信息面板 + 颜色管理
FloatingMenu	悬浮工具栏
AppContext	全局状态管理
App	布局编排

---

五、最终效果

🖼️ 图片导入界面

🎨 像素化效果

📐 网格线

🔦 同色高亮

🔍 放大查看

📊 信息面板

右侧实时显示颜色列表、像素数量、百分比，悬停显示坐标和色块。

---

六、构建产物分析

npm run build
# ✓ built in 1.67s

dist/index.html                  0.59 kB │ gzip:  0.35 kB
dist/assets/react-DS1lvn1H.js   11.69 kB │ gzip:  4.17 kB
dist/assets/index-CXK2tmjy.css  23.78 kB │ gzip:  5.17 kB
dist/assets/index-WdQ1WkQO.js  217.28 kB │ gzip: 67.38 KB

总 gzip 体积：~77KB。作为一个功能完整的 Canvas 编辑器，这个体积相当克制。

---

七、能力评估总结

能力维度	评分	说明
需求理解	⭐⭐⭐⭐⭐	准确识别 5 个核心功能 + 隐含需求
架构设计	⭐⭐⭐⭐⭐	模块划分合理，技术选型有理有据
算法实现	⭐⭐⭐⭐⭐	Median Cut 一次通过，坐标变换正确
前端交互	⭐⭐⭐⭐☆	拖拽/缩放/触控都实现了，但缺少 Web Worker（大图可能卡 UI）
细节把控	⭐⭐⭐⭐⭐	0.5px 网格对齐、z-index 层级、safe-area-inset 都考虑到了
文档能力	⭐⭐⭐⭐⭐	技术文档完整，项目结构清晰
安全意识	⭐⭐⭐⭐⭐	文件限制、降采样防 OOM、无 eval
综合	⭐⭐⭐⭐⭐	超出预期，一次交付可运行的完整项目

亮点

1. 算法实现准确：Median Cut 颜色量化不是随便能写对的，MiMo 一次通过
2. 性能意识到位：Canvas 直接渲染而非 DOM 操作，跳过不可见区域
3. 细节魔鬼：网格线 0.5px 偏移、高亮边框、视口边界检测
4. 工程化完整：从 types → core → components → store → config 全链路

重点强调，一次生成，无调试。一次运行成功且功能满足需求，无报错。

不足

1. 缺少 Web Worker：颜色量化在大图场景可能阻塞 UI
2. 没有撤销/重做功能（Undo/Redo）
3. 缺少历史记录和本地存储（localStorage）
4. 没有单元测试

---

八、写在最后

这次测试让我对小米 MiMo 的代码能力有了新的认识。

它不是一个"给你生成一堆代码片段你自己拼"的模型——它能理解需求、设计方案、实现算法、处理细节、输出文档，一条龙交付。

当然，它也不是完美的。Web Worker 的缺失、Undo/Redo 的遗漏，说明它在"高级工程实践"上还有提升空间。

但就这次测试而言：从一条 prompt 到一个可运行、可部署、可嵌入的完整 Web App，MiMo 的表现是 S 级的。

如果你也在做大模型编程能力的评测，推荐试试这个"像素画编辑器"项目——它足够复杂到暴露问题，又不至于复杂到让模型直接摆烂。

---

测试环境：OpenClaw + MiMo-v2.5-pro | 测试时间：2026-04-24 | 总耗时：约 15 分钟

项目源码：已打包为 pixel-art-studio.zip，Windows 环境解压后 npm install && npm run dev 即可运行。

源码下载地址：
通过网盘分享的知识：aiproject-pixel_art_converter
链接: https://pan.baidu.com/s/5wd-7fG12uLFjRaD3i0di9Q
–来自百度网盘超级会员v9的分享

---

关注我，看更多大模型实测。