Repolode
Enviar
JDhruv14

JDhruv14/ascii-diorama

Skill de Claude Code que guía a un agente de IA para crear escenas 3D en miniatura con efecto tilt-shift, representadas como caracteres ASCII de colores con Three.js.

Ver en GitHub
Estrellas
92
Forks
3
Issues abiertos
0
Último commit
hace 5 días

¿Qué es?

ascii-diorama es un skill de Claude Code para crear miniaturas ASCII con efecto tilt-shift: pequeñas escenas 3D dibujadas íntegramente con caracteres monoespaciados de colores. La cámara observa desde un ángulo pronunciado una maqueta hecha con Three.js y se desplaza de un lado a otro mientras se desenfocan las partes superior e inferior de la imagen, lo que crea un efecto de maqueta a escala. La hierba, el agua, la piedra y los árboles se dibujan con sus propios conjuntos de caracteres, y cada carácter toma su color de la renderización 3D.

El repositorio incluye las instrucciones del skill, un servidor de vista previa en vivo que reconstruye la escena al recargarla, un script para descargar assets y una escena inicial con terreno, un shader para el mar, hierba y flores instanciadas, objetos, un zorro caminando y pétalos a la deriva. La escena inicial cubre los principales sistemas necesarios para una escena nueva, y su contenido se puede sustituir por otros entornos, como un puerto o un pueblo en una colina.

Se ejecuta en vivo en el navegador con WebGL 2 y Node.js 18 o posterior, y el resultado se puede exportar como una página estática.

Funciones clave

  • 01Representa escenas 3D con caracteres ASCII de colores, seleccionados según el tipo de superficie.
  • 02Incluye un servidor de vista previa en vivo que reconstruye la escena al recargarla.
  • 03Incluye una escena inicial con terreno, un shader de agua, hierba, flores y objetos.
  • 04Aplica un desenfoque tilt-shift en las partes superior e inferior de la imagen.
  • 05Descarga las texturas y los modelos mediante un script incluido.

Casos de uso

  • Crear con Claude Code una miniatura 3D animada al estilo ASCII.
  • Prototipar un diorama personalizado, como un puerto, un pueblo o un faro.
  • Exportar como página web estática una escena de arte ASCII en bucle.

Inicio rápido

  1. 1

    Clona la skill en la carpeta de skills de Claude Code

    git clone https://github.com/JDhruv14/ascii-diorama ~/.claude/skills/ascii-diorama
  2. 2

    Instala las dependencias de Three.js y esbuild en la carpeta scene

    npm i three esbuild
  3. 3

    Copia la escena inicial en una carpeta nueva y descarga sus recursos

    mkdir -p my-scene && cp ~/.claude/skills/ascii-diorama/templates/scene/* my-scene/ && bash ~/.claude/skills/ascii-diorama/scripts/fetch-assets.sh my-scene
  4. 4

    Inicia la vista previa en vivo y abre http://127.0.0.1:5173/

    node ~/.claude/skills/ascii-diorama/scripts/serve.mjs my-scene

Antes de usarlo

  • Se necesita un navegador compatible con WebGL 2 y Node.js 18 o posterior.
  • La descarga de recursos incluye elementos con licencia CC BY 4.0 que requieren atribución cuando se muestra el zorro.

En colecciones

Herramientas, skills y plugins para Claude Code

Temas

#claude-code#threejs#ascii-art#webgl#generative-art#skill

Preguntas frecuentes

¿Qué es ascii-diorama?
Skill de Claude Code que guía a un agente de IA para crear escenas 3D en miniatura con efecto tilt-shift, representadas como caracteres ASCII de colores con Three.js. ascii-diorama es un skill de Claude Code para crear miniaturas ASCII con efecto tilt-shift: pequeñas escenas 3D dibujadas íntegramente con caracteres monoespaciados de colores. La cámara observa desde un ángulo pronunciado una maqueta hecha con Three.js y se desplaza de un lado a otro mientras se desenfocan las partes superior e inferior de la imagen, lo que crea un efecto de maqueta a escala. La hierba, el agua, la piedra y los árboles se dibujan con sus propios conjuntos de caracteres, y cada carácter toma su color de la renderización 3D.
¿ascii-diorama es gratuito? ¿Qué licencia tiene?
ascii-diorama es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿ascii-diorama sigue mantenido?
Mantenimiento activo. El último commit de ascii-diorama fue el 2 nov 2026.
¿Para qué puedo usar ascii-diorama?
Crear con Claude Code una miniatura 3D animada al estilo ASCII. Prototipar un diorama personalizado, como un puerto, un pueblo o un faro. Exportar como página web estática una escena de arte ASCII en bucle.
¿Cómo se instala ascii-diorama?
Clona la skill en la carpeta de skills de Claude Code: git clone https://github.com/JDhruv14/ascii-diorama ~/.claude/skills/ascii-diorama Instala las dependencias de Three.js y esbuild en la carpeta scene: npm i three esbuild Copia la escena inicial en una carpeta nueva y descarga sus recursos: mkdir -p my-scene && cp ~/.claude/skills/ascii-diorama/templates/scene/* my-scene/ && bash ~/.claude/skills/ascii-diorama/scripts/fetch-assets.sh my-scene Inicia la vista previa en vivo y abre http://127.0.0.1:5173/: node ~/.claude/skills/ascii-diorama/scripts/serve.mjs my-scene
¿Dónde consigo ascii-diorama?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/JDhruv14/ascii-diorama

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados