Documentación de HorizonX
Qué es HorizonX, qué contiene la biblioteca y cómo usarla: Figma y código.
Introducción
Cómo usarla
¿Qué es HorizonX?
HorizonX te permite empezar un proyecto desde algo real, en lugar de desde una página en blanco. Pídele a una IA una web desde cero y obtendrás la media de todo lo que ha visto: un hero centrado, tres tarjetas, un gradiente plano. Eso no es que el modelo falle; es el modelo sin nada sobre lo que construir.
Una capa es esa base. Cada una es una pieza de diseño terminada, con movimiento, profundidad y atmósfera ya resueltos. Tómala, adáptala, aprende cómo se construyó o úsala para impulsar algo nuevo. Es una biblioteca para inspirar y acelerar, no un generador desde cero.
Cuándo usarla
Cuando quieres avanzar rápido en algo que sigue pareciendo intencional y prefieres adaptar un punto de partida sólido antes que diseñar desde cero.
Cómo funciona
Tres pasos, y el del medio depende del formato.
Elige una capa
Explora la biblioteca y abre cualquier cosa que encaje. La página de cada asset indica su Formato exacto, para que sepas de antemano si es Figma, código o una mezcla.
Cópiala o descárgala
Figma → cópiala en tu espacio de trabajo. HTML → descárgala y ábrela. Paquetes → una sola descarga con todos los archivos que la pieza necesita.
Hazla tuya
Rediseñala, pórtala a tu framework o úsala como chispa para algo nuevo. El oficio ya está hecho; tu dirección creativa hace el resto del camino.
Formatos: Figma y código
No todas las capas están disponibles en todos los formatos. Algunas son solo de Figma, otras solo de código y unas pocas son mixtas. La página de cada asset muestra su Formato exacto de antemano, para que siempre sepas lo que vas a recibir.
Archivo de Figma
El diseño editable, listo para copiar directamente en tu espacio de trabajo de Figma. Capas, estilos y estructura intactos, listos para que lo rediseñes y lo hagas tuyo.
Código (HTML)
Un archivo HTML autocontenido. Ábrelo, publícalo tal cual o pórtalo a React, Svelte o Vue, lo que use tu stack. Independiente del stack a propósito.
Paquete
Cuando una pieza necesita más de un archivo (assets, especificaciones o una exportación empaquetada), se entrega como un paquete que descargas de una sola vez.
¿Contra qué modelo de IA construyes?
No hay un único modelo fijo. Muchos de los diseños los construye a mano nuestro equipo. Algunas piezas usan Fable, otras GPT 5.6, y lo que publicamos está probado para funcionar bien con las herramientas de IA actuales.
Al final, la calidad viene del equipo de diseñadores y desarrolladores detrás de cada capa y de la dirección creativa que tú le aportas. El modelo es solo una herramienta más en ese proceso, no quien hace el trabajo difícil.
La biblioteca, tres formas
01Plantillas
Páginas completas y heroes independientes. Un punto de partida integral que puedes adaptar de principio a fin, o del que puedes sacar una única pantalla.
Secciones
Bloques autocontenidos: sliders, cuadrículas de funciones, precios, FAQs, formularios. Inserta uno en un proyecto o estudia cómo está construido.
Componentes
Las piezas más pequeñas: tarjetas, navegaciones, botones, microinteracciones. Los bloques de construcción detrás de los layouts más grandes.
Editores: la parte con la que construyes
La mitad de HorizonX es una biblioteca de la que descargas. La otra mitad son editores que corren en tu navegador. Abres uno, cambias lo que quieras, ves el resultado actualizarse mientras trabajas y te llevas el archivo cuando queda como querías.
Hay cuatro colecciones de editores. Tools incluye componentes interactivos. Textures aplica efectos a tus imágenes y vídeos. Shaders ofrece color y movimiento animados. Mockups coloca tus diseños en escenas 3D y fotográficas. Cada editor tiene una vista previa en directo y formatos de exportación adecuados a lo que creas.
Pruébalo en el navegador
Puedes abrir un editor y mover cada control sin cuenta. Con una membresía te llevas el resultado, dentro de la cuota de exportación de tu plan.
Tools: componentes interactivos que puedes ajustar
Un tool no es un archivo terminado. Es el generador que hay detrás. Abres uno y el componente real corre en la página: un menú que se despliega, una galería que rota, un botón que responde al cursor. Al lado tienes un panel con todas las perillas de ese componente.
Pon tus propias imágenes. Cambia la dirección, el espaciado, la duración, la curva de easing. La vista previa es el componente mismo, no una grabación, así que lo que apruebas en pantalla es exactamente lo que exportas.
Cuando quede bien, eliges formato y exportas. Obtienes un solo archivo HTML que abre en cualquier parte, un componente Svelte o JSX de React. Las versiones de Svelte y React se escriben a partir del mismo documento que acabas de aprobar, así que el código que recibes no puede alejarse de la vista previa que diste por buena.
Texturas: tus imágenes y videos, en otro material
Texturas parte de material que traes tú. Eliges un look de la colección, sueltas tu foto o tu video y el efecto lo renderiza en vivo. Un retrato se convierte en un campo de caracteres escritos. Una foto de producto toma el brillo de una pantalla CRT antigua. La luz se vuelve tinta de semitono o foil iridiscente.
Cada look tiene sus propios controles: el set de caracteres, la grilla, el tono, el color, el brillo, el movimiento. Mueves un slider y la vista previa te sigue el ritmo.
Lo que puedes exportar depende del look y de lo que le diste. Las imágenes fijas salen en PNG o JPEG. Los videos y los looks animados ofrecen MP4 o una secuencia de PNG. Algunos looks agregan SVG, ASCII puede darte texto plano y WEB PACK empaqueta lo que necesita un sitio web. El panel de exportación solo muestra los formatos que tu combinación admite de verdad.
Shaders: color, luz y movimiento animados
Un shader es una pieza que se dibuja en tiempo real en lugar de reproducirse. Piensa en el gradiente que respira detrás de un hero, el campo de ruido que sigue al cursor, las olas que ruedan bajo un titular. Nada de eso es un archivo de video, así que no se nota el loop ni pierde nitidez cuando el lienzo crece.
Los controles están junto al lienzo: paleta, velocidad, escala, grano, dirección. Cambias un valor y la animación responde al instante, a cuadros completos.
Los shaders se exportan igual que los componentes, en HTML, Svelte o React, con el código de la animación incluido tal cual lo corre la vista previa. No hay runtime que instalar ni nada que nos llame de vuelta.
Mockups: coloca tu diseño en una escena
Mockups es una colección de mockups 3D de teléfonos, portátiles, tabletas, relojes y tarjetas.
Abre un mockup, coloca tu diseño y ajusta el ángulo, la iluminación, el fondo y el formato: 9:16, 4:5, 1:1 o 16:9. Las escenas 3D también se pueden animar con la línea de tiempo de keyframes o los presets de Motion. Mockups está incluido en todos los planes sin coste adicional. Sin plan puedes abrir cualquier mockup y probarlo; para exportar necesitas un plan.
Llevarte tu trabajo
Las opciones de exportación dependen del editor. Los componentes y los shaders entregan código, así que ofrecen los frameworks, la copia para Figma y el prompt. Las texturas entregan archivos terminados. Los mockups exportan imágenes PNG o JPG, vídeo MP4 o un embed HTML. Las exportaciones cuentan en la cuota de los editores que se explica en “Descargas, límites y reinicios”.
HTML
Un solo archivo autocontenido con el marcado, los estilos y el código de la animación. Ábrelo en un navegador, mételo en una página o pásaselo a quien construya el sitio.
Svelte y React
El mismo componente escrito para tu framework. Ambos se generan en cada exportación a partir del documento que aprobaste, por eso siempre coinciden con lo que viste.
Copy to Figma
En componentes y shaders, pone la pieza en tu portapapeles con una forma que Figma entiende. La pegas en un archivo y aterriza como capas reales con las que puedes seguir diseñando, o como imagen plana cuando la pieza no tiene formas que describir.
Copy Prompt
En componentes y shaders, escribe tu configuración actual como texto para una herramienta de IA, con todos los valores que elegiste. La siguiente sección cuenta qué lleva dentro.
Imágenes, vídeos y HTML de mockups
PNG, con fondo transparente cuando la escena lo permite, y JPG de hasta 4096 px en el lado largo. Vídeo MP4 en H.264 sin audio, de hasta 1920 px en el lado largo a 30 o 60 fps; los presets de clip van de 3 a 15 segundos y una línea de tiempo de keyframes puede durar de 1 a 30 segundos. HTML te da un embed interactivo en vivo, como un componente. Cada mockup distinto cuenta una vez en la cuota de los editores; los vídeos MP4 cuentan además en su propio límite y el HTML nunca.
Copy Prompt: pásale tu configuración a una herramienta de IA
Junto a Export, en componentes y shaders, está Copy Prompt. Describe tu configuración actual en palabras sencillas, listas para Claude, Cursor, ChatGPT u otra herramienta de IA. Textures y Mockups tienen sus propios paneles de exportación.
Qué lleva el prompt
- El nombre de la pieza y la descripción de una línea de su página en el catálogo.
- El framework que elegiste, para que la respuesta vuelva en HTML, Svelte o React y no en una suposición.
- Cada ajuste con el valor exacto que acabas de elegir, agrupado como los agrupa el panel de controles.
- Las reglas de la casa que pediríamos igual: que llene su contenedor, que se vea nítido en pantallas de alta resolución, que se quede quieto para quien pide movimiento reducido en su sistema y que entregue código funcionando, sin placeholders.
- Un enlace de vuelta a la página original, para poder apuntar al modelo hacia la fuente.
La idea es que el modelo arranque desde tus decisiones en lugar de promediar todo lo que ha leído. Pídele que rehaga la pieza en tu stack, que la adapte a tu design system o que lleve la idea a un lugar al que nosotros nunca fuimos.
El prompt se escribe con lo que el editor ya sabe, así que no cuesta nada producirlo y funciona incluso mientras la pieza todavía carga.
Por qué algunos assets son solo de Figma (y otros solo de código)
Construimos cada pieza en el medio donde mejor vive. Un diseño con mucha carga visual y prioridad de diseño vive naturalmente en Figma, así que eso es lo que se publica. Una pieza centrada en el código o generativa (movimiento, interacción, 3D) tiene más sentido como HTML. En lugar de forzar una versión a medias en cada formato, entregamos cada capa en el formato que realmente le hace justicia. Algunas llegan en más de uno; la página del asset muestra exactamente lo que recibes.
Por qué parte del código se entrega solo en HTML
El HTML es independiente del stack y autocontenido. Un único archivo que se abre en cualquier sitio, es fácil de leer y se porta limpiamente a React, Svelte, Vue o a un hosting estático simple. Publicar el HTML te da el resultado completo sin atarte a un framework: tú controlas el port hacia lo que realmente construyas. Para renderizado en servidor y SEO, intégralo en el framework que elijas.
Inspiración vs. producción
Ambas cosas, y queremos ser realistas al respecto. El oficio es de nivel producción: pulido, real, construido por un equipo senior. Pero muchas capas están pensadas para inspirar un proyecto o para que arranques rápido, no para ser un componente que encaje sin tocarlo en cualquier contexto. Úsalas como un punto de partida sólido y aporta tu propia dirección.
Licencias y acceso
Cualquier suscripción activa desbloquea toda la biblioteca, sin compras adicionales. Los productos de HorizonX son tuyos bajo una licencia comercial: úsalos y adáptalos libremente en tus proyectos personales, de clientes y comerciales. No puedes revender, redistribuir ni sublicenciar los archivos fuente en sí. Los paquetes de código abierto conservan la licencia de sus autores, que viene incluida en la descarga.
Descargas, límites y reinicios
Todos los planes desbloquean la biblioteca completa y explorarla no tiene límites. Las cuotas de abajo se aplican cuando descargas o exportas. Las descargas de la biblioteca usan dos cuotas separadas, así que un día de muchas descargas normales nunca consume tu cuota Premium. Las exportaciones desde los editores tienen su propia cuota.
Assets regulares · diario
Componentes, secciones, sistemas de diseño, paletas y assets: Starter 10 · Pro 25 · Max 50 descargas por día. Se reinicia cada día.
Ítems Premium · mensual
Piezas selectas de primer nivel marcadas con una insignia Premium (una corona dorada): Starter 5 · Pro 12 · Max 25 por mes. Se reinicia el día 1.
Exportaciones desde los editores · por día y cada 30 días
Las exportaciones desde los editores de Tools, Texturas, Shaders y Mockups comparten una cuota de elementos distintos, según el plan: hasta 30 al día y 100 cada 30 días en Starter, 60 y 200 en Pro, y 150 y 600 en Max. El día son las últimas 24 horas. Volver a exportar un elemento dentro de 30 días no vuelve a contar, sea cual sea el formato, así que todas las imágenes PNG o JPG que necesites del mismo mockup cuentan como un solo elemento.
Vídeos de mockups (MP4) · cada 30 días
Además de la cuota de los editores, los vídeos MP4 tienen su propio límite en los últimos 30 días: 20 en Starter, 100 en Pro y 400 en Max, o 5 si tu único acceso es una prueba. Un segundo vídeo del mismo mockup dentro de 10 minutos no vuelve a contar, así que un reintento o un pequeño ajuste es gratis. En un equipo Max, cada miembro tiene su propio contador con los límites del plan.
Exportaciones de tu agente de IA (MCP) · diario
Componentes, looks de textura, shaders y embeds HTML de mockups que tu agente de IA exporta por MCP, según tu plan: hasta 30 distintos por día y 100 cada 30 días en Starter, 60 y 200 en Pro, y 150 y 600 en Max. El día se reinicia a medianoche UTC, y algo ya exportado no vuelve a contar.
Dos cosas más que conviene saber: volver a descargar algo que ya tienes nunca cuenta dos veces, y un producto compuesto por varios archivos cuenta como una sola descarga. La página de cada ítem Premium muestra cuántas descargas Premium te quedan este mes.
Las exportaciones de los editores de Tools, Texturas, Shaders y Mockups nunca consumen las cuotas de descarga de la Library. Los archivos de la Library que tu agente de IA descarga por ti a través de MCP cuentan como descargas normales.
Guías
Figma → Código con IA
Muchas capas de HorizonX son solo de Figma: un diseño con 3–4 secciones pulidas y sin código adjunto. Puedes convertirlas en una web totalmente funcional conectando un agente de codificación con IA (como Claude Code) a Figma mediante el Figma MCP. Así se hace.
La idea
Comparte el archivo de Figma con Claude Code y usa un prompt estructurado para recrear cada sección con fidelidad de píxel perfecto. Una vez que haya desarrollado las secciones existentes y entienda el lenguaje visual (layout, espaciado, tipografía, colores), puedes pedirle que genere secciones adicionales que sigan ese mismo estilo y sean coherentes con el diseño original.
El flujo de trabajo
Lee antes de escribir
Pídele al agente que use el Figma MCP para leer primero el diseño: estructura, tokens (colores, tipografía, espaciado, radios) y una captura de referencia. Todavía no debe generar código. Si un valor no viene del MCP, el agente debe decírtelo en lugar de inventarlo.
Aporta los assets manualmente
El Figma MCP no siempre extrae todos los assets correctamente: las imágenes pueden faltar, venir comprimidas o con referencias incorrectas. Elementos complejos como gradientes, máscaras, sombras, modos de fusión y texturas pueden no reproducirse con precisión. Cuando ocurra, expórtalos directamente desde Figma: imágenes en WebP o PNG (según la transparencia), iconos y logos en SVG, y gradientes o efectos complejos en SVG cuando el CSS no pueda igualarlos.
Establece primero el sistema de diseño
Antes de la primera sección, extrae y centraliza los tokens (colores, escalas tipográficas, espaciado, radios, sombras, breakpoints) en un solo lugar: configuración de Tailwind, archivo de variables CSS o tema. Nómbralos de forma semántica. Convierte en componentes las piezas reutilizables (botones, títulos, contenedores). Eso es lo que hace que las secciones 2, 3 y 4 salgan rápido y consistentes, en lugar de reinventar la rueda cada vez.
Construye una sección a la vez
Implementa una sección y compárala directamente con el diseño original de Figma al mismo tamaño de pantalla. Revisa espaciado, tamaños de fuente, interlineados, alineación, posición de imágenes, gradientes, radios de borde y comportamiento responsive. Corrige cualquier diferencia antes de pasar a la siguiente sección. Así obtienes un resultado mucho más preciso que pidiéndole al agente recrear la página entera de una vez.
Ve más allá del original
Una vez construidas las secciones existentes y establecido el sistema de diseño, pídele al agente que cree secciones nuevas (precios, FAQ, testimonios, contacto) que sigan el mismo lenguaje visual. Los tokens y componentes del sistema de diseño que configuraste hacen que esto sea rápido y consistente.
Consejos
- Asegúrate de que la URL de Figma incluya el
node-idde la sección concreta, no de todo el archivo. - Organiza los assets exportados en carpetas con nombres claros antes de entregárselos al agente.
- Aporta las fuentes correctas, los breakpoints responsive, los estados de hover y las especificaciones de animación.
- Especifica tu stack (Astro, Next.js, React, etc.) de antemano; si no lo haces, el agente asumirá uno.
Plantilla de prompt reutilizable
Copia este prompt y pégalo en Claude Code (o en cualquier agente de codificación con IA que tenga acceso al Figma MCP). Completa la URL de Figma y tu stack.
I want you to replicate this Figma section in code with PIXEL-PERFECT fidelity. SOURCE - Figma: [PASTE URL WITH node-id] - This is ONE section of a larger landing page. We will build the remaining sections later, reusing whatever you define here. STACK - [e.g. Astro + Tailwind / Next + CSS Modules / React + styled-components] - Package manager: pnpm PHASE 1: READ (do not write code yet) 1. Use the Figma MCP on the exact node: - get_design_context → structure + reference styles - get_variable_defs → real tokens (colors, typography, spacing, radii) - get_screenshot → reference image to compare against - get_metadata → node hierarchy if the section is complex 2. If a color, spacing or size does not come from the MCP, tell me instead of inventing it. PHASE 2: ASSETS - Images, photos, complex gradients, textures, videos, custom icons, logos, or anything else that cannot be reproduced 1:1 with pure CSS/SVG: STOP and ask me to attach it. List what you need (layer name + purpose). - Pure CSS gradients / shadows / borders: reproduce them from the tokens. PHASE 3: DESIGN SYSTEM - Extract tokens into a single place (Tailwind config / CSS vars / theme): colors, typography, spacing, radii, shadows, breakpoints. - Name them semantically (bg-surface, text-primary, etc.). - Componentize reusable pieces (buttons, chips, headings, containers). PHASE 4: BUILD - Build ONLY this section using the tokens from Phase 3. - Responsive: respect the design's breakpoints. If Figma only shows desktop, tell me and propose mobile behavior before coding. - Semantic, accessible markup (headings, alt, aria). PHASE 5: VERIFY - Compare your result against the get_screenshot reference. - Report remaining differences. - Final visual sign-off is mine.
Trabajar con capas HTML
Las capas HTML son archivos autocontenidos: un único archivo con todo (markup, estilos, scripts) que se abre en cualquier navegador. Así puedes sacarles el máximo partido.
Previsualiza al instante
Descarga el archivo HTML y ábrelo en tu navegador. Ese es el resultado completo: sin paso de build, sin dependencias. Es tu referencia de cómo debe verse y sentirse la sección.
Pórtala a tu framework
El HTML es intencionadamente independiente del stack. Entrégaselo a Claude Code o a tu agente de codificación con IA y pídele que porte la sección a tu framework: React, Svelte, Vue, Astro, Next.js. El agente puede leer el markup, extraer los estilos y recrearlo en la estructura de tus componentes. Pásale el archivo HTML directamente para que tenga la referencia exacta.
Extrae el sistema de diseño
Igual que con las capas de Figma, pídele al agente que extraiga los tokens (colores, tipografía, espaciado, radios) y los configure en el sistema de diseño de tu proyecto antes de portar. Así podrás añadir más secciones después y serán visualmente coherentes.
Reemplaza los placeholders
Algunas capas HTML incluyen imágenes de placeholder o texto de demostración. Cámbialos por tu propio contenido, imágenes y marca. La estructura y los estilos se mantienen; solo cambia el contenido.
Consejo
Si el archivo HTML incluye animaciones, interacciones o scripts de terceros que no se portan limpiamente, abre el archivo original en un navegador, estudia cómo se comporta y descríbele ese comportamiento a tu agente de IA: a veces una descripción es más efectiva que intentar parsear JS minificado.
FAQ
Cualquier suscripción activa incluye toda la biblioteca. Sin compras adicionales. Abre un asset y aparecerán sus acciones de formato (Copiar en Figma, Descargar HTML, etc.). Inicia sesión, ve a Explorar y empieza a descargar lo que necesites.
Dos cuotas independientes según el plan. Assets regulares: 10 (Starter), 25 (Pro) o 50 (Max) descargas por día, con reinicio diario. Ítems Premium (los que llevan la insignia Premium dorada): 5, 12 o 25 por mes, con reinicio el día 1. La navegación siempre es ilimitada y las descargas repetidas nunca cuentan dos veces.
Sí. Tu suscripción incluye una licencia comercial para los productos de HorizonX. Usa y adapta estos archivos en tus proyectos personales, de clientes y comerciales sin coste adicional. Los paquetes de código abierto conservan la licencia de sus autores, que viene incluida en la descarga.
No. Puedes usarlos y adaptarlos libremente en tus propios proyectos, pero no puedes revender, redistribuir ni sublicenciar los archivos fuente en sí.
Sí. Publicamos nuevas entregas con regularidad, y todo lo que añadimos está incluido en tu suscripción mientras esté activa, sin coste adicional.
No. Puedes abrir una herramienta, una textura, un shader o un mockup y mover cada control sin registrarte. Para llevarte el resultado necesitas una membresía.
No. No hay nada que instalar ni nada que nos llame de vuelta. Las piezas simples salen como marcado y CSS puros, y las que necesitan una línea de tiempo real llevan consigo el código de la animación, que es el mismo que corría la vista previa.
No. Las exportaciones de mockups nunca usan los límites de descarga diarios ni mensuales Premium de la biblioteca. Cada mockup distinto cuenta una vez en la cuota de los editores que compartes con Tools, Texturas y Shaders, y los vídeos MP4 tienen además su propio límite.
En los últimos 30 días: 20 en Starter, 100 en Pro y 400 en Max, o 5 si tu único acceso es una prueba. Un segundo vídeo del mismo mockup dentro de 10 minutos no vuelve a contar. En un equipo Max, cada miembro tiene su propio contador con los límites del plan.
Explora la biblioteca.
Abre Explorar, encuentra una capa y empieza a construir desde algo real.