41. Simon Willison这篇Blog很有启发,我们现在构建一个Web应用起步都是各种框架(比如React)+各种复杂构建。但是Simon 用 AI 写了 150 多个小工具,都是最简单的一个网页,完全基于最简单的HTML+Javascript+浏览器本地能力,可以完全自由分发,极致简单。我们来分析一下他这种AI开发方式的一些启发。1. 拥抱极致简约,告别 React 和构建步骤Willison 为他的 HTML 工具设定了一条核心原则:所有代码——HTML、CSS 和 JavaScript——都放在一个单独的 HTML 文件里。这听起来似乎是回到了 20 年前的开发方式,但在 AI 时代,这种做法却爆发出惊人的生产力。他总结了四个最关键的特征:1) 单一文件:内联的 CSS 和 JavaScript 使得整个工具就是一个 .html 文件。这不仅让托管和分发变得极其简单,更关键的是,你可以直接从 LLM 的响应中完整复制粘贴,无需任何文件操作。2) 避免构建步骤:坚决不使用像 React 这样的现代框架。因为 JSX 等语法需要编译打包,这为快速迭代和部署增加了巨大的阻碍和不便。3) 从 CDN 加载依赖:如果需要用到第三方库,直接通过 CDN 链接引入,而不是通过 npm 等包管理器。4) 保持小巧:将代码量控制在几百行。这样一来,代码的可维护性不再是难题,因为任何一个优秀的 LLM 都能轻松读懂并重写它,整个重构过程可能只需要几分钟。这种“激进的简约”之所以在 AI 时代如此强大,是因为它最大限度地消除了开发过程中的所有摩擦。从生成代码、到托管服务、再到修改功能,整个流程快得令人难以置信。“React 的问题在于 JSX 需要一个构建步骤,这让所有事情都变得非常不方便。”2. 浏览器即数据库,活用 URL 和 localStorage这些工具没有后端,自然也没有服务器数据库。但这并不意味着它们无法持久化数据。诀窍在于,把用户的浏览器本身当作一个轻量级数据库。首先是将状态保存在 URL 中。这种模式非常适合那些需要被收藏为书签或分享给别人的工具。当用户打开一个带有参数的 URL 时,工具就能恢复到分享时的状态。Willison 的 icon-editor(一个 24x24 图标编辑器)就是绝佳例子,它将整个图标的设计数据编码在 URL 里,方便用户随时保存和分享自己的创作。其次,对于更大块的数据或敏感信息,则可以使用 localStorage。它非常适合保存用户进行中的工作(比如 word-counter 工具,可以自动保存你输入的文字,防止关闭标签页后丢失),或者存储用户的 API 密钥。这种方式还有一个巨大的安全优势:像 API 密钥这样的敏感信息完全存储在用户自己的设备上,永远不会被发送到服务器,从而避免了泄露风险。3. 跨域 API 是一座金矿你可能听说过 CORS(跨源资源共享),它是一种安全机制,用于控制一个网站上的脚本能否从另一个不同域名的服务器上获取数据。对于构建 HTML 工具而言,那些配置了开放 CORS 头的 API 简直就是一座“金矿”。它们允许你在浏览器端直接通过 JavaScript 的 fetch 请求来获取数据,无需任何服务器中转。Willison 发现并利用了许多这样的 API,例如:1) iNaturalist:获取动植物观测数据和照片。2) PyPI:获取 Python 包的详细信息。3) GitHub:获取公开仓库中的文件内容。4) Bluesky 和 Mastodon:社交媒体平台的数据接口。更令人兴奋的是,所有主流的 LLM 服务商(如 OpenAI, Anthropic, Gemini)也都提供了支持 CORS 的 API。这意味着,你的 HTML 工具可以直接在浏览器中调用这些强大的 AI 模型,只需让用户提供自己的 API 密钥(并将其安全地存储在 localStorage 中)即可。其中一个特别巧妙的应用是使用 GitHub Gist API。这简直是模式二(数据持久化)和模式三(跨域 API)的完美结合:它让你能构建一个应用,通过跨域 API 调用,将状态永久保存到一个 Gist 中。例如 terminal-to-html 工具,就可以选择性地将用户转换后的终端会话保存到一个 Gist,从而为这些“无数据库”的工具提供了一个免费且永久的数据存储方案。4. 在浏览器中运行 Python借助一个名为 Pyodide 的项目,你可以在用户的浏览器里直接运行一个完整的 Python 环境。Pyodide 是一个“工程奇迹”,它将 Python 解释器和标准库编译成了 WebAssembly,使其可以在浏览器中原生运行。它可以像其他 JavaScript 库一样,直接从 CDN 加载,完美融入了 HTML 工具的开发模式。这还不是全部,Pyodide 甚至可以通过一个名为 micropip 的工具,直接从 PyPI 安装纯 Python 的第三方包。Willison 的 pyodide-bar-chart 示例就展示了如何在浏览器中运行 Pandas 和 matplotlib 库,仅用一个 HTML 文件就实现了数据处理和图表渲染。这背后是 WebAssembly 技术的强大威力,它为浏览器打开了新世界的大门,让诸如 Tesseract.js(浏览器端 OCR 引擎)等许多原本只能在服务器上运行的强大工具成为可能。5. AI 原生工作流:重组并记录当你的工具箱里有了上百个小工具后,一个强大的“元模式”便浮现了:将现有工具作为新工具的构建模块。Willison 常常将他之前构建的 150 多个工具的源代码,当作一个“范例库”喂给他的 LLM 助手。当 LLM 的上下文中包含了多个结构良好、能够正常工作的代码示例时,它生成新代码的准确率和成功率会大大提高。这种工作方式被他称为“重组”(Remix)。创建 pypi-changelog 工具的过程就是个极佳的例子。他并没有从零开始描述需求,而是采用了更高效的两步法。首先,他给 AI 代理一个简单的指令来建立上下文:“去看看那个 pypi package explorer 工具”。在 AI 分析完 zip-wheel-explorer 这个现有工具的源码后,他紧接着给出了一个非常具体、功能明确的后续指令,例如:“……将它们显示在一个列表中,每两个版本之间都有一个‘显示变更’的链接……点击后获取 wheel 文件的全部内容……并渲染出一个漂亮的差异对比视图……”。这种“提供上下文 + 精确指令”的组合,远比单一的、冗长的提示要有效得多。这个工作流的另一半是“记录”(Record)。Willison 会系统地保存每一次与 LLM 的交互记录,无论是通过平台的“分享链接”功能,还是直接保存终端的对话文本。然后,他会将这些记录的链接附在 Git 的提交信息中。这不仅为每个工具的诞生留下了“出生证明”,更重要的是,通过回顾这些对话,他可以不断复盘和优化自己的提问技巧,从而更高效地与 AI 协作。#ai创造营##程序员#