Install
scripts/init-artifact.shFür wen
Nutze web-artifacts-builder, wenn du ein komplexes, mehrkomponentiges claude.ai-HTML-artifact machst und State-Management, Routing oder shadcn/ui-Komponenten brauchst. Der Stack ist React, Tailwind CSS und shadcn/ui. Nicht für ein einfaches Ein-Datei-HTML/JSX-artifact verwenden.
Besser passt es, wenn du React 18 + TypeScript + Vite + Parcel (Bündeln) + Tailwind CSS + shadcn/ui akzeptierst. Die Zusammenfassung nennt auch Kompatibilität mit Node 18+. Das Material listet keine Agentenprodukte. Die offizielle Anleitungsseite ist
https://raw.githubusercontent.com/anthropics/skills/main/skills/web-artifacts-builder/SKILL.md
Ersten Versuch in 3 Minuten abschließen
Der empfohlene erste Befehl ist das Initialisierungsskript; erfinde keinen anderen Ladepfad:
scripts/init-artifact.sh
Dieser Befehl erzeugt ein Frontend-Repository und schreibt auf die Platte. Bestätige, dass das aktuelle Verzeichnis initialisiert werden darf, dann ausführen. Erfolgssignal: editierbarer Frontend-Code wurde erzeugt. Nicht ohne Verzeichnisbestätigung initialisieren.
Nach der Initialisierung noch nicht bündeln. Als Nächstes den erzeugten Code zu deiner Mehrkomponenten-Oberfläche bearbeiten. Beim Stil das vom Material genannte „AI slop“ meiden: kein übermäßig zentriertes Layout, keine violetten Verläufe, keine einheitlichen Rundungen, keine Inter. Das ist eine umkehrbare Designvorgabe; vor Stiländerungen die erzeugten Dateien ansehen und bestätigen, dass du die gerade geschriebene Struktur nicht überschreibst.
Willst du nur prüfen, ob der Stack passt, kannst du bei dieser Prüfung stehen bleiben: nur weiter, wenn State, Routing oder shadcn/ui nötig ist; ist das Ziel Ein-Datei-HTML, hier stoppen und nicht init.
Anwendungsfälle
Fall 1: Initialisieren und eine zustandsbehaftete Oberfläche überarbeiten. Zuerst scripts/init-artifact.sh, dann den erzeugten Code bearbeiten. Fertig heißt: das Repository wurde erzeugt und du hast erzeugte Dateien geändert, nicht ein ungenanntes Gerüst extra gestartet. Schritt vier ist, es dem Nutzer zu zeigen, aber der Auszug schreibt keinen Anzeigebefehl; erfinde keinen Preview. Vor dem Zeigen die erzeugte Seite lokal öffnen und prüfen.
Fall 2: Das Projekt in eine teilbare Einzeldatei packen. Der Befehl ist scripts/bundle-artifact.sh. Es erzeugt bundle.html, inline JavaScript, CSS und Abhängigkeiten, bereit zum Teilen als artifact in einem Claude-Gespräch. Voraussetzung: im Projektwurzelverzeichnis muss index.html liegen. Das schreibt auf die Platte: den überschriebenen bundle.html-Pfad bestätigen, dann packen. Fertig heißt: im Wurzelverzeichnis erscheint ein in sich geschlossenes bundle.html. Fehlt index.html, nicht annehmen, das Skript lege es für dich an.
Nutzungsgrenzen
Nur für komplexe, mehrkomponentige artifacts mit State/Routing/shadcn/ui, nicht für einfaches Ein-Datei-HTML/JSX. Der Stack ist fest React 18, TypeScript, Vite, Parcel, Tailwind, shadcn/ui. Das Packprodukt ist bundle.html; im Wurzelverzeichnis muss index.html liegen. Übermäßiges Zentrieren, violette Verläufe, einheitliche Rundungen und Inter vermeiden.
Erfinde keinen Installationspfad außer init und bundle. Das Material gibt keine Client-Liste und sagt nicht, auf welchen Befehl eine einfache Einzeldatei wechseln soll. Vor dem Überschreiben von bundle.html oder der Initialisierung in ein nicht leeres Verzeichnis Nebenwirkungen prüfen. Jenseits dieser geschriebenen vier Schritte und Stilverbote deckt diese Anleitung nichts ab.