10 Artefakte sind auf Pro-, Max-, Team- und Enterprise-Plänen verfügbar und erfordern eine Sitzung, die mit [`/login`](/docs/de/setup#authenticate) angemeldet ist. Siehe [Verfügbarkeit](#availability) für die vollständige Liste der Anforderungen.10 Artefakte sind auf Pro-, Max-, Team- und Enterprise-Plänen verfügbar und erfordern eine Sitzung, die mit [`/login`](/docs/de/setup#authenticate) angemeldet ist. Siehe [Verfügbarkeit](#availability) für die vollständige Liste der Anforderungen.

11</Note>11</Note>

12 12 

13Ein Artefakt ist eine Live-, interaktive Webseite, die Claude Code aus Ihrer Sitzung auf einer privaten URL auf claude.ai veröffentlicht. Sie öffnen sie in einem Browser, und sie wird aktualisiert, während die Sitzung fortgesetzt wird. Teilen Sie sie über die Kopfzeile der Seite, wenn jemand anderes sie auch sehen soll. Verwenden Sie beispielsweise ein Artefakt, um einen Reviewer durch einen Pull Request mit kommentierten Diffs zu führen, ein Dashboard aus Sitzungsdaten zu erstellen oder eine Untersuchungs-Timeline zu führen, die sich füllt, während Claude arbeitet.13Ein Artefakt ist eine Live-, interaktive Webseite, die Claude Code aus Ihrer Sitzung auf einer privaten URL auf claude.ai veröffentlicht. Sie öffnen sie in einem Browser, und sie wird aktualisiert, während die Sitzung fortgesetzt wird. Teilen Sie sie über die Kopfzeile der Seite, wenn jemand anderes sie auch sehen soll.

14 14 

15<Frame>15<Frame>

16 <img src="https://mintcdn.com/claude-code/kaHIYYMIYMYPxQg9/images/artifacts-viewer.png?fit=max&auto=format&n=kaHIYYMIYMYPxQg9&q=85&s=dbfd671cdb0d15f49f808b9e89778fe1" alt="Ein Artefakt, das in einem Browser unter claude.ai/code/artifact geöffnet ist. Die Kopfzeile des Viewers zeigt den Artefakttitel acme-funnel-fix, eine Schaltfläche zum Freigeben und den Avatar des Autors. Das Freigabemenü ist offen mit dem Schalter „Immer neueste Version freigeben&#x22;, einer Versionswahl mit der Anzeige „Freigabe Version 2&#x22;, einer Zielgruppenauswahl „Alle bei Acme&#x22; und einer Schaltfläche zum Kopieren des Links. Unter der Kopfzeile zeigt die Artefaktseite zwei mobile Mockups nebeneinander, ein Trichterdiagramm und eine Reihe von Metrik-Karten." width="2511" height="1890" data-path="images/artifacts-viewer.png" />16 <img src="https://mintcdn.com/claude-code/kaHIYYMIYMYPxQg9/images/artifacts-viewer.png?fit=max&auto=format&n=kaHIYYMIYMYPxQg9&q=85&s=dbfd671cdb0d15f49f808b9e89778fe1" alt="Ein Artefakt, das in einem Browser unter claude.ai/code/artifact geöffnet ist. Die Kopfzeile des Viewers zeigt den Artefakttitel acme-funnel-fix, eine Schaltfläche zum Freigeben und den Avatar des Autors. Das Freigabemenü ist offen mit dem Schalter „Immer neueste Version freigeben&#x22;, einer Versionswahl mit der Anzeige „Freigabe Version 2&#x22;, einer Zielgruppenauswahl „Alle bei Acme&#x22; und einer Schaltfläche zum Kopieren des Links. Unter der Kopfzeile zeigt die Artefaktseite zwei mobile Mockups nebeneinander, ein Trichterdiagramm und eine Reihe von Metrik-Karten." width="2511" height="1890" data-path="images/artifacts-viewer.png" />

35 Was ein Artefakt nicht ist35 Was ein Artefakt nicht ist

36</h3>36</h3>

37 37 

38Ein Artefakt ist eine Erfassung von Arbeit, keine Anwendung. Es ist eine einzelne, in sich geschlossene Seite ohne Backend, daher kann es keine Formulareingaben speichern oder mehrere Routen bedienen, und sein einziger Weg zu externen Daten, wenn jemand es anzeigt, ist das [Aufrufen von MCP-Konnektoren](#pull-live-data-with-mcp-connectors). Für ein gehostetes internes Tool mit einem Backend stellen Sie es stattdessen auf Ihrer eigenen Infrastruktur bereit. Siehe [Seitenbeschränkungen](#page-constraints) für die vollständige Liste der Limits.38Ein Artefakt ist eine Erfassung von Arbeit: eine einzelne, in sich geschlossene Seite ohne Backend, daher kann es keine Formulareingaben speichern oder mehrere Routen bedienen, und sein einziger Weg zu externen Daten, wenn jemand es anzeigt, ist das [Aufrufen von MCP-Konnektoren](#pull-live-data-with-mcp-connectors). Für ein gehostetes internes Tool mit einem Backend stellen Sie es stattdessen auf Ihrer eigenen Infrastruktur bereit. Siehe [Seitenbeschränkungen](#page-constraints) für die vollständige Liste der Limits.

39 39 

40<h2 id="create-an-artifact">40<h2 id="create-an-artifact">

41 Erstellen Sie ein Artefakt41 Erstellen Sie ein Artefakt

51Build a dashboard artifact of last week's deploy failures by service and keep it updated as you investigate.51Build a dashboard artifact of last week's deploy failures by service and keep it updated as you investigate.

52```52```

53 53 

54Claude schreibt die Seite in eine HTML- oder Markdown-Datei in Ihrem Projekt und veröffentlicht sie dann. Bevor Claude Code ein neues Artefakt veröffentlicht, fragt es um Genehmigung; es könnte etwa sagen: `Claude wants to publish "Deploy failures by service" (deploy-failures.html) to a private page on claude.ai`. Das erneute Veröffentlichen eines Artefakts, das Sie bereits genehmigt haben, wird nicht erneut angefordert.54Sofern Sie keinen Speicherort angeben, schreibt Claude die Seite in eine HTML- oder Markdown-Datei in einem temporären Verzeichnis außerhalb Ihres Projekts und veröffentlicht sie dann. Das Veröffentlichen eines neuen Artefakts erfolgt über den [Berechtigungsmodus](/docs/de/permission-modes) Ihrer Sitzung:

55 55 

56Wählen Sie **Ja**, um zu veröffentlichen. Claude gibt die URL aus, und Ihr Browser öffnet die neue Seite. Drücken Sie `Ctrl+]` jederzeit, um das neueste Artefakt aus dem Terminal erneut zu öffnen.56* **Auto-Modus**: Der Klassifizierer überprüft die Veröffentlichung, anstatt Sie zu fragen, sodass Claude eine Seite veröffentlichen kann, ohne dass Sie eine Aufforderung sehen. Welcher Modus Ihre Sitzungen starten, hängt von Ihrem Plan ab; siehe [Der Startberechtigungsmodus](/docs/de/permission-modes#eliminate-prompts-with-auto-mode).

57* **Manueller Modus und Bearbeitungen akzeptieren-Modus**: Claude Code fragt um Genehmigung; es könnte etwa sagen: `Claude wants to publish deploy-failures.html, uploading it to claude.ai (Anthropic's servers) to host as the page "Deploy failures by service", private to you until you share it`. Wählen Sie **Ja**, um zu veröffentlichen.

58 

59Nachdem Sie ein Artefakt einmal genehmigt haben, veröffentlicht Claude Code es erneut, ohne zu fragen, und fragt in einigen Fällen erneut, einschließlich wenn:

60 

61* Claude deklariert eine Laufzeitfähigkeit für die Seite, wie [Konnektor-Aufrufe](#pull-live-data-with-mcp-connectors)

62* Sie haben es seitdem [öffentlich freigegeben](#share-an-artifact)

63* Sie haben es seitdem mit bestimmten Personen oder Ihrer Organisation freigegeben, wobei die neueste Version als die Version ausgewählt ist, die Betrachter sehen

64 

65Nach der ersten Veröffentlichung druckt Claude die URL aus, und Ihr Browser öffnet die neue Seite. Drücken Sie `Ctrl+]` jederzeit, um das neueste Artefakt aus dem Terminal erneut zu öffnen.

57 66 

58Claude wählt den Titel des Artefakts und ein Emoji für sein Browser-Tab-Symbol. Beide werden in Ihrer [Galerie von Artefakten](#share-an-artifact) auf claude.ai und in freigegebenen Links angezeigt, daher bitten Sie Claude, einen bestimmten Titel oder ein bestimmtes Symbol zu verwenden, wenn Sie einen möchten.67Claude wählt den Titel des Artefakts und ein Emoji für sein Browser-Tab-Symbol. Beide werden in Ihrer [Galerie von Artefakten](#share-an-artifact) auf claude.ai und in freigegebenen Links angezeigt, daher bitten Sie Claude, einen bestimmten Titel oder ein bestimmtes Symbol zu verwenden, wenn Sie einen möchten.

59 68 

73 82 

74Jeder, der die Seite offen hat, sieht die Aktualisierung an Ort und Stelle. Jede Veröffentlichung wird zu einer Version, und aus der **Freigabe**-Kontrolle im Seitenkopf können Sie auswählen, welche Version Betrachter sehen.83Jeder, der die Seite offen hat, sieht die Aktualisierung an Ort und Stelle. Jede Veröffentlichung wird zu einer Version, und aus der **Freigabe**-Kontrolle im Seitenkopf können Sie auswählen, welche Version Betrachter sehen.

75 84 

76Um ein Artefakt aus einer anderen Sitzung zu aktualisieren, geben Sie Claude die URL des Artefakts und bitten Sie es, es zu überarbeiten. Ohne die URL erstellt eine neue Sitzung immer ein neues Artefakt, anstatt ein vorhandenes zu aktualisieren.85Um ein Artefakt aus einer anderen Sitzung zu aktualisieren, geben Sie Claude die URL des Artefakts, oder fügen Sie es mit [`/artifacts`](#find-an-artifact-again) an. Ohne beides erstellt eine neue Sitzung immer ein neues Artefakt, anstatt ein vorhandenes zu aktualisieren.

77 86 

78```text wrap theme={null}87```text wrap theme={null}

79Update https://claude.ai/code/artifact/5fbea6f3-... with today's numbers.88Update https://claude.ai/code/artifact/5fbea6f3-... with today's numbers.

80```89```

81 90 

91<h2 id="find-an-artifact-again">

92 Ein Artefakt erneut finden

93</h2>

94 

95Führen Sie `/artifacts` in Claude Code aus, um jedes Artefakt aufzulisten, das Sie besitzen, und jedes Artefakt, das mit Ihnen geteilt wurde. Wählen Sie eines aus und drücken Sie `o`, um es in Ihrem Browser zu öffnen, oder `c`, um seinen Link zu kopieren. Drücken Sie `Enter`, um es an die aktuelle Sitzung anzufügen; vor v2.1.216 öffnete `Enter` es in Ihrem Browser. Claude Code liest die Liste aus Ihrem claude.ai-Konto, daher funktioniert es in einer neuen Sitzung und nach `/clear`, wenn der Link aus dem Terminal gescrollt ist. Erfordert Claude Code v2.1.208 oder später.

96 

82<h2 id="share-an-artifact">97<h2 id="share-an-artifact">

83 Ein Artefakt teilen98 Ein Artefakt teilen

84</h2>99</h2>

85 100 

86Ein neues Artefakt ist zunächst nur für Sie sichtbar. Um es zu teilen, öffnen Sie das Artefakt in Ihrem Browser und verwenden Sie die **Freigabe**-Kontrolle in der Seitenkopfzeile. Die Kopfzeile nennt Sie als Autor des Artefakts, sodass jeder, mit dem Sie es teilen, sehen kann, wer die Seite veröffentlicht hat. Sie verlinkt auch auf Ihre Galerie unter [claude.ai/code/artifacts](https://claude.ai/code/artifacts), die alle Artefakte auflistet, die Sie erstellt haben.101Ein neues Artefakt ist zunächst nur für Sie sichtbar. Um es zu teilen, öffnen Sie das Artefakt in Ihrem Browser und verwenden Sie die **Freigabe**-Kontrolle in der Seitenkopfzeile. Die Kopfzeile verlinkt auch auf Ihre Galerie unter [claude.ai/code/artifacts](https://claude.ai/code/artifacts), die alle Artefakte auflistet, die Sie erstellt haben.

102 

103Betrachter in Ihrer Organisation können sehen, wer die Seite veröffentlicht hat: Bei einem Artefakt, das innerhalb Ihrer Organisation freigegeben ist, ist Ihr Name im Titelmenü, und bei einem öffentlichen Artefakt ist es in der Seitenkopfzeile für angemeldete Betrachter in Ihrer Organisation. Ein Betrachter, der einen öffentlichen Link öffnet, ohne sich anzumelden, oder von außerhalb Ihrer Organisation, sieht das Label `Content is user-generated and unverified.` anstelle Ihres Namens.

87 104 

88Mit wem Sie teilen können, hängt von Ihrem Plan ab:105Mit wem Sie teilen können, hängt von Ihrem Plan ab:

89 106 

96 113 

97Personen, mit denen Sie teilen, sind standardmäßig Betrachter: Sie sehen jede Version, die Sie veröffentlichen, können aber die Seite nicht ändern. Bei Team- und Enterprise-Plänen können Sie jemanden auch zum Bearbeiter machen. Fügen Sie im Freigabedialog eine Person hinzu und ändern Sie ihre Rolle von **Betrachter** zu **Bearbeiter**.114Personen, mit denen Sie teilen, sind standardmäßig Betrachter: Sie sehen jede Version, die Sie veröffentlichen, können aber die Seite nicht ändern. Bei Team- und Enterprise-Plänen können Sie jemanden auch zum Bearbeiter machen. Fügen Sie im Freigabedialog eine Person hinzu und ändern Sie ihre Rolle von **Betrachter** zu **Bearbeiter**.

98 115 

99Ein Bearbeiter veröffentlicht neue Versionen auf die gleiche Weise wie Sie [das Artefakt aus einer anderen Sitzung aktualisieren](#update-an-artifact): Er oder sie gibt Claude die URL des Artefakts in seiner oder ihrer eigenen Sitzung, und Claude ruft den aktuellen Inhalt ab und veröffentlicht ihn mit seinen oder ihren Änderungen erneut. Jeder, der die Seite offen hat, sieht jede Aktualisierung live.116Ein Bearbeiter veröffentlicht neue Versionen auf die gleiche Weise wie Sie [das Artefakt aus einer anderen Sitzung aktualisieren](#update-an-artifact): Er oder sie gibt Claude die URL des Artefakts, oder fügt es aus [`/artifacts`](#find-an-artifact-again) an, und Claude ruft den aktuellen Inhalt ab und veröffentlicht ihn mit seinen oder ihren Änderungen erneut. Jeder, der die Seite offen hat, sieht jede Aktualisierung live.

117 

118<h2 id="collect-comments-on-an-artifact">

119 Sammeln Sie Kommentare zu einem Artefakt

120</h2>

121 

122Wenn Sie ein Artefakt innerhalb Ihrer Organisation freigeben, können die Personen, mit denen Sie es teilen, Kommentare auf der Seite hinterlassen, und Sie können Claude diese Kommentare lesen und darauf antworten lassen. Sie benötigen Claude Code v2.1.221 oder später und einen Team- oder Enterprise-Plan, da nur ein Artefakt, das Sie [innerhalb Ihrer Organisation freigeben](#share-an-artifact), Kommentare akzeptiert. Claude liest die Kommentare in zwei Fällen:

123 

124* **Sie bitten Claude, sie zu lesen**: Geben Sie Claude die URL des Artefakts und bitten Sie um die Kommentare. Claude listet jeden Thread auf und markiert die Kommentare, die jemand, der das Artefakt bearbeiten kann, an ihn gesendet hat.

125* **Jemand, der das Artefakt bearbeiten kann, sendet einen Kommentar an Claude**: In einem Thread auf der Seite sendet er oder sie einen Kommentar mit **An Claude senden**, oder erwähnt `@claude` in einem. Auf beide Arten aktivieren sie den Thread.

126 

127Claude kann nur auf einen aktivierten Thread antworten oder ihn auflösen. Andere Threads bleiben offen, bis eine Person sie auf der Seite auflöst. Betrachter sehen jede Antwort, die Claude zugeordnet ist, über Sie.

128 

129Wenn Sie ein Artefakt öffentlich freigeben, können Betrachter keine Kommentare hinterlassen: Die Seite sagt `Comments aren't available while this Artifact is shared publicly.` Um ein Artefakt, das bereits Kommentar-Threads hat, auf einen öffentlichen Link umzuschalten, löschen Sie die Threads zuerst.

130 

131Um die Kommentare selbst zu erfragen, geben Sie Claude die URL:

132 

133```text wrap theme={null}

134Read the comments on https://claude.ai/code/artifact/5fbea6f3-... and make the changes the commenters ask for.

135```

136 

137Wenn Claude Ihnen sagt, dass es keine Kommentare lesen kann, überprüfen Sie drei Dinge:

138 

139* Sie führen Claude Code v2.1.221 oder später aus.

140* Sie befinden sich nicht in Ihrer ersten Sitzung, seit Sie Claude Code installiert oder von einer Version vor v2.1.221 aktualisiert haben. In dieser [ersten Sitzung nach einer Installation oder einem Upgrade](/docs/de/env-vars#first-session-after-an-install-or-upgrade) kann Claude möglicherweise noch keine Kommentare lesen; starten Sie eine neue Sitzung und fragen Sie erneut.

141* Sie haben das Abrufen von Feature-Flags nicht ausgeschaltet.

142 

143<h3 id="let-claude-reply-to-comments-on-its-own">

144 Lassen Sie Claude auf Kommentare von selbst antworten

145</h3>

146 

147Nachdem Ihre Sitzung ein Artefakt veröffentlicht hat, überwacht Claude Code dieses Artefakt auf Kommentare, solange die Sitzung läuft. Wenn jemand, der das Artefakt bearbeiten kann, einen Kommentar an Claude sendet, erreicht er Ihre Sitzung sofort, und Claude kann den Thread lesen und antworten, ohne dass Sie fragen.

148 

149Sie benötigen Claude Code v2.1.228 oder später. Wenn Sie [das Abrufen von Feature-Flags](/docs/de/env-vars#features-that-need-feature-flag-fetching) ausgeschaltet haben, überwacht Claude Code keine Kommentare.

150 

151Ihr [Berechtigungsmodus](/docs/de/permission-modes) entscheidet, was Claude tut, wenn ein gesendeter Kommentar ankommt:

152 

153* **Claude antwortet von selbst**: Wenn Ihr Berechtigungsmodus Claude ermöglicht, die Antwort zu posten, ohne Sie zu fragen, liest Claude den Thread und antwortet, und bearbeitet das Artefakt, wenn der Kommentar eine Änderung verlangt. Sie sehen `Auto-replied to comment thread on Artifact: <name>` oder `Auto-edited Artifact: <name> in response to a comment thread`.

154* **Claude wartet auf Sie**: Außerhalb des Plan-Modus, wenn das Posten der Antwort Ihre Genehmigung benötigen würde, sehen Sie `Comments are waiting on Artifact: <name>`. Claude fragt Sie dann um Genehmigung, um den Thread zu lesen, und erneut, um die Antwort zu posten.

155* **Claude pausiert im Plan-Modus**: Sie sehen `Comments are waiting on Artifact: <name>`, und Claude antwortet nicht, bis Sie den Plan-Modus verlassen und es bitten, zu lesen und zu antworten.

156 

157Claude stoppt auch das automatische Antworten auf ein Artefakt, nachdem es 60 gesendete Kommentare oder Thread-Aktivierungen auf diesem Artefakt innerhalb einer Stunde bearbeitet hat. Sie sehen `Comments are waiting on Artifact: <name>` einmal, und Claude nimmt wieder auf, wenn diese Stunde Kommentare veralten.

158 

159Führen Sie `/tasks` aus, um jedes Artefakt zu sehen, das Ihre Sitzung überwacht, aufgelistet als eine Live-Updates-Aufgabe. Sie können Claude auf folgende Weise davon abhalten, von selbst zu antworten:

160 

161* **Drücken Sie Ctrl+C einmal bei einer leeren Eingabeaufforderung**: Claude pausiert das Antworten auf jedem Artefakt, das Ihre Sitzung überwacht. Antworten beginnen wieder, nachdem Sie Ihre nächste Nachricht senden.

162* **Stoppen Sie die Aufgabe in `/tasks`**: Claude stoppt das Antworten auf diesem Artefakt, bis Sie es bitten, Antworten dort zu fortsetzen. Das erneute Veröffentlichen des Artefakts startet Antworten nicht erneut, und der Stopp gilt immer noch, wenn Sie die Sitzung später fortsetzen.

163* **Drücken Sie `Ctrl+X Ctrl+K` zweimal innerhalb von 3 Sekunden**: Der Akkord, der [jeden laufenden Hintergrund-Subagenten stoppt](/docs/de/interactive-mode#general-controls), stoppt auch Claude vom Antworten auf jedem Artefakt für den Rest der Sitzung. Das Bitten von Claude, Antworten zu fortsetzen, macht diesen Stopp nicht rückgängig.

164 

165Wenn der Dienst, der Kommentare liefert, nicht verfügbar wird oder nicht mehr antwortet, versucht Claude Code, sich eine Weile erneut zu verbinden, und stoppt dann die Überwachung jedes Artefakts, das Ihre Sitzung überwacht hat.

100 166 

101<h2 id="pull-live-data-with-mcp-connectors">167<h2 id="pull-live-data-with-mcp-connectors">

102 Live-Daten mit MCP-Konnektoren abrufen168 Frische Daten mit MCP-Konnektoren abrufen

103</h2>169</h2>

104 170 

105Ein Artefakt kann [MCP-Konnektoren](/docs/de/mcp#use-mcp-servers-from-claude-ai) jedes Mal aufrufen, wenn jemand es anzeigt, sodass die Seite aktuelle Daten anstelle eines Snapshots aus der Sitzung anzeigt, in der sie erstellt wurde. Konnektoraufrufe aus Artefakten sind in den Plänen Pro, Max, Team und Enterprise verfügbar und erfordern Claude Code v2.1.209 oder später. In früheren Versionen veröffentlicht Claude die Seite mit den Daten, die die Sitzung während der Erstellung gesammelt hat.171Ein Artefakt kann [MCP-Konnektoren](/docs/de/mcp#use-mcp-servers-from-claude-ai) jedes Mal aufrufen, wenn jemand es anzeigt, sodass die Seite aktuelle Daten anstelle eines Snapshots aus der Sitzung anzeigt, in der sie erstellt wurde. Konnektoraufrufe aus Artefakten sind in den Plänen Pro, Max, Team und Enterprise verfügbar und erfordern Claude Code v2.1.209 oder später. In früheren Versionen veröffentlicht Claude die Seite mit den Daten, die die Sitzung während der Erstellung gesammelt hat.

198 Verbessern Sie das visuelle Design264 Verbessern Sie das visuelle Design

199</h2>265</h2>

200 266 

201Ab Claude Code v2.1.183 wendet Claude eine integrierte Design-Fähigkeit an, wenn es ein Artefakt erstellt, sodass Seiten eine absichtliche Palette, Typografie und Layout ohne zusätzliche Aufforderung erhalten. Diese Fähigkeit sucht auch nach einem vorhandenen Design-System in Ihrem Projekt, bevor es sein eigenes auswählt. Um Artefakte konsistent mit dem Branding Ihres Produkts zu halten, notieren Sie Ihre Design-Token dort, wo Claude sie finden kann, wie in der [CLAUDE.md](/docs/de/memory) des Projekts oder einer Theme-Datei in Ihrem Repository:267Claude wendet eine integrierte Design-Fähigkeit an, wenn es ein Artefakt erstellt, sodass Seiten eine absichtliche Palette, Typografie und Layout ohne zusätzliche Aufforderung erhalten. Erfordert Claude Code v2.1.182 oder später. Diese Fähigkeit sucht auch nach einem vorhandenen Design-System in Ihrem Projekt, bevor es sein eigenes auswählt. Design-Token sind die benannten Farb-, Typografie- und Abstands-Werte, die Ihr Design-System wiederverwenden. Um Artefakte konsistent mit dem Branding Ihres Produkts zu halten, notieren Sie sie dort, wo Claude sie finden kann, wie in der [CLAUDE.md](/docs/de/memory) des Projekts oder einer Theme-Datei in Ihrem Repository:

202 268 

203```markdown theme={null}269```markdown theme={null}

204## Design system270## Design system

210 276 

211Claude behandelt Ihr Design-System als höhere Priorität als seine eigenen Entscheidungen, und Ihren Prompt als höhere Priorität als beide. Die Überschrift und das Format oben sind ein Beispiel; jede klare Liste von Farben, Schriftarten und Abstände funktioniert.277Claude behandelt Ihr Design-System als höhere Priorität als seine eigenen Entscheidungen, und Ihren Prompt als höhere Priorität als beide. Die Überschrift und das Format oben sind ein Beispiel; jede klare Liste von Farben, Schriftarten und Abstände funktioniert.

212 278 

279Für Typografie kann Claude eine Schriftart von Google Fonts laden, der einzigen externen Schriftquelle, die eine Artefakt-Seite laden kann. Claude inline jede andere Schriftart als `@font-face` Data-URI und gibt jeder Schriftart einen Fallback-Stack, sodass die Seite immer noch gerendert wird, wenn eine Schriftart nicht geladen wird. Um eine bestimmte Schriftart zu verwenden, nennen Sie sie in Ihrem Prompt oder Ihrem Design-System.

280 

281<h2 id="draft-a-design-canvas">

282 Entwerfen Sie eine Design-Canvas

283</h2>

284 

285Um eine Benutzeroberfläche, einen Bildschirmfluss, eine Landing Page oder ein Poster zu skizzieren, anstatt eine Seite zu erstellen, führen Sie `/design` mit einer kurzen Beschreibung aus. Claude entwirft das Design als Artboards auf einer Canvas und veröffentlicht die Canvas als Artefakt, das eine Forschungsvorschau des Claude Design-Editors ausführt. Die Beschreibung nennt, was Sie gezeichnet haben möchten:

286 

287```text wrap theme={null}

288/design a settings screen for a mobile banking app

289```

290 

291Öffnen Sie das veröffentlichte Artefakt, um die Artboards zu überprüfen. Wenn das Speichern für Ihr Konto aktiviert ist, wählen Sie ein Element auf einem Artboard aus, ändern Sie es und speichern Sie, um eine neue Version zu veröffentlichen; andernfalls sehen Sie den Entwurf und exportieren ihn als PNG oder PDF.

292 

293`/design` erfordert eine Sitzung, in der [Artefakte verfügbar sind](#availability), und Claude Code v2.1.234 oder später.

294 

213<h2 id="page-constraints">295<h2 id="page-constraints">

214 Seitenbeschränkungen296 Seitenbeschränkungen

215</h2>297</h2>

217Jedes Artefakt ist eine einzelne, in sich geschlossene Seite. Claude Code umhüllt die Datei, die Sie veröffentlichen, in einer HTML-Dokumentshell und bedient sie unter einer strikten Content Security Policy (CSP), die formt, was die Seite tun kann.299Jedes Artefakt ist eine einzelne, in sich geschlossene Seite. Claude Code umhüllt die Datei, die Sie veröffentlichen, in einer HTML-Dokumentshell und bedient sie unter einer strikten Content Security Policy (CSP), die formt, was die Seite tun kann.

218 300 

219| Beschränkung | Auswirkung |301| Beschränkung | Auswirkung |

220| :---------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |302| :--------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

221| Keine externen Anfragen | Die CSP blockiert Skripte, Stylesheets, Schriftarten und Bilder, die von einem anderen Host geladen werden, zusammen mit `fetch`, XHR und WebSocket-Aufrufen. Claude inline CSS und JavaScript und bettet Bilder als Data-URIs ein, damit die Seite ohne externe Anfrage rendert. [Connector-Aufrufe](#pull-live-data-with-mcp-connectors) sind die Ausnahme: die Seite übergibt sie an claude.ai, das selbst den Netzwerkaufruf tätigt. |303| Externe Anfragen | Die Seite kann Schriftarten von Google Fonts laden und Skripte von [vier öffentlichen CDN-Hosts](#allowlist-the-viewer-domain): cdnjs, den Tailwind- und jQuery-CDNs und ausgewählten Pfaden auf jsDelivr wie `/npm/`. Die CSP blockiert jedes externe Bild und alle anderen externen Skripte, Stylesheets und Schriftarten, und lässt `fetch`, XHR und WebSocket-Aufrufe nur den Ursprung der Seite selbst und die Google Fonts-Hosts erreichen. Claude lädt daher jede Bibliothek, die die Seite benötigt, von einem dieser CDNs, inline alle anderen CSS und JavaScript, und bettet Bilder als Data-URIs ein. [Connector-Aufrufe](#pull-live-data-with-mcp-connectors) erfolgen über claude.ai, das den Netzwerkaufruf selbst tätigt. |

222| Kein Backend | Ein Artefakt ist eine statische Seite. Es kann keine Daten speichern, die über ein Formular eingereicht werden, oder Betrachter selbst authentifizieren. Die einzige Möglichkeit, Daten abzurufen, wenn jemand die Seite anzeigt, ist das [Aufrufen von MCP-Connectoren](#pull-live-data-with-mcp-connectors), nicht eine eigene API. |304| Kein Backend | Ein Artefakt ist eine statische Seite. Es kann keine Daten speichern, die über ein Formular eingereicht werden, oder Betrachter selbst authentifizieren. Der einzige Weg, Daten abzurufen, wenn jemand die Seite anzeigt, ist das [Aufrufen von MCP-Konnektoren](#pull-live-data-with-mcp-connectors), nicht eine eigene API. |

223| Einzelne Seite | Relative Links werden nicht aufgelöst, da nichts neben der Seite bereitgestellt wird. Für mehrteilige Inhalte verwendet Claude In-Page-Anker anstelle von separaten Dateien. |305| Einzelne Seite | Relative Links werden nicht aufgelöst, da nichts neben der Seite bereitgestellt wird. Für mehrteilige Inhalte verwendet Claude In-Page-Anker anstelle von separaten Dateien. |

224| Quelldateitypen | Die veröffentlichte Datei muss `.html`, `.htm` oder `.md` sein. Markdown-Dateien werden als gestyltes HTML gerendert. |306| Quelldateitypen | Die veröffentlichte Datei muss `.html`, `.htm` oder `.md` sein. Markdown-Dateien werden als gestyltes HTML gerendert. |

225| Gerenderte Größe | Die gerenderte Seite muss 16 MiB oder kleiner sein. Große eingebettete Bilder sind die übliche Ursache, wenn eine Veröffentlichung aus Größengründen fehlschlägt. |307| Gerenderte Größe | Die gerenderte Seite muss 16 MiB oder kleiner sein. Große eingebettete Bilder sind die übliche Ursache, wenn eine Veröffentlichung aus Größengründen fehlschlägt. |

250 332 

251Um Artefakte für Ihre eigenen Sitzungen unabhängig von der Einstellung Ihrer Organisation auszuschalten, verwenden Sie eine der folgenden Optionen:333Um Artefakte für Ihre eigenen Sitzungen unabhängig von der Einstellung Ihrer Organisation auszuschalten, verwenden Sie eine der folgenden Optionen:

252 334 

253| Methode | Einstellung |335| Wo | Was zu tun ist |

254| :------------------------------------ | :----------------------------------------------- |336| :------------------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------ |

255| [Einstellungsdatei](/docs/de/settings) | `"disableArtifact": true` |337| [`/config`](/docs/de/commands) | Schalten Sie die Zeile **Artefakte** aus, die [`"enableArtifact": false`](/docs/de/settings-reference#enableartifact) in Ihre Benutzereinstellungen schreibt |

256| [Umgebungsvariable](/docs/de/env-vars) | `CLAUDE_CODE_DISABLE_ARTIFACT=1` |338| [Einstellungsdatei](/docs/de/settings) | Setzen Sie `"enableArtifact": false`. Das veraltete `"disableArtifact": true` schaltet auch Artefakte aus |

339| [Umgebungsvariable](/docs/de/env-vars) | Setzen Sie `CLAUDE_CODE_DISABLE_ARTIFACT=1` |

257| [Berechtigungsregel](/docs/de/permissions) | Fügen Sie `Artifact` zu `permissions.deny` hinzu |340| [Berechtigungsregel](/docs/de/permissions) | Fügen Sie `Artifact` zu `permissions.deny` hinzu |

258 341 

342Sobald Sie Artefakte in einer [`--settings`](/docs/de/cli-reference#cli-flags)-Datei oder mit `CLAUDE_CODE_DISABLE_ARTIFACT` ausschalten, oder Ihr Administrator schaltet sie in [verwalteten Einstellungen](/docs/de/server-managed-settings) aus, schaltet keine Einstellungsdatei sie wieder ein. Vor v2.1.242 konnte eine Datei höher im [Prioritätsstapel](/docs/de/settings#settings-precedence) Artefakte wieder einschalten, selbst wenn eine Datei mit niedrigerer Priorität `"enableArtifact": false` setzte.

343 

344Sie können auch `"enableArtifact": false` in der `.claude/settings.json` oder `.claude/settings.local.json` eines Projekts setzen, um Artefakte für Sitzungen in diesem Projekt auszuschalten. Ein `"enableArtifact": true` in einer der beiden Dateien schaltet sie nicht wieder ein. Das Ehren des Schlüssels in Projekt- und lokalen Einstellungen erfordert Claude Code v2.1.242 oder später.

345 

259<h2 id="manage-artifacts-for-your-organization">346<h2 id="manage-artifacts-for-your-organization">

260 Verwalten Sie Artefakte für Ihre Organisation347 Verwalten Sie Artefakte für Ihre Organisation

261</h2>348</h2>

266 Aktivieren oder deaktivieren Sie Artefakte353 Aktivieren oder deaktivieren Sie Artefakte

267</h3>354</h3>

268 355 

269Um Artefakte für die gesamte Organisation zu aktivieren oder zu deaktivieren, gehen Sie zu **Einstellungen > Claude Code > Funktionen** und verwenden Sie den Umschalter **Artefakte**. Bei Enterprise-Plänen mit rollenbasierter Zugriffskontrolle können Sie Artefakte zusätzlich auf bestimmte Rollen beschränken: Gehen Sie zu **Einstellungen > Rollen**, bearbeiten Sie eine Rolle und setzen Sie die Berechtigung **Artefakte** unter der Gruppe **Claude Code**.356Um Artefakte für die gesamte Organisation zu aktivieren oder zu deaktivieren, gehen Sie zu [**Einstellungen > Claude Code > Funktionen**](https://claude.ai/admin-settings/claude-code) und verwenden Sie den Umschalter **Artefakte**. Bei Enterprise-Plänen mit rollenbasierter Zugriffskontrolle können Sie Artefakte zusätzlich auf bestimmte Rollen beschränken: Gehen Sie zu [**Einstellungen > Rollen**](https://claude.ai/admin-settings/roles), bearbeiten Sie eine Rolle und setzen Sie die Berechtigung **Artefakte** unter der Gruppe **Claude Code**.

270 357 

271<h3 id="control-connector-calls-from-artifacts">358<h3 id="control-connector-calls-from-artifacts">

272 Steuern Sie Connector-Aufrufe aus Artefakten359 Steuern Sie Connector-Aufrufe aus Artefakten

273</h3>360</h3>

274 361 

275[Connector-Aufrufe aus Artefakten](#pull-live-data-with-mcp-connectors) haben ihren eigenen Umschalter, getrennt vom Umschalter **Artefakte**, der Artefakte ein- oder ausschaltet. Gehen Sie zu [**Einstellungen > Funktionen**](https://claude.ai/admin-settings/capabilities) und verwenden Sie den Umschalter **Artefakt-Connectoren aktivieren**. Der gleiche Umschalter regelt Connector-Aufrufe aus Artefakten, die in claude.ai-Gesprächen erstellt wurden, weshalb er unter **Einstellungen > Funktionen** statt unter **Einstellungen > Claude Code** angeordnet ist.362[Connector-Aufrufe aus Artefakten](#pull-live-data-with-mcp-connectors) haben ihren eigenen Umschalter, getrennt vom Umschalter **Artefakte**, der Artefakte ein- oder ausschaltet. Gehen Sie zu [**Einstellungen > Funktionen**](https://claude.ai/admin-settings/capabilities) und verwenden Sie den Umschalter **Artefakt-Konnektoren aktivieren**. Der gleiche Umschalter regelt Connector-Aufrufe aus Artefakten, die in claude.ai-Gesprächen erstellt wurden, weshalb er unter **Einstellungen > Funktionen** statt unter **Einstellungen > Claude Code** angeordnet ist.

276 363 

277<h3 id="control-public-sharing">364<h3 id="control-public-sharing">

278 Steuern Sie die öffentliche Freigabe365 Steuern Sie die öffentliche Freigabe

284 Legen Sie eine Aufbewahrungsrichtlinie fest371 Legen Sie eine Aufbewahrungsrichtlinie fest

285</h3>372</h3>

286 373 

287Um festzulegen, wie lange Artefakte vor automatischer Löschung aufbewahrt werden, gehen Sie zu **Einstellungen > Datenschutz- und Datenschutzkontrollen**. Sie können separate Aufbewahrungszeiträume für Artefakte festlegen, die noch privat für ihren Autor sind, und Artefakte, die freigegeben wurden.374Um festzulegen, wie lange Artefakte vor automatischer Löschung aufbewahrt werden, gehen Sie zu [**Einstellungen > Datenschutz- und Datenschutzkontrollen**](https://claude.ai/admin-settings/data-privacy-controls). Sie können separate Aufbewahrungszeiträume für Artefakte festlegen, die noch privat für ihren Autor sind, und Artefakte, die freigegeben wurden.

288 375 

289<h3 id="review-the-audit-log">376<h3 id="review-the-audit-log">

290 Überprüfen Sie das Audit-Protokoll377 Überprüfen Sie das Audit-Protokoll

298 385 

299Der Viewer auf claude.ai lädt jedes Artefakt aus einer Sandbox-`*.claudeusercontent.com`-Origin. Wenn Ihre Organisation den ausgehenden Netzwerkzugriff einschränkt, fügen Sie diese Domain zu Ihrer Allowlist neben `claude.ai` hinzu. Siehe [Netzwerkzugriffsanforderungen](/docs/de/network-config#network-access-requirements) für die vollständige Liste.386Der Viewer auf claude.ai lädt jedes Artefakt aus einer Sandbox-`*.claudeusercontent.com`-Origin. Wenn Ihre Organisation den ausgehenden Netzwerkzugriff einschränkt, fügen Sie diese Domain zu Ihrer Allowlist neben `claude.ai` hinzu. Siehe [Netzwerkzugriffsanforderungen](/docs/de/network-config#network-access-requirements) für die vollständige Liste.

300 387 

388Ein Artefakt, das eine Schriftart von [Google Fonts](#improve-the-visual-design) lädt, fordert auch `fonts.googleapis.com` und `fonts.gstatic.com` an. Beide Hosts sind optional. Wenn Sie sie blockieren, werden Artefakte in Fallback-Schriftarten gerendert. Blockieren Sie mit einer schnellen Ablehnung, anstatt eines stillen Drops, damit die Schriftartanfrage sofort fehlschlägt, anstatt das erste Rendern der Seite zu verzögern.

389 

390Artefakte können auch JavaScript-Bibliotheken wie React oder ein Charting-Paket von `cdnjs.cloudflare.com`, `cdn.jsdelivr.net`, `cdn.tailwindcss.com` und `code.jquery.com` laden, und von keinem anderen externen Host. Wenn Sie diese Hosts blockieren, funktionieren die Teile eines Artefakts, die von einer Bibliothek abhängen, nicht, und im Gegensatz zu einer blockierten Schriftart hat eine blockierte Bibliothek keinen Fallback. Blockieren Sie auch hier mit einer schnellen Ablehnung, damit eine blockierte Bibliotheksanfrage sofort fehlschlägt, anstatt zu hängen, bis sie abläuft.

391 

301<h3 id="list-and-delete-artifacts-with-the-compliance-api">392<h3 id="list-and-delete-artifacts-with-the-compliance-api">

302 Listen Sie Artefakte mit der Compliance API auf und löschen Sie sie393 Listen Sie Artefakte mit der Compliance API auf und löschen Sie sie

303</h3>394</h3>