Was macht Artifacts Builder?
Um leistungsstarke Frontend-Claude.ai-Artifacts zu erstellen, befolgen Sie diese Schritte:
- Initialisieren Sie das Frontend-Repository mit
scripts/init-artifact.sh - Entwickeln Sie Ihr Artifact, indem Sie den generierten Code bearbeiten
- Bündeln Sie den gesamten Code in eine einzelne HTML-Datei mit
scripts/bundle-artifact.sh - Zeigen Sie das Artifact dem Benutzer an
- (Optional) Testen Sie das Artifact
Stack: React 18 + TypeScript + Vite + Parcel (Bündelung) + Tailwind CSS + shadcn/ui
Design- & Stilrichtlinien
SEHR WICHTIG: Um das zu vermeiden, was oft als "AI-Slop" bezeichnet wird, vermeiden Sie übermäßig zentrierte Layouts, violette Verläufe, einheitliche abgerundete Ecken und die Schriftart Inter.
Kurzanleitung
Schritt 1: Projekt initialisieren
Führen Sie das Initialisierungsskript aus, um ein neues React-Projekt zu erstellen:
bash scripts/init-artifact.sh <projekt-name>
cd <projekt-name>
Dies erstellt ein vollständig konfiguriertes Projekt mit:
- ✅ React + TypeScript (über Vite)
- ✅ Tailwind CSS 3.4.1 mit shadcn/ui-Theming-System
- ✅ Pfadaliase (
@/) konfiguriert - ✅ 40+ vorinstallierte shadcn/ui-Komponenten
- ✅ Alle Radix-UI-Abhängigkeiten enthalten
- ✅ Parcel für die Bündelung konfiguriert (über .parcelrc)
- ✅ Node 18+-Kompatibilität (erkennt und fixiert automatisch die Vite-Version)
Schritt 2: Entwickeln Sie Ihr Artifact
Um das Artifact zu erstellen, bearbeiten Sie die generierten Dateien. Siehe Allgemeine Entwicklungsaufgaben unten für Anleitungen.
Schritt 3: In eine einzelne HTML-Datei bündeln
Um die React-App in ein einzelnes HTML-Artifact zu bündeln:
bash scripts/bundle-artifact.sh
Dies erstellt bundle.html – ein eigenständiges Artifact mit allen JavaScript-, CSS- und Abhängigkeiten inline. Diese Datei kann direkt in Claude-Unterhaltungen als Artifact geteilt werden.
Anforderungen: Ihr Projekt muss eine index.html im Stammverzeichnis haben.
Was das Skript macht:
- Installiert Bündelungsabhängigkeiten (parcel, @parcel/config-default, parcel-resolver-tspaths, html-inline)
- Erstellt
.parcelrc-Konfiguration mit Pfadalias-Unterstützung - Baut mit Parcel (keine Source Maps)
- Bettet alle Assets in eine einzelne HTML-Datei mittels html-inline ein
Schritt 4: Artifact mit dem Benutzer teilen
Teilen Sie schließlich die gebündelte HTML-Datei im Gespräch mit dem Benutzer, damit er sie als Artifact anzeigen kann.
Schritt 5: Das Artifact testen/visualisieren (optional)
Hinweis: Dies ist ein völlig optionaler Schritt. Führen Sie ihn nur durch, wenn nötig oder angefragt.
Um das Artifact zu testen/visualisieren, verwenden Sie verfügbare Tools (einschließlich anderer Skills oder integrierter Tools wie Playwright oder Puppeteer). Vermeiden Sie im Allgemeinen das Testen des Artifacts im Voraus, da dies Latenz zwischen der Anfrage und dem Zeitpunkt, an dem das fertige Artifact gesehen werden kann, hinzufügt. Testen Sie später, nachdem das Artifact präsentiert wurde, wenn nötig oder falls Probleme auftreten.
Referenz
- shadcn/ui-Komponenten: https://ui.shadcn.com/docs/components