技术博主 Simon Willison 最近分享了他使用 Claude 的Artifacts 功能构建的各种实用工具。Claude Artifacts 允许用户通过提示 Claude 创建交互式单页应用（SPA），使用 HTML 、CSS 和JavaScript，直接在 Claude 界面中查看结果，并可以与机器人一起迭代改进。用户还可以复制生成的代码。
Simon Willison 通过导出他的 Claude 活动记录，惊讶地发现他在过去一周内使用了大量 Artifacts 。他发现能够创建完整的交互式应用，通常是作为原型或解决特定问题的解决方案，这真是太有用了。
以下是工具列表：
1.URL to Markdown with Jina Reader
名称 ：URL to Markdown with Jina Reader
用途 ：用于快速数据分析和可视化
链接 ：https://tools.simonwillison.net/jina-reader
描述 ：该工具允许用户输入 URL，调用 Jina Reader API 生成 Markdown，并提供一个方便的“复制”按钮。
2.SQLite in WASM demo
名称 ：SQLite in WASM demo
用途 ：自动化任务管理
链接 ：https://tools.simonwillison.net/sqlite-wasm
描述 ：该工具使用 NPM 上的 sqlite-wasm 包创建了一个交互式演示。
3.Extract URLs
名称 ：Extract URLs
用途 ：自动化任务管理
链接 ：https://tools.simonwillison.net/extract-urls
描述 ：该工具接受富文本 HTML 粘贴，并使用 HTML 解析器提取链接的 URL 。
4.Clipboard viewer
名称 ：Clipboard viewer
用途 ：自动化任务管理
链接 ：https://tools.simonwillison.net/clipboard-viewer
描述 ：该工具允许用户复制和粘贴不同类型的内容，并查看在浏览器中可用的信息。
5.Pyodide REPL
名称 ：Pyodide REPL
用途 ：自动化任务管理
链接 ：https://claude.site/artifacts/a3f85567-0afc-4854-b3d3-3746dd1a37f2
描述 ：该工具演示了 Pyodide（编译为 WebAssembly 的Python）可以在 Artifact 中加载。
6.Photo Camera Settings Simulator
名称 ：Photo Camera Settings Simulator
用途 ：自动化任务管理
链接 ：https://claude.site/artifacts/e645c231-8c13-4374-bb7d-271c8dd73825
描述 ：该工具使用 Fabric.js 库创建了一个相机设置模拟器。
7.LLM pricing calculator
名称 ：LLM pricing calculator
用途 ：自动化任务管理
链接 ：https://tools.simonwillison.net/llm-prices 描述 ：该工具作为使用 Google Gemini 进行视频抓取实验的一部分，构建了一个大型语言模型（LLM）的定价计算器。
8.YAML to JSON converter
名称 ：YAML to JSON converter
用途 ：自动化任务管理
链接 ：https://claude.site/artifacts/ffeb439c-fc95-428a-9224-434f5f968d51
描述 ：该工具允许用户将 YAML 转换为 JSON，并实时显示等效的 JSON 。
9.OpenAI Audio
名称 ：OpenAI Audio
用途 ：自动化任务管理
链接 ：https://tools.simonwillison.net/openai-audio
描述 ：该工具探索了 OpenAI 的新音频 API，并创建了一个网页，请求访问麦克风，录制一段音频，并将其发送到 OpenAI API 。
10.QR Code Decoder
名称 ：QR Code Decoder
用途 ：自动化任务管理
链接 ：https://tools.simonwillison.net/qr
描述 ：该工具将 QR 码转换为普通 URL 。
11.Image Converter and Page Downloader
名称 ：Image Converter and Page Downloader
用途 ：自动化任务管理
链接 ：https://gistpreview.github.io/?14a2c3ef508839f26377707dbf5dd329
描述 ：该工具允许用户将照片拖放到页面上，并将其作为 base64 URL 嵌入页面。
12.HTML Entity Escaper
名称 ：HTML Entity Escaper
用途 ：自动化任务管理
链接 ：https://claude.site/artifacts/46897436-e06e-4ccc-b8f4-3df90c47f9bc
描述 ：该工具用于转义文本块中的 HTML 实体。
13.text-wrap-balance-nav
名称 ：text-wrap-balance-nav
用途 ：自动化任务管理
链接 ：https://tools.simonwillison.net/text-wrap-balance-nav
描述 ：该工具演示了 text-wrap: balance CSS 属性。
14.ARES Phonetic Alphabet Converter
名称 ：ARES Phonetic Alphabet Converter
用途 ：自动化任务管理
链接 ：https://claude.site/artifacts/aaadab20-968a-4291-8ce9-6435f6d53f4c
描述 ：该工具将文本转换为 ARES 语音字母表，用于 HAM 无线电通信。
通过Simon的具体工具案例，可以看出Claude Artifacts 是一个非常实用的工具，可以快速帮助开发者实现原型验证，值得大家借鉴学习。
原文：https://simonwillison.net/2024/Oct/21/claude-artifacts/
后台回复“入群”进群讨论。