Webartefakt-Builder

Quelle: Inhalt angepasst von Anthropics/Skills (MIT).

Um leistungsstarke Frontend-Artefakte von claude.ai zu erstellen, befolgen Sie diese Schritte:

1. Initialisieren Sie das Frontend-Repo mitscripts/init-artifact.sh
2. Entwickeln Sie Ihr Artefakt, indem Sie den generierten Code bearbeiten
3. Bündeln Sie den gesamten Code mitscripts/bundle-artifact.shin einer einzigen HTML-Datei
4. Artefakt dem Benutzer anzeigen
5. (Optional) Testen Sie das Artefakt

Stack: React 18 + TypeScript + Vite + Parcel (Bündelung) + Tailwind CSS + shadcn/ui

Design- und Stilrichtlinien

SEHR WICHTIG: Um das zu vermeiden, was oft als „KI-Abweichung“ bezeichnet wird, vermeiden Sie übermäßig zentrierte Layouts, violette Farbverläufe, gleichmäßig abgerundete Ecken und die Inter-Schriftart.

Schnellstart

Schritt 1: Projekt initialisieren

Führen Sie das Initialisierungsskript aus, um ein neues React-Projekt zu erstellen:

bash scripts/init-artifact.sh <project-name>
cd <project-name>

Dadurch wird ein vollständig konfiguriertes Projekt erstellt mit:

• React + TypeScript (über Vite)
• Tailwind CSS 3.4.1 mit Shadcn/UI-Theming-System
• Pfad-Aliase (@/) konfiguriert
• Über 40 Shadcn/UI-Komponenten vorinstalliert
• Alle Radix-UI-Abhängigkeiten enthalten
• Paket für Bündelung konfiguriert (über.parcelrc)
• Kompatibilität mit Node 18+ (automatische Erkennung und Pins der Vite-Version)

Schritt 2: Entwickeln Sie Ihr Artefakt

Um das Artefakt zu erstellen, bearbeiten Sie die generierten Dateien. Eine Anleitung finden Sie weiter unten unter Allgemeine Entwicklungsaufgaben.

Schritt 3: In einer einzigen HTML-Datei bündeln

So bündeln Sie die React-App in einem einzelnen HTML-Artefakt:

bash scripts/bundle-artifact.sh

Dadurch wirdbundle.htmlerstellt – ein eigenständiges Artefakt, in das alle JavaScript-, CSS- und Abhängigkeiten integriert sind. Diese Datei kann als Artefakt direkt in Claude-Konversationen geteilt werden.

Anforderungen: Ihr Projekt muss über einindex.htmlim Stammverzeichnis verfügen.

Was das Skript macht:

• Installiert Bündelungsabhängigkeiten (parcel, @parcel/config-default, packet-resolver-tspaths, html-inline)
• Erstellt eine.parcelrc-Konfiguration mit Pfad-Alias-Unterstützung
• Builds mit Parcel (keine Quellkarten)
• Bindet alle Assets mithilfe von html-inline in einzelnes HTML ein

Schritt 4: Artefakt mit dem Benutzer teilen

Teilen Sie abschließend die gebündelte HTML-Datei im Gespräch mit dem Benutzer, damit dieser sie als Artefakt betrachten kann.

Schritt 5: Testen/Visualisierung des Artefakts (optional)

Hinweis: Dies ist ein völlig optionaler Schritt. Führen Sie die Durchführung nur durch, wenn dies erforderlich oder erforderlich ist.

Um das Artefakt zu testen/visualisieren, verwenden Sie verfügbare Tools (einschließlich anderer Fähigkeiten oder integrierter Tools wie Dramatiker oder Puppenspieler). Vermeiden Sie es im Allgemeinen, das Artefakt im Voraus zu testen, da dies zu einer höheren Latenz zwischen der Anforderung und dem Zeitpunkt führt, an dem das fertige Artefakt angezeigt werden kann. Testen Sie es später, nach der Präsentation des Artefakts, falls gewünscht oder wenn Probleme auftreten.

Referenz

• shadcn/ui-Komponenten: https://ui.shadcn.com/docs/components

Ressourcendateien

LIZENZ.txt

LICENSE.txt herunterladen

Binäre Ressource

scripts/bundle-artifact.sh

Download scripts/bundle-artifact.sh

#!/bin/bash
set -e

echo "📦 Bundling React app to single HTML artifact..."

# Check if we're in a project directory
if [ ! -f "package.json" ]; then
  echo "❌ Error: No package.json found. Run this script from your project root."
  exit 1
fi

# Check if index.html exists
if [ ! -f "index.html" ]; then
  echo "❌ Error: No index.html found in project root."
  echo "   This script requires an index.html entry point."
  exit 1
fi

# Install bundling dependencies
echo "📦 Installing bundling dependencies..."
pnpm add -D parcel @parcel/config-default parcel-resolver-tspaths html-inline

# Create Parcel config with tspaths resolver
if [ ! -f ".parcelrc" ]; then
  echo "🔧 Creating Parcel configuration with path alias support..."
  cat > .parcelrc << 'EOF'
{
  "extends": "@parcel/config-default",
  "resolvers": ["parcel-resolver-tspaths", "..."]
}
EOF
fi

# Clean previous build
echo "🧹 Cleaning previous build..."
rm -rf dist bundle.html

# Build with Parcel
echo "🔨 Building with Parcel..."
pnpm exec parcel build index.html --dist-dir dist --no-source-maps

# Inline everything into single HTML
echo "🎯 Inlining all assets into single HTML file..."
pnpm exec html-inline dist/index.html > bundle.html

# Get file size
FILE_SIZE=$(du -h bundle.html | cut -f1)

echo ""
echo "✅ Bundle complete!"
echo "📄 Output: bundle.html ($FILE_SIZE)"
echo ""
echo "You can now use this single HTML file as an artifact in Claude conversations."
echo "To test locally: open bundle.html in your browser"

scripts/init-artifact.sh

Scripts/init-artifact.sh herunterladen

Binäre Ressource

scripts/shadcn-components.tar.gz

Download scripts/shadcn-components.tar.gz

Binäre Ressource

Siehe in GitHub

Siehe in GitHub