如何用ClaudeCode，满足小红书爆火的营销策略

我做出的那个拼豆图纸生成器已经能跑通了：上传图片，选格数，点几下就能输出带色号的高分辨率图纸，基本可以直接用来拼。还有两个小毛病，滑块偶尔会出错，宽度调整后有时显示不全，但都被修掉了。说出来有点不可思议——从想法到有可用的 MVP，成本和时间都比想象中低许多。

先说结果是怎么达成的。起因是我在小红书刷内容时，发现许多人反复在评论区求一个能把照片转成拼豆图纸的工具。需求看起来零碎，但共性很明显：想把任意图案变成豆子能拼的像素画，并标注色号和用量。市面上有人做这种定制，单价几元，说明有付费意愿。于是我把这个当成一个小而确定的产品需求，决定用 AI Coding 的思路来验证。

倒着讲过程：最后一轮是修 bug。M2 生成的大体代码能跑，能把图片像素化、做色号映射、给每格标注编号并生成 BOM（物料清单）。但在使用中发现两个问题：宽度滑块调整后画布有显示不完全的情况，和图像微调滑块拖动时报错。把这两个问题的描述交给 Claude Code 后，让 M2 针对性地修复，几轮调用结束后，页面刷新，问题解决。整个修复过程很直观：把错误日志和重现步骤贴上去，AI 就会定位到异常分支并给出补丁。体验起来像在跟一个靠谱的同事来回改代码，而不是手动改每一行。

再往前是 M2 一次性生成主体代码的部分。我先把产品需求文档（PRD）一次性扔给 Claude Code，目标是做一个基于 Web 的拼豆图纸器，能所见即所得地预览和导出图纸。M2 在我提交的 PRD 指令下，自动安装依赖、生成前端项目、实现 Canvas 渲染逻辑、做到色号映射和导出功能。初版跑起来后，功能覆盖率大致在 80% 左右：上传、像素化、色号标注、BOM 列表、下载高清图纸这些核心功能都能用了。看着工具把一张 Chiikawa 的图转成拼豆图纸，我心里挺惊讶的，有点“就这？”的感觉，但实际效果已经够验证想法了。

再说我怎么把需求拆解清楚。开始做之前，我在小红书里把大量评论看了一遍。许多人把拼豆的需求当成简单的像素化处理，但真要落地，差别不少。三个关键点必须解决：一是实体豆子颜色是有限的，屏幕 RGB 连续的颜色必须被“吸附”到最近的实体色号上；二是网格密度要可调，不同成品尺寸需要不同格数，最好能实时预览，列如 30×30 与 100×100 的差异；三是整体色调要允许手动调节，像亮度、对比度这种微调可以让轮廓更明显。明确了这三点，我把它们写进 PRD 里，作为 AI 写代码的目标。

写 PRD 时也列了技术提议和数据结构，供 Agent 参考。提议用 React 或 Vue3 做前端，画布用 HTML5 Canvas 或 Konva.js，色彩匹配用 delta-e 之类的库来做准确比对，UI 用 Tailwind + Ant Design/MUI 提供滑块与按钮控件。数据结构上，核心是一个 BoardConfig（包括宽高、品牌色卡、是否抖动）和 PixelData（每个格子的坐标、hex、色号、名称、文字反色标志）。导出功能要把当前画布转成高分 PNG，并无视当前缩放级别以保证清晰度。还有物料清单（BOM），按颜色统计数量并能下载。写这些东西给 AI 后，它基本能按照思路去实现。

工具链和环境搭建也给出具体操作。Claude Code 的安装可以参考官方快速开始文档（
https://code.claude.com/docs/en/quickstart#
native-install-recommended），装好之后在终端里敲 claude –version 看版本号就能确认成功。把 MiniMax M2 接入 Claude Code，主要是设环境变量，例如：

export ANTHROPIC_BASE_URL=https://api.minimaxi.com/anthropicexport

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

这些命令会在当前终端会话里临时替换要用的模型，关掉窗口后需要重新设置。MiniMax 的 Coding Plan 可以在平台上订阅（
https://platform.minimaxi.com/subscribe/coding-plan），有几档可选，入门档首月 9.9 元就能用。实际体验下来，Starter 档对像我这种轻量级项目已经足够，三次 Prompt 都能跑出第一个版本。

实现细节方面，AI 写的渲染逻辑把画布分成网格，把每个单元格用对应的豆子颜色填充，并在格子中心写上色号。为了保证文字可读，代码里实现了根据背景亮度反色显示文本的函数，类似用 YIQ 或亮度阈值计算来决定显示黑字还是白字。缩放策略也做了：预览时隐藏色号文字，放大到必定比例才显示完整的施工信息。画布还有坐标轴和每 10 格一条的加粗辅助线，方便拼接和定位。导出逻辑把当前 Canvas 以高分辨率渲染并生成 PNG，导出时强制 100% 清晰度，避免下载时文字模糊。

色彩处理上，核心是把原图的连续色域映射到品牌色卡。实现方式是先把图片缩小到目标格数，再针对每个像素用 delta-e 或欧氏距离来选出最近的物理色号，然后统计用量生成 BOM。为了让颜色过渡更自然，加入了按需抖动（dithering）的选项；为了增强轮廓，增加了亮度/对比度/饱和度的微调控件，用户可以在像素化之后继续调整，再重新映射一次色号。网格密度用滑块控制，拖动时有防抖策略（列如 300ms）避免频繁重算造成卡顿，同时显示对应的物理尺寸估算（按豆子直径换算），便于用户权衡。

说到体验，M2 在一次性处理长文本 PRD、自动安装依赖和生成文件方面的表现还挺利索。那一次我把约千字的 PRD 直接丢进去，它分批调用工具、跑多个回合，最终把项目生成并启动了本地服务。那一刻感觉像把设计稿丢给一个能读懂需求并实现的助手。肯定不是完美——一些复杂场景下，海外顶级模型在架构设计和复杂系统时依旧更稳，但对于这类明确、规则化的非标小工具，现有的组合已经能快速验证想法。

除了拼豆，我还顺手做了另一个在小红书上常被请求的教学类小工具。目标是把空间几何里的体积公式变得直观，用 3D 演示来协助理解。给 M2 提示后，它用 react-three-fiber 做了一个演示页面，能动态堆叠方块，演示“铺满一行”“铺满一层”的逻辑，并且在界面上展示剩余空间的计算。实现过程比想象中简单，几轮提示就跑通了。看着一个教学需求从模糊的想法变成可以交互的演示，体验挺有意思。

整个过程的感受就是：目前的工具把开发门槛按得更低了，许多过去由于成本高、收益小而被忽略的细分需求，目前可以用很小的投入去试水。对于独立开发者或内容创业者来说，这类场景特别适合去做快速验证和小额变现。项目里的具体代码、数据结构、渲染思路和环境配置我都在开发时一并调试过，遇到报错时把终端日志贴给 AI，基本都能定位并给出解决方案。

本文的开发案例由我基于 Claude Code + MiniMax M2 实操复盘，作者：一泽Eze，原文/授权发布于人人都是产品经理，微信公众号：一泽Eze。题图来自 Unsplash，基于 CC0 协议。