受够了臃肿的 JSON 工具，我用一下午自己撸了一个
痛点
用了这么多年的在线 JSON 格式化工具，我有三个槽点：
第一，没有历史记录。 每次粘贴一段 JSON 格式化完，过一会儿想再看看，没了。又得重新找、重新粘。
第二，页面越做越臃肿。 打开某些「知名」JSON 工具，满屏的广告、弹窗、各种你永远用不到的功能 tab。我就想格式化个 JSON，为什么要加载 5 秒？
第三，鱼和熊掌不可兼得。 界面简洁的有广告，没广告的交互又很难受。就没有一个干净、好用、不膈应人的吗？
今天周末闲来无事，突然想：这玩意儿能有多难？不如自己做一个。
工具选型：让 AI 各司其职
我的计划很简单：
- Stitch 负责 UI 设计
- Claude Code 负责写代码
- Claude 对话版 当军师，帮我想方案、写 Prompt
事实证明，这个组合真的很香。
Stitch 设计 UI：后端程序员的福音
作为一个后端开发，UI 设计一直是我的噩梦。配色不会、布局不懂、CSS 写得想砸电脑。
这次我让 Claude 对话版帮我写了一个详细的 UI Prompt，包括：
- 现代极简风格，深浅双主题
- 双栏布局：左边输入，右边输出
- 中间放功能按钮：格式化、压缩、转义
- 响应式适配移动端
把 Prompt 甩给 Stitch，几分钟后设计稿就出来了。
第一眼：惊艳。
配色舒服，布局清晰，深色主题那个质感，说实话比很多正经产品都强。这要是让我自己搞，先不说能不能设计出来，光调 CSS 就得调一天。
经过差不多 5 轮对话微调——修复文本框显示逻辑、调整按钮布局、优化移动端适配——UI 就成了。
最关键的是：Stitch 可以直接导出代码。 不是那种看着好看但没法用的设计图，是实打实能跑的 HTML + Tailwind CSS。这对后端程序员来说，真的太友好了。
一个小插曲：Logo 设计的坑
UI 搞定后，我想给网站配个 Logo。
第一反应是用 Gemini 生成 SVG。第一次出的效果还不错，一个简洁的 { } 图标配上 JSONer 文字。但问题来了——我想微调一下细节，结果越调越离谱，改了好几版都不满意。
最后放弃了，直接让 Claude Code 根据 Gemini 的图参考着写了一个简单的 SVG，够用就行。
这里踩了个坑：目前还没找到能高效生成网站 SVG Logo 的流程。 AI 生成图片可以，但要精确控制 SVG 的细节，还是挺麻烦的。这块以后再研究吧，先上线要紧。
Claude Code：效率坐火箭
设计稿有了，代码也导出了，接下来交给 Claude Code。
我把 Stitch 导出的 UI 代码直接给它，然后分批提需求：
第一批：核心功能
- JSON 格式化
- JSON 压缩
- JSON 转义/反转义
- 语法验证（实时显示错误）
第二批：体验优化
- 复制到剪贴板
- 下载为文件
- 加载示例 JSON
- Toast 提示
第三批：我最想要的功能——历史记录
- 自动保存最近的输入
- localStorage 持久化
- 一键恢复历史
效率真的像坐火箭。
把 UI 代码丢给它，一两轮对话就能把功能实现出来。不是那种「能跑但一堆 bug」的半成品，是直接就能用的代码。后续就是微调一些交互细节，整个过程行云流水。
比之前用 AI 写代码的体验好太多了。以前总要反复 debug、来回修改，现在基本上说清楚需求，出来就是对的。
中间遇到一个小坑：复制功能在某些浏览器不生效。Claude Code 一句话就给了方案——用 navigator.clipboard.writeText() 替代老的 document.execCommand('copy')，顺便加了个 fallback。这种细节如果自己查，又是半小时。
命名：JSONer
功能写完了，但「JSON Tools」这名字实在太路人了。
让 Claude 帮我头脑风暴，列了一堆候选：JSONify、JSON Craft、JSON Forge、JSON Lab……
最后选了 JSONer。原因：
- 短，好记
- 有动作感（像 Docker、Linter 这种 -er 命名）
- 域名 jsoner.dev 居然还没被注册
又一个插曲：买域名也有坑
确定了名字，接下来买域名。
先去 Spaceship 搜了一下，显示可以买。正准备下单，突然想验证一下——结果发现这域名早就被人注册了，但 Spaceship 居然还显示能加购物车。这也太不靠谱了。
于是老老实实对比了几家主流域名商的价格：
最后选了 Dynadot，价格最实惠。
付款的时候顺便用了刚申请的 Bybit Master Card。如果有朋友感兴趣，可以用我的邀请链接注册：https://www.jbybit.com/cards/?ref=9X8VBE7&source=applet_invite，注册成功可以拿 10 USDT 体验金 + 10% 返现。当然如果介意推荐链接，直接去 Bybit 官网申请也一样。
20 块搞定域名，品牌这块算是收尾了。
部署：10 分钟上线
代码推到 GitHub，连接 Cloudflare Pages，配置域名。
中间有个插曲：我的仓库是 Private，Cloudflare 看不到。纠结了一下要不要改成 Public——转念一想，这就一个纯前端的小工具，代码开源又不丢人，反而显得坦荡。改成 Public，问题解决。
从推送代码到网站上线，10 分钟。
访问 jsoner.dev，看到自己做的东西真的跑在互联网上，那一刻还是挺爽的。
最终成果
花了大概 4 个小时，我得到了一个：
- 界面干净，没有广告
- 功能够用：格式化、压缩、转义、验证
- 有历史记录（终于！）
- 深浅主题切换
- 移动端也能用
- 全球 CDN，秒开
最重要的是，这玩意儿是我自己的。以后想加什么功能，随时加。
几点感受
关于 Stitch： 对后端程序员太友好了。不用懂设计、不用抠 CSS，描述清楚你要什么，它就能给你一个能用的 UI，还能直接导出代码。以前觉得「全栈」很难，现在感觉门槛低了很多。
关于 Claude Code： 这东西现在是真的好用。不是那种「能用但要反复调」的程度，是「说清楚需求基本一步到位」的程度。对于边界清晰的小项目，效率提升是指数级的。
关于 AI 协作的本质： 你还是得知道自己要什么。AI 不会替你做决策，但它能把你决策后的执行效率提升 10 倍。「想清楚」依然是最重要的事。
关于 Logo 生成： 这块还没找到好的工作流，Gemini 生成 SVG 不太稳定，微调困难。如果有好的方案欢迎推荐。
下一步
网站上线只是开始。接下来打算：
- 加个 JSON Diff 对比功能
- 支持 JSON 转 YAML
- 找几个地方推广一下，看看有没有人用
如果你也有类似的小想法，不妨试试这个组合：Stitch 设计 + Claude Code 开发。
从想法到上线，可能真的只需要一个下午。
jsoner.dev - 一个干净的 JSON 格式化工具，带历史记录。