Generador de artefactos web

Fuente: Contenido adaptado de anthropics/skills (MIT).

Para crear poderosos artefactos de interfaz claude.ai, siga estos pasos:

1. Inicialice el repositorio frontend usandoscripts/init-artifact.sh
2. Desarrolla tu artefacto editando el código generado
3. Agrupe todo el código en un único archivo HTML usandoscripts/bundle-artifact.sh
4. Mostrar artefacto al usuario
5. (Opcional) Pruebe el artefacto

Pila: React 18 + TypeScript + Vite + Parcel (agrupación) + Tailwind CSS + shadcn/ui

Pautas de diseño y estilo

MUY IMPORTANTE: Para evitar lo que a menudo se conoce como "inclinación de la IA", evite el uso de diseños excesivamente centrados, degradados morados, esquinas redondeadas uniformes y fuentes Inter.

Inicio rápido

Paso 1: inicializar el proyecto

Ejecute el script de inicialización para crear un nuevo proyecto de React:

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

Esto crea un proyecto completamente configurado con:

• Reaccionar + TypeScript (a través de Vite)
• Tailwind CSS 3.4.1 con sistema de temas shadcn/ui
• Alias ​​de ruta (@/) configurados
• Más de 40 componentes shadcn/ui preinstalados
• Todas las dependencias de Radix UI incluidas
• Parcela configurada para agrupación (a través de.parcelrc)
• Compatibilidad con Node 18+ (detecciones automáticas y pines versión Vite)

Paso 2: desarrolla tu artefacto

Para construir el artefacto, edite los archivos generados. Consulte Tareas de desarrollo comunes a continuación para obtener orientación.

Paso 3: agrupar en un único archivo HTML

Para agrupar la aplicación React en un único artefacto HTML:

bash scripts/bundle-artifact.sh

Esto creabundle.html, un artefacto autónomo con todo JavaScript, CSS y dependencias integradas. Este archivo se puede compartir directamente en las conversaciones de Claude como un artefacto.

Requisitos: Su proyecto debe tener unindex.htmlen el directorio raíz.

Qué hace el guión:

• Instala dependencias de paquete (parcel, @parcel/config-default, parcela-resolver-tspaths, html-inline)
• Crea la configuración.parcelrccon soporte de alias de ruta
• Construye con Parcel (sin mapas de origen)
• Alinea todos los recursos en un único HTML usando html-inline

Paso 4: compartir artefacto con el usuario

Finalmente, comparta el archivo HTML incluido en una conversación con el usuario para que pueda verlo como un artefacto.

Paso 5: Probar/Visualizar el artefacto (opcional)

Nota: Este es un paso completamente opcional. Realice únicamente si es necesario o solicitado.

Para probar/visualizar el artefacto, utilice las herramientas disponibles (incluidas otras habilidades o herramientas integradas como Dramaturgo o Titiritero). En general, evite probar el artefacto por adelantado, ya que agrega latencia entre la solicitud y el momento en que se puede ver el artefacto terminado. Pruebe más tarde, después de presentar el artefacto, si se solicita o si surgen problemas.

Referencia

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

Archivos de recursos

LICENCIA.txt

Descargar LICENCIA.txt

Recurso binario

scripts/bundle-artifact.sh

Descargar 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

Descargar scripts/init-artifact.sh

Recurso binario

scripts/shadcn-components.tar.gz

Descargar scripts/shadcn-components.tar.gz

Recurso binario

Ver en GitHub

Ver en GitHub