你也能用 Claude+MiniMax M2，做小红书爆火的拼豆工具|画布|画板|key|新模型|知名企业

分享至

最近，我越来越沉迷刷小红书了。

倒不是为了看猫狗视频，而是作为 AI 开发者，看到了一个未被充分挖掘的“非标需求许愿池”。

在这个推荐流里，你会发现人类的需求是如此细碎且具体：

有人想把喜欢的 IP 图案做成拼豆，但苦于无法将照片匹配为对应的像素图案与豆子颜色。

也有上万人在求助各种可视化图表的制作方法。

每一个火热的评论区背后，可能都藏着一个还没被满足的小工具机会。

在淘宝上，甚至有人专门做拼豆图纸定制的生意，单价 5-10 元，也有不少人买单。

这些单点、零散的需求，可谓是给 AI Coding 量身定做的场景。

不用庞大的后端，现在的 Coding Agent，甚至只需要十几分钟，就能搓出解决需求的工具，验证一下灵感。

刚好 MiniMax 也推出了自己的 Coding Plan，首月 9.9 元，就能用上前段时间 OpenRouter 调用量位居前三的 M2 模型。

我以 Claude Code + MiniMax M2 的方案，为这个爆火的圈子，开发了一个好用的拼豆工具。

接下来，我将通过本文，复盘这个从「需求洞察」到「低成本落地」的 AI 开发全过程。

先梳理一下需求

在着手做之前，我又去集中刷了几轮评论区，发现一个问题：

大多数人（包括我一开始）以为这只是一个图片像素化的任务。

但实际上，如果直接把图片缩小马赛克化，用户是没法用的。

真想让拼豆爱好者能够用起来，有三个要点：

1.现实拼豆的色号有限：
屏幕上的 RGB 是连续的，但现实中的豆子一般只有固定的几十种颜色。
所以只是在像素化后，简单对应 RGB 颜色，远远不够。须将照片色彩，“吸附”到接近的实体色号上。
2.像素颗粒度需要自定义：不同的物理尺寸（常见的拼豆有挂件、杯垫、挂画等），对应着不同的网格密度。用户对同一张画的尺寸大小是不同的，如果有一个滑动条，能实时预览 30x30（粗糙但好拼）和 100x100（精细但耗时）的区别，就能更好取舍“还原度”与“工作量”。
3.整体色调的微调：由于实体豆子的色域远小于屏幕，直接转换也可能对比度不足（比如轮廓的豆子边界不清晰）。所以，必须允许用户在像素化之后，手动调节图纸的亮度、对比度。有时稍微拉高一点对比度，转换出来的“豆子画”轮廓才会清晰。

明确了这三个核心需求，MVP 需求就清晰了。接下来配置 Coding 模型，进入到真正的开发环节。

工具栈配置

在 Coding Agent 的配置上，我们这次选择的是 Claude Code + MiniMax M2 的组合。

整个配置过程也很简单：

1️⃣ 安装 Claude Code

Claude Code 很好用，往期文章也 3 次介绍过安装方法（计数君上线了）。安装过的读者，请走起到下一步。

打开自己电脑里的「终端/命令行」工具：

遵循官方安装指引 https://code.claude.com/docs/en/quickstart-install-recommended，完成 Claude Code 安装。

不太懂？没关系，把 Prompt，发送给任意 AI，就能让它一步步教你。

参考以下信息，一步步指导我在【Mac/windows/linux】终端中安装该程序：【此处粘贴替换为上面链接里的安装指引文本】
当我遇到疑惑或报错时，我会把终端的日志发给你，请帮我解决。

遇到报错就截图给它，基本都能解决。

当然也可以问问 AI，“我是 Mac / Windows 电脑，我的终端怎么打开”。

安装后，终端里输入claude --version，看到版本号，则安装成功。

2️⃣ 配置 Minimax-M2 模型

在此之前，建议养成建立项目文件夹的好习惯：比如叫 test，再在终端内切换到对应文件目录。

这能把 Claude Code 的 AI 行动，限定在该目录，减小对本地电脑其他文件的影响。

然后，替换 MiniMax-M2 模型，可以在终端内输入：

export ANTHROPIC_BASE_URL=https://api.minimaxi.com/anthropic
export ANTHROPIC_AUTH_TOKEN=【换成你的API KEY】
export ANTHROPIC_SMALL_FAST_MODEL=MiniMax-M2
export ANTHROPIC_DEFAULT_SONNET_MODEL=MiniMax-M2
export ANTHROPIC_DEFAULT_OPUS_MODEL=MiniMax-M2
export ANTHROPIC_DEFAULT_HAIKU_MODEL=MiniMax-M2
claude

该操作在当前终端窗口中，将要用的模型临时改为目标模型。（关掉该窗口后，则需再次发送该命令，重新指定模型 API 与 Key）

MiniMax Coding Plan 的 API Key，可以到 https://platform.minimaxi.com/user-center/payment/coding-plan 获取。

Coding Plan 总共有 3 档，分别是 9.9（首月）/ 49 / 119 ，每 5 小时提供 40 / 100 / 300 次 Prompt 额度。

大概是 Claude 原本模型的 8% 价格，整体 TPS > 100，实际体感生成速度很快。

开始前记得在这里订阅套餐 https://platform.minimaxi.com/subscribe/coding-plan

轻量任务选 Starter 就行。作为参考，像我这个拼豆任务，就选了 Starter 档，3 次 Prompt 跑完了第一个版本。

发送上述指令后，如果看到下图信息，就算成功了：

正式开发

环境搭好，接下来就是见证“AI Coding 求求了，一次性生成成功吧”的时刻。

M2 宣称有极强的长文本处理，以及在复杂任务中的自我纠错和任务恢复能力。

所以我也尝试了更加专业的 Coding 玩法：给出完整的 PRD，让它尽可能一次成型。

1️⃣ 准备给 Agent 看的 PRD

在之前的需求梳理环节，我们已经理出了核心要实现的需求目的：实体色彩吸附、自定义像素大小、支持色彩微调。

我和 AI 提示了几轮，得到了这份专给 Coding Agent 看的 PRD 需求文档：

# 产品需求文档 (PRD): PixelBead Studio
目标: 构建一个基于Web的高性能拼豆图纸生成器，专注于所见即所得的图纸可视化体验。

 ---

 ## 1. 技术栈推荐 (Tech Stack)
为了保证高性能渲染（特别是50x50以上的大图纸），建议 AI 采用以下技术栈：
*   前端框架: React 或 Vue3 (用于状态管理)。
*   图形渲染: HTML5 Canvas API (必须使用，避免DOM渲染导致的卡顿) 或 `Konva.js`。
*   色彩处理: `delta-e` (库) 用于精确的色彩匹配算法。
*   UI组件库: Tailwind CSS (布局) + Ant Design/MUI (滑块、按钮等交互组件)。

 ---

 ## 2. 核心数据结构 (Data Structures)
AI在编码时应维护以下核心状态：

 ```typescript
// 拼豆画板配置
interface BoardConfig {
  width: number;  // 横向格数 (e.g., 50)
  height: number; // 纵向格数 (自动计算)
  brand: 'perler' | 'artkal_s' | 'artkal_c'; // 品牌色卡
  dithering: boolean; // 是否开启抖动算法(让颜色过渡更自然)
}

 // 单个像素点数据
interface PixelData {
  x: number; // 列坐标
  y: number; // 行坐标
  hex: string; // 渲染用的颜色 (e.g., )
  code: string; // 品牌色号 (e.g., P05)
  name: string; // 颜色名称 (e.g., Red)
  isLight: boolean; // 背景是否为亮色 (用于决定文字是用黑还是白)
}

 // 色卡定义结构 (需预置JSON)
type ColorPalette = {
  [code: string]: { hex: string; name: string; brand: string }
}
```

 ---

 ## 3. 详细功能模块 (Functional Specs)

 ### 3.1 画布交互区 (The Canvas) - 核心体验
目标：实现类似工程图纸的精细查看体验。

 *   渲染逻辑:
    *   绘制网格：每个单元格代表一颗豆子。
    *   背景色：填充对应的豆子颜色。
    *   色号文字：在每个格子中心绘制色号（如 "P05"）。
        *   文字反色算法：计算背景亮度的感知值（YIQ），背景深则字白，背景浅则字黑。
    *   坐标轴：
        *   顶部 X轴：显示 1, 2, 3... N。
        *   左侧 Y轴：显示 1, 2, 3... M。
    *   辅助线：每 10x10 个格子，绘制一条加粗的粉色或青色线条，模拟大方板的拼接缝。

 *   交互逻辑 (Zoom & Pan):
    *   缩放策略：
        *   Zoom < 50%: 隐藏色号文字，只显示颜色块（预览模式）。
        *   Zoom >= 50%: 显示完整色号文字（施工模式）。
    *   支持鼠标滚轮缩放，按住空格+鼠标左键拖拽画布。

 ### 3.2 设置侧边栏 (Sidebar Settings)
*   图片上传:
    *   支持 Drag & Drop。
    *   加载后自动进行首轮处理。
*   尺寸控制 (Slider):
    *   组件：滑块 (Range Slider)。
    *   范围：10px 到 150px (指宽度的格子数)。
    *   实时反馈：拖动滑块时，防抖（Debounce 300ms）触发重新计算，避免卡顿。同时显示预估物理尺寸（按5mm豆子计算，如 "50格 ≈ 25cm"）。
*   色彩调整:
    *   亮度/对比度/饱和度微调（在像素化之前处理原图）。
    *   品牌选择（Perler/Artkal）。

 ### 3.3 统计与导出 (Export)
*   物料清单 (BOM):
    *   在侧边栏下方显示：色块预览 | 色号 | 颜色名 | 数量。
    *   支持按数量降序排列。
*   图片导出:
    *   按钮："下载高清图纸"。
    *   逻辑：将当前的 Canvas（包含坐标轴、网格、文字）转换为高分辨率 PNG/JPG 下载。
    *   *注意*：导出时忽略当前的缩放级别，强制以 100% 清晰度渲染所有文字。

 ---

 ## 4. UI/UX 设计规范 (Design Guidelines)

 为了提供优秀的用户体验，请 AI 遵循以下界面布局和配色规范：

 ### 4.1 布局结构 (Flex/Grid)
采用 "左控右显" 或 "左显右控" 的经典布局：
*   左侧 (300px - 350px): 控制面板 + 物料清单。
    *   背景色: 浅灰/白色 (``)。
    *   阴影: 右侧轻微阴影，营造层级感。
*   右侧 (Flex-1): 画布区域。
    *   背景色: 深灰 (`` 或 ``)，让明亮的拼豆图纸更显眼。
    *   画布居中显示，四周留白。

 ### 4.2 视觉细节
*   字体: 使用等宽字体（Monospace，如 Roboto Mono 或 Consolas）渲染图纸上的坐标和色号，确保对齐整洁。
*   加载状态: 当算法正在计算像素化时（这是一个耗时操作），必须在画布区域显示 Loading Spinner。
*   空状态: 未上传图片时，画布区域显示虚线框提示 "拖拽图片至此或点击上传"。

 ### 4.3 智能反色代码逻辑 (参考)
AI 在编写渲染函数时，应使用类似以下的 Helper 函数：

 ```javascript
function getContrastColor(hex) {
    const r = parseInt(hex.substr(1, 2), 16);
    const g = parseInt(hex.substr(3, 2), 16);
    const b = parseInt(hex.substr(5, 2), 16);
    // 计算亮度 (YIQ)
    const yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
    // 阈值通常设为 128，返回白色或黑色字体颜色
    return (yiq >= 128) ? '' : '';
}
```

当然，这也是直接可以发给 AI 的 Prompt 了。

2️⃣ 让 M2 根据 PRD 进行生成

我把这份长达 1000 字的 Coding PRD，一股脑丢进了 Claude Code 的对话框。

M2 开始根据指令，自动安装项目依赖

并按代码逻辑，一次性编写画板代码、色板参数等等程序文件：

在一次 Prompt 之下，M2 一次性进行了 49 轮的工具调用与执行，自动完成了项目开发，得到了这么一个项目文件：

并自动启动了服务：

我测试了一下当下最火的 Chiikawa IP 的图：

整个 M2 生成的工具，其转化拼豆的效果大概是这样的：

One Shot 的完成度说是完成了 80% 也不为过：

能上传图片，也能像素化得到目标图纸，并在每个像素上标明色号。

3️⃣ M2 的 Bug 修复能力

不过也有 2 个 Bug，宽度调整滑块调整后，图片会有显示不全的情况；以及图像调整的滑块拖动时会报错。

所以继续让 M2 进行问题修复，Prompt 也比较简单， <问题描述> +请修复 bug。

1. 滑块控制使用时，会报错失败，解决这个问题
2. 宽度调整滑块调整后，图片会有显示不全的情况，请修复 bug

所幸 M2 的长上下文记忆与遵循都不错，一次性就完成了修复，

刷新页面，问题解决。

得到了以下这个完全可用的拼豆工具 MVP：

整个过程，Agent-Driven development，一行代码都不需要写。

对于这类轻盈、直接的垂直场景需求，在 Coding Agent 的加持下，验证解决的成本已经无限趋近于零。

另外，在拼豆之余，我还顺手搓了一类在小红书上呼声很高的教学小工具。

以数学教学为例，我让 M2 做了一个体积公式推导的教学演示网页。

这类需求的痛点在于，老师在教空间几何时，哪怕是 V=长×宽×高这类公式，想让孩子理解，也因为抽象而很难教学。

在实际测试中，通过小几轮 Prompt 提示， M2 就完成了 react-three-fiber 库的调用，来处理 3D 渲染，实现了方块的顺序堆叠。

连“铺满一行”、“铺满一层”这种动态计算剩余空位，略模糊的演示逻辑，也都跑通了。

写在最后：细碎的需求终被你我看见

回顾整个开发体验，如果你问我 MiniMax M2 在 Claude Code 上的表现如何？

我会诚实地说，在处理极度复杂的系统架构时，海外顶级模型，依然有不可替代的上限优势。

但是，世界的另一面往往被我们忽视了。

翻看小红书的评论区，你会看到人类需求更加细碎、具体、且非标的一面。

这些需求的技术门槛其实并不高，但过去因为开发成本与回报周期的问题，往往也没人去解决。

而现在，MiniMax 的 Coding Plan + Claude Code 的组合，给 AI Coding 提供了新的入门方案。

不需要懂代码，就能上手 AI 开发，意味着我们终于有能力回应曾经因为不划算，而被放弃的小众需求。

对于独立开发者来说，这就是最好的时代：

工具足够便宜，而需求漫山遍野。

希望本文能对你有所启发，记得关注～

也感谢你的点赞与分享：)

特别声明：以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布，本平台仅提供信息存储服务。

Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.