Artifacts in Claude Code: Der Leitfaden für Anwender

Anthropic hat Artifacts zu Claude Code hinzugefügt. Diese Funktion verwandelt Ihre Programmierarbeit in Live-Webseiten, die Sie mit Ihrem Team teilen können.

Artifacts sind keine statischen Dateien. Es sind interaktive HTML-Seiten. Sie aktualisieren sich während der Arbeit. Sie nutzen Ihren tatsächlichen Code, Ihre Dateien und Testergebnisse, um Ansichten zu erstellen.

Sie können sie verwenden für:

  • PR-Walkthroughs mit Code-Diffs
  • Systemarchitektur-Diagramme
  • Interaktive Dashboards
  • Live-Statusseiten für Vorfälle
  • Sicherheits- und Lizenz-Audits

So verwenden Sie sie:

  1. Anmelden: Führen Sie /login in Ihrer Claude Code-Sitzung aus.
  2. Fragen: Sagen Sie Claude, er soll ein Dashboard oder ein Diagramm erstellen.
  3. Erstellen: Claude generiert die HTML-Seite.
  4. Teilen: Klicken Sie auf die Schaltfläche „Teilen“, um Ihrem Team einen privaten Link zu senden.

Verfügbarkeit und Datenschutz:

  • Dies befindet sich in der Beta-Phase für Team- und Enterprise-Tarife.
  • Einzelnutzer-Tarife haben noch keinen Zugriff.
  • Artifacts sind privat. Nur authentifizierte Mitglieder Ihrer Organisation können sie sehen.

Anthropic hat auch Claude Design aktualisiert, um die Lücke zwischen Design und Code zu schließen. Sie können nun den Befehl /design-sync verwenden.

Der /design-sync-Workflow:

  • Ziehen Sie Ihr Designsystem von GitHub in Claude Design.
  • Verwenden Sie /design-sync in Ihrem Terminal, um diese Designs in Ihren Code zu übernehmen.
  • Pushen Sie Code zurück zu Claude Design für visuelle Bearbeitungen.

Dies schafft einen geschlossenen Kreislauf. Sie bewegen sich von Design über Code bis hin zur Dokumentation, ohne das KI-System zu verlassen.

Dies löst ein großes Problem. Normalerweise bleibt die KI-gestützte Programmierarbeit in einem Terminal verborgen. Entwickler müssen Updates dann manuell in Slack oder Jira schreiben. Artifacts machen die Arbeit sofort sichtbar.

Die Arbeit wird zur Kommunikation.

Quelle: https://dev.to/max_quimby/artifacts-in-claude-code-the-operators-guide-4fb0

Optionale Lern-Community: https://t.me/GyaanSetuAi