如何使用AI Coding Agent开发爆款小红书拼豆工具？

1. 为什么选择小红书作为AI开发的灵感来源？

我最近沉迷于刷小红书，发现它是一个巨大的“非标需求许愿池”。不同于传统的应用商店，小红书上的用户需求非常细碎且具体，例如有人想把喜欢的IP图案做成拼豆，却苦于无法将照片转换为对应的像素图案和豆子颜色。这些看似微小的需求，实际上蕴藏着巨大的市场潜力。在淘宝上，甚至有人专门做拼豆图纸定制的生意，单价5-10元，也有不少人买单。这些单点、零散的需求，可谓是给 AI Coding 量身定做的场景。

2. 为什么AI Coding适合解决这些细碎的需求？

传统的软件开发需要庞大的后端支持和复杂的开发流程，而现在有了 Coding Agent，即使是十几分钟，也能搓出解决这些特定需求的工具，快速验证灵感。MiniMax推出了自己的 Coding Plan，首月只需9.9元，就能用上 OpenRouter 调用量位居前三的 M2模型。我选择了 Claude Code + MiniMax M2 的方案，为拼豆爱好者开发了一个好用的工具。本文将复盘这个从“需求洞察”到“低成本落地”的 AI开发全过程。

3. 开发拼豆工具的核心需求是什么？

在着手开发之前，我集中刷了几轮评论区，发现大多数人以为这只是一个图片像素化的任务，但实际上，直接将图片缩小马赛克化，用户是没法用的。要让拼豆爱好者真正用起来，需要考虑以下三个要点：

3.1 现实拼豆的色号有限

屏幕上的 RGB 色彩是连续的，但现实中的豆子只有固定的几十种颜色。因此，必须将照片色彩“吸附”到接近的实体色号上。例如，将图片中的某种红色，自动匹配到最接近的拼豆红色。

3.2 像素颗粒度需要自定义

不同的物理尺寸（挂件、杯垫、挂画等）对应着不同的网格密度。用户需要一个滑动条，能实时预览 30×30（粗糙但好拼）和 100×100（精细但耗时）的区别，从而更好地平衡“还原度”与“工作量”。

3.3 整体色调的微调

由于实体豆子的色域远小于屏幕，直接转换可能导致对比度不足（比如轮廓的豆子边界不清晰）。因此，需要允许用户在像素化之后，手动调节图纸的亮度、对比度，稍微拉高一点对比度，转换出来的“豆子画”轮廓才会清晰。

4. 如何配置Coding Agent？

我选择了 Claude Code + MiniMax M2 的组合。配置过程如下：

4.1 安装Claude Code

Claude Code 很好用，之前的文章也多次介绍过安装方法。安装过的读者可以直接跳到下一步。按照官方安装指引完成 Claude Code 安装。遇到问题可以将 Prompt 发送给任意 AI，让它一步步教你。也可以直接问 AI，“我是 Mac/ Windows 电脑，我的终端怎么打开”。在终端里输入 `claude –version`，看到版本号，则安装成功。

4.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，可以到官方网站获取。

Coding Plan 分为 3 档：9.9（首月）/ 49 / 119，每 5 小时提供 40 / 100 / 300 次 Prompt 额度。大概是 Claude 原本模型的 8% 价格，整体 TPS > 100，实际体感生成速度很快。轻量任务选择 Starter 就行。我的拼豆任务选择了 Starter 档，3 次 Prompt 跑完了第一个版本。发送上述指令后，如果看到下图信息，就算成功了。

5. 如何使用PRD进行AI Coding？

环境搭好后，我尝试了更专业的 Coding 玩法：给出完整的 PRD，让 M2 尽可能一次成型。

5.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.,#FF0000)
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): 控制面板 + 物料清单。
*背景色: 浅灰/白色 (`#F9FAFB`)。
*阴影: 右侧轻微阴影，营造层级感。
*右侧 (Flex-1): 画布区域。
*背景色: 深灰 (`#E5E7EB`或`#374151`)，让明亮的拼豆图纸更显眼。
*画布居中显示，四周留白。
### 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) ? '#000000' : '#FFFFFF';
}

5.2 M2根据PRD进行生成

我把这份长达 1000 字的 Coding PRD 丢进了 Claude Code 的对话框。M2 开始根据指令，自动安装项目依赖，并按代码逻辑，一次性编写画板代码、色板参数等等程序文件。在一次 Prompt 之下，M2 一次性进行了 49 轮的工具调用与执行，自动完成了项目开发，得到了项目文件，并自动启动了服务。

测试当下最火的 Chiikawa IP 的图，整个 M2 生成的工具，其转化拼豆的效果大概是这样的：One Shot 的完成度说是完成了 80% 也不为过：能上传图片，也能像素化得到目标图纸，并在每个像素上标明色号。

6. M2的Bug修复能力如何？

我发现存在两个 Bug：宽度调整滑块调整后，图片会有显示不全的情况；以及图像调整的滑块拖动时会报错。我继续让 M2 进行问题修复，Prompt 也比较简单，<问题描述>+请修复 bug。

M2 的长上下文记忆与遵循都不错，一次性就完成了修复，刷新页面，问题解决。得到了完全可用的拼豆工具 MVP。整个过程，Agent-Driven development，一行代码都不需要写。对于这类轻盈、直接的垂直场景需求，在 Coding Agent 的加持下，验证解决的成本已经无限趋近于零。

7. Coding Agent还能做什么？

在拼豆之余，我还顺手搓了一类在小红书上呼声很高的教学小工具。以数学教学为例，我让 M2 做了一个体积公式推导的教学演示网页。这类需求的痛点在于，老师在教空间几何时，哪怕是 V=长×宽×高 这类公式，想让孩子理解，也因为抽象而很难教学。在实际测试中，通过小几轮 Prompt 提示，M2 就完成了 react-three-fiber 库的调用，来处理 3D 渲染，实现了方块的顺序堆叠。连“铺满一行”、“铺满一层”这种动态计算剩余空位，略模糊的演示逻辑，也都跑通了。

8. 总结：细碎的需求终被看见

回顾整个开发体验，MiniMax M2 在 Claude Code 上的表现，在处理极度复杂的系统架构时，海外顶级模型，依然有不可替代的上限优势。但是，世界的另一面往往被我们忽视了。翻看小红书的评论区，你会看到人类需求更加细碎、具体、且非标的一面。这些需求的技术门槛其实并不高，但过去因为开发成本与回报周期的问题，往往也没人去解决。而现在，MiniMax 的 Coding Plan + Claude Code 的组合，给 AI Coding 提供了新的入门方案。不需要懂代码，就能上手 AI 开发，意味着我们终于有能力回应曾经因为不划算，而被放弃的小众需求。对于独立开发者来说，这就是最好的时代：工具足够便宜，而需求漫山遍野。

我认为：AI 技术的进步，让我们能够以更低的成本去满足那些曾经被忽视的细碎需求，这不仅为独立开发者带来了新的机遇，也让更多人的创意和想法得以实现。就像鲁迅先生说的：“真的猛士，敢于直面惨淡的人生，敢于正视淋漓的鲜血。”我们也要敢于直面这些细小的需求，用 AI 技术为他们带来改变。

#AgentDrivenDevelopment