HorizonX-documentatie
Wat HorizonX is, wat er in de bibliotheek zit en hoe je het gebruikt: in Figma en in code.
Introductie
Zo gebruik je het
Wat is HorizonX?
Met HorizonX begin je een project vanuit iets echts, in plaats van met een leeg vel. Vraag een AI om een website vanuit het niets en je krijgt het gemiddelde van alles wat het ooit heeft gezien: een gecentreerde hero, drie kaarten, een vlak verloop. Dat is geen falend model. Het is een model zonder basis om op te bouwen.
Een layer is die basis. Elke layer is een afgewerkt stuk design, met beweging, diepte en sfeer al uitgewerkt. Neem het over, pas het aan, ontdek hoe het gebouwd is of gebruik het als vliegende start voor iets nieuws. Het is een bibliotheek die inspireert en versnelt, geen generator die alles vanaf nul maakt.
Wanneer gebruik je het
Als je snel wilt werken aan iets dat er toch doordacht uitziet, en je liever een sterk vertrekpunt aanpast dan vanaf nul ontwerpt.
Hoe het werkt
Drie stappen. De middelste hangt af van het formaat.
Kies een layer
Blader door de Bibliotheek en open wat bij je past. Elke assetpagina vermeldt het exacte formaat, dus je weet vooraf of het Figma, code of een mix is.
Kopieer of download
Figma → kopieer het naar je eigen werkruimte. HTML → download en open het. Bundels → één download met alle bestanden die het stuk nodig heeft.
Maak het van jou
Geef het een nieuwe stijl, zet het om naar je framework of gebruik het als vonk voor iets nieuws. Het vakwerk is al gedaan. Jouw creatieve richting maakt het af.
Formaten: Figma en code
Niet elke layer is in elk formaat beschikbaar. Sommige zijn alleen Figma, sommige alleen code en een paar zijn een mix. Elke assetpagina toont vooraf het exacte formaat, zodat je altijd weet wat je krijgt.
Figma-bestand
Het bewerkbare ontwerp, klaar om direct naar je eigen Figma-werkruimte te kopiëren. Lagen, stijlen en structuur blijven intact, zodat je het meteen kunt restylen en eigen kunt maken.
Code (HTML)
Een losstaand HTML-bestand. Open het, publiceer het zoals het is of zet het om naar React, Svelte of Vue, wat je stack ook is. Bewust niet gebonden aan een stack.
Bundel
Heeft een stuk meer dan één bestand nodig (assets, specificaties of een verpakte export), dan krijg je het als bundel die je in één keer downloadt.
Voor welk AI-model bouwen we?
Er is niet één vast model. Veel designs maakt ons team met de hand. Sommige stukken gebruiken Fable, andere GPT 5.6, en wat we uitbrengen is getest om goed te werken met de huidige AI-tools.
Uiteindelijk komt de kwaliteit van het team van designers en developers achter elke layer, en van de creatieve richting die jij meebrengt. Het model is maar één hulpmiddel in dat proces. Het zware werk doet het niet.
De bibliotheek, in drie vormen
01Templates
Volledige pagina's en losse hero's. Een compleet vertrekpunt dat je van begin tot eind kunt aanpassen, of waar je één scherm uit haalt.
Secties
Losstaande blokken: sliders, featureoverzichten, prijzen, FAQ's, formulieren. Zet er een in je project of bekijk hoe het gebouwd is.
Componenten
De kleinere onderdelen: kaarten, navigatie, knoppen, micro-interacties. De bouwstenen achter de grotere lay-outs.
Editors: het deel waarmee je bouwt
De ene helft van HorizonX is een bibliotheek waaruit je downloadt. De andere helft is een set editors die in je browser draaien. Je opent er een, past aan wat je wilt, ziet het resultaat meteen veranderen en neemt het bestand mee zodra het goed is.
Er zijn vier editorverzamelingen. Tools bevat interactieve componenten. Textures past effecten toe op je afbeeldingen en video. Shaders biedt bewegende kleur en animatie. Mockups plaatst je ontwerpen in 3D- en fotoscènes. Elke editor heeft een livevoorbeeld en exportformaten die bij je werk passen.
Probeer het in je browser
Je kunt een editor openen en aan elke knop draaien zonder account. Met een lidmaatschap neem je het resultaat mee, binnen het exporttegoed van je abonnement.
Tools: interactieve componenten die je kunt afstellen
Een tool is geen afgewerkt bestand. Het is de generator erachter. Open een tool en het echte component draait op de pagina: een menu dat openvouwt, een galerij die draait, een knop die op de cursor reageert. Ernaast staat een paneel met alle instellingen van dat component.
Voeg je eigen beelden toe. Pas de richting, de afstand, de duur en de easingcurve aan. De preview is het component zelf en geen opname ervan, dus wat je op het scherm goedkeurt, is precies wat je exporteert.
Ziet het er goed uit, kies dan een formaat en exporteer. Je krijgt één HTML-bestand dat overal opent, een Svelte-component of React JSX. De Svelte- en React-versies worden geschreven vanuit hetzelfde document dat je net hebt goedgekeurd, dus de code die je krijgt kan niet afwijken van de preview waarmee je akkoord ging.
Textures: je eigen beelden en video, in een ander materiaal
Textures begint bij media die je zelf aanlevert. Kies een look uit de collectie, zet je foto of beeldmateriaal erin en het effect rendert het live. Een portret wordt een veld van getypte tekens. Een productfoto krijgt de gloed van een oud CRT-scherm. Licht wordt halftooninkt of iriserende folie.
Elke look heeft eigen instellingen: de tekenset, het raster, toon, kleur, gloed en beweging. Verschuif een slider en de preview houdt je bij.
Wat je kunt exporteren hangt af van de look en van wat je erin hebt gestopt. Stilstaande beelden komen eruit als PNG of JPEG. Videobronnen en geanimeerde looks bieden MP4 of een PNG-reeks. Sommige looks voegen SVG toe, ASCII kan je platte tekst geven en WEB PACK bundelt wat een website nodig heeft. Het Export-paneel toont alleen de formaten die jouw combinatie echt ondersteunt.
Shaders: geanimeerde kleur, licht en beweging
Een shader is beeld dat in realtime wordt getekend in plaats van afgespeeld. Denk aan het verloop dat achter een hero ademt, het ruisveld dat de cursor volgt, de golven die onder een kop door rollen. Niets daarvan is een videobestand, dus er is geen zichtbare loop en niets wordt wazig als het canvas groter wordt.
De instellingen staan naast het canvas: palet, snelheid, schaal, korrel en richting. Verander een waarde en de animatie reageert meteen, op volle framerate.
Shaders exporteer je net als componenten, als HTML, Svelte of React, met de animatiebroncode precies zoals de preview die draait. Er is geen runtime om te installeren en niets dat contact met ons opneemt.
Mockups: plaats je ontwerp in een scène
Mockups is een verzameling 3D-mockups van telefoons, laptops, tablets, horloges en kaarten.
Open een mockup, zet je ontwerp erin en stel de hoek, belichting, achtergrond en het formaat in: 9:16, 4:5, 1:1 of 16:9. 3D-scènes kun je ook animeren met de keyframe-tijdlijn of Motion-presets. Mockups zit zonder extra kosten in elk abonnement. Zonder abonnement kun je elke mockup openen en uitproberen; voor exporteren heb je een abonnement nodig.
Je werk meenemen
De exportopties hangen af van de editor. Componenten en shaders leveren code, dus ze bieden de frameworks, de Figma-kopie en de prompt. Textures leveren kant-en-klare bestanden. Mockups exporteer je als PNG- of JPG-afbeelding, MP4-video of HTML-embed. Exports tellen mee voor het editortegoed dat wordt uitgelegd onder ‘Downloads, limieten en resets’.
HTML
Eén bestand met de markup, de stijlen en de animatiebroncode, zonder dat je iets anders hoeft te installeren. Open het in een browser, zet het in een pagina of geef het aan wie de site bouwt.
Svelte en React
Hetzelfde component, geschreven voor jouw framework. Beide worden bij elke export gegenereerd vanuit het document dat je hebt goedgekeurd. Daarom komen ze altijd overeen met wat je zag.
Copy to Figma
Bij componenten en shaders zet dit het stuk op je klembord in een vorm die Figma begrijpt. Plak het in een bestand en het verschijnt als echte lagen waarmee je verder kunt ontwerpen, of als platte afbeelding als het beeld geen vormen heeft om te beschrijven.
Copy Prompt
Bij componenten en shaders schrijft dit je huidige instellingen uit als tekst voor een AI-tool, met elke waarde die je hebt gekozen. De volgende sectie legt uit wat erin staat.
Mockup-afbeeldingen, video en HTML
PNG, met transparante achtergrond als de scène dat toelaat, en JPG tot 4096 px aan de lange zijde. MP4-video in H.264 zonder geluid, tot 1920 px aan de lange zijde met 30 of 60 fps; clippresets duren 3 tot 15 seconden en een keyframe-tijdlijn kan 1 tot 30 seconden duren. HTML geeft je een live interactieve embed, net als een component. Elke verschillende mockup telt één keer mee voor het editortegoed; MP4-video’s tellen ook mee voor hun eigen limiet, HTML nooit.
Copy Prompt: geef je instellingen aan een AI-tool
Naast Export staat bij componenten en shaders Copy Prompt. Het beschrijft je huidige instellingen in gewone woorden, klaar voor Claude, Cursor, ChatGPT of een andere AI-tool. Textures en Mockups hebben in plaats daarvan hun eigen exportpanelen.
Wat er in de prompt staat
- De naam van het stuk en de korte omschrijving van één regel uit de catalogus.
- Het framework dat je hebt gekozen, zodat het antwoord terugkomt als HTML, Svelte of React en niet als gok.
- Elke instelling op de exacte waarde die je net hebt gekozen, gegroepeerd zoals in het instellingenpaneel.
- De huisregels die we toch zouden vragen: vul de container, blijf scherp op een scherm met hoge resolutie, sta stil voor iedereen wiens systeem om minder beweging vraagt, en lever werkende code zonder placeholders.
- Een link naar de oorspronkelijke pagina, zodat je het model naar de bron kunt verwijzen.
Het idee is dat het model begint bij jouw keuzes, in plaats van het gemiddelde te nemen van alles wat het ooit heeft gelezen. Vraag het om het stuk na te bouwen in jouw stack, het aan te passen aan je designsysteem of het idee een kant op te sturen waar wij nooit zijn geweest.
De prompt wordt geschreven op basis van wat de editor al weet. Het maken ervan kost dus niets en het werkt zelfs terwijl het beeld nog aan het laden is.
Waarom sommige assets alleen in Figma zijn (en andere alleen in code)
We bouwen elk stuk in het medium waar het het best tot zijn recht komt. Een lay-out die om design draait, met veel visueel detail, hoort thuis in Figma, dus dat leveren we. Een stuk dat om code draait of generatief is (beweging, interactie, 3D) werkt beter als HTML. In plaats van in elk formaat een halfbakken versie te forceren, leveren we elke layer in het formaat dat er echt recht aan doet. Sommige krijg je in meer dan één formaat. De assetpagina laat precies zien wat je krijgt.
Waarom sommige code alleen als HTML wordt geleverd
HTML is niet gebonden aan een stack en staat op zichzelf. Eén bestand dat overal opent, makkelijk te lezen is en zich zonder gedoe laat omzetten naar React, Svelte, Vue of gewone statische hosting. Met de HTML krijg je het volledige resultaat zonder vast te zitten aan een framework: je zet het zelf om naar waar je echt in bouwt. Voor server-side rendering en SEO zet je het in het framework van je keuze.
Inspiratie of productie
Allebei, en daar zijn we eerlijk over. Het vakwerk is productieklaar: verzorgd, echt en gebouwd door een senior team. Maar veel layers zijn bedoeld om een project te inspireren of je snel op gang te helpen, niet als kant-en-klaar blok dat ongewijzigd in elke context past. Gebruik ze als sterk vertrekpunt en breng daarna je eigen richting in.
Licentie en toegang
Elk actief abonnement geeft toegang tot de volledige bibliotheek, zonder losse aankopen. HorizonX-producten vallen onder een commerciële licentie: gebruik en bewerk ze vrij in je eigen persoonlijke, klant- en commerciële projecten. De bronbestanden zelf mag je niet doorverkopen, herdistribueren of in sublicentie geven. Opensourcepakketten behouden de licentie van hun makers, die bij de download is inbegrepen.
Downloads, limieten en resets
Elk abonnement geeft toegang tot de hele bibliotheek en je kunt er onbeperkt door bladeren. De limieten hieronder gelden als je downloadt of exporteert. Downloads uit de bibliotheek gebruiken twee aparte tegoeden, dus een drukke dag met gewone downloads gaat nooit ten koste van je Premium-tegoed. Exports vanuit de editors hebben een eigen tegoed.
Gewone assets · per dag
Componenten, secties, designsystemen, paletten en assets: Starter 10 · Pro 25 · Max 50 downloads per dag. Wordt elke dag gereset.
Premium-items · per maand
Geselecteerde topstukken met een Premiumbadge (een gouden kroon): Starter 5 · Pro 12 · Max 25 per maand. Wordt op de 1e gereset.
Exports vanuit de editors · per dag en per 30 dagen
Exports vanuit de editors Tools, Textures, Shaders en Mockups delen één tegoed van verschillende items, per abonnement: tot 30 per dag en 100 per 30 dagen bij Starter, 60 en 200 bij Pro, en 150 en 600 bij Max. Een dag is de afgelopen 24 uur. Een item binnen 30 dagen opnieuw exporteren telt in geen enkel formaat opnieuw mee, dus zoveel PNG- of JPG-afbeeldingen van dezelfde mockup als je nodig hebt tellen als één item.
Mockupvideo’s (MP4) · per 30 dagen
Naast het editortegoed hebben MP4-video’s een eigen limiet over de afgelopen 30 dagen: 20 bij Starter, 100 bij Pro en 400 bij Max, of 5 als je enige toegang een proefperiode is. Een tweede video van dezelfde mockup binnen 10 minuten telt niet opnieuw mee, dus een nieuwe poging of een kleine aanpassing is gratis. In een Max-team heeft elk teamlid een eigen teller met de limieten van het abonnement.
Exports van je AI-agent (MCP) · per dag
Componenten, texture-looks, shaders en HTML-embeds van mockups die je AI-codeeragent via MCP exporteert, per abonnement: tot 30 verschillende per dag en 100 per 30 dagen bij Starter, 60 en 200 bij Pro, en 150 en 600 bij Max. De dag wordt om middernacht UTC gereset, en iets wat al is geëxporteerd telt nooit opnieuw mee.
Nog twee dingen om te weten: iets opnieuw downloaden wat je al hebt, telt nooit dubbel, en een product dat uit meerdere bestanden bestaat, telt als één download. Op de pagina van elk Premium-item zie je hoeveel Premium-downloads je deze maand nog over hebt.
Exports uit de editors Tools, Textures, Shaders en Mockups verbruiken nooit Library-downloadlimieten. Library-bestanden die uw AI-agent via MCP voor u downloadt, tellen als gewone downloads.
Handleidingen
Figma → Code met AI
Veel HorizonX-layers zijn alleen Figma: een ontwerp met 3 tot 4 verzorgde secties, zonder code. Je maakt er een volledig werkende website van door een AI-codeeragent (zoals Claude Code) via de Figma MCP aan Figma te koppelen. Zo werkt het.
Het idee
Deel het Figma-bestand met Claude Code en gebruik een gestructureerde prompt om elke sectie pixel-perfect na te bouwen. Heeft de agent de bestaande secties ontwikkeld en begrijpt hij de visuele taal (lay-out, witruimte, typografie, kleuren), dan kun je hem vragen extra secties te maken in dezelfde stijl, die naadloos aansluiten op het oorspronkelijke ontwerp.
De werkwijze
Eerst lezen, dan schrijven
Vraag de agent om het ontwerp eerst via de Figma MCP te lezen: structuur, tokens (kleuren, typografie, witruimte, radii) en een referentiescreenshot. Hij mag nog geen code genereren. Komt een waarde niet uit de MCP, dan moet de agent dat melden in plaats van zelf iets te verzinnen.
Lever assets zelf aan
De Figma MCP haalt niet altijd elke asset goed op. Afbeeldingen kunnen ontbreken, gecomprimeerd zijn of verkeerd gekoppeld. Complexe elementen zoals verlopen, maskers, schaduwen, overvloeimodi en texturen komen soms niet nauwkeurig over. Exporteer ze in dat geval direct uit Figma: afbeeldingen als WebP of PNG (afhankelijk van transparantie), iconen en logo's als SVG, en complexe verlopen of effecten als SVG wanneer CSS ze niet kan evenaren.
Zet eerst het designsysteem op
Haal vóór de eerste sectie de tokens eruit en breng ze samen op één plek (Tailwind-config, een bestand met CSS-variabelen of een thema): kleuren, typografische schalen, witruimte, radii, schaduwen en breakpoints. Geef ze betekenisvolle namen. Maak componenten van herbruikbare onderdelen (knoppen, koppen, containers). Daardoor zijn sectie 2, 3 en 4 snel en consistent klaar, in plaats van dat je telkens het wiel opnieuw uitvindt.
Bouw één sectie tegelijk
Bouw één sectie en vergelijk die direct met het oorspronkelijke Figma-ontwerp op dezelfde schermgrootte. Controleer witruimte, lettergroottes, regelhoogtes, uitlijning, positie van afbeeldingen, verlopen, hoekafrondingen en responsief gedrag. Los verschillen op voordat je naar de volgende sectie gaat. Zo krijg je een veel nauwkeuriger resultaat dan wanneer je de agent de hele pagina in één keer laat nabouwen.
Ga verder dan het origineel
Staan de bestaande secties en het designsysteem eenmaal, vraag de agent dan nieuwe secties te maken (prijzen, FAQ, testimonials, contact) in dezelfde visuele taal. Dankzij de tokens en componenten die je hebt opgezet, gaat dat snel en blijft het consistent.
Tips
- Zorg dat de Figma-URL de
node-idvan de specifieke sectie bevat, niet van het hele bestand. - Orden geëxporteerde assets in duidelijk benoemde mappen voordat je ze aan de agent geeft.
- Geef de juiste fonts, responsieve breakpoints, hoverstaten en animatiespecificaties mee.
- Noem je stack (Astro, Next.js, React enzovoort) meteen aan het begin. Doe je dat niet, dan kiest de agent er zelf een.
Herbruikbare prompttemplate
Kopieer deze prompt en plak hem in Claude Code (of een andere AI-codeeragent met toegang tot de Figma MCP). Vul de Figma-URL en je stack in.
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.
Werken met HTML-layers
HTML-layers zijn losstaande bestanden: één bestand met alles erin (markup, stijlen, scripts) dat in elke browser opent. Zo haal je er het meeste uit.
Direct bekijken
Download het HTML-bestand en open het in je browser. Dat is het volledige resultaat, zonder buildstap en zonder dependencies. Dit is je referentie voor hoe de sectie eruit moet zien en moet aanvoelen.
Omzetten naar je framework
De HTML is bewust niet aan een stack gebonden. Geef het aan Claude Code of je eigen AI-codeeragent en vraag de sectie om te zetten naar je framework: React, Svelte, Vue, Astro of Next.js. De agent leest de markup, haalt de stijlen eruit en bouwt het na in jouw componentstructuur. Geef hem het HTML-bestand zelf, zodat hij de exacte referentie heeft.
Haal het designsysteem eruit
Net als bij Figma-layers vraag je de agent om de tokens eruit te halen (kleuren, typografie, witruimte, radii) en ze vóór het omzetten in het designsysteem van je project te zetten. Zo kun je later meer secties toevoegen die visueel consistent blijven.
Vervang placeholders
Sommige HTML-layers bevatten placeholderafbeeldingen of demotekst. Vervang die door je eigen content, afbeeldingen en huisstijl. De structuur en stijlen blijven, alleen de inhoud verandert.
Tip
Bevat het HTML-bestand animaties, interacties of scripts van derden die zich niet netjes laten omzetten? Open dan het originele bestand in een browser, bekijk hoe het zich gedraagt en beschrijf dat gedrag aan je AI-agent. Soms werkt een beschrijving beter dan geminificeerde JS proberen te ontleden.
Veelgestelde vragen
Elk actief abonnement omvat de hele bibliotheek. Geen losse aankopen. Open een asset en de formaatacties verschijnen (Copy Figma, Download HTML enzovoort). Log in, ga naar de Bibliotheek en pak wat je nodig hebt.
Twee aparte tegoeden per abonnement. Gewone assets: 10 (Starter), 25 (Pro) of 50 (Max) downloads per dag, elke dag gereset. Premium-items (die met een gouden Premiumbadge): 5, 12 of 25 per maand, gereset op de 1e. Bladeren is altijd onbeperkt en opnieuw downloaden telt nooit dubbel.
Ja. Je abonnement omvat een commerciële licentie voor HorizonX-producten. Gebruik en bewerk deze bestanden zonder extra kosten in je eigen persoonlijke, klant- en commerciële projecten. Opensourcepakketten behouden de licentie van hun makers, die bij de download is inbegrepen.
Nee. Je mag ze vrij gebruiken en aanpassen in je eigen projecten, maar de bronbestanden zelf mag je niet doorverkopen, herdistribueren of in sublicentie geven.
Ja. We brengen regelmatig nieuwe drops uit, en alles wat we toevoegen zit zonder extra kosten in je abonnement zolang het actief is.
Nee. Je kunt een tool, texture, shader of mockup openen en aan elke knop draaien zonder je te registreren. Om het resultaat mee te nemen heb je een lidmaatschap nodig.
Nee. Er is niets om te installeren en niets dat naar huis belt. Eenvoudige stukken komen eruit als gewone markup en CSS. Stukken die een echte tijdlijn nodig hebben, krijgen de animatiebroncode mee, dezelfde code die in de preview draaide.
Nee. Mockupexports gebruiken nooit de dagelijkse of maandelijkse Premium-downloadlimieten van de bibliotheek. Elke verschillende mockup telt één keer mee voor het editortegoed dat je deelt met Tools, Textures en Shaders, en MP4-video’s hebben daarnaast een eigen limiet.
Over de afgelopen 30 dagen: 20 bij Starter, 100 bij Pro en 400 bij Max, of 5 als je enige toegang een proefperiode is. Een tweede video van dezelfde mockup binnen 10 minuten telt niet opnieuw mee. In een Max-team heeft elk teamlid een eigen teller met de limieten van het abonnement.
Blader door de bibliotheek.
Open de Bibliotheek, vind een layer en begin te bouwen vanuit iets echts.