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.
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. Todo es tuyo bajo una licencia comercial: úsalo y adáptalo libremente en tus proyectos personales, de clientes y comerciales. No puedes revender, redistribuir ni sublicenciar los archivos fuente en sí.
Descargas, límites y reinicios
Cada plan desbloquea toda la biblioteca y te permite explorarla sin límites: las cuotas de abajo solo aplican cuando realmente descargas. Hay dos depósitos independientes, así que un día ajetreado de descargas normales nunca afecta tu cuota Premium.
Assets regulares · diario
Componentes, secciones, sistemas de diseño, paletas y assets: Starter 3 · Pro 8 · Max 15 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 3 · Pro 8 · Max 15 por mes. Se reinicia el día 1.
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.
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 — anything 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: 3 (Starter), 8 (Pro) o 15 (Max) descargas por día, con reinicio diario. Ítems Premium (los que llevan la insignia Premium dorada): 3, 8 o 15 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. Usa y adapta estos archivos en tus proyectos personales, de clientes y comerciales sin coste adicional.
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.
Explora la biblioteca.
Abre Explorar, encuentra una capa y empieza a construir desde algo real.