HTML tool
谁能想到大模型的兴起，会让Markdown这个文档格式大红大紫。
同样的，HTML 开发的工具，也逐步的会红起来。
参考 Useful patterns for building HTML tools simonwillison 提出大模型构建的小工具尽可能单独作为HTML工具。我觉得非常实用。
记录 HTML tool 开发过程
参考 导出 claude code 的讨论记录 可以便捷的导出与大模型的交流过程，并复盘提高提示词的使用。
这里，simonwillison，总结了大模型构建 HTML tool 的一些提示词技巧
Build a canvas that lets me paste in JSON and converts it to YAML. No React.
Build an artifact that lets me paste in JSON and converts it to YAML. No React.gemini 和 chatgpt 自带分享讨论记录的给功能
充分使用 CDN
HTML 中的 javascripts 占据了很大的存储空间，可以用CDN外链的模式，将整体HTML大小压缩。
值得注意的是，大模型给出的CDN链接往往是旧版本的，可以手动更新到最新的CDN链接
在 URL 中保存数据
参考 icon-editor ，可以将图片的数据存储到URL参数中，URL 的 # 可以保存对应参数。直接分享一个URL，即可完成内容的分享。
创建的数据，保存在 # 后面的字段中
使用浏览器本地存储
word-counter 是一个记录字符长度的工具，它通过本地存储（localStorage）来保存用户写入的字符串。即使关闭这个标签，也不会丢失输入的数据
搜集支持跨域的API
跨域代表很多后端的能力可以运用到 HTML tool 中 比如： species-observation-map 可以让你的 HTML tool 支持地图这个能力，本质是使用iNaturalist的API，展示特定物种近期观测记录的地图。
通过CORS，加入大模型功能
gemini-bbox 展示了Gemini 2.5为图像中的物体返回复杂形状图像掩码的能力，请参阅 Image segmentation using Gemini 2.5
缺点就是，每次使用 大模型能力，需要输出API，基本上不会有人一直记住API。好处就是这个网页工具所有数据都是保存在本地，不会泄露大模型的API
上传和下载文件
social-media-cropper 可以提供上传文件以及下载文件的能力，让用户修改文件。
Pyodide can run Python code in the browser
Pyodide is a distribution of Python that’s compiled to WebAssembly and designed to run directly in browsers. It’s an engineering marvel and one of the most underrated corners of the Python world.
It also cleanly loads from a CDN, which means there’s no reason not to use it in HTML tools!
Even better, the Pyodide project includes micropip—a mechanism that can load extra pure-Python packages from PyPI via CORS.
pyodide-bar-chart demonstrates running Pyodide, Pandas and matplotlib to render a bar chart directly in the browser.
WebAssembly opens more possibilities
ocr uses the pre-existing Tesseract.js WebAssembly port of the Tesseract OCR engine.