Doocrafts 拼豆小程序
产品说明书 - 为拼豆爱好者打造的创作工具与图纸资源平台
项目基本信息
| 项目名称 | Doocrafts 拼豆小程序 |
| 产品形式 | 微信小程序（手机扫码即可使用，无需下载安装） |
| 品牌名称 | Doocrafts（暂定，后期可能替换） |
| 参考产品 | MARD 拼豆助手小程序 |
| 文档版本 | v1.0（初版） |
| 日期 | 2026-04-23 |
一、为什么要做这个小程序
1.1 目前遇到的问题
Doocrafts 已在淘宝、抖音、小红书等平台开设店铺，有自己的客户群。但目前存在这些问题：
- 客户买了材料没有配套工具：客户购买拼豆后，做图纸只能去用别人家的工具（如 MARD 拼豆助手），客户容易被竞品吸引走
- 教程和图纸太分散：图纸资源、烫豆教程散落在各个平台，没有一个统一的入口让客户找到
- 客户缺色补货不方便：客户在做拼豆时发现缺某个颜色，需要重新打开淘宝搜索，购买路径太长
1.2 为什么现在做
- 拼豆市场在持续增长，年轻人越来越喜欢手工 DIY
- 竞品 MARD 已经证明"小程序+编辑器+图纸+电商"模式走得通，但他们体验还有很大提升空间
- 我们已有客户基础和图纸资源，具备启动条件
- 经评估，在线编辑器在微信小程序中完全可以实现
二、想要达成什么
| 目标 | 具体说明 | 怎么衡量 |
|---|---|---|
| 增强客户粘性 | 给客户一个好用的在线画图工具，让他们离不开我们 | 上线 3 个月，20% 的老客户开始用 |
| 聚合图纸资源 | 把图纸都放在小程序里，让客户来这里找图 | 每次打开平均停留 5 分钟以上 |
| 带动店铺销售 | 客户在小程序里就能一键跳转到店铺买材料 | 首页店铺区域的点击率 > 15% |
| 体验超过竞品 | 编辑器比 MARD 更好用、更好看 | 编辑器功能使用率 > 30% |
| AI 生图差异化 | 独家 AI 智能生图功能，用文字或图片就能自动生成拼豆图纸 | 上线后持续优化 |
三、谁会来用
3.1 典型用户
| 用户类型 | 他们是谁 | 他们想要什么 | 什么时候用 |
|---|---|---|---|
| 拼豆新手 | 20-35岁，刚接触拼豆，从我们店铺买了入门套装 | 找到好看的图纸，学会怎么烫豆 | 晚间/周末在家，照着图纸做第一件作品 |
| 进阶玩家 | 有一定经验，喜欢自己设计图案 | 用编辑器画原创图纸，把照片转成拼豆图 | 通勤时手机上画草图，回家后对照制作 |
| 资深爱好者 | 经验丰富，追求大尺寸/高难度作品 | 镜像、降噪等高级功能，大画布 | 长期项目，需要随时保存进度 |
| 家长/亲子 | 为孩子找手工活动素材 | 简单可爱的图纸，操作门槛低 | 周末和孩子一起做拼豆 |
3.2 新手第一次使用的完整路径
发现
收到拼豆材料包裹，里面附了小程序二维码
扫码打开 Doocrafts 小程序
"这个小程序是做什么的？"
浏览
看到首页有教程和图纸入口
点进去看看
"原来还有这么多教程和图纸"
学习
看烫豆教程视频，了解基础技巧
看看常见问题解答
"看起来不难，我也能做！"
选图
去图纸相册里浏览不同分类
找到一个喜欢的图案
"好多好看的图纸，选哪个呢"
创作
把图纸导入编辑器，或直接保存到手机
对照图纸一颗一颗放豆子
"太解压了，好有成就感"
补货
发现缺某个颜色
点一下就能跳到店铺下单
"直接就能补货，太方便了"
3.3 进阶玩家的使用路径（原创设计）
灵感
日常看到一张想做成拼豆的图片
"这个图做成拼豆一定很酷"
导入
打开编辑器，选择"图片转像素"或让 AI 帮忙生成
"看看转出来效果怎么样"
编辑
调整颜色、修改细节、用降噪让画面更干净
"一点一点调整，越来越好看"
导出
保存图纸到手机相册
"我的原创图纸！"
四、功能一览
| 页面 | 功能 | 说明 |
|---|---|---|
| 首页 | 品牌展示 | 展示 Doocrafts 品牌 Logo 和标语 |
| 店铺引流 | 展示店铺信息和热销商品，点击可跳转到淘宝/抖音/小红书店铺 | |
| 视频教程 | 拼豆入门教程视频，点击可跳转观看 | |
| 常见问题 | 烫豆技巧、材料区别等常见问题解答 | |
| 工具入口 | 开始创作 | 品牌展示 + 一个大按钮"开始创作"，点击进入编辑器 |
| 编辑器 | 画布 | 可自由设置尺寸的网格画布，支持缩放和拖动 |
| 画图工具 | 画笔、擦除、取色、选区、替换颜色、镜像翻转、降噪等 | |
| 色板 | 完整的拼豆色号库（200+ 色），支持搜索 | |
| 图片导入 | 3 种方式：普通图片转像素 / 像素图智能解析 / AI 智能生图 | |
| AI 智能生图 | 用文字描述或上传参考图，AI 自动生成拼豆图纸（独家功能） | |
| 撤销 / 重做 | 随时撤回操作，支持多步撤销 | |
| 视图控制（8 个开关） | 显示网格、叠加原图对照、查看原图、像素还原预览、显示色号、显示标尺、专注模式、透明背景 | |
| 导出保存 | 保存图纸到手机相册，编辑中自动保存草稿 | |
| 图纸相册 | 分类浏览 | 按动物、卡通、食物、节日等分类查看图纸（V1.0 全部免费） |
| 图纸详情 | 预览图纸、保存到手机、或直接导入编辑器修改 | |
| 我的 | 个人信息 | 用户头像、昵称、微信一键登录 |
| 设置 | 多语言切换、账户管理 |
五、首页
效果预览 - 首页
品牌展示区
- 左上角展示品牌 Logo 和名称"Doocrafts"
- 品牌标语"用拼豆创造你的世界"（可在后台更改）
店铺引流卡片
- 显示店铺名称、评分、粉丝数
- 平台入口按钮：淘宝、抖音、小红书（点击跳转到对应店铺）
- 热销商品横向滑动展示，显示商品图片和价格，点击可跳转购买
- 所有店铺信息和商品在后台配置，随时可以更换
视频教程入口
- 教程封面图 + 播放按钮 + 标题
- 点击跳转到外部视频平台观看（教程链接后台配置）
常见问题
- 常见问题列表，如"怎么烫出完美无孔？""做立体拼豆应该怎么烫？"等
- 底部"查看更多教程"按钮，点击跳转教程页面
- 所有问题内容后台可配置
六、工具入口
效果预览 - 工具入口
- 页面中心显示品牌 Logo + 名称 + 副标题"专业的在线像素画创作工具"
- 一个醒目的"开始创作"按钮
- 点击按钮进入编辑器
- 页面上有浮动的拼豆装饰元素，营造手作氛围
七、像素画编辑器（核心功能）
效果预览 - 编辑器
效果预览 - 导入 & AI 智能生图
页面整体结构（从上到下）
- 顶部：品牌 Logo + 导入按钮 + 导出按钮
- 画布尺寸设置：可以调整画布宽高，也有预设尺寸快选
- 视图控制栏：8 个开关按钮（横向滑动），控制画布的各种显示方式
- 画布区域：中间最大的区域，用来画像素画，支持手指缩放和拖动
- 色板面板：画布下方，显示全部拼豆颜色，可以搜索
- 底部工具栏：各种画图工具，横向滑动选择
画布
- 默认 50x50 格，也可以选择预设尺寸（29x29、58x58 等），或自由输入
- 网格线帮助对齐，粗线标记拼豆板分区位置
- 单指操作当前工具，双指缩放/移动画布
- 编辑中自动保存，不用担心丢失进度
视图控制（8 个开关）
位于画布上方，每个都是可以点击打开/关闭的小按钮：
| 开关 | 干什么用 |
|---|---|
| 显示网格 | 打开/关闭画布上的网格线 |
| 叠加视图 | 把导入的原始图片半透明叠在画布上，方便你对照着调整颜色 |
| 查看原图 | 临时显示导入前的原始图片，方便和编辑后的效果做比较 |
| 像素还原 | 把画布切换成纯色块显示（没有间隙和圆角），预览拼完后的实际效果 |
| 显示色号 | 在每个格子里显示对应的拼豆色号（如 A5），方便你按色号找豆子 |
| 显示标尺 | 在画布上方和左侧显示行列数字，方便数格子定位 |
| 专注模式 | 隐藏顶部栏和底部工具栏，让画布占满整个屏幕，安静画图 |
| 透明背景 | 没有上色的格子显示为棋盘格（透明效果），而不是默认的白色 |
工具说明
| 工具 | 作用 |
|---|---|
| 拖动 | 移动画布位置 |
| 画笔 | 点击或滑动给格子上色 |
| 擦除 | 点击或滑动清除颜色 |
| 取色 | 点一下画布上已有的颜色，自动切换到该颜色 |
| 选区 | 框选一块区域，可以移动、复制或删除 |
| 替换 | 把画面上某个颜色一键全部换成另一个颜色 |
| 镜像 | 左右或上下镜像翻转 |
| 降噪 | 自动清除画面中零散的噪点，让图案更干净 |
| 删色 | 把某个颜色从画面中完全移除 |
色板
- 包含 200+ 种拼豆标准色号，按色系排列
- 可以切换查看"全部颜色"或"已使用的颜色"
- 支持按色号或颜色名搜索（如搜"红"或"A11"）
- 点击选中颜色后，用画笔工具就可以画出该颜色
图片导入（3 种方式）
点击顶部"导入"按钮，会弹出选择面板，提供以下 3 种导入方式：
| 方式 | 什么意思 | 适合什么场景 |
|---|---|---|
| 图片转像素图 | 选一张手机里的照片或图片，自动转换成拼豆图纸，颜色会匹配标准色号 | 把任何照片、插画变成拼豆能做的图纸 |
| 智能解析 | 导入一张已经是像素风格的图片，自动识别网格并匹配色号 | 网上找到别人的像素图或拼豆成品图，想还原成可编辑的图纸 |
| AI 智能生图 | 用文字描述或上传参考图，AI 帮你直接生成拼豆图纸（我们的独家功能） | 脑子里有个想法但没有图，让 AI 帮你画出来 |
AI 智能生图 — Doocrafts 独家功能
这是我们和 MARD 最大的差异化卖点。点击导入面板中的"AI 智能生图"后，会进入 AI 生图面板，提供两种方式：
AI 生图方式一：文字描述
- 在输入框中用文字描述你想要的图案，例如"一只可爱的柯基犬，像素风格"
- 选择画布尺寸（29x29 / 50x50 / 58x58）
- 点击"生成"，等几秒钟，AI 就会生成对应的拼豆图纸
- 生成完毕后自动进入编辑器，你还可以继续调整修改
AI 生图方式二：上传参考图
- 上传一张参考图片（比如一张卡通图、照片等）
- 选择画布尺寸
- AI 会把参考图转换成拼豆风格的像素画，效果比普通"图片转像素"更好
两种方式之间用"或者"分割，用户任选其一。
AI 生图的特点
- 颜色自动匹配：生成的图纸颜色都是标准拼豆色号，可以直接买材料制作
- 严格遵守尺寸：生成结果完全符合你选择的画布大小
- 等待时间短：大约 3-10 秒即可完成
- 生成后可编辑：不满意的地方可以在编辑器中继续修改
八、图纸相册
效果预览 - 图纸相册
效果预览 - 图纸详情
分类浏览
- 顶部有分类标签：全部、动物、卡通、食物、节日、游戏、建筑等
- 点击分类查看对应图纸
- 右上角有搜索功能，可以按关键词搜索
- V1.0 版本所有图纸全部免费，后续版本会增加会员分级
图纸详情
- 点击某个分类进入详情，看到该分类下所有图纸
- 每张图纸显示预览图、名称和文件大小
- 可以：预览大图、保存到手机相册、或直接导入编辑器修改
九、我的
效果预览 - 我的
用户信息卡片
- 顶部暖色渐变卡片，显示头像、昵称和用户 ID
- 首次进入会提示微信授权登录
设置项
| 功能 | 说明 |
|---|---|
| 多语言 | 支持中文和英文切换 |
| 账户 | 显示登录状态，管理账户信息 |
十、特殊情况处理
以下列出了用户可能遇到的异常情况，以及小程序会如何处理：
| 情况 | 什么时候会发生 | 怎么处理 |
|---|---|---|
| 断网了 | 用户使用过程中网络中断 | 编辑器可以继续离线使用，其他页面显示已缓存的内容，并提示"网络异常" |
| 图纸库是空的 | 某个分类还没有上传图纸 | 显示友好的空状态图片和"暂无图纸，敬请期待" |
| 图片导入失败 | 图片太大或格式不对 | 弹出提示告诉用户原因，引导换一张图 |
| 画布尺寸太大 | 用户输入了超大的数字 | 自动限制最大 100x100，超出会提醒 |
| 手机存储不够 | 保存了太多草稿 | 提示用户清理旧草稿 |
| 没给相册权限 | 想保存图片但没授权 | 引导用户到设置里开启权限 |
| 店铺链接失效 | 后台配置的链接过期了 | 显示"内容暂不可用"，不会出现白屏 |
| AI 生图失败 | 网络问题或服务繁忙 | 提示"生成失败，请稍后重试"，用户已输入的内容不会丢失 |
十一、设计风格
整体设计方向
- 品牌感觉：温暖 / 手作 / 亲切，像一个温馨的手工工坊
- 配色：暖色调为主（珊瑚色、杏色、柔和的橙色），底色用奶油白/沙色
- 风格：明亮通透，留白充足，看着舒服不拥挤
- 装饰：各页面会有小拼豆元素点缀，增加可爱感和品牌辨识度
不要做成什么样
- 不要像拼多多/淘宝那样有促销感、电商味太重
- 不要太冷淡、太有科技感（我们是手作品牌不是科技公司）
- 不要太幼稚低龄化，可爱但要有品质感