Documentazione HorizonX
Cos'è HorizonX, cosa trovi nella libreria e come usarla, tra Figma e codice.
Introduzione
Come si usa
Cos'è HorizonX?
HorizonX ti permette di iniziare un progetto da qualcosa di concreto, invece che da una pagina bianca. Se chiedi a un'AI un sito partendo dal nulla, ottieni la media di tutto ciò che ha visto: una hero centrata, tre card, un gradiente piatto. Non è il modello che sbaglia. È il modello senza niente su cui costruire.
Un layer è quella base. Ognuno è un pezzo di design finito, con movimento, profondità e atmosfera già risolti. Prendilo, adattalo, scopri come è stato costruito o usalo come spunto per qualcosa di nuovo. È una libreria che ispira e ti fa andare più veloce, non un generatore che parte da zero.
Quando usarlo
Quando vuoi andare veloce su qualcosa che sembri comunque pensato con cura, e preferisci adattare un buon punto di partenza invece di progettare da zero.
Come funziona
Tre passaggi. Il secondo dipende dal formato.
Scegli un layer
Sfoglia Esplora e apri quello che fa per te. Ogni pagina di una risorsa indica il Formato esatto, così sai subito se è Figma, codice o un mix.
Copia o scarica
Figma → copialo nel tuo spazio di lavoro. HTML → scaricalo e aprilo. Bundle → un solo download con tutti i file che servono.
Fallo tuo
Cambiane lo stile, portalo nel tuo framework o usalo come scintilla per qualcosa di nuovo. La parte artigianale è già fatta. Al resto pensa la tua direzione creativa.
Formati: Figma e codice
Non tutti i layer sono disponibili in ogni formato. Alcuni sono solo Figma, altri solo codice e pochi sono un mix. Ogni pagina di una risorsa mostra subito il Formato esatto, così sai sempre cosa ricevi.
File Figma
Il design modificabile, pronto da copiare direttamente nel tuo spazio di lavoro Figma. Layer, stili e struttura restano intatti, pronti da personalizzare e fare tuoi.
Codice (HTML)
Un file HTML autonomo. Aprilo, pubblicalo così com'è o portalo in React, Svelte o Vue, qualunque sia il tuo stack. Indipendente dallo stack, per scelta.
Bundle
Quando un pezzo richiede più di un file (risorse, specifiche o un export già pronto), arriva come bundle da scaricare in una volta sola.
Su quale modello AI vi basate?
Non c'è un unico modello fisso. Molti design sono realizzati a mano dal nostro team. Alcuni pezzi usano Fable, altri GPT 5.6, e ciò che pubblichiamo è testato per funzionare bene con gli strumenti AI attuali.
Alla fine, la qualità viene dal team di designer e sviluppatori dietro ogni layer e dalla direzione creativa che ci metti tu. Il modello è solo uno strumento del processo, non ciò che fa la parte difficile.
La libreria in tre forme
01Template
Pagine complete e hero autonome. Un punto di partenza completo da adattare dall'inizio alla fine, o da cui prendere una singola schermata.
Sezioni
Blocchi autonomi: slider, griglie di funzionalità, prezzi, FAQ, moduli. Inseriscine uno in un progetto o studia come è costruito.
Componenti
I pezzi più piccoli: card, barre di navigazione, pulsanti, micro-interazioni. I mattoni alla base dei layout più grandi.
Editor: la parte con cui costruisci
Metà di HorizonX è una libreria da cui scaricare. L'altra metà è un insieme di editor che funzionano nel browser. Ne apri uno, cambi ciò che vuoi, vedi il risultato aggiornarsi mentre lavori e te ne vai con il file quando ti convince.
Ci sono quattro raccolte di editor. Tools contiene componenti interattivi. Textures applica effetti alle tue immagini e ai tuoi video. Shaders offre colore e movimento animati. Mockups inserisce i tuoi design in scene 3D e fotografiche. Ogni editor ha un’anteprima dal vivo e formati di esportazione adatti a ciò che crei.
Provalo nel browser
Puoi aprire un editor e muovere ogni controllo senza account. Con un abbonamento porti con te il risultato, entro la quota di esportazione del tuo piano.
Tools: componenti interattivi da regolare
Un tool non è un file finito. È il generatore che sta dietro a un file. Apri un tool e il componente vero gira sulla pagina: un menu che si apre, una galleria che ruota, un pulsante che reagisce al cursore. Accanto c'è un pannello con tutte le regolazioni di quel componente.
Inserisci le tue immagini. Cambia la direzione, le spaziature, la durata, la curva di easing. L'anteprima è il componente stesso, non una sua registrazione, quindi ciò che approvi sullo schermo è esattamente ciò che esporti.
Quando ti convince, scegli un formato ed esporta. Ricevi un unico file HTML che si apre ovunque, un componente Svelte o JSX per React. Le versioni Svelte e React nascono dallo stesso documento che hai appena approvato, quindi il codice che ricevi non può discostarsi dall'anteprima che hai confermato.
Texture: le tue immagini e i tuoi video, in un altro materiale
Texture parte dai contenuti che porti tu. Scegli un look dalla collezione, inserisci la tua foto o il tuo video e l'effetto lo elabora dal vivo. Un ritratto diventa una distesa di caratteri digitati. La foto di un prodotto prende il bagliore di un vecchio schermo CRT. La luce diventa inchiostro a mezzitoni o lamina iridescente.
Ogni look ha i suoi controlli: set di caratteri, griglia, tono, colore, bagliore, movimento. Sposta uno slider e l'anteprima ti segue.
Cosa puoi esportare dipende dal look e da ciò che gli hai dato. Le immagini fisse escono in PNG o JPEG. I video e i look animati offrono MP4 o una sequenza PNG. Alcuni look aggiungono SVG, ASCII può darti testo semplice e WEB PACK raccoglie ciò che serve a un sito web. Il pannello Export mostra solo i formati che la tua combinazione supporta davvero.
Shaders: colore, luce e movimento animati
Uno shader è un'opera disegnata in tempo reale invece che riprodotta. Pensa al gradiente che respira dietro una hero, al campo di rumore che segue il cursore, alle onde che scorrono sotto un titolo. Niente di tutto questo è un file video, quindi non si vede nessun loop e niente perde nitidezza quando il canvas diventa più grande.
I controlli sono accanto al canvas: palette, velocità, scala, grana, direzione. Cambia un valore e l'animazione risponde all'istante, al massimo frame rate.
Gli shader si esportano come i componenti, in HTML, Svelte o React, con il sorgente dell'animazione incluso esattamente come lo esegue l'anteprima. Non c'è nessun runtime da installare e niente che comunichi con i nostri server.
Mockups: inserisci il tuo design in una scena
Mockups è una raccolta di mockup 3D di telefoni, portatili, tablet, orologi e carte.
Apri un mockup, inserisci il tuo design e regola angolazione, luci, sfondo e formato: 9:16, 4:5, 1:1 o 16:9. Le scene 3D si possono anche animare con la timeline dei keyframe o i preset Motion. Mockups è incluso in ogni piano senza costi aggiuntivi. Senza piano puoi aprire ogni mockup e provarlo; per esportare serve un piano.
Esportare il tuo lavoro
Le opzioni di esportazione dipendono dall’editor. Componenti e shader consegnano codice, quindi offrono i framework, la copia per Figma e il prompt. Le texture consegnano file finiti. I mockup si esportano come immagini PNG o JPG, video MP4 o embed HTML. Le esportazioni contano nella quota degli editor descritta in “Download, limiti e azzeramenti”.
HTML
Un solo file che contiene markup, stili e sorgente dell'animazione, senza nient'altro da installare. Aprilo in un browser, inseriscilo in una pagina o passalo a chi costruisce il sito.
Svelte e React
Lo stesso componente, scritto per il tuo framework. Entrambi vengono generati a ogni export dal documento che hai approvato, per questo corrispondono sempre a ciò che hai visto.
Copy to Figma
Su componenti e shader, copia il pezzo negli appunti in un formato che Figma capisce. Incollalo in un file e diventa un insieme di layer veri su cui continuare a progettare, oppure un'immagine piatta quando l'opera non ha forme da descrivere.
Copy Prompt
Su componenti e shader, trascrive la configurazione attuale come testo per uno strumento AI, con ogni valore che hai scelto. La prossima sezione spiega cosa contiene.
Immagini, video e HTML dei mockup
PNG, con sfondo trasparente quando la scena lo consente, e JPG fino a 4096 px sul lato lungo. Video MP4 in H.264 senza audio, fino a 1920 px sul lato lungo a 30 o 60 fps; i preset di clip vanno da 3 a 15 secondi e una timeline di keyframe può durare da 1 a 30 secondi. L’HTML ti dà un embed interattivo dal vivo, come un componente. Ogni mockup diverso conta una volta nella quota degli editor; i video MP4 contano anche nel loro limite, l’HTML mai.
Copy Prompt: passa la tua configurazione a uno strumento AI
Accanto a Export, nei componenti e negli shader, trovi Copy Prompt. Descrive la configurazione attuale con parole semplici, pronte per Claude, Cursor, ChatGPT o un altro strumento IA. Textures e Mockups hanno invece i propri pannelli di esportazione.
Cosa contiene il prompt
- Il nome del pezzo e la descrizione di una riga presa dalla sua pagina nel catalogo.
- Il framework che hai scelto, così la risposta arriva in HTML, Svelte o React e non a caso.
- Ogni impostazione al valore esatto che hai appena scelto, raggruppata come nel pannello dei controlli.
- Le regole della casa che chiederemmo comunque: riempire il contenitore, restare nitido sugli schermi ad alta risoluzione, restare fermo per chi ha attivato la riduzione del movimento nel sistema e fornire codice funzionante senza segnaposto.
- Un link alla pagina originale, così puoi indicare al modello la fonte.
L'idea è che il modello parta dalle tue decisioni invece di fare la media di tutto ciò che ha letto. Chiedigli di ricostruire il pezzo nel tuo stack, di adattarlo al tuo design system o di portare l'idea dove noi non siamo mai arrivati.
Il prompt nasce da ciò che l'editor sa già, quindi generarlo non costa nulla e funziona anche mentre l'opera è ancora in caricamento.
Perché alcune risorse sono solo Figma (e altre solo codice)
Realizziamo ogni pezzo nel mezzo in cui rende meglio. Un layout pensato per il design, ricco di dettagli visivi, vive naturalmente in Figma, quindi lo pubblichiamo lì. Un pezzo nato dal codice o generativo (motion, interazione, 3D) ha più senso in HTML. Invece di forzare una versione a metà in ogni formato, consegniamo ogni layer nel formato che gli rende davvero giustizia. Alcuni arrivano in più formati: la pagina della risorsa mostra esattamente cosa ricevi.
Perché parte del codice è fornita solo in HTML
L'HTML è autonomo e indipendente dallo stack. Un solo file che si apre ovunque, facile da leggere e semplice da portare in React, Svelte, Vue o su un normale hosting statico. Con l'HTML ottieni il risultato completo senza restare legato a un framework: il porting verso ciò che usi davvero è nelle tue mani. Per il rendering lato server e la SEO, inseriscilo nel framework che preferisci.
Ispirazione o produzione
Entrambe, e vogliamo essere realistici. La qualità è da produzione: curata, concreta, realizzata da un team senior. Però molti layer servono a ispirare un progetto o a farti partire in fretta, non a essere inseriti in qualsiasi contesto senza modifiche. Usali come un solido punto di partenza, poi aggiungi la tua direzione.
Licenza e accesso
Qualsiasi abbonamento attivo sblocca l'intera libreria, senza acquisti separati. I prodotti HorizonX sono tuoi con licenza commerciale: puoi usarli e adattarli liberamente nei tuoi progetti personali, per clienti e commerciali. Non puoi rivendere, ridistribuire o concedere in sublicenza i file sorgente. I pacchetti open source mantengono la licenza dei loro autori, inclusa nel download.
Download, limiti e rinnovi
Ogni piano sblocca l’intera libreria e la navigazione non ha limiti. Le quote qui sotto valgono quando scarichi o esporti. I download della libreria usano due quote separate, quindi una giornata piena di download standard non intacca mai la quota Premium. Le esportazioni dagli editor hanno una quota propria.
Risorse normali · al giorno
Componenti, sezioni, design system, palette e risorse: Starter 10 · Pro 25 · Max 50 download al giorno. Si rinnova ogni giorno.
Elementi Premium · al mese
Una selezione dei pezzi migliori, contrassegnati dal badge Premium (una corona dorata): Starter 5 · Pro 12 · Max 25 al mese. Si rinnova il 1° del mese.
Esportazioni dagli editor · al giorno e ogni 30 giorni
Le esportazioni dagli editor di Tools, Texture, Shaders e Mockups condividono una quota di elementi diversi, in base al piano: fino a 30 al giorno e 100 ogni 30 giorni con Starter, 60 e 200 con Pro, e 150 e 600 con Max. Il giorno sono le ultime 24 ore. Riesportare un elemento entro 30 giorni non conta di nuovo, in qualsiasi formato, quindi tutte le immagini PNG o JPG che ti servono dello stesso mockup contano come un solo elemento.
Video dei mockup (MP4) · ogni 30 giorni
Oltre alla quota degli editor, i video MP4 hanno un proprio limite negli ultimi 30 giorni: 20 con Starter, 100 con Pro e 400 con Max, oppure 5 se il tuo unico accesso è una prova. Un secondo video dello stesso mockup entro 10 minuti non conta di nuovo, quindi un nuovo tentativo o una piccola modifica è gratuito. In un team Max, ogni membro ha il proprio conteggio con i limiti del piano.
Esportazioni dal tuo agente IA (MCP) · al giorno
Componenti, look di texture, shader e incorporamenti HTML di mockup che il tuo agente di coding IA esporta tramite MCP, in base al piano: fino a 30 diversi al giorno e 100 ogni 30 giorni con Starter, 60 e 200 con Pro, e 150 e 600 con Max. Il giorno si azzera a mezzanotte UTC, e un elemento già esportato non conta più.
Altre due cose da sapere: scaricare di nuovo qualcosa che hai già non conta mai due volte, e un prodotto composto da più file conta come un solo download. La pagina di ogni elemento Premium mostra quanti download Premium ti restano per il mese.
Le esportazioni dagli editor di Tools, Texture, Shaders e Mockups non consumano mai le soglie di download della Library. I file della Library scaricati dal suo agente IA tramite MCP contano come download normali.
Guide
Figma → codice con l'AI
Molti layer di HorizonX sono solo Figma: un design con 3 o 4 sezioni curate, senza codice. Puoi trasformarli in un sito completo e funzionante collegando un agente di coding AI (come Claude Code) a Figma tramite il Figma MCP. Ecco come.
L'idea
Condividi il file Figma con Claude Code e usa un prompt strutturato per ricreare ogni sezione con precisione al pixel. Quando ha sviluppato le sezioni esistenti e ha capito il linguaggio visivo (layout, spaziature, tipografia, colori), puoi chiedergli di generare altre sezioni nello stesso stile, coerenti con il design originale.
Il flusso di lavoro
Prima leggi, poi scrivi
Chiedi all'agente di usare il Figma MCP per leggere prima il design: struttura, token (colori, tipografia, spaziature, raggi) e uno screenshot di riferimento. Non deve ancora generare codice. Se un valore non arriva dall'MCP, l'agente deve dirtelo invece di inventarlo.
Fornisci le risorse a mano
Il Figma MCP non sempre estrae correttamente tutte le risorse: le immagini possono mancare, essere compresse o avere riferimenti errati. Elementi complessi come gradienti, maschere, ombre, metodi di fusione e texture potrebbero non essere riprodotti con precisione. In questi casi, esportali direttamente da Figma: immagini in WebP o PNG (in base alla trasparenza), icone e loghi in SVG, gradienti o effetti complessi in SVG quando il CSS non riesce a replicarli.
Definisci prima il design system
Prima della prima sezione, estrai i token e riuniscili in un unico posto: colori, scale tipografiche, spaziature, raggi, ombre e breakpoint, nella config di Tailwind, in un file di variabili CSS o in un tema. Dai loro nomi semantici. Trasforma in componenti i pezzi riutilizzabili (pulsanti, titoli, contenitori). È questo che rende le sezioni 2, 3 e 4 veloci e coerenti, senza reinventare la ruota ogni volta.
Una sezione alla volta
Implementa una sezione, poi confrontala direttamente con il design originale in Figma alla stessa dimensione dello schermo. Controlla spaziature, dimensioni dei font, interlinea, allineamento, posizione delle immagini, gradienti, raggi dei bordi e comportamento responsive. Correggi ogni differenza prima di passare alla sezione successiva. Otterrai un risultato molto più preciso rispetto a chiedere all'agente di ricreare tutta la pagina in una volta.
Vai oltre l'originale
Quando le sezioni esistenti sono pronte e il design system è definito, chiedi all'agente di creare nuove sezioni (prezzi, FAQ, testimonianze, contatti) che seguano lo stesso linguaggio visivo. I token e i componenti del design system che hai impostato rendono il lavoro veloce e coerente.
Consigli
- Assicurati che l'URL di Figma includa il
node-iddella sezione specifica, non quello dell'intero file. - Organizza le risorse esportate in cartelle con nomi chiari prima di darle all'agente.
- Fornisci i font corretti, i breakpoint responsive, gli stati hover e le specifiche delle animazioni.
- Indica subito il tuo stack (Astro, Next.js, React, ecc.). Se non lo fai, l'agente ne sceglierà uno da solo.
Modello di prompt riutilizzabile
Copia questo prompt e incollalo in Claude Code (o in qualsiasi agente di coding AI con accesso al Figma MCP). Inserisci l'URL di Figma e il tuo 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.
Lavorare con i layer HTML
I layer HTML sono file autonomi: un solo file con tutto dentro (markup, stili, script) che si apre in qualsiasi browser. Ecco come sfruttarli al meglio.
Anteprima immediata
Scarica il file HTML e aprilo nel browser. Quello è il risultato completo: nessuna build, nessuna dipendenza. È il tuo riferimento per l'aspetto e la resa della sezione.
Portalo nel tuo framework
L'HTML è volutamente indipendente dallo stack. Dallo a Claude Code o al tuo agente di coding AI e chiedigli di portare la sezione nel tuo framework: React, Svelte, Vue, Astro, Next.js. L'agente può leggere il markup, estrarre gli stili e ricrearla nella tua struttura di componenti. Passagli direttamente il file HTML, così ha il riferimento esatto.
Estrai il design system
Come per i layer Figma, chiedi all'agente di estrarre i token (colori, tipografia, spaziature, raggi) e di impostarli nel design system del tuo progetto prima del porting. Così potrai aggiungere altre sezioni in seguito e resteranno coerenti a livello visivo.
Sostituisci i segnaposto
Alcuni layer HTML includono immagini segnaposto o testi dimostrativi. Sostituiscili con i tuoi contenuti, le tue immagini e il tuo branding. Struttura e stili restano, cambia solo il contenuto.
Consiglio
Se il file HTML include animazioni, interazioni o script di terze parti difficili da portare, apri il file originale in un browser, osserva come si comporta e descrivi quel comportamento al tuo agente AI. A volte una descrizione funziona meglio che cercare di decifrare JS minificato.
FAQ
Qualsiasi abbonamento attivo include tutta la libreria. Nessun acquisto separato. Apri una risorsa e compaiono le azioni per il suo formato (Copy Figma, Download HTML e così via). Accedi, vai su Esplora e inizia a prendere ciò che ti serve.
Due soglie indipendenti in base al piano. Risorse normali: 10 (Starter), 25 (Pro) o 50 (Max) download al giorno, con rinnovo quotidiano. Elementi Premium (quelli con il badge dorato Premium): 5, 12 o 25 al mese, con rinnovo il 1° del mese. La consultazione è sempre illimitata e scaricare di nuovo una risorsa non conta mai due volte.
Sì. Il tuo abbonamento include una licenza commerciale per i prodotti HorizonX. Usa e adatta questi file nei tuoi progetti personali, per clienti e commerciali senza costi aggiuntivi. I pacchetti open source mantengono la licenza dei loro autori, inclusa nel download.
No. Puoi usarli e adattarli liberamente nei tuoi progetti, ma non puoi rivendere, ridistribuire o concedere in sublicenza i file sorgente.
Sì. Pubblichiamo regolarmente nuovi drop, e tutto ciò che aggiungiamo è incluso nel tuo abbonamento finché è attivo, senza costi aggiuntivi.
No. Puoi aprire uno strumento, una texture, uno shader o un mockup e muovere ogni controllo senza registrarti. Per portare con te il risultato serve un abbonamento.
No. Non c'è niente da installare e niente che comunichi con i nostri server. I pezzi semplici escono come markup e CSS puri, mentre quelli che richiedono una vera timeline portano con sé il sorgente dell'animazione, lo stesso che eseguiva l'anteprima.
No. Le esportazioni dei mockup non usano mai i limiti di download giornalieri o mensili Premium della libreria. Ogni mockup diverso conta una volta nella quota degli editor che condividi con Tools, Texture e Shaders, e i video MP4 hanno anche un proprio limite.
Negli ultimi 30 giorni: 20 con Starter, 100 con Pro e 400 con Max, oppure 5 se il tuo unico accesso è una prova. Un secondo video dello stesso mockup entro 10 minuti non conta di nuovo. In un team Max, ogni membro ha il proprio conteggio con i limiti del piano.
Sfoglia la libreria.
Apri Esplora, trova un layer e inizia a costruire da qualcosa di concreto.