83.3K+Descargar
Ir a la guía de uso
web-artifacts-builderpor Anthropic

Web Artifacts Builder Skill.

Un skill de Claude Code y Codex para diseño UI: artefactos HTML interactivos con múltiples componentes usando React, Tailwind y shadcn/ui.

  • Web y UI
  • HTML
Descargar OpenDesignVer guía de uso
anthropics/skills · skills/web-artifacts-builder/SKILL.mdSKILL.md
--- name: web-artifacts-builder description: Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts. --- ## Design & Style Guidelines ## Quick Start
Encabezado y títulos de sección leídos del archivo original el 14 de septiembre de 2026 · 3.073 caracteres en total

01 Qué hace

Qué hace el skill web-artifacts-builder en Claude Code y Codex

Resumen, flujo de trabajo y resultados, todo leído del SKILL.md del skill.

Del SKILL.mdLeído 2026-09-14 · no es una ejecución registrada

En los propios términos del Skill

Un skill para construir artefactos React complejos y multicomponente para claude.ai utilizando una pila moderna de React 18, TypeScript, Vite, Parcel, Tailwind CSS y shadcn/ui. El skill proporciona scripts de inicialización para configurar un proyecto completamente listo con más de 40 componentes de shadcn/ui preinstalados, y scripts de empaquetado para compilarlo todo en un único archivo HTML autocontenido.

Está diseñado para artefactos que requieren gestión de estado, enrutamiento o componentes de shadcn/ui, no para artefactos HTML o JSX simples de un solo archivo. El flujo de trabajo sigue cinco pasos: inicializar el repositorio frontend, desarrollar el artefacto editando el código generado, empaquetarlo en un único archivo HTML, mostrarlo al usuario y, opcionalmente, probarlo.

HTML
Ver el ejemplo de prompt ↗

Cómo funciona

  1. 01
    Inicializar un proyecto React configurado

    Ejecute el script init-artifact.sh con un nombre de proyecto para crear un proyecto completamente configurado con React, TypeScript, Tailwind CSS, alias de rutas, más de 40 componentes de shadcn/ui y la configuración de empaquetado con Parcel.

  2. 02
    Desarrollar editando los archivos generados

    Construya el artefacto editando los archivos generados durante la inicialización, siguiendo las indicaciones de tareas de desarrollo habituales que proporciona el skill.

  3. 03
    Empaquetar en un HTML autocontenido

    Ejecute bundle-artifact.sh para compilar la aplicación React en bundle.html, un único archivo con todo el JavaScript, el CSS y las dependencias incrustados mediante Parcel y html-inline.

  4. 04
    Mostrar el artefacto al usuario

    Comparta el archivo HTML empaquetado en la conversación para que el usuario pueda verlo como un artefacto de claude.ai.

02 Encuentra tu caso de uso

Cuándo usar la skill web-artifacts-builder

Usa el skill web-artifacts-builder en Claude Code o Codex cuando el trabajo sea diseño de UI de este tipo. El alcance y límites se toman del propio archivo del skill.

Buen caso de uso

  • Interfaces multicomponente usando la biblioteca de componentes shadcn/ui

Conozca los límites

  • Úsela para artefactos complejos que requieran gestión de estado, enrutamiento o componentes shadcn/ui, no para artefactos HTML/JSX simples de un solo archivo.

Qué proporcionar

  • Nombre del proyecto para la inicializaciónUn nombre para el nuevo directorio del proyecto React al ejecutar el script init-artifact.sh.

03 Dentro del skill

Reglas que el skill web-artifacts-builder proporciona a Claude Code y Codex

5 instrucciones concretas, valores predeterminados y límites que el SKILL.md establece para el agente: la parte del archivo que cambia el resultado.

  1. Usar solo para artefactos complejos

    Este skill es específicamente para artefactos complejos que requieren gestión de estado, enrutamiento o componentes shadcn/ui. No lo utilice para artefactos HTML o JSX de un solo archivo simples.

  2. Evitar patrones de diseño AI slop

    No utilice diseños centrados en exceso, gradientes morados, esquinas redondeadas uniformes ni la fuente Inter, con el fin de evitar lo que se conoce como AI slop.

  3. El proyecto debe tener un index.html en la raíz

    El script de empaquetado requiere que su proyecto tenga un archivo index.html ubicado en el directorio raíz.

  4. Probar solo cuando sea necesario

    Las pruebas son completamente opcionales y solo deben realizarse si es necesario o si se solicitan.

  5. Seguir el flujo de trabajo de cinco pasos

    El proceso de creación del artefacto sigue una secuencia específica: inicializar el repositorio frontend, desarrollar editando el código generado, empaquetar todo el código en un único archivo HTML, mostrarlo al usuario y, opcionalmente, probarlo.

04 Ponlo a trabajar

Instale web-artifacts-builder en Claude Code o Codex

Un comando npx skills add, luego una primera tarea en tu agente y una lista de verificación para el resultado.

Agregue web-artifacts-builder a Claude Code, Codex o su agente

Ejecútelo en su proyecto; el instalador pregunta a qué agente añadirlo.

Terminal
npx skills add https://github.com/anthropics/skills --skill web-artifacts-builder

Forma genérica de la CLI de skills para skills/web-artifacts-builder/SKILL.md; el repositorio puede documentar su propia ruta.

Dale al skill una primera tarea de diseño de interfaz

Redactado en los términos del propio skill; sustituya las partes entre corchetes por su material.

Starter prompt
Build a task management dashboard artifact with a sidebar navigation, data table showing tasks with status filters, and a modal form for adding new tasks. Use shadcn/ui components for the table, dialog, and form elements. Include state management for the task list and filtering logic.

Fuente: redactado a partir del SKILL.md en los términos del propio skill.

Revisa el primer resultado

Lo que el propio SKILL.md indica que debe ser un resultado correcto:

  • Utilice herramientas disponibles como Playwright o Puppeteer para probar o visualizar el artefacto si se solicita o si surgen problemas
  • Verifique que el diseño evite diseños centrados en exceso, gradientes morados, esquinas redondeadas uniformes y la fuente Inter

En OpenDesign web-artifacts-builder viene incluido: Plugins → Skills, selecciónelo en la barra superior.

Descargar OpenDesignLeer la guía de inicio rápido

05 Código abierto, rastreable

Fuente, Licencia y Verificación

De dónde provienen los datos de esta página y cuándo se verificaron por última vez.

Author
Anthropic
Repository
github.com/anthropics/skills Rama main
Archivo de skill
skills/web-artifacts-builder/SKILL.md Suma de verificación del contenido registrada en la verificación; commit 34040c9
License
Apache-2.0 De skills/web-artifacts-builder/LICENSE.txt; SKILL.md dice "Términos completos en LICENSE.txt".
Estrellas del repositorio
176.183 Captura de GitHub tomada el 14/09/2026 para todo el repositorio anthropics/skills, que contiene 7 skills en este catálogo. No es una calificación ni un recuento de uso para web-artifacts-builder.
Verificado por OpenDesign
14-09-2026 Se verificaron el archivo fuente, la ruta, el texto de licencia y el recuento de estrellas. Incluido en OpenDesign main (verificado el 28-08-2026); no se ha registrado una ejecución real en esta página.

Dentro del SKILL.md

  1. Directrices de diseño y estiloInstrucciones para evitar patrones de AI slop como el centrado excesivo, los gradientes morados, las esquinas redondeadas uniformes y la fuente Inter
  2. Inicio rápidoFlujo de trabajo de cinco pasos desde la inicialización hasta el desarrollo, el empaquetado, el uso compartido y las pruebas opcionales
  3. Paso 1: Inicializar el proyectoEjecute init-artifact.sh para crear un proyecto React configurado con TypeScript, Tailwind, componentes shadcn/ui y Parcel
  4. Paso 2: Desarrollar su artefactoEdite los archivos generados para construir el artefacto siguiendo las indicaciones de tareas de desarrollo habituales
  5. Paso 3: Empaquetar en un único archivo HTMLEjecute bundle-artifact.sh para crear un bundle.html autocontenido con JavaScript, CSS y dependencias en línea
  6. Paso 4: Compartir el artefacto con el usuarioComparta el archivo HTML empaquetado en la conversación para verlo como un artefacto
  7. Paso 5: Probar/visualizar el artefacto (opcional)Pruebas opcionales con herramientas como Playwright o Puppeteer, evitando pruebas previas para reducir la latencia
  8. ReferenciaEnlace a la documentación de los componentes shadcn/ui
La descripción propia del Skill
"Suite de herramientas para crear artefactos HTML elaborados y de múltiples componentes para claude.ai utilizando tecnologías web frontend modernas (React, Tailwind CSS, shadcn/ui). Se usa para artefactos complejos que requieren gestión de estado, enrutamiento o componentes shadcn/ui, no para artefactos simples de un solo archivo HTML/JSX."

Descripción del encabezado de SKILL.md. El archivo completo tiene aproximadamente 3.073 caracteres. Lee el archivo completo en GitHub.

06 Antes de instalar

Preguntas sobre el skill web-artifacts-builder

Las respuestas provienen del SKILL.md tal como se leyó el 2026-09-14, no de una ejecución registrada.

¿Qué componentes y bibliotecas ya están instalados?

El script de inicialización crea un proyecto con React 18, TypeScript mediante Vite, Tailwind CSS 3.4.1 con theming de shadcn/ui, más de 40 componentes de shadcn/ui preinstalados, todas las dependencias de Radix UI, y Parcel configurado para el empaquetado. Los alias de ruta están configurados para que pueda importar usando el prefijo con barra diagonal.

Web Artifacts Builder

Ejecuta web-artifacts-builder en una tarea real de diseño de UI.

El skill web-artifacts-builder viene incluido en OpenDesign. Descarga la aplicación, elige el skill en Plugins → Skills, pega el prompt de arriba y lee el plan antes del resultado.

Descargar OpenDesignVer todas las skills
Terminal
npx skills add https://github.com/anthropics/skills --skill web-artifacts-builder