我做的两个小工具网站：星露谷存档修改器 & 拼豆图纸助手

做东西的乐趣有时候不在于写了多复杂的代码，而在于自己真的用得上。

碎碎念
作为开发者，最幸福的时刻莫过于在日常生活中遇到不顺手的工具时，能够轻描淡写地说一句：“算了，我自己写一个吧。”

这篇文章就来介绍两个我日常都在高频使用的在线小工具。一个关于惬意的种田游戏，一个关于耐心的像素手工 —— 它们虽然领域完全不同，但都是纯粹的“痒点驱动”产物。

🌾 星露谷存档修改器 (Stardew Valley Save Editor)#

如果你玩过《星露谷物语》（Stardew Valley），那你大概知道这个游戏的存档全是一个巨大的、未经缩进的 XML 文件。在这个文件里，静静地躺着你的金币数量、背包物品数据、甚至是每一个 NPC 的好感度数值。

当你想微调某些数据时，往往面临着两个艰难的选择：

为了解决这个问题，我做了一个开箱即用、纯前端运行网页版可视化编辑器。

🔒 纯前端沙盒，安全隐私：你的存档文件（通常是 PlayerName_123456789）在上传后，完全在浏览器本地通过 Web API 进行解析与修改，绝不上传至任何服务器。这意味着你的存档数据绝对安全。
🎨 完美适配的游戏风 UI：为了让修改的仪式感拉满，整个界面复刻了星露谷原版的木质纹理、象牙白底板以及像素字体，让你感觉仿佛直接在游戏中的背包菜单里调整属性。
🛠️ 精细的可视化面板：将原本晦涩的 XML 字段转化为可视化的输入框、下拉选择器与物品网格。

注意
虽然本工具在本地解析并提供二次下载，但为了防止意外，建议在每次修改前手动备份一份你的原始存档文件。

拼豆（Fuse Beads）是一种非常解压的手工。你需要在一块带有塑料定位钉的“板子”上，按照特定图案把彩色的塑料珠子排好，最后覆上助烫纸用熨斗加热定型。

拼豆的第一步也是最关键的一步是制作图纸。市面上现有的图纸生成器往往存在几个痛点：

于是，拼豆助手应运而生。

本工具集成了主流的 Mard 221 拼豆色卡标准。导入任意图片后，算法会在 3D 颜色空间中计算最邻近色，将图片像素精准映射到你能买到的实体豆子颜色上，生成色差极小的配色预览。

你可以自由设定“板子颗粒数”与“图片实际占用大小”。

例如：使用一块标准 $29 \times 29$ 的定位板，但只希望图案占满中间 $24 \times 24$ 的区域，四周自动留白。你可以分别拉动这两个数值，系统会自动居中对齐并做边缘填充。

拉动 颜色合并容差 滑块，系统会合并相邻的相近色。

为什么这很重要？ 拼一张图如果用到 50 种颜色，找豆子和收纳会让人崩溃。通过算法将颜色压缩到 15-20 种，不仅拼装效率加倍，成品效果依然优秀。

一键生成高清晰度的图纸大图，底部附带详细的颜色配比明细统计（每种色号需要多少颗豆子），可以直接打印或者保存到平板上随时查看。

离线可用与 PWA
本工具支持 PWA (Progressive Web App) 规范。你可以点击浏览器地址栏的安装图标，将其作为独立 App 固定在桌面或主屏幕上。它拥有完整的 Service Worker 离线缓存，即使在断网的火车或户外，依然可以秒开并完整生成图纸。

维度 / 工具	🌾 星露谷存档修改器	🟣 拼豆图纸助手
基础框架	Next.js (React 19)	Next.js (React 19)
样式方案	Tailwind CSS + Custom CSS	Tailwind CSS + Radix UI (shadcn)
核心算法	Local browser XML DOM Parser	CIELAB Delta E 颜色度量与量化
离线运行	支持 (静态客户端运行)	支持 (PWA Service Worker + IndexedDB)
多语言	简体中文	中 / 英 / 日 / 韩 (i18next)

其实很多小工具的开发初衷都极为简单：现有的工具不够好用，或者已经没有人在维护了。

与其被动接受别人的半成品，不如发挥程序员的本能，按照自己最舒服的方式重新写一个。在这个过程中，不仅解决了实际生活中的小烦恼，还实践了最新的技术栈（比如 Next.js App Router 的最新特性、PWA 的离线缓存优化、以及前端色彩空间算法）。

两个工具均已上线，如果你也恰好有这方面的需求，欢迎点击下方链接体验：

如果你在使用过程中发现任何 bug，或者有更好的点子，欢迎在博客下方留言，或者在对应的 GitHub 仓库中给我提 Issue！✨