Creación de Playgrounds con Claude Code

Hemos publicado un nuevo plugin para Claude Code llamado playground que ayuda a Claude a generar entornos de prueba HTML. Son archivos HTML independientes que te permiten visualizar un problema con Claude, interactuar con él y obtener un mensaje de salida para pegar de nuevo en Claude Code.

He descubierto que esto puede ser muy útil para interactuar con el modelo de formas que no se adaptan bien al texto, por ejemplo para:

• Visualizar la arquitectura del código base
• Ajustar el diseño de un componente
• Generar ideas de diseño y maquetación
• Afinar el equilibrio de un juego

Para empezar, instala el plugin en Claude Code ejecutando los siguientes comandos:

**/plugin marketplace update claude-plugins-official

/plugin install playground@claude-plugins-official**

Estos son algunos de mis entornos favoritos que he creado:

**

Cambiando el diseño de la herramienta AskUserQuestion en Claude Code

**prompt: "Usa la habilidad del playground para crear un entorno que me ayude a explorar nuevos cambios de diseño en la herramienta AskUserQuestion"

**

Criticando tu escritura y obteniendo una respuesta

**prompt: "Usa la habilidad del playground para revisar mi SKILL.MD y darme sugerencias en línea que pueda aprobar, rechazar o comentar"

**

Ajustando una introducción de video en Remotion

**prompt: "Usa la habilidad del playground para modificar mi pantalla de introducción y hacerla más interesante y agradable"

**Viendo un diagrama de arquitectura y permitiendo que el usuario comente

**prompt: "Usa la habilidad del playground para mostrar cómo funciona este código base de agente de correo y permitirme comentar nodos particulares de la arquitectura para hacer preguntas, editar, etc."

**Equilibrando el juego de tipo Rogue-like de superhéroes que estoy haciendo

**prompt: "Usa la habilidad del playground para ayudarme a equilibrar el mazo del héroe 'Inferno'"

0:24

¡Estoy emocionado de ver cómo exploran esto!

Mi consejo para crear un entorno interesante: piensa en una forma única de interactuar con el modelo y luego pídele que la exprese. Creo que te sorprenderá.

Si haces algo genial, ¡compártelo!