构建 HTML 工具的有用模式

10th December 2025

2025 年 12 月 10 日

I’ve started using the term HTML tools to refer to HTML applications that I’ve been building which combine HTML, JavaScript, and CSS in a single file and use them to provide useful functionality. I have built over 150 of these in the past two years, almost all of them written by LLMs. This article presents a collection of useful patterns I’ve discovered along the way.

我开始使用术语 HTML tools 来指代我一直在构建的 HTML 应用程序，这些应用程序将 HTML、JavaScript 和 CSS 结合在一个文件中，并用它们提供有用的功能。在过去两年里，我构建了 超过 150 个 这样的工具，几乎所有都由 LLMs 编写。本文介绍了我在这个过程中发现的一些有用模式。

First, some examples to show the kind of thing I’m talking about:

首先，一些示例来说明我所说的那种东西：

• svg-render renders SVG code to downloadable JPEGs or PNGs
• svg-render 将 SVG 代码渲染为可下载的 JPEG 或 PNG
• pypi-changelog lets you generate (and copy to clipboard) diffs between different PyPI package releases.
• pypi-changelog 让你生成（并复制到剪贴板）不同 PyPI 包版本之间的 diff。
• bluesky-thread provides a nested view of a discussion thread on Bluesky.
• bluesky-thread 为 Bluesky 上的讨论线程提供嵌套视图。

These are some of my recent favorites. I have dozens more like this that I use on a regular basis.

这些是我最近的一些最爱。我还有几十个这样的工具，我定期使用它们。

You can explore my collection on tools.simonwillison.net—the by month view is useful for browsing the entire collection.

您可以在 tools.simonwillison.net—by month 视图有助于浏览整个收藏。

If you want to see the code and prompts, almost all of the examples in this post include a link in their footer to “view source” on GitHub. The GitHub commits usually contain either the prompt itself or a link to the transcript used to create the tool.

如果你想查看代码和提示，本帖中几乎所有示例都在其页脚包含一个链接，指向 GitHub 上的“view source”。GitHub 提交通常包含提示本身或用于创建工具的记录链接。

The anatomy of an HTML tool #

HTML 工具的剖析 #

These are the characteristics I have found to be most productive in building tools of this nature:

这些是我在构建此类工具时发现的最具生产力的特征：

1. A single file: inline JavaScript and CSS in a single HTML file means the least hassle in hosting or distributing them, and crucially means you can copy and paste them out of an LLM response.
2. 单个文件：在单个 HTML 文件中内联 JavaScript 和 CS...