Générateur d'artefacts Web

Source: Contenu adapté de anthropics/skills (MIT).

Pour créer de puissants artefacts frontend claude.ai, suivez ces étapes:

1. Initialisez le dépôt frontend à l'aide descripts/init-artifact.sh
2. Développez votre artefact en éditant le code généré
3. Regroupez tout le code dans un seul fichier HTML à l'aide descripts/bundle-artifact.sh
4. Afficher l'artefact à l'utilisateur
5. (Facultatif) Testez l'artefact

Pile: React 18 + TypeScript + Vite + Parcel (regroupement) + Tailwind CSS + shadcn/ui

Directives de conception et de style

TRÈS IMPORTANT: pour éviter ce que l'on appelle souvent "AI slop", évitez d'utiliser des mises en page trop centrées, des dégradés violets, des coins arrondis uniformes et une police Inter.

Démarrage rapide

Étape 1: initialiser le projet

Exécutez le script d'initialisation pour créer un nouveau projet React:

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

Cela crée un projet entièrement configuré avec:

• Réagir + TypeScript (via Vite)
• Tailwind CSS 3.4.1 avec système de thème shadcn/ui
• Alias de chemin (@/) configurés
• Plus de 40 composants shadcn/ui préinstallés
• Toutes les dépendances de l'interface utilisateur Radix incluses
• Colis configuré pour le regroupement (via.parcelrc)
• Compatibilité Node 18+ (détection automatique et broches de la version Vite)

Étape 2: Développez votre artefact

Pour créer l'artefact, modifiez les fichiers générés. Voir Tâches de développement courantes ci-dessous pour obtenir des conseils.

Étape 3: regrouper dans un seul fichier HTML

Pour regrouper l'application React dans un seul artefact HTML:

bash scripts/bundle-artifact.sh

Cela créebundle.html- un artefact autonome avec tous les JavaScript, CSS et dépendances intégrés. Ce fichier peut être directement partagé dans les conversations de Claude en tant qu'artefact.

Exigences: Votre projet doit avoir unindex.htmldans le répertoire racine.

Ce que fait le script:

• Installe les dépendances de regroupement (parcel, @parcel/config-default, parcel-resolver-tspaths, html-inline)
• Crée la configuration.parcelrcavec prise en charge des alias de chemin
• Construit avec Parcel (pas de cartes sources)
• Insère tous les éléments dans un seul code HTML à l'aide de html-inline

Étape 4: Partager l'artefact avec l'utilisateur

Enfin, partagez le fichier HTML fourni dans une conversation avec l'utilisateur afin qu'il puisse le visualiser comme un artefact.

Étape 5: Test/visualisation de l'artefact (facultatif)

Remarque: Il s'agit d'une étape totalement facultative. N'effectuez cette opération que si cela est nécessaire ou demandé.

Pour tester/visualiser l'artefact, utilisez les outils disponibles (y compris d'autres compétences ou des outils intégrés comme Dramaturge ou Marionnettiste). En général, évitez de tester l'artefact dès le départ, car cela ajoute une latence entre la requête et le moment où l'artefact terminé peut être vu. Testez plus tard, après avoir présenté l'artefact, si cela vous est demandé ou si des problèmes surviennent.

Référence

• composants shadcn/ui: https://ui.shadcn.com/docs/components

Fichiers de ressources

LICENCE.txt

Télécharger LICENSE.txt

Ressource binaire

scripts/bundle-artifact.sh

Télécharger 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

Télécharger scripts/init-artifact.sh

Ressource binaire

scripts/shadcn-components.tar.gz

Télécharger scripts/shadcn-components.tar.gz

Ressource binaire

Voir dans GitHub

Voir dans GitHub