fábrica-3d-web

Fábrica de Sitios Web 3D

S a continuación es la carpeta donde se encuentra este archivo. Requisitos: Chrome, Python 3, Node 22+. La película también necesita ffmpeg.

El Pipeline

           ┌──> Escultor (objetos 3D) ──┐
Explorador ─┤                            ├──> Constructor (integrar) ──> Crítico ──┐
(plan)     └──> Animador (movimiento) ──┘        ^                                  │
   ^ el usuario aprueba el plan                                  └──── correcciones, máximo 3 rondas ┘

Rol	Descripción	Crea
Explorador	roles/scout.md	El plan: hechos, sistema de diseño a partir de una referencia de oro, pantallas, lista de objetos 3D
Escultor	roles/sculptor.md	Un módulo three.js por objeto 3D (o una escena Spline)
Animador	roles/animator.md	Bucles explicativos, coreografía de desplazamiento, llegadas
Constructor	roles/builder.md	El sitio web, todo integrado, las interacciones del usuario conectadas
Crítico	roles/critic.md	Aprobado o reprobado frente a diez preguntas fijas, con correcciones

Los roles se comunican solo a través de archivos en el espacio de trabajo: el plan en _work/<slug>/, el código en sites/<slug>/. Así que cualquier rol puede rehacerse por separado ("haz el 3D más brillante" es trabajo del escultor, luego constructor y crítico).

Ejecutando los roles. Si tu herramienta puede iniciar subagentes (Claude Code, Codex, Cursor y otros), inicia uno por rol con este prompt, y ejecuta al escultor y al animador al mismo tiempo:

Eres el de la Fábrica de Sitios Web 3D. Lee <S>/roles/<rol>.md y <S>/references/taste.md, luego realiza tu rol para el sitio <slug> en el espacio de trabajo <ruta absoluta>. La carpeta del skill es <S>. Informa lo que escribiste y cualquier cosa que no pudiste hacer.

Si no, interpreta los roles tú mismo en orden, leyendo cada resumen justo antes de comenzarlo. De cualquier manera, tú eres el director: hablas con el usuario, verificas que exista cada entrega y te detienes en las puertas.

Puertas donde el usuario decide: la entrevista del explorador y su resumen (referencia, aspecto, concepto principal, pantallas, objetos con costos), antes de cualquier pago, y al final. Todo lo demás se ejecuta sin preguntar.

Progreso. Una construcción puede llevar una hora. Antes de que cada rol comience, dile al usuario en una línea lo que está haciendo ("Escultor: construyendo el logo de arcilla, gratuito"), y después, lo que creó.

Trabajos

Ellos dicen	Trabajo
"configurar", primer uso, o no existe espacio de trabajo	A. Configurar
"construye esto", "construye el sitio para X"	B. Construir
"haz mi sitio web 3D", "agrega 3D a este sitio"	C. Actualizar un sitio existente
"haz que el robot siga el cursor", "cambia el 3D", cualquier cambio a un sitio construido	D. Cambiar
"agrega una película", "agrega video"	E. Película (references/film.md)

A. Configurar

sh "$S/scripts/init.sh"        # crea ./website-factory, nunca sobrescribe

Dile al usuario en palabras sencillas: las palabras van en content/, el logotipo en assets/logo/ (SVG es mejor, puede volverse 3D), las imágenes en assets/images/, los modelos 3D en assets/models/, los sitios que le gustan en assets/style/. Luego di "construye esto como un sitio web". No construyas hasta que haya contenido o te pidan una demo.

B. Construir

Un sitio por archivo en content/ (salta los nombres que comienzan con _, y archivos que ya tengan una carpeta en sites/ a menos que se solicite reconstruir). slug = el nombre del archivo en kebab-case. Ejecuta el pipeline completo. Al final, escribe sites/<slug>/REPORT.md y dile al usuario: qué es cada objeto 3D y movimiento, cada elección que hiciste que dejaron abierta, los cambios de copia (copy.md), créditos gastados, el veredicto del crítico, lo que aún está abierto y cómo previsualizar: python3 -m http.server 8080 --directory sites/<slug>. Luego ofrece publicar (ver Publicación).

C. Actualizar un sitio existente

Ejecuta esto dentro de la carpeta del sitio web del usuario. El sitio sigue siendo suyo: mismo diseño, mismas palabras.

1. El explorador escanea el código y escribe el plan. Propón: qué objetos van dónde, qué se mueve, qué archivos cambian. Espera una confirmación.
2. Si es un repositorio git, crea una rama. Cambia la menor cantidad de archivos posible. Sin reestilizar, reformular, reordenar ni actualizar dependencias.
3. El escultor y el animador hacen sus partes. El constructor las agrega de la forma nativa del sitio:
   • HTML plano: como en roles/builder.md.
   • React, Next, Vue, Svelte, Astro: un componente solo del cliente que renderiza el cuadro e importa el módulo del objeto después del montaje. Coloca stage.js y los módulos en la carpeta estática o de fuente que use el framework. Si el proyecto ya usa three.js o react-three-fiber, usa eso en lugar del mapa de importación.
   • WordPress: un tema hijo o un bloque HTML personalizado. Nunca un tema padre ni un sitio en vivo.
4. Puerta: la compilación y las pruebas del sitio aún funcionan. Con su servidor de desarrollo en ejecución, node "$S/scripts/probe.mjs" <url> _work/before antes del cambio y _work/after después (mantén _work/ fuera de git). El crítico compara. check.py es solo para páginas del trabajo B.
5. Muestra la diferencia y cómo previsualizar. Nunca hagas push o despliegues a menos que el usuario lo pida (ver Publicación).

D. Cambiar

Encuentra el rol que posee el cambio, rehaz solo la parte de ese rol, luego la puerta del constructor y el crítico.

E. Película (references/film.md)

Escenas Spline

Una escena Spline es una fuente de 3D entre varias (ver roles/sculptor.md).

• Escena comunitaria (gratuita, sin cuenta): sh "$S/scripts/browser.sh" embed <url-comunitaria> imprime la URL incrustable. Carga todo el editor de Spline, unos 15 segundos y una pantalla oscura en la primera visita. Está bien para una demo. Para un sitio real, el usuario la abre en una cuenta gratuita de Spline, la remezcla, luego Exportar > URL pública, y te da el enlace my.spline.design/..., que carga en uno o dos segundos.
• En la página: <div class="f-3d" data-spline="URL" data-title="Qué es" style="height:100vh"></div>. factory.js la carga de forma diferida, la desvanece y la sobredimensiona para ocultar los botones del visor.
• Dale crédito al autor de la escena en el pie de página solo si la licencia de la escena lo solicita.
• La página aún debe desplazarse con el cursor sobre ella (probe.mjs lo prueba). Si no es así, agrega data-shield.
• El conector Spline (claude mcp add --transport http spline https://mcp.spline.design/mcp) puede construir nuevas escenas. Tiene un límite diario de llamadas: úsalo solo cuando el usuario lo pida, y di cuántas llamadas usaste.

Activos y dinero

De dónde provienen los 3D, imágenes y películas, qué proveedores usar (conector Higgsfield o CLI, otros generadores conectados, o la ruta manual gratuita), y las reglas de generación paga: references/assets.md.

Publicación

Solo cuando el usuario lo pida. Usa lo que esté conectado: un conector de alojamiento (Hostinger, Netlify, Vercel y otros exponen herramientas de despliegue), o la CLI de GitHub para GitHub Pages, o dile al usuario qué carpeta subir. Confirma el objetivo (dominio o repositorio) antes del primer despliegue. Después de eso, redepliega cambios solo cuando se te pida.

Reglas que siempre se cumplen

• Dinero. El 3D construido con código, las escenas comunitarias de Spline y el movimiento son gratuitos. Cualquier cosa paga (imágenes AI, video o 3D, un plan Spline) necesita la confirmación del usuario con un costo cotizado en esta conversación, cada vez. Primero prueba una pantalla.
• Verdad. Solo los hechos del usuario. Nunca inventes números, precios, clientes, citas, premios o logotipos.
• Buen gusto. Nada de la lista de contenido basura en references/taste.md.
• Acceso. Movimiento reducido obtiene una página estática terminada. Las imágenes tienen texto alternativo. El texto tiene contraste legible.
• Trabajo de otras personas. Nunca copies las palabras, imágenes o código de un sitio de referencia. Mantén cualquier crédito que requiera la licencia de un activo; no agregues otros créditos.
• Limpiar. Detén cada servidor y navegador que hayas iniciado.