Probada en una tarea realOficial de AnthropicDiseño y front end

Web Artifacts Builder

Crea una herramienta interactiva de varias pantallas con un kit de componentes completo, empaquetada en un solo archivo HTML.

Mira lo que creó

Instala Web Artifacts Builder gratis

Deja tu email y los pasos de instalación se abren aquí mismo: un prompt para pegar en tu herramienta de IA. Sirve para las 149 skills.

Nuestra nota: 4/10
Funciona en: Claude Code, Codex+6 más
Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Antigravity, OpenCode, Windsurf y más de 60 herramientas de IA que leen skills.
¿Hace falta programar?: Un poco
Tiempo hasta el resultado: 11 min
Creado por: Anthropic
Probada: 19 oct 2026

Sin la skill — Las dos primeras pantallas se ven casi iguales (mismo título con serifa, eslogan y foto de esmaltes); la versión con la skill abre con una taza ya en el set y una lista compacta, mientras que Claude sin la skill abre con tarjetas de fotos grandes y sets de inicio rápido.

Con la skill — Las dos primeras pantallas se ven casi iguales (mismo título con serifa, eslogan y foto de esmaltes); la versión con la skill abre con una taza ya en el set y una lista compacta, mientras que Claude sin la skill abre con tarjetas de fotos grandes y sets de inicio rápido.

La respuesta corta

Web Artifacts Builder es una skill de Anthropic que configura un proyecto web real con React, Tailwind CSS y shadcn/ui (bloques populares para interfaces web), hace que Claude construya ahí la herramienta y luego lo empaqueta todo en un solo archivo HTML. Está pensada para herramientas más grandes con varias pantallas, pestañas y diálogos, y necesita Node.js y disposición a dejar que Claude arregle errores de compilación. Nuestro veredicto es 4/10: nuestro constructor de sets salió correcto y atractivo, pero Claude sin la skill hizo uno igual de bueno con el mismo prompt sin ningún paso de compilación.

Ideal para: Desarrolladores que construyen herramientas más grandes de varias pantallas que de verdad necesitan React y un kit de componentes listo, no widgets de una sola pantalla.

¿Quieres este resultado en tu propio trabajo?

Regístrate gratis e instala Web Artifacts Builder en un minuto. Un solo email abre los pasos de instalación de todas las skills del sitio.

Cuándo vale la pena usarla

Constructor de sets o paquetes de productos

Los clientes eligen piezas, cantidades y colores y ven el total con tus descuentos. En nuestra prueba, la dueña de un taller de cerámica obtuvo un constructor de sets que funciona, con un selector de esmalte para cada pieza, una vista previa dibujada del set y un diálogo de resumen, todo en un archivo.

Planificador o presupuesto con pestañas

Quieres una herramienta con pestañas para ingresos, gastos y metas. Las pestañas, formularios, deslizadores y tablas listos de la skill sirven para herramientas con varias pantallas y números que reaccionan entre sí.

Cuestionario con pantalla de resultados

Quieres que los visitantes respondan algunas preguntas y reciban una recomendación. Obtienes un cuestionario de varios pasos con pantalla de resultados, empaquetado en un archivo que puedes compartir.

Cómo conseguir un gran resultado

Instálala (pasos abajo)
Úsala donde Claude pueda ejecutar código con Node.js 18 o más nuevo y conexión a internet. Si falta la herramienta de paquetes pnpm, el script de configuración la instala en toda tu computadora, así que cuenta con eso.
Describe cada pantalla y regla
Enumera lo que la gente elige o escribe, lo que la herramienta debe calcular y tus precios y ofertas exactos. Nuestro prompt nombró las cuatro piezas, el 10% de descuento con 4 o más y el envío gratis por encima de $75, y las cuentas salieron bien.
Deja que Claude configure y resuelva errores
Claude corre un script de configuración que crea un proyecto completo con más de 40 componentes listos. En nuestra prueba chocó con un error de macOS en ese script y lo arregló a mano, así que dile a Claude que siga si un paso falla.
Empaqueta en un archivo
Claude corre el script de empaquetado para meter todo en un solo archivo HTML. El nuestro falló dos veces y pasó al tercer intento tras dos cambios de configuración; el archivo terminado pesó unos 387 KB.
Ábrelo y pruébalo
Haz doble clic en el archivo para abrirlo en tu navegador y prueba pedidos reales. La skill trata las pruebas como opcionales, así que pídele a Claude que pruebe los totales y la vista en teléfono, como hizo el nuestro.

Este es el prompt exacto con el que empezamos nuestra prueba:

El prompt que usamos

Crea una herramienta interactiva de 'arma tu propio set' para el sitio web de Clay & Co: el cliente elige piezas (Speckled Mug, Ash Glaze Bowl, Bud Vase, Serving Platter) con cantidades, elige un esmalte para cada una y ve una vista previa en vivo del set, el total, el 10% de descuento cuando hay 4 piezas o más y el envío gratis por encima de $75. Entrégala como un solo archivo HTML autocontenido en out/ que pueda abrir en un navegador.

Todo lo que creó

Cada pieza de abajo es un resultado real de nuestra prueba, abierto tal como lo abrirías tú.

Con la skill, en un teléfono — Con la skill, cada pieza tiene su propia fila de esmalte y una repisa dibujada muestra el set, con el total, el descuento y el envío en un panel lateral y un diálogo de resumen detrás de 'Agregar set al carrito'.

Sin la skill, en un teléfono — La versión de Claude sin la skill pone un selector de esmalte en cada tarjeta con foto, agrega sets de inicio rápido estilo 'Café para dos' y una barra fija en el teléfono, y hace las mismas cuentas en un archivo doce veces más pequeño.

Cómo fue la sesión

La conversación de nuestra prueba, resumida. Unos 11 minutos desde el primer prompt hasta el resultado final.

Tú: Usa la skill web-artifacts-builder para esto. Crea una herramienta interactiva de 'arma tu propio set' para el sitio web de Clay & Co: el cliente elige piezas (Speckled Mug, Ash Glaze Bowl, Bud Vase, Serving Platter) con cantidades, elige un esmalte para cada una y ve una vista previa en vivo del set, el total, el 10% de descuento cuando hay 4 piezas o más y el envío gratis por encima de $75. Entrégala como un...
AI: El script de configuración chocó con un error de comillas de sed en macOS que dejó un archivo suelto y la línea del favicon. Arreglé ambas cosas a mano.
AI: Listo: out/clay-set-builder.html. Decisiones que tomé: un esmalte por pieza, con un atajo "Todas en" para darle el mismo esmalte a todas las unidades de una pieza. Una vista previa en vivo: piezas dibujadas en código sobre una repisa en cada esmalte elegido. Los colores son aproximados, y la página lo dice. 10% de descuento con 4+ piezas; envío gratis por encima de $75, si no [placeholder: tarifa de envío]. "Agregar set al carrito" abre un diálogo de resumen con un...

Qué funcionó y dónde se quedó corta

Qué funcionó

Las cuentas eran correctas y en vivo: subtotal, 10% de descuento con 4 piezas o más, envío gratis por encima de $75 y el total se actualizan con cada clic
Cada pieza individual tiene su propia fila de esmalte (Taza 1, Taza 2...) con un atajo 'Todas en', y una repisa dibujada muestra cada pieza en su esmalte
'Agregar set al carrito' abre un diálogo de resumen ordenado del kit de componentes shadcn, con un placeholder claro donde se conectaría el checkout real
Se ciñó a los datos y marcó como placeholder la tarifa de envío desconocida por debajo de $75

Dónde se quedó corta

Los propios scripts de la skill fallaron en una Mac: la configuración instaló una herramienta de paquetes en todo el sistema y chocó con un error de edición de macOS, y el empaquetado falló dos veces antes de dos arreglos de configuración. Claude lo arregló, pero alguien que no programa no podría
Claude sin la skill, con el mismo prompt, hizo una herramienta igual de buena sin ningún paso de compilación, y agregó cosas que esta no tiene: sets de inicio rápido ('Café para dos'), barras de progreso hacia el descuento y el envío gratis, botones para quitar y un set que se recuerda al recargar
El archivo terminado pesa unos 387 KB porque lleva una librería de componentes entera, contra unos 32 KB de la versión de Claude sin la skill que hace el mismo trabajo

¿Quieres este resultado en tu propio trabajo?

Regístrate gratis e instala Web Artifacts Builder en un minuto. Un solo email abre los pasos de instalación de todas las skills del sitio.

Prompts que funcionan

Cambia las partes entre corchetes por tus propios datos. No hace falta nombrar la skill: pide el trabajo y tu herramienta de IA la usa sola.

Herramienta de arma tu propio set

Usa la skill web-artifacts-builder. Crea una herramienta interactiva de 'arma tu propio set' para mi tienda: el cliente elige [productos] con cantidades, elige un [color / acabado] para cada uno y ve una vista previa en vivo del set, el total, [regla de descuento] y [regla de envío gratis]. Entrégala como un solo archivo HTML autocontenido que pueda abrir en un navegador.

Presupuesto con pestañas

Usa la skill web-artifacts-builder para crear una herramienta de presupuesto para mi [tipo de negocio] con pestañas de ingresos, gastos y metas, como un archivo HTML que pueda abrir sin conexión.

Cuestionario de recomendación de productos

Usa la skill web-artifacts-builder para crear un cuestionario de varios pasos que le haga a un cliente [3 a 5] preguntas sobre [sus necesidades] y le recomiende uno de mis [productos: enuméralos], con una pantalla de resultados, como un solo archivo HTML.

Calculadora de presupuestos para clientes

Usa la skill web-artifacts-builder para crear una calculadora de presupuestos para mi [servicio] con pestañas de [paquetes, extras y traslados] y un total acumulado con [tasa de impuesto]% de impuesto como campo editable, como un archivo HTML que pueda enviar a clientes.

Consejos de nuestra prueba

Para herramientas de una sola pantalla, prueba primero con Claude sin la skill. En nuestra prueba, Claude sin la skill armó el mismo constructor de sets en unos 20 minutos como un archivo de 32 KB e incluso agregó sets de inicio rápido y un carrito que se recuerda.
Da cada precio, descuento y regla de envío en el prompt. Ambas versiones de nuestra prueba hicieron bien las cuentas porque las reglas estaban escritas, y ambas marcaron la tarifa de envío desconocida como placeholder.
Si la configuración o el empaquetado fallan, dile a Claude que lea el error y lo arregle. En nuestra prueba el script de configuración chocó con un error de macOS y el paso de empaquetado falló dos veces antes de funcionar.
Pide por su nombre las funciones que quieres, como presets, barras de progreso hacia un descuento o un botón para quitar. La skill le da a Claude componentes, no ideas, y nuestra versión con la skill las dejó fuera.
Dale tus colores y fuentes si los tienes. La skill solo le dice a Claude que evite el look típico de IA (layouts centrados, degradados morados, esquinas redondeadas idénticas, la fuente Inter); no conoce tu marca.
Mantén las fotos junto al archivo. Nuestro archivo empaquetado apuntaba a las fotos de producto en una carpeta cercana, así que muévelas juntas si lo compartes.

Lo que necesitas: Las skills de la app de Claude funcionan en todos los planes de Claude, incluido Free, con la ejecución de código y la creación de archivos activadas; Claude Code necesita Pro o superior, Node.js 18 o más nuevo e internet para la primera instalación (descarga muchos paquetes), La herramienta de paquetes pnpm (el script de configuración intenta instalarla en todo el sistema si falta).

Cómo instalarla

Las skills siguen el estándar abierto Agent Skills, así que esta no depende de una sola empresa. Elige la herramienta de IA que usas. ¿No lo tienes claro? La primera pestaña cubre la mayoría en un solo paso.

Lo más fácil: pega esto en tu herramienta de IA

Instala esta skill para que funcione en todos mis proyectos: ejecuta `npx skills add https://github.com/anthropics/skills/tree/main/skills/web-artifacts-builder -g -y` en mi terminal. Si falta Node.js, dime primero cómo instalarlo. Cuando termines, confirma que la skill quedó instalada y dime cómo empezar a usarla.

O hazlo tú mismo:

Un solo comando instala la skill en las herramientas de IA de tu computadora. Detecta las que tienes y te pregunta en cuáles añadirla: Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, OpenCode y más de 60 más.

$npx skills add https://github.com/anthropics/skills/tree/main/skills/web-artifacts-builder -g

Necesitas tener Node.js instalado (gratis, en nodejs.org). La opción -g hace que la skill esté disponible en todos tus proyectos.

Bueno saber: Es demasiado para páginas simples de un solo archivo.

Desbloquea los pasos de instalación

Gratis. Deja tu email una vez para abrir los pasos de instalación de las 149 skills y recibir cada mes las mejores skills nuevas.

Cómo lo verificamos

Confirmamos la skill en su fuente original el 18 de octubre de 2026: el SKILL.md está donde debe estar, los archivos se actualizaron en el último año y la licencia (Apache-2.0) permite usarla. Después, el 19 de octubre de 2026, la instalamos, la usamos en la tarea de arriba sin modificarla y anotamos lo que pasó, incluido lo que salió mal.

Preguntas frecuentes

¿Es mejor que simplemente pedírselo a Claude?

No para el trabajo de nuestra prueba. Con la skill, Claude armó un constructor de sets correcto en unos 11 minutos, pero solo después de arreglar un script de configuración roto y dos empaquetados fallidos, y el archivo pesó unos 387 KB. Sin ella, Claude hizo una herramienta igual de pulida en unos 20 minutos como un archivo de 32 KB, con extras que la versión con la skill no tenía: sets de inicio rápido, barras de progreso hacia el descuento y el envío gratis, y un set que se recuerda al recargar.

¿Necesito programar para usar Web Artifacts Builder?

No escribes código, pero es una skill técnica: Claude instala y ejecuta herramientas de compilación de desarrollo por detrás. En nuestra prueba esas herramientas fallaron dos veces y Claude tuvo que arreglar archivos de configuración, así que tienes que dejar que resuelva errores.

¿Qué plan y herramientas necesita?

Las skills de la app de Claude funcionan en todos los planes de Claude, incluido Free, con la ejecución de código y la creación de archivos activadas; Claude Code necesita Pro o superior. En tu computadora necesita Node.js 18 o más nuevo, la herramienta de paquetes pnpm (el script la instala si falta) e internet para la primera instalación.

¿Funciona en la app de Claude o solo en Claude Code?

Es una de las skills de ejemplo de Anthropic que puedes activar en la app de Claude en Personalizar > Skills, con la ejecución de código activada, y también está disponible para Claude Code. La probamos en Claude Code en una Mac.

¿Puedo compartir la herramienta terminada?

Sí. El código y los estilos van dentro de un archivo HTML que se abre en cualquier navegador, y se puede mostrar como artifact en una conversación de Claude. No tiene servidor, así que no guarda pedidos ni se conecta a un checkout real hasta que alguien lo configure.