前几贴链接防迷路：
- 看到有 V 友做了拼豆站，手痒也 Vibe Coding 了一个拼豆图纸生成器
- Update 昨天发完帖后，我把拼豆生成器做上头了：画廊、在线编辑、用户系统全搞定
- 接了阿里百炼大模型，一键提取线稿平涂，解决原图转像素的痛点
我又来了（这已经是第四更了，再次感叹 Vibe Coding 真的太容易上头了，每天都在疯狂爆肝重构）。
上一版我用 AI 视觉模型解决了“底图转像素杂乱”的问题后，我自己试着照着生成的图纸拼了一次，结果发现：看图纸依然是个很折磨人的体力活！
在手机或平板上看一张静态的 PNG 图片，放大之后很容易找不到自己拼到哪一行了。尤其是当你手里拿着某一种颜色的豆子，想一口气把这个颜色的区域全拼完时，要在密密麻麻的格子里找同一种颜色，眼睛都要瞎了。
为了解决这个“落地实操”的最后一百米痛点，这几天我直接把详情页的底层渲染逻辑给重写了，做了一个全沉浸式的交互工作台：
1. 终极杀手锏：色票“聚光灯”高亮模式
现在图纸右侧会展示当前图案使用的所有色号列表。当你点击或悬浮在某个色票上时，神奇的事情发生了——画布上所有不相关的拼豆都会瞬间降到只有 15% 的透明度，变成浅浅的水印背景。 而你选中的那种颜色会保持 100% 实体高亮！就像聚光灯打在上面一样。 这个功能简直是带 iPad 去线下手工店（或者自己在家撸豆子）的神器。你只需要选一种颜色，照着高亮的地方无脑放豆子就行，绝对不可能看错眼！
2. 100% 沉浸式宽屏 & 吸顶坐标轴
我干掉了之前拘谨的卡片布局，现在的图纸工作台是 100% 撑满浏览器宽度的。 更重要的是，我给图纸加上了 Sticky (吸顶) 坐标轴。不管你怎么放大、怎么拖拽图纸，最外圈的行号和列号永远死死钉在屏幕边缘，彻底告别“数格子数到迷路”。
3. 移动端/iPad 专属手势适配
之前在手机上浏览图纸效果很拉垮，这次我专门写了原生的 Touch 事件监听：
- 单指拖拽：顺滑地在图纸上漫游平移
- 双指捏合：丝滑无极缩放
- 并且针对手机屏幕，大幅调高了初始加载的放大倍率，告别一上来密密麻麻缩成一团的尴尬。
一个非常重要的提示（必看）
因为这套沉浸式交互工作台依赖于全新的网格数据结构渲染（以前是纯静态图片），所以网站上以前的“旧图纸”是不支持这些新功能（高亮、缩放）的！
想要体验这个爽快的工作台，你有两个方法：
- 新建一张图纸
- 在画廊里找到你喜欢的旧图纸，点击图纸下方的 “二次编辑” 按钮，系统会带着原图重新进生成器，你只要点一下保存，它就会拥有全新的交互魔法！
给大家看一个我非常满意的作品示例，大家可以用手机或平板点开这个链接，感受一下选中右侧颜色时的“高亮”快感：
体验地址
产品折腾到现在，核心的链路终于彻底跑通并且非常丝滑了，欢迎大家继续来玩，多提 Bug 和建议！
官网地址：https://pindouai.app （注：图纸生成、编辑、工作台查看全都是免登录免费使用的！）
Select Language