读到一篇思路很牛逼的文章！AI 总结如下。

1. Simon 的单页 HTML 工具哲学

一个老外叫 Simon，用大模型两年做了 150 个工具。

这不奇怪，强的是他只用单页 HTML 做！

把复杂的事情变简单，把简单的事情做到极致。

1.1. 工具应用场景

比如：

• 想把 SVG 转成 PNG，但不想装软件
• 想看两个 Python 包版本之间改了什么
• 想更清楚地浏览 Bluesky 上的讨论

这些都用 HTML 工具搞定了。

一个 HTML 文件，打开就能用，不需要安装，不需要注册。

1.2. 核心原则：单文件架构

Simon 坚持一个原则：所有代码写在一个 HTML 文件里。

听起来老派，但优势也很明显：

• 可以直接从 ChatGPT 或 Claude 里复制粘贴出来
• 扔到 GitHub Pages 上几秒钟就能用
• 不需要 npm，不需要构建步骤
• 两年后还能打开，不会因为依赖过期崩溃

他特别强调 不要用 React。

因为 JSX 需要构建，这会让整个流程变得麻烦。

保持简单，就是保持可维护。

1.3. 入门指南

从哪里开始？

最简单的方式是直接在 Claude 或 Gemini 里试：

做一个能把 JSON 转成 YAML 的工具，不要用 React

一会儿你就能看到一个可以用的工具。

Claude 叫这个功能 Artifacts，ChatGPT 和 Gemini 叫 Canvas。

这只是开始，真正有意思的是他能把各种简单的基础能力用到极致，比如**「复制粘贴」功能**。

操作系统的剪贴板其实能携带多种格式的数据。

你从 Word 里复制内容，粘贴到另一个 Word 文档里会保留格式，但粘贴到记事本里就只剩纯文本。

JavaScript 可以读取这些不同格式的数据。

这意味着什么？

① 你可以做一个工具，粘贴 Hacker News 的讨论 URL，它给你整理好的文本版本

② 你可以做一个工具，粘贴图片，它把所有图片的 alt 文本提取出来

③ 你可以做一个调试工具，显示剪贴板里到底有哪些格式的数据

1.4. 状态管理方案

没有后端数据库怎么办？Simon 有两个办法：

把状态存在 URL 里。

比如，他做了一个 24×24 的图标编辑器，你画的图标直接编码在 URL 里。这样你可以收藏，可以分享，打开链接就能继续编辑。

把关键的信息存在 localStorage 里。

比如 API key 这种敏感信息，不能出现在 URL 里，也不能发到服务器。

localStorage 让数据只存在用户的浏览器里。

他还用 localStorage 做自动保存。

写字数统计工具时，每次输入都会保存，这样不小心关掉标签页也不会丢内容。

1.5. CORS：浏览器端 API 调用的宝藏

CORS（跨域资源共享）听起来很技术，但理解它很重要。

有些 API 允许你从浏览器直接调用，不需要经过自己的服务器。这些 API 就是金矿：

• iNaturalist 可以查动物的观察记录
• PyPI 可以获取 Python 包的信息
• GitHub 的公开仓库内容都可以直接获取
• Bluesky 和 Mastodon 的 API 也很开放

Simon 甚至用 GitHub Gists 来持久化数据。

因为 Gist 的 API 支持 CORS，你可以做一个纯前端工具，把用户的数据保存到他们自己的 Gist 里。

1.6. 文件处理新思路

<input type="file"> 不只是用来上传文件。

JavaScript 可以直接读取文件内容，在浏览器里处理。

Simon 的第一个工具就是 OCR 工具。

你选择一个 PDF，它在浏览器里转成图片，然后跑 OCR。整个过程不需要上传到任何服务器。

他还做了视频裁剪工具。

你打开一个视频文件，拖动裁剪框，它会生成一个 ffmpeg 命令，你可以复制到终端里执行。

反过来也行。

你可以让用户下载文件，不需要服务器参与。

JavaScript 可以生成 PNG、JPEG、ICS 日历文件等等。

1.7. Python 与 WebAssembly：突破浏览器限制

这是最让人兴奋的部分。

Pyodide 让 Python 可以在浏览器里运行。

不是玩具级别的运行，是真正的 Python，包括 Pandas 和 matplotlib。

Simon 做了一个工具，你输入数据，它用 Pandas 处理，用 matplotlib 画图，全在浏览器里完成。

WebAssembly 打开了更多可能。

Tesseract OCR、SQLite、图片压缩库，这些原本用 C 或 C++ 写的软件，现在都能在浏览器里跑。

1.8. 规模化开发：从 1 到 100

当你有了 100 多个工具，新工具就容易多了。

每个工具都是下一个工具的参考文档。

你可以告诉大模型：「看看我之前做的 PyPI 包浏览器」，然后说：「做一个类似的，但是显示两个版本之间的差异」。

LLM 会读你之前的代码，理解你的模式，然后生成新的工具。

这比从零开始快得多，而且更可靠。

Simon 的这些工具真可以解决问题。

更重要的是，这种方式让你能快速实验。

想法到原型可能只需要几分钟。

不用担心部署，不用担心维护，不用担心成本。

1.9. 起步指南

怎么起步尝试？

一个 GitHub 仓库，开启 GitHub Pages。

然后就可以开始了。

用 ChatGPT 或 Claude 生成一个工具，复制粘贴到仓库里，几秒钟后就能在网上访问。

不需要完美，不需要复杂。

从一个解决你自己问题的小工具开始。

然后慢慢积累，慢慢改进。

两年后你可能也会有几十个甚至上百个这样的工具。

每一个都在某个时刻帮到你，每一个都让下一个更容易做出来。

这就是 HTML 工具的魅力：简单、实用、可持续。