Arnie936/cool-website-es

Sitio Web Cool

Valores predeterminados

• El idioma del sitio web es inglés a menos que el usuario solicite explícitamente otro idioma. Esto incluye navegación, encabezados, cuerpo del texto, botones, formularios, mensajes de validación y éxito, texto alternativo, etiquetas de accesibilidad, metadatos y descargas generadas. Establece <html lang="en"> (o la etiqueta regional correspondiente como en-GB cuando el mercado objetivo lo requiera). Conserva los nombres propios.
• Genera y edita imágenes rasterizadas con la herramienta image_gen integrada de Codex de forma predeterminada. Sigue la habilidad de generación de imágenes disponible y el esquema de la herramienta actual. No se requiere ninguna clave de API de imágenes externa. Utiliza los activos proporcionados cuando sea adecuado.
• Para videos generados, la API oficial de Higgsfield es la predeterminada y kie.ai es la segunda opción. Respeta la elección del usuario; de lo contrario, usa COOL_WEBSITE_VIDEO_PROVIDER (por defecto higgsfield). Higgsfield usa el flujo de trabajo REST en references/higgsfield-api.md; KIE usa scripts/kie.mjs shot. Si el usuario aún no tiene una cuenta de Higgsfield, indícale que se registre en https://higgsfield.ai/s/mcp-arnold-oberleiter-ecZvus. Configura solo el proveedor seleccionado usando .env.example. Nunca cambies de proveedor silenciosamente ni uses ninguno como respaldo para la generación de imágenes.
• Todo el control del navegador y la verificación visual utilizan el navegador integrado a través de mcp__cua_repl.
• Ofrece SEO opcional basado en DataForSEO inmediatamente después de la primera ronda de entrevista, antes de fijar la estructura de la página, escribir el texto o generar activos. Sigue references/seo-dataforseo.md cuando se elija. Mantén el HTML semántico básico y los metadatos incluso cuando se rechace la investigación.
• Cool Website es el nombre de la habilidad, no la marca del cliente. No agregues marcas de la habilidad, créditos del creador, nombres de marca de muestra o afirmaciones de aprobación a un sitio. Conserva el archivo LICENSE proporcionado con copias del motor/software.

El desplazamiento es la única entrada que cada visitante ya sabe cómo usar. Esta habilidad lo trata como una línea de tiempo: la rueda es un raspador, la página es una película con texto real encima, y cada sección se comporta de manera suficientemente diferente para que el visitante continúe para descubrir qué hace la siguiente.

Lo que produces: un resumen de entrevista, una gramática de página, un mapa del recorrido del cliente, una curva de sensación con un pico diseñado, una puntuación de desplazamiento, un movimiento característico, activos generados, páginas HTML reales en un plano de diseño impulsado por tokens, y una tira de capturas de pantalla que demuestre que se sostiene en cada posición de desplazamiento.

Qué no es esto

No es "generar un vuelo y colocar texto encima". Ese enfoque produce un dispositivo aplicado a toda una página, y cada sitio construido de esa manera se reconoce de un vistazo: el mismo diorama de arcilla, el mismo texto centrado, el mismo contador 01 / 06, el mismo empujón de "desplázate para explorar". Cinco secciones que se comportan de manera idéntica son una sección mostrada cinco veces.

De eso se derivan cuatro reglas, que son la columna vertebral de esta habilidad:

1. La variedad es el producto. Una página usa al menos cuatro familias de dispositivos y nunca el mismo dispositivo dos veces seguidas. Lee references/devices.md.
2. El mundo es fotográfico a menos que la marca esté genuinamente ilustrada. El diorama de arcilla suave mate de baja poli está prohibido como predeterminado. Lee references/worlds.md.
3. Sin cadena continua. Un único vuelo de cámara ininterrumpido es lo más caro y frágil que se puede construir, y existe solo para ocultar cortes entre escenas. Varía el dispositivo en su lugar y el corte desaparece gratis, porque el visitante no está viendo una sola película. Encadena solo cuando el resumen sea literalmente "un viaje continuo".
4. Un mundo diferente no es una página diferente. El conjunto de dispositivos varía cómo se ve una página. La estructura es un eje separado, y debe decidirse deliberadamente o cada construcción hereda el mismo esqueleto. Las primeras cuatro construcciones hicieron exactamente eso. Lee references/uniqueness.md.

Composición del héroe

La estratificación dimensional es un requisito base para un héroe de marketing premium. Planifica fondos, sujeto, primer plano y planos atmosféricos que se muevan de forma independiente antes de solicitar activos. Un único fondo hermoso con desvanecimientos de texto no satisface esta preferencia. La profundidad debe provenir de una separación visible, oclusión y diferencias controladas en el movimiento, mientras el titular permanece legible y la escena cuenta una historia clara.

Lee references/hero-depth.md antes de planificar el héroe o generar sus activos. Cubre placas limpias, máscaras alfa genuinas, anclajes de contacto compartidos, tipografía entre planos, coreografía de desplazamiento moderada, dirección de arte móvil y aceptación visual. Usa la composición que se ajuste a la gramática elegida; no repitas una escena de ejemplo ni impongas fijación en una gramática que la prohíba. Respeta direcciones estáticas o más simples explícitas, y mantén la profundidad en la composición estática cuando se reduzca el movimiento.

Estándar de diseño y entrega

Lee references/design-standard.md antes de planificar un sitio de marketing. Cubre investigación de marca, capas visuales independientes, interacciones útiles, composición móvil y comprobaciones finales en el navegador. Estos principios guían una página personalizada; no son una plantilla de página fija.

Paso 0: El resumen y la autoridad creativa

Establece el resumen antes de generar nada. Reutiliza respuestas y activos ya proporcionados. Cuando el usuario delegue explícitamente la dirección creativa (por ejemplo, "usa tu criterio" o "quiero apartarme de tu camino"), escribe un resumen de Auto-redactado bajo delegación creativa explícita y procede. Cubre los ocho temas a continuación, distingue la evidencia de las suposiciones, y no inventes citas de usuario ni fuerces otro punto de control de entrevista/aprobación.

De lo contrario, entrevista para las decisiones faltantes. Haz preguntas reales, registra las respuestas y evita inferir una marca completa solo por su nombre.

Incluye la oferta, la audiencia, la acción principal del visitante y el sitio web/dominio existente en la primera ronda cuando sean desconocidos. Trata los ocho temas de diseño a continuación como una lista de cobertura; agrupa temas relacionados y haz como máximo tres preguntas cortas por ronda. Después de las primeras respuestas, ofrece el Paso 0a antes de preguntar más detalles de diseño. Reutiliza hechos en las entrevistas de diseño y SEO.

La habilidad es un instrumento de rango, no un estilo de casa. El humano aporta la intención y los activos que posee; la entrevista es donde eso se convierte en el tipo correcto de página: un mundo ininterrumpido, escenas distintas, capítulos impresos, una superficie viva. La habilidad puede hacer cualquiera de ellos. La entrevista decide cuál.

Cubre estos ocho temas sin forzar las ocho preguntas en una sola pasada:

1. Vibra en tres a cinco palabras, más hasta tres referencias de cualquier medio. Una película, una portada de álbum, una tienda, una revista, un juego. No es "sitios que te gustan": nombrar sitios es cómo una página termina pareciéndose a un sitio existente.
2. El viaje de desplazamiento, sección por sección, en sus palabras. Lo que el visitante debería ver primero, lo que viene después, lo último. Su secuencia, no un menú que ofreciste.
3. La curva de energía. Dónde debería sentirse tranquilo, dónde debería sentirse intenso. Una página que es ruidosa todo el camino es tan plana como una que es silenciosa todo el camino.
4. ¿Cómo debería sentirse alguien mientras se desplaza, etapa por etapa, y cuál es el ÚNICO momento que deberían recordar? La energía es el volumen. Esto es emoción, y los dos no se alinean: en una página ruidosa, el acto tranquilo puede ser el más intenso. La respuesta etapa por etapa se convierte en la curva de sensación, el único momento se convierte en el pico. Ambos son requeridos en BRIEF.md. Consulta references/feel.md.
5. Una cosa que este sitio debería hacer que ningún sitio que hayan visto hace. Esta es la semilla del movimiento característico. Insiste por una respuesta real; "ser memorable" no lo es.
6. Qué tan lejos de lo premium-mínimo quieren ir. Ofrece el rango en uniqueness.md §5: brutalista, maximalista, juguetón, retro, denso, editorial, premium-mínimo. Su respuesta gobierna la familia estética, no tu gusto.
7. Un mundo ininterrumpido, o escenas distintas? ¿Toda la página debería sentirse como un lugar continuo por el que el desplazamiento vuela (worldflight, consulta references/worldflight.md), o como escenas separadas, capítulos o cortes? Esta es la bifurcación estructural más grande, y es su decisión, no un dispositivo que eliges más tarde. Ofrece ambas claramente; ninguna es la predeterminada.
8. ¿Qué activos ya tienen? Metraje, fotos, tomas de producto, un kit de marca, clips de ellos mismos. Los activos reales anclan el mundo y reducen el costo de generación; la respuesta decide qué se califica y codifica versus se genera. "Nada" es una respuesta válida y significa un mundo completamente generado.

Escribe las respuestas en <workspace>/builds/<name>/BRIEF.md antes de cualquier planificación de acto, en sus palabras, no parafraseadas en prosa de marketing. Todo lo que sigue lee de ese archivo.

BRIEF.md debe contener, como mínimo:

• Los ocho temas, con respuestas textuales del usuario donde se proporcionen y decisiones redactadas claramente etiquetadas cuando se deleguen.
• La curva de sensación. Una línea por acto: la emoción, luego qué en pantalla la causa. Escrita antes de que existan los actos, añadida a medida que se completa la puntuación.
• El pico. El único momento, escrito como la oración que un visitante diría a un amigo, más en qué acto vive.
• La oración completa de contar a alguien. "Es el sitio donde ___", lleno con una experiencia, no un nombre de dispositivo.
• Cualquier silencio redactado, para que la pasada de verificación pueda distinguirlo de desplazamiento muerto.

references/feel.md es la especificación para los cuatro.

Si el humano es genuinamente inalcanzable y la ejecución es completamente autónoma, escribe BRIEF.md tú mismo: responde las ocho preguntas en la voz de la marca, marca el archivo Auto-redactado, no entrevistado en la parte superior, y dilo en el informe final. Un resumen auto-redactado sin delegación es un plan de contingencia. La delegación explícita anterior es un flujo de trabajo normal compatible y no requiere que el humano sea inalcanzable.

Paso 0a: Elección temprana de SEO

Después de las primeras respuestas de la entrevista, pregunta (en el idioma del usuario): "¿Debería también optimizar el sitio web para Google? Con DataForSEO puedo verificar términos de búsqueda relevantes y competidores y alimentar los resultados directamente en la estructura de la página y el texto." Ofrece: "Sí, con DataForSEO", "Solo conceptos básicos técnicos", "Más tarde". Omite esta pregunta si el usuario ya eligió SEO. La delegación creativa por sí sola no autoriza la instalación de un servicio externo ni el gasto de crédito de API.

Para sí, sigue seo-dataforseo.md: completa la ingesta enfocada, conecta u ofrece instalar el MCP, establece el presupuesto de investigación, investiga el mercado elegido, luego usa los hallazgos a lo largo de la construcción. Lee dataforseo-setup.md solo para guía de configuración/auth y crédito. Una URL de servidor por sí sola es suficiente para identificar la conexión remota; la autorización de la cuenta aún debe completarse.

Registra SEO: habilitado | solo-conceptos-básicos | diferido | bloqueado en BRIEF.md, más el mercado objetivo y el presupuesto si está habilitado. Para solo conceptos básicos o diferido, continúa sin instalación de MCP ni investigación paga. Si la conexión está bloqueada, continúa con trabajo de diseño y técnico independiente; marca las decisiones de palabras clave como provisionales. No presentes la investigación pendiente de DataForSEO como completada.

Bootstrap

Entorno, no una etapa del trabajo. Hazlo una vez que la entrevista esté respondida y antes del Paso 1.

Ejecuta la verificación previa en lugar de comprobar a mano. Conoce los modos de fallo que de otro modo aparecen más tarde como errores engañosos, principalmente un ffmpeg despojado que reporta un filtro faltante como un error de sintaxis en tu comando:

node <skill>/scripts/doctor.mjs

Reporta Node, una compilación completa de ffmpeg, la clave de API opcional y el espacio de trabajo resuelto. Añade --video solo cuando se planifique la generación de video. Los fallos requeridos salen con código distinto de cero. El control del navegador y la verificación usan el navegador integrado de Codex a través de mcp__cua_repl; no se requiere ningún paquete de automatización de navegador separado ni ejecutable de navegador local por esta habilidad.

El espacio de trabajo

Las construcciones y el registro de huellas digitales viven en un directorio, y se resuelve, nunca se asume:

node <skill>/scripts/workspace.mjs --ensure     # lo imprime, lo crea, siembra el registro

Orden de resolución, gana el primero encontrado:

1. COOL_WEBSITE_HOME
2. El .cool-website.json más cercano subiendo desde el cwd, { "workspace": "..." }
3. <raíz del proyecto>/cool-website, donde la raíz del proyecto es el ancestro más cercano que tenga un .git

Así que una carpeta de construcción es <workspace>/builds/<name>/ y el registro es <workspace>/FINGERPRINTS.md. El registro comienza vacío: la puerta existe para evitar que te repitas, así que tu primera construcción no tiene nada que borrar.

Si ya mantienes construcciones en otro lugar, coloca un .cool-website.json en la raíz de tu proyecto apuntando allí y no se mueve nada.

El resto

1. Las imágenes usan el modelo de imagen integrado; no se necesita clave externa. Para videos generados, copia .env.example a la raíz del proyecto del sitio web como .env, llena solo el proveedor elegido, y ejecuta doctor.mjs --video. --provider higgsfield|kie anula el proveedor configurado para esta comprobación. Higgsfield (predeterminado) usa HF_API_KEY_ID más HF_API_KEY_SECRET y su Consola para saldo/precios; las cuentas nuevas se registran en https://higgsfield.ai/s/mcp-arnold-oberleiter-ecZvus. KIE usa KIE_AI_API_KEY y scripts/kie.mjs probe. Sigue references/assets.md. Registra proveedor, modelo y presupuesto autorizado en BRIEF.md. El metraje proporcionado no necesita llamada a API.
2. Un kit de marca si existe (colores, logotipo, tipo, tomas de producto existentes). Si la marca tiene una carpeta en este repositorio, léela antes de generar nada, y obedece sus reglas estrictas. Una marca que prohíbe números inventados significa que no hay contadores de estadísticas, por bien que se vean.

Copia engine/cool-website.js, engine/cool-website.css y LICENSE en la carpeta de construcción. Nunca edites el motor por proyecto; es th

… [truncado para traducción]