Communitygithub.com

Xaomisatoshi/ultra-3d-premium-landing-architect-skill

Crea páginas de aterrizaje premium Ultra 3D completas y responsivas a partir de un briefing breve, con copy de conversión, dirección visual, interacciones, código ejecutable o guía para constructores sin código y un gate de QA verificable. Úsalo para creación de landing pages, diseño web premium, sitios 3D, páginas de producto interactivas, rediseños de sitios web y páginas de conversión.

¿Qué es ultra-3d-premium-landing-architect-skill?

Esta habilidad permite a un agente de IA (como Claude Code, Cursor o Codex) generar páginas de aterrizaje premium de una sola página con efectos 3D inmersivos y un diseño visual impactante. A partir de un breve briefing del usuario, el agente selecciona aleatoriamente un estilo de diseño (de una lista que incluye neobrutalismo, glassmorfismo, estilo suizo, entre otros) o permite combinar varios, evitando sesgos hacia un estilo favorito. La página resultante incluye elementos interactivos como seguimiento del ratón sobre objetos 3D, animaciones al hacer scroll (como rotaciones o despieces de productos) y configuradores interactivos, todo con código ejecutable o instrucciones para constructores sin código. Es ideal para profesionales del marketing digital, diseñadores web y desarrolladores que necesitan landing pages de alta conversión con una experiencia visual premium, soportando plataformas como Claude Code, Cursor y Codex.

Compatible con~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Xaomisatoshi/ultra-3d-premium-landing-architect-skill/tree/HEAD

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

Ultra 3D Premium Landing Architect

Cree una PÁGINA DE ATERRIZAJE DE UNA SOLA PÁGINA utilizando un ESTILO DE DISEÑO SELECCIONADO ALEATORIAMENTE de la siguiente lista, o elija su propio estilo si encuentra algo más adecuado que no esté listado, o también puede combinar 2-3 estilos de diseño. IMPORTANTE: Utilice un método aleatorio – cualquier método que garantice variedad. NO recurra automáticamente al "neobrutalismo" o a un estilo favorito específico. Realice una selección realmente aleatoria.

Estilos de diseño disponibles (la lista no es exhaustiva – siéntase libre de identificar y usar otros estilos profesionales):

  • Neobrutalista (aspecto crudo, audaz, provocativo con impacto estructurado)
  • Suizo/Internacional (basado en cuadrícula, sistemático, tipografía extremadamente clara)
  • Editorial (inspirado en revistas, tipografía refinada, orientado a artículos)
  • Glassmorfismo (capas translúcidas, fondos borrosos, profundidad)
  • Retro-futurista (visión futurista de los 80, nostalgia refinada)
  • Bauhaus (simplicidad geométrica, formas básicas, la forma sigue a la función)
  • Art Déco (patrones elegantes, lujo, sofisticación vintage)
  • Minimalista (reducción extrema, máximo espacio en blanco, solo lo esencial)
  • Plano (sin profundidad, colores sólidos, iconos simples, claro)
  • Material (inspirado en Google, tarjetas, sombras sutiles, movimiento)
  • Neumórfico (sombras suaves, elementos extruidos, táctil)
  • Monocromático (variaciones de un solo color, profundidad tonal)
  • Escandinavo (Hygge, materiales naturales, minimalismo cálido)
  • Japandi (fusión japonesa-escandinava, Zen se encuentra con Hygge)
  • Modo oscuro primero (diseñado para interfaces oscuras, elegancia de alto contraste)
  • Modernista (líneas limpias, belleza funcional, atemporal)
  • Renderizados 3D & Computadora/Tecnología
  • El "Glassmorphism"
  • El "Blob" orgánico
  • Ondas de partículas 3D: cientos de puntos pequeños o líneas que se mueven como una ola digital – ideal para startups de IA, Web3 o datos.

🌐 Experiencias 3D inmersivas y animaciones de scroll

📱 Maquetas 3D de dispositivos

✨ Micro-animaciones con función

🪟 Glassmorfismo y modo oscuro

🖤 Elementos 3D isométricos

#efectos 3D interactivos para landing page:

  1. Mouse-Track: El objeto 3D (por ejemplo, un gadget tecnológico o un cubo de código abstracto) en el área hero se mueve ligeramente con el ratón del usuario.
  2. Scroll-Animate: Al hacer scroll hacia abajo, el producto (por ejemplo, una zapatilla o una botella) gira, se descompone en sus partes (vista explosionada) y explica así las características.
  3. Click-Configurador: Los usuarios pueden hacer clic en diferentes colores o botones del gráfico 3D, lo que hace que el modelo cambie en tiempo real.

Skills relacionados