Los Artifacts de Claude son la función que transforma texto en aplicaciones funcionales dentro del mismo chat: generas código, lo ves ejecutarse en un panel separado y lo iteras hasta tener algo publicable. Útil para emprendedores, equipos de ventas y cualquiera que quiera materializar una idea sin programar desde cero.

El recorrido parte de una idea simple, un negocio de suscripción de café de especialidad, y avanza hasta una aplicación interactiva para el equipo comercial. En el camino verás cómo Claude alterna entre documentos, tablas, archivos descargables y componentes en React, todo dentro de la misma conversación.

¿Qué son los artifacts de Claude y para qué sirven?

Los artifacts son piezas de contenido que Claude genera en un panel separado del chat. Pueden ser documentos, tablas, código o aplicaciones completas que se ejecutan en el navegador.

¿Qué es un artifact en Claude? Es un bloque de contenido dinámico, generalmente código en React o JavaScript, que se ejecuta en tiempo real en un panel lateral. Te permite ver, editar y descargar el resultado sin salir del chat. [00:32]

La magia no está en la novedad del concepto, sino en la inmediatez: pides una tabla y aparece renderizada como si estuviera en un website; pides un documento y se convierte en un editor de texto simplificado que puedes exportar a Markdown.

¿Cómo arranca un flujo desde una idea de negocio?

El primer prompt fue directo: genera una lista de planes para un negocio de suscripción de café de especialidad con precios sugeridos. Sin rol, sin contexto adicional. [01:30]

Claude devolvió tres planes con iconos, precios mensuales y beneficios:

• Plan básico: 250 gramos por 20 dólares al mes.
• Plan intermedio: medio kilo por 35 dólares con dos variedades.
• Plan elite: la versión premium con más beneficios.

Nada de esto es magia. Es el resultado de un entrenamiento masivo con miles de ejemplos similares en internet. El modelo reproduce patrones bien establecidos de páginas de suscripción.

¿Cómo generar documentos y tablas descargables?

El siguiente paso fue pedir un documento descargable con el detalle de los planes. El panel derecho cambió automáticamente a un editor de texto donde aparecieron políticas de envío, cancelación y respuestas de soporte tipo ¿qué sucede si no estoy en casa para recibir el envío? [03:45]

Este tipo de archivos se descargan como .md (Markdown), un formato que luego puedes importar en cualquier procesador de palabras.

¿Cómo pedir una tabla de precios con monedas locales?

Al pedir una tabla de precios para diferentes países de Latinoamérica, Claude generó código en React que renderiza una tabla visual con el plan premium resaltado como mejor valor. [05:20]

Los precios en moneda local salen del corte de entrenamiento del modelo, no están actualizados. Aquí entra el pensamiento crítico: siempre verifica los datos numéricos que un large language model produce. Si necesitas precios reales, conéctalo a una herramienta externa que traiga tasas de cambio actualizadas.

¿De dónde saca Claude los precios en moneda local? De su entrenamiento previo, no de fuentes en tiempo real. Por eso debes verificar cualquier dato numérico antes de usarlo en producción.

¿Cómo descargar la tabla en formato CSV?

Al pedir un formato compatible con hoja de cálculo, se activó una herramienta que escribe directamente un archivo .csv (comma separated value) en una carpeta autorizada del sistema local. [07:50]

Sin esa herramienta habilitada, el archivo se hubiera generado en el panel derecho con un botón de descarga. Es un mecanismo de seguridad: Claude solo accede a directorios que tú permites explícitamente.

¿Cómo construir una aplicación funcional con prompts?

El objetivo final era una herramienta para el equipo de ventas que permitiera buscar planes y ofrecerlos en moneda local. El prompt incluyó tres criterios de búsqueda: por nombre de país (o fragmento), por nombre de moneda (o fragmento) y por nombre del plan. [11:10]

Antes de construir la app hubo que corregir un error: la tabla previa había metido el precio en dólares como columna en vez de fila. La solución fue editar el prompt anterior en lugar de seguir agregando mensajes, lo que dispara automáticamente una nueva generación más limpia.

¿Por qué conviene usar comillas en los prompts?

Marcar elementos específicos entre comillas dobles ayuda al modelo a identificar exactamente qué texto buscar o modificar. Por ejemplo: elimina la columna "plan básico USD". Los LLM detectan estos patrones rápidamente cuando están bien delimitados.

¿Qué hacer cuando la app no funciona como esperas?

Claude generó la app en React, un framework para desarrollar interfaces que corren en el navegador. La búsqueda por país y por moneda funcionó al primer intento, pero el filtro por plan no. [16:30]

Después de varias iteraciones sin éxito, el pro tip que destrabó la situación fue pedir: vamos a dar un paso atrás con la búsqueda por nombres de planes y vuelve a implementar la funcionalidad. Esa frase obliga al modelo a explorar otra ruta en el código en vez de parchar la versión actual.

¿Cómo desbloquear a Claude cuando se queda atascado en un error? Pídele explícitamente que dé un paso atrás y reimplemente la funcionalidad desde cero. Esto lo lleva a regenerar las partes del código donde podría estar el problema.

Trabajar con Claude se parece mucho a delegar tareas en alguien recién graduado: sabe muchísimo, pero le falta experiencia. Tu rol es proveer detalles, contexto y correcciones específicas.

¿Cómo darle un toque de diseño a la aplicación?

El último prompt pidió mejorar las tarjetas de resultado e incluir los beneficios de cada plan, de forma que se pudieran copiar y pegar en un chat. [20:15]

Aquí aparece un riesgo importante: la ventana de contexto. Cuando una conversación se alarga mucho, los resultados pueden empezar a divergir y perder consistencia con lo que se generó al inicio. En este caso, Claude logró recuperar los textos originales de los planes y agregó hasta un botón para copiar el contenido de cada tarjeta.

El flujo completo, de idea a aplicación funcional con búsqueda y diseño, demuestra que los artifacts no son un truco visual: son una forma nueva de prototipar productos conversando. ¿Qué idea de negocio probarías tú primero con este flujo? Cuéntame en los comentarios.