7.0
热点
AI SCORE
编程提效2024-10-24 04:52
一周内用 Claude Artifacts 构建的实战项目
Hacker News · simonwillison.net#Claude#Artifacts#代码生成
Editor brief · 编辑速览
开发者分享使用 Claude Artifacts 代码编辑器进行的实际项目案例，展示 AI 辅助快速开发的具体流程和效果。
我非常喜欢 Claude 的 Artifacts 功能，它可以让你指示 Claude 创建一个交互式单页应用（使用 HTML、CSS 和 JavaScript），然后直接在 Claude 界面中查看结果，进一步与机器人迭代，如果愿意的话，还可以复制生成的代码。
我在浏览自己的 Claude 活动导出记录时（我构建了一个 claude-to-sqlite 工具来将其转换为 SQLite，这样我可以在 Datasette 中探索），决定看看过去一周我使用 artifacts 的频率有多高。结果比我预期的要多！
能够快速启动一个完整的交互式应用——有时是说明性的原型，但通常是直接解决问题的工具——这是一个非常有用的功能。
以下是过去七天我使用 Claude Artifacts 的大部分项目。我为几乎所有项目都提供了 prompt 或完整的对话记录。
我对在使用 Mobile Safari 时难以复制和粘贴整个网页文本到 LLM 感到沮丧。所以我构建了一个简单的网页 UI，可以让我输入 URL，调用 Jina Reader API 生成 Markdown（在底层使用 Puppeteer），并提供方便的"复制"按钮。
我在这里写了更多关于这个项目的内容。
关于 SQLite WASM 构建的 Hacker News 对话让我发现了 NPM 上的 @sqlite.org/sqlite-wasm 包，我决定快速构建一个交互式演示。
试试看：https://tools.simonwillison.net/sqlite-wasm
我需要从网页上一段文本中提取所有底层链接的 URL。我意识到最快的方法是启动一个 artifact，它可以接受富文本 HTML 粘贴内容，并使用 HTML 解析器提取这些链接。
https://tools.simonwillison.net/extract-urls
使用允许粘贴富文本的工具启发了我，我意识到浏览器剪贴板 API 是一个迷人的东西。我决定构建一个快速调试工具，可以让我复制和粘贴不同类型的内容（纯文本、富文本、文件、图像等），看看浏览器中有什么信息可用。
https://tools.simonwillison.net/clipboard-viewer
我在这个上面没有花很多努力。在浏览器 DevTools 中探索 Claude Artifacts 时，我发现了这个 CSP 头：
content-security-policy: default-src https://www.claudeusercontent.com; script-src 'unsafe-eval' 'unsafe-inline' https://www.claudeusercontent.com https://cdnjs.cloudflare.com https://cdn.jsdelivr.net/pyodide/; connect-src https://cdn.jsdelivr.net/pyodide/; worker-src https://www.claudeusercontent.com blob:; style-src 'unsafe-inline' https://www.claudeusercontent.com https://cdnjs.cloudflare.com https://fonts.googleapis.com; img-src blob: data: https://www.claudeusercontent.com; font-src data: https://www.claudeusercontent.com; object-src 'none'; base-uri https://www.claudeusercontent.com; form-action https://www.claudeusercontent.com; frame-ancestors https://www.claudeusercontent.com https://claude.ai https://preview.claude.ai https://claude.site https://feedback.anthropic.com; upgrade-insecure-requests; block-all-mixed-content
其中的 https://cdn.jsdelivr.net/pyodide/ 吸引了我的注意，因为它表明 Anthropic 开发团队曾经有意设置过，使得 Pyodide——编译成 WebAssembly 的 Python——可以在 artifact 中加载。
我让 Claude 快速启动了一个演示来证明这是可行的：
https://claude.site/artifacts/a3f85567-0afc-4854-b3d3-3746dd1a37f2
我还没有费力把这个提取到我自己的 tools.simonwillison.net 站点，因为它纯粹是一个证明 Pyodide 在那个环境中可以正确加载的概念验证。
我在进行摄影散步时好奇 JavaScript 是否可以提供相机设置的模拟。我在这个项目上没有进展太远（在沙滩上行走时在手机上进行提示）——结果有 bug，印象深刻，我很快就失去了兴趣。不过这确实让我接触到了 Fabric.js 库来操作 canvas 元素。
https://claude.site/artifacts/e645c231-8c13-4374-bb7d-271c8dd73825
这个我确实完成了。我构建了这个价格计算器作为我使用 Google Gemini 进行视频爬取实验的一部分，因为我不相信自己关于 Gemini 有多便宜的计算！这里有关于我如何构建它的详细笔记。
https://tools.simonwillison.net/llm-prices
我想提醒自己 YAML 语法的某些方面是如何工作的，所以我启动了一个快速的 YAML 转 JSON 转换器工具，在你输入 YAML 时实时显示等效的 JSON。
https://claude.site/artifacts/ffeb439c-fc95-428a-9224-434f5f968d51
这是我本周最有趣的 artifact。我在探索 OpenAI 的新 Audio API，决定看看是否可以让 Claude 为我构建一个网页，可以请求访问我的麦克风，录制一段音频，然后将其 base64 编码并发送到 OpenAI API。
这里有关于我如何构建这个工具的完整详情。
https://tools.simonwillison.net/openai-audio
Claude Artifacts 无法直接向外部主机发起 API 请求，但它仍然可以启动足够的工作版本，以便轻松获取它、移动到不同的托管并完成让它工作的任务。
我在构建展示 Gemini Pro 如何为图像中的对象返回边界框的工具中写了更多关于这个 API 模式的内容。
本周早些时候，我在一次会议中，其中一名参与者分享了一张带有 QR 码的幻灯片（用于加入实时调查工具）。我没有随身携带手机，所以我需要一种方法将该 QR 码转换为普通 URL。
https://tools.simonwillison.net/qr
在 Claude Artifacts 中敲出这个 QR 解码器只花了几秒钟：
Build an artifact (no react) that lets me paste in a QR code and displays the decoded information, with a hyperlink if necessary
have a file open box that also lets you drag and drop and add a onpaste handler to the page that catches pasted images as well
完整对话。
另一个非常快速的原型。在 Hacker News 上，有人展示了一个工具的巧妙想法，可以让你将照片拖放到页面上，它会将它们嵌入页面作为 base64 URL，这样你可以"另存为 HTML"并获得一个包含图库的自包含页面。
我建议他们可以添加一个生成"下载链接"的功能，其中包含新的页面——对于不允许你"另存为 HTML"的手机很有用——并让 Claude 敲出一个快速原型：
在这种情况下，我在 Gist 中分享了代码，然后使用了新发现的 https://gistpreview.github.io/?GIST_ID_GOES_HERE 技巧来呈现结果：
https://gistpreview.github.io/?14a2c3ef508839f26377707dbf5dd329
gistpreview 被证明是将 LLM 生成的演示转变为人们可以查看的页面的真正快速方式。
按需软件的另一个例子：我需要转义手机上一段文本中的 HTML 实体，所以我让 Claude 为我构建了一个工具：
https://claude.site/artifacts/46897436-e06e-4ccc-b8f4-3df90c47f9bc
这是我使用的 prompt：
Build an artifact (no react) where I can paste text into a textarea and it will return that text with all HTML entities - single and double quotes and less than greater than ampersand - correctly escaped. The output should be in a textarea accompanied by a "Copy to clipboard" button which changes text to "Copied!" for 1.5s after you click it. Make it mobile friendly
受到 Terence Eden 的启发，我决定快速做一个 CSS 属性 text-wrap: balance 的实验。我让 Claude 为我构建了一个带有滑块和复选框的导航栏示例。我在这里写了关于这个的内容。
https://tools.simonwillison.net/text-wrap-balance-nav
我在 Half Moon Bay 南瓜运动赛中作为业余无线电通信运营商志愿服务，并担心我会搞砸使用语音字母表——所以我让 Claude 为我构建了这个工具：
https://claude.site/artifacts/aaadab20-968a-4291-8ce9-6435f6d53f4c
Claude 对话在这里。有趣的是，它首先用 Python 构建了它，然后在我提醒它我想要"一个交互式网页应用"后改为 JavaScript。
如你所见，我是这个功能的重度用户——我刚才描述了在一周内产生的 14 个项目。我从 6 月 20 日 artifacts 发布以来就一直在使用它们（同时推出了出色的 Claude 3.5 Sonnet，仍然是我日常使用的 LLM），现在我已经到了一天多次启动新的交互式 artifact 的地步。
我使用 artifacts 进行闲散的好奇心探索、快速原型设计、库研究以及启动解决即时问题的工具。
这些工具中的大多数花费不到五分钟来构建。一些更复杂的项目花费的时间更长，但即使是 OpenAI Audio 也花了 11:55am 到 12:07pm 用于第一个版本，12:18pm 到 12:27pm 用于第二个迭代——总共 21 分钟。
查看我的 claude-artifacts 标签以获取更多例子，包括 SVG 到 JPG/PNG、Markdown 和 Math Live Renderer 和图像大小调整和质量比较。
我还有一个显示链接到我的 tools.simonwillison.net 站点的每篇帖子的仪表板，底层 simonw/tools GitHub 仓库包括更多未列出的工具，其中大多数在其提交历史中链接到它们的 Claude 对话记录。
我开始对它们的限制感到有些沮丧——特别是 artifacts 无法进行 API 调用、提交表单甚至链接到其他页面的方式。我可能最终会基于我到目前为止学到的一切启动我自己的小型 artifacts 替代品。
如果你还没有使用 artifacts，我希望我已经给了你一个为什么它们是我当前最喜欢的基于 LLM 的工具之一的感觉。