从零到上线，我用 AI 两天搭了一个 JSON 工具站（全程复盘）

2026 年，如果你还觉得“做网站”必须精通 HTML/CSS/JavaScript 三件套，那你可能低估了 AI 的能力。
上周末，我花了两天时间，借助 AI 辅助编程，从零搭建了一个在线工具站——itjson.cn。这篇文章不聊赚钱，只说技术实现：我是怎么用 AI 写代码、怎么处理数据、怎么确保隐私安全，以及过程中踩过的坑。

为什么还要做个工具站？

市面上的 JSON 格式化工具很多，但细看会发现：有的需要注册，有的会上传数据，有的加载慢，有的广告特别多，用户体验极差。
我想做一个干净、快速、完全本地处理、不传服务器的工具站，专门满足 JSON / XML / Unicode 这些日常开发小需求。

AI 的出现让这个念头不再“想想而已”——代码部分完全可以交给 AI，我把精力放在产品设计和用户体验上。

我的 AI 开发流水线

整个开发过程分为三个阶段，全程只用一个 AI 对话窗口 + 一个代码编辑器。

1. 需求梳理（30 分钟）

我没有急着让 AI 写代码，而是先跟它聊需求：

“我要做一个在线 JSON 处理工具，功能包括格式化、压缩、校验、转义，所有操作在浏览器端完成，不发送任何数据到后端。”

AI 帮我列出了功能清单、页面布局建议、甚至前端技术栈推荐（原生 JS + CodeMirror 编辑器，轻量且不依赖框架）。

2. 分模块生成代码（约 1.5 天）

我把每个功能拆成独立任务，逐一向 AI 索要代码：

• JSON 格式化：AI 给出核心的 JSON.stringify(JSON.parse(input), null, 2) 逻辑，并加上异常捕获，能精准定位到错误所在行。
• JSON 压缩：去掉空格和换行，AI 提供了递归遍历对象去除空字段的优化写法。
• XML 格式化：AI 生成了一个轻量的 XML 解析器（利用 DOMParser），并对缩进规则做了处理，避免中文节点乱码。
• 转义/反转义：AI 给出了完整的 Unicode 转义序列生成与解析函数。
• Unicode ↔ 中文：利用 String.fromCodePoint 和 codePointAt，AI 一次性提供了双向转换代码。

每次 AI 输出完整页面（包含 HTML + CSS + JS），我直接在浏览器预览。如果样式不够美观，我就说“调成简洁深色主题，按钮加圆角”，AI 会立刻修改并给出新代码。
遇到逻辑 bug（比如处理大文件时卡顿），我就把报错信息贴回去，AI 会优化循环逻辑或建议使用 requestIdleCallback 分片处理。

3. 部署上线（2 小时）

代码稳定后，打包静态文件，上传到服务器，配置 Nginx，绑定域名。
因为所有逻辑都在前端，无需后端服务，部署过程非常轻量。

技术亮点与思考

⚡ 纯前端处理，数据绝对不上传

这是最核心的设计原则。用户粘贴的 JSON 内容只存在于浏览器内存中，点击“格式化”后，所有计算在本地 CPU 完成，不会经过任何服务器。这一点在 itjson.cn 的页面底部有明确提示，让开发者用得安心。

🎨 兼顾美观与实用

AI 生成的默认界面偏朴素，我通过多次迭代调整了配色、间距、字体大小，并加入了编辑器的行号、高亮和自动缩进。
为了适应不同屏幕，AI 还帮我写了响应式 CSS，在手机端也能顺畅操作。

🧩 模块化结构

每个工具都独立成一个页面（/json-format、/xml-format 等），这样利于搜索引擎索引，也方便后续维护。AI 帮我生成了统一的导航栏和页脚，确保站点风格一致。

🐛 错误处理细致

AI 在代码中加入了丰富的 try-catch 和用户友好的错误提示，比如“第 3 行第 12 个字符附近缺少逗号”，而不是简单的“解析失败”。这大大提升了工具的实用性。

开发过程中的真实感受

AI 是“高级实习生”，不是“自动售货机”

一开始我以为直接说“做个工具站”就能得到完整代码，但后来发现，提问越具体，输出越精准。比如我问“怎么处理 JSON 中的日期对象？”AI 会给出多种方案并解释优劣，这让我学到了不少细节。

迭代速度远超传统开发

传统手写代码，改一个样式要查文档、调半天。现在只需一句“左移 20px，背景色换成 #f5f5f5”，AI 立刻修改，预览即所见。这种即时反馈让开发效率至少提升了 3 倍。

最大的挑战不是写代码，而是“知道要做什么”

AI 能写出精确的 JSON 校验逻辑，但设计“校验结果如何展示”“错误信息如何高亮”这些产品层面的决策，还是得自己拿主意。
所以，用 AI 做工具站，核心能力从“写代码”变成了“做产品设计”。

目前的功能与未来计划

itjson.cn 现在已经上线这些工具：

• JSON 格式化、压缩、校验、转义/反转义
• XML 格式化、压缩
• Unicode 与中文互转
• 所有工具都带有“一键复制结果”和“清空”按钮

未来我打算用 AI 继续添加：

• JSON 与 YAML / CSV 互转
• 正则表达式测试工具
• 时间戳转换
• 更多格式的本地化处理

这些功能都会坚持一个原则：不上传、不记录、用完即走。

写在最后：AI 不是魔法，是杠杆

两天时间，一个人，从零到可访问的网站——这在三年前难以想象。但 2026 年的今天，AI 已经把开发门槛拉低到了“只要你有想法，并且愿意跟 AI 耐心沟通”的程度。

与其说这是我“做”的，不如说是我和 AI 协作完成的。它负责代码，我负责方向、体验和测试。
如果你也有一个小工具的点子，别犹豫，打开 AI 对话框，先聊聊需求，说不定下个周末，你的网站也能上线。

欢迎体验 itjson.cn，有任何建议或槽点，随时告诉我，我会继续用 AI 快速迭代改进。

本文不涉及任何商业模式，纯粹分享 AI 辅助开发的技术实践。

本作品采用《CC 协议》，转载必须注明作者和本文链接