# 策展 · X (Twitter) 🔥🔥🔥🔥

> 📖 本站完整內容索引（documentation index）：[llms.txt](/llms.txt)

> 作者：Boris Cherny (@bcherny) · 平台：X (Twitter) · 日期：2026-07-03

> 原始來源：https://x.com/bcherny/status/2072777472970563995

## 中文摘要

Claude Code 擴展 Artifacts 功能讓使用者發布互動網頁。

Boris Cherny 在社群分享，Artifacts 功能為他的工作流程帶來很大的改變，特別是在解釋架構選項、視覺化呈現 Session 結果（如圖表與表格）、分析資料以及整理複雜的 Pull Request（PR）概覽時極為實用。Anthropic 官方隨後確認，此功能已正式開放給 Pro 與 Max 方案的使用者。

**核心功能與應用**
Artifacts 允許 Claude Code 將工作成果發布至 `claude.ai` 的私人 URL。這些頁面是完全獨立的靜態網頁，並會隨著 Session 的進行即時更新。其主要應用場景包括：
- **PR 導覽**：將程式碼差異（Diff）與註解並列，方便審閱者理解變更意圖。
- **互動式儀表板**：根據 Session 擷取的資料繪製圖表，例如呈現部署失敗率或效能統計數據。
- **方案比較**：將多種設計或實作選項並排顯示，便於評估與決策。
- **進度追蹤**：在執行長任務時，建立一個即時更新的檢查清單，讓團隊成員能隨時掌握進度。

<video src="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/1783046455423-fpgisreb.mp4" poster="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/d0c2c8d43b6f0b11.jpg" controls playsinline preload="metadata" style="max-width:100%;height:auto;display:block;margin:1rem 0"></video>
> 影片展示了 Claude Code 的 Artifacts 功能，讓開發者能將程式碼執行結果以即時網頁形式發布與分享。

**使用與技術限制**
Artifacts 的運作基於 HTML、CSS 與內嵌 JavaScript，為了確保安全性，該功能設有嚴格的內容安全政策（CSP）：
- **無外部請求**：禁止載入外部腳本、樣式表或執行 `fetch`、WebSocket 等請求，所有資源均需內嵌。
- **靜態頁面**：不具備後端功能，無法處理表單提交或在檢視時呼叫 API。
- **檔案限制**：僅支援 `.html`、`.htm` 或 `.md` 格式，且渲染後大小需在 16 MiB 以內。
- **權限管理**：Pro 與 Max 方案中，Artifacts 預設為私人；Team 與 Enterprise 方案則支援透過頁面標頭的「Share」選單，將連結分享給組織內成員。

**操作指引**
使用者可直接透過指令要求 Claude 建立 Artifacts，例如：
- 「Make an artifact that walks through this PR with the diff annotated inline.」
- 「Build a dashboard artifact of last week's deploy failures by service and keep it updated as you investigate.」

若需調整設定，可透過環境變數進行管理，例如設定 `CLAUDE_CODE_ARTIFACT_AUTO_OPEN=0` 以禁止瀏覽器在發布時自動開啟頁面。更多詳細資訊可參考官方文件 [Artifacts 說明頁面](https://code.claude.com/docs/en/artifacts)。

## 媒體內容

**影片展示了 Claude Code 的 Artifacts 功能，讓開發者能將程式碼執行結果以即時網頁形式發布與分享。**

**影片中的 Prompt 與操作**

Prompt（00:08）：

```
請將此 PR 作為 Artifact 向我說明，並在差異處加上你的推理註解
```

原文：Walk me through this PR as an artifact and annotate the diff with your reasoning

Prompt（00:44）：

```
程式碼庫中的請求是如何移動的
```

原文：How a request moves through the codebase

Prompt（00:51）：

```
將你這場工作階段拉取的延遲數據繪製成圖表
```

原文：Chart the latency numbers you pulled this session

操作步驟：

1. （00:08）輸入指令要求建立 Artifact
2. （00:16）確認發布請求
3. （00:57）按下 Ctrl + ] 重新開啟 Artifact
4. （02:06）輸入 /config 進入設定選單

**逐字稿**

- `00:00` Artifacts 現在也開放給 Pro 和 Max 使用者使用，有了 Artifacts，（Artifacts are now also available for Pro and Max users and with Artifacts,）
- `00:04` Claude 可以將自己的成果發佈為即時網頁。（Cloud can publish its own work as a live web page.）
- `00:07` 你只需要要求 Claude 建立一個 artifact 即可。（You create one by just asking Cloud to create an artifact.）
- `00:11` Claude 會直接在你的專案中將其寫成 HTML 或 Markdown 文件。（And Cloud writes it as an HTML or a markdown file right in your project.）
- `00:15` 它會詢問是否可以發佈，然後給你一個 claude.ai 的網址。（It asks if it can publish and then hands you a URL on cloud.ai.）
- `00:20` 該頁面會被託管，所以你只需要打開連結，而不必從專案中打開文件。（The page is hosted so you just have to open a link instead of having to open a file out of your project.）
- `00:26` 當 Claude 繼續工作時，它會即時在原地更新所有內容。（It updates it all real-time in place while Cloud keeps working.）
- `00:29` 所以你可以直接讓分頁保持開啟，並即時觀看所有更新。（So you can just leave the tab open and watch it all update in real-time.）
- `00:33` 這對於那些通常必須在終端機裡瞇著眼睛看的事物來說非常有用。（This is really useful for things you'd normally have to squint at in the terminal.）
- `00:37` 例如，一份帶有行內註解差異對照的 PR 導覽。（So for example, a walkthrough of a PR with a diff annotated in line.）
- `00:41` 這樣推理過程就會直接顯示在程式碼旁邊。（So the reasoning sits right next to the code.）
- `00:44` 它可以是從實際程式庫中繪製出的架構圖，（It can be an architecture diagram drawn from the actual code base,）
- `00:47` 一個關於請求如何在其間流動的導覽，（a walkthrough of how a request moves through it,）
- `00:50` 或是該工作階段已經提取出的資料儀表板。（or a dashboard of the data that a session had already pulled.）
- `00:53` 這樣你就能得到圖表，而不是表格。（So you get a chart instead of a table.）
- `00:56` 你可以隨時按下 Ctrl 加右括號來重新開啟最新的 artifacts。（You can press Ctrl right bracket any time to reopen the latest artifacts.）
- `01:01` 而你發佈的所有內容都會存放在 claude.ai/code/artifacts 的圖庫中。（And everything you've published lives in your gallery at cloud.ai slash code slash artifacts.）
- `01:07` 你的 artifacts 對你的帳號來說是私密的，且 Claude 在發佈前總是會先詢問。（Your artifacts are private to your account and Cloud always asks before it publishes.）
- `01:13` 頁面本身是完全獨立的。（The page itself is fully self-contained.）
- `01:15` 因此有嚴格的內容安全政策，沒有外部指令碼，沒有 fetch 呼叫，（So there is a strict content security policy, no external scripts, no fetch calls,）
- `01:20` 也沒有對任何其他主機的請求。（and no requests to any other host.）
- `01:22` 頁面上的任何內容都無法將資料傳送到任何地方。（Nothing on it can send data anywhere.）
- `01:25` 如果你不想使用這些功能，可以在設定中關閉 artifacts，（And if you'd rather skip all of this, you can turn off artifacts in settings）
- `01:29` 或是拒絕 artifact 工具及其權限。（or deny the artifact tool and permissions.）
- `01:32` 今天就試試看，更新 Claude Code，登入，並要求 Claude 建立一個 artifact。（So try today, update Claude Code, sign in, and ask Cloud for an artifact.）
- `01:37` 讓我知道你的想法。（Let me know what you think.）

## 標籤

Claude Code, 功能更新, CLI, Anthropic, Claude