HorizonX Docs
Was HorizonX ist, was in der Bibliothek steckt und wie man sie nutzt: Figma und Code.
Einführung
So verwenden Sie es
Was ist HorizonX?
Mit HorizonX starten Sie ein Projekt von etwas Realem aus statt von einer leeren Seite. Bitten Sie eine KI, eine Website aus dem Nichts zu erstellen, und Sie erhalten den Durchschnitt all dessen, was sie gesehen hat: einen zentrierten Hero, drei Karten, einen flachen Verlauf. Das ist kein Versagen des Modells, sondern ein Modell ohne Grundlage, auf der es aufbauen kann.
Ein Layer ist dieses Fundament. Jeder einzelne ist ein fertiges Designstück, bei dem Bewegung, Tiefe und Atmosphäre bereits ausgearbeitet sind. Nehmen Sie es, passen Sie es an, lernen Sie, wie es gebaut wurde, oder nutzen Sie es als Ausgangspunkt für etwas Neues. Es ist eine Bibliothek zum Inspirieren und Beschleunigen, kein Generator von Grund auf.
Wann verwenden
Wenn Sie bei etwas schnell vorankommen wollen, das trotzdem durchdacht wirkt, und Sie lieber einen starken Ausgangspunkt anpassen, statt von Null zu designen.
So funktioniert es
Drei Schritte – und der mittlere hängt vom Format ab.
Wählen Sie einen Layer
Durchstöbern Sie Explore und öffnen Sie alles, was passt. Auf jeder Asset-Seite steht das exakte Format, sodass Sie sofort wissen, ob es Figma, Code oder eine Mischung ist.
Kopieren oder herunterladen
Figma → kopieren Sie es in Ihren Workspace. HTML → laden Sie es herunter und öffnen Sie es. Bundles → ein Download mit allen Dateien, die das Stück benötigt.
Machen Sie es zu Ihrem
Stilen Sie es um, portieren Sie es in Ihr Framework oder nutzen Sie es als Funke für etwas Neues. Das Handwerk ist getan; Ihre kreative Richtung bringt es den Rest des Weges.
Formate: Figma & Code
Nicht jeder Layer ist in jedem Format verfügbar. Manche sind nur Figma, manche nur Code und einige eine Mischung. Jede Asset-Seite zeigt das exakte Format im Voraus, sodass Sie immer wissen, was Sie bekommen.
Figma-Datei
Das editierbare Design, bereit zum direkten Kopieren in Ihren eigenen Figma-Workspace. Layer, Stile und Struktur intakt – bereit zum Umstylen und zu Ihrem machen.
Code (HTML)
Eine in sich geschlossene HTML-Datei. Öffnen Sie sie, veröffentlichen Sie sie wie sie ist oder portieren Sie sie nach React, Svelte oder Vue – ganz nach Ihrem Stack. Bewusst stack-agnostisch.
Bundle
Wenn ein Stück mehr als eine Datei benötigt (Assets, Spezifikationen oder ein gepackter Export), wird es als Bundle geliefert, das Sie in einem Rutsch herunterladen.
Für welches KI-Modell entwickeln Sie?
Es gibt kein einzelnes festgelegtes Modell. Viele der Designs werden von unserem Team von Hand erstellt. Einige Stücke nutzen Fable, andere GPT 5.6, und was wir veröffentlichen, ist getestet und funktioniert gut mit aktuellen KI-Tools.
Am Ende kommt die Qualität von dem Team aus Designern und Entwicklern hinter jedem Layer und der kreativen Richtung, die Sie einbringen. Das Modell ist nur ein Werkzeug in diesem Prozess – nicht das, was die harte Arbeit macht.
Die Bibliothek in drei Formen
01Vorlagen
Komplette Seiten und eigenständige Heroes. Ein vollständiger Ausgangspunkt, den Sie durchgängig anpassen oder aus dem Sie einen einzelnen Screen herausholen können.
Sektionen
In sich geschlossene Blöcke: Slider, Feature-Grids, Preise, FAQs, Formulare. Setzen Sie einen in ein Projekt ein oder studieren Sie, wie er gebaut ist.
Komponenten
Die kleineren Stücke: Karten, Navigationen, Buttons, Mikrointeraktionen. Die Bausteine hinter den größeren Layouts.
Editoren: der Teil, mit dem du baust
Die eine Hälfte von HorizonX ist eine Bibliothek zum Herunterladen. Die andere Hälfte sind Editoren, die direkt im Browser laufen. Du öffnest einen, änderst, was du willst, siehst das Ergebnis live mitlaufen und nimmst die Datei mit, sobald sie sitzt.
Es gibt vier Editor-Sammlungen. Tools enthält interaktive Komponenten. Textures wendet Effekte auf deine Bilder und Videos an. Shaders bietet animierte Farben und Bewegung. Mockups setzt deine Designs in 3D- und Fotoszenen. Jeder Editor hat eine Live-Vorschau und passende Exportformate.
Im Browser ausprobieren
Du kannst einen Editor öffnen und jeden Regler bewegen, ohne Konto. Mit einer Mitgliedschaft nimmst du das Ergebnis mit, im Rahmen des Export-Kontingents deines Tarifs.
Tools: interaktive Komponenten zum Justieren
Ein Tool ist keine fertige Datei, sondern der Generator dahinter. Du öffnest es und die echte Komponente läuft auf der Seite: ein Menü, das aufklappt, eine Galerie, die rotiert, ein Button, der auf den Cursor reagiert. Daneben liegt ein Panel mit jedem Regler, den diese Komponente hat.
Leg deine eigenen Bilder ein. Ändere Richtung, Abstände, Dauer, Easing-Kurve. Die Vorschau ist die Komponente selbst und keine Aufnahme davon. Was du auf dem Bildschirm freigibst, ist genau das, was du exportierst.
Wenn es sitzt, wählst du ein Format und exportierst. Du bekommst eine einzelne HTML-Datei, die überall aufgeht, eine Svelte-Komponente oder React-JSX. Die Svelte- und React-Fassungen entstehen aus genau dem Dokument, das du eben freigegeben hast. Der Code kann deshalb gar nicht von der Vorschau abweichen.
Texturen: deine Bilder und Videos in einem anderen Material
Texturen beginnt mit Material, das du mitbringst. Du wählst einen Look aus der Sammlung, legst dein Foto oder deine Aufnahme hinein, und der Effekt rendert live. Ein Porträt wird zu einem Feld aus Schriftzeichen. Ein Produktfoto bekommt das Leuchten einer alten Bildröhre. Licht wird zu Rasterdruck oder schillernder Folie.
Jeder Look hat eigene Regler: Zeichensatz, Raster, Tonwert, Farbe, Glühen, Bewegung. Du ziehst an einem Schieber und die Vorschau zieht mit.
Was du exportieren kannst, hängt vom Look ab und davon, was du hineingegeben hast. Standbilder kommen als PNG oder JPEG heraus. Videoquellen und animierte Looks bieten MP4 oder eine PNG-Sequenz. Manche Looks ergänzen SVG, ASCII kann reinen Text liefern, und WEB PACK schnürt zusammen, was eine Website braucht. Das Exportpanel zeigt nur die Formate, die deine Kombination tatsächlich unterstützt.
Shaders: animierte Farbe, Licht und Bewegung
Ein Shader ist Grafik, die in Echtzeit gezeichnet statt abgespielt wird. Denk an den Farbverlauf, der hinter einem Hero atmet, an das Rauschfeld, das dem Cursor folgt, an die Wellen unter einer Schlagzeile. Nichts davon ist eine Videodatei. Deshalb ist keine Schleife zu sehen und nichts wird unscharf, wenn die Fläche größer wird.
Die Regler liegen neben der Fläche: Palette, Geschwindigkeit, Skalierung, Korn, Richtung. Du änderst einen Wert und die Animation antwortet sofort, mit voller Bildrate.
Shaders exportierst du wie Komponenten, als HTML, Svelte oder React, mit dem Animationscode genau so, wie ihn die Vorschau ausführt. Es gibt keine Laufzeitumgebung zu installieren und nichts, was sich bei uns zurückmeldet.
Mockups: dein Design in einer Szene
Mockups umfasst 3D-Mockups für Smartphones, Laptops, Tablets, Uhren und Karten.
Öffne ein Mockup, füge dein Design ein und stelle Blickwinkel, Licht, Hintergrund und Format ein: 9:16, 4:5, 1:1 oder 16:9. 3D-Szenen lassen sich außerdem mit der Keyframe-Zeitleiste oder Motion-Presets animieren. Mockups ist in jedem Tarif ohne Aufpreis enthalten. Ohne Tarif kannst du jedes Mockup öffnen und ausprobieren; für den Export brauchst du einen Tarif.
Das Ergebnis mitnehmen
Die Exportoptionen hängen vom Editor ab. Komponenten und Shader liefern Code, deshalb bieten sie die Framework-Ziele, die Figma-Kopie und den Prompt. Texturen liefern fertige Dateien. Mockups exportieren PNG- oder JPG-Bilder, MP4-Video oder eine HTML-Einbettung. Exporte zählen zum Editor-Kontingent, das unter „Downloads, Limits & Zurücksetzungen“ erklärt wird.
HTML
Eine einzige, in sich geschlossene Datei mit Markup, Styles und Animationscode. Im Browser öffnen, in eine Seite legen oder an die Person weitergeben, die die Website baut.
Svelte und React
Dieselbe Komponente, geschrieben für dein Framework. Beide entstehen bei jedem Export aus dem Dokument, das du freigegeben hast, und passen deshalb immer zu dem, was du gesehen hast.
Copy to Figma
Bei Komponenten und Shaders legt das die Arbeit in einer Form in die Zwischenablage, die Figma versteht. Eingefügt landet sie als echte Ebenen, mit denen du weiterentwerfen kannst, oder als flaches Bild, wenn die Grafik keine beschreibbaren Formen hat.
Copy Prompt
Bei Komponenten und Shaders schreibt das deine aktuelle Einstellung als Text für ein KI-Werkzeug aus, mit jedem Wert, den du gewählt hast. Der nächste Abschnitt zeigt, was drinsteht.
Mockup-Bilder, Videos und HTML
PNG, mit transparentem Hintergrund, wo die Szene es erlaubt, und JPG bis 4096 px an der langen Kante. MP4-Video in H.264 ohne Ton, bis 1920 px an der langen Kante mit 30 oder 60 fps; Clip-Presets dauern 3 bis 15 Sekunden, eine Keyframe-Zeitleiste kann 1 bis 30 Sekunden lang sein. HTML liefert eine interaktive Live-Einbettung, wie eine Komponente. Jedes verschiedene Mockup zählt einmal zum Editor-Kontingent; MP4-Videos zählen zusätzlich zu ihrem eigenen Limit, HTML nie.
Copy Prompt: deine Einstellung an ein KI-Werkzeug übergeben
Neben Export steht bei Komponenten und Shadern Copy Prompt. Es beschreibt deine aktuellen Einstellungen in einfachen Worten, bereit für Claude, Cursor, ChatGPT oder ein anderes KI-Tool. Textures und Mockups haben stattdessen eigene Exportbereiche.
Was im Prompt steht
- Den Namen des Stücks und die einzeilige Beschreibung von seiner Katalogseite.
- Das Framework, das du gewählt hast, damit die Antwort als HTML, Svelte oder React zurückkommt statt als Vermutung.
- Jede Einstellung mit dem Wert, den du gerade gewählt hast, gruppiert wie im Bedienpanel.
- Die Hausregeln, die wir ohnehin verlangen würden: den Container füllen, auf hochauflösenden Bildschirmen scharf bleiben, stillstehen, wenn das System reduzierte Bewegung verlangt, und funktionierenden Code ohne Platzhalter liefern.
- Einen Link zurück zur Originalseite, damit sich das Modell auf die Quelle richten lässt.
Der Punkt ist, dass das Modell von deinen Entscheidungen ausgeht statt vom Durchschnitt aus allem, was es je gelesen hat. Lass es das Stück in deinem Stack neu bauen, an dein Designsystem anpassen oder die Idee dorthin tragen, wo wir nie waren.
Der Prompt entsteht aus dem, was der Editor ohnehin kennt. Er kostet deshalb nichts und funktioniert auch, während die Grafik noch lädt.
Warum manche Assets nur in Figma sind (und andere nur Code)
Wir bauen jedes Stück in dem Medium, in dem es am besten lebt. Ein Design-First-Layout mit starker visueller Detaildichte lebt natürlich in Figma, also wird genau das geliefert. Ein Code-First- oder generatives Stück (Bewegung, Interaktion, 3D) ergibt als HTML mehr Sinn. Statt in jedem Format eine halbgare Version zu erzwingen, liefern wir jeden Layer in dem Format, das ihm tatsächlich gerecht wird. Manche gibt es in mehr als einem; die Asset-Seite zeigt genau, was Sie bekommen.
Warum mancher Code nur als HTML geliefert wird
HTML ist stack-agnostisch und in sich geschlossen. Eine Datei, die sich überall öffnen lässt, leicht zu lesen ist und sich sauber nach React, Svelte, Vue oder einfachem statischen Hosting portieren lässt. Die Lieferung als HTML gibt Ihnen das vollständige Ergebnis, ohne Sie auf ein Framework festzulegen: Sie behalten das Porting in das, worin Sie tatsächlich bauen. Für Server-Side-Rendering und SEO setzen Sie es in Ihr Framework Ihrer Wahl ein.
Inspiration vs. Produktion
Beides – und wir wollen realistisch sein. Das Handwerk ist produktionsreif: poliert, echt, von einem Senior-Team gebaut. Aber viele Layer sollen ein Projekt inspirieren oder Sie schnell auf die Beine bringen, nicht ein Drop-in sein, das unverändert in jeden Kontext passt. Nutzen Sie sie als starken Ausgangspunkt und bringen Sie dann Ihre eigene Richtung ein.
Lizenz & Zugang
Jedes aktive Abo entsperrt die gesamte Bibliothek – keine separaten Käufe. HorizonX-Produkte gehören Ihnen unter einer kommerziellen Lizenz: Nutzen und passen Sie sie frei in Ihren persönlichen, Kunden- und kommerziellen Projekten an. Sie dürfen die Quelldateien selbst nicht weiterverkaufen, weiterverbreiten oder unterlizenzieren. Open-Source-Pakete behalten die Lizenz ihrer Urheber, die dem Download beiliegt.
Downloads, Limits & Resets
Jeder Plan entsperrt die gesamte Bibliothek, und das Stöbern darin ist unbegrenzt. Die Kontingente unten gelten, wenn Sie herunterladen oder exportieren. Bibliotheks-Downloads nutzen zwei getrennte Kontingente, sodass ein Tag mit vielen regulären Downloads nie Ihr Premium-Kontingent aufbraucht. Exporte aus den Editoren haben ein eigenes Kontingent.
Reguläre Assets · täglich
Komponenten, Sektionen, Design-Systeme, Paletten und Assets – Starter 10 · Pro 25 · Max 50 Downloads pro Tag. Reset täglich.
Premium-Artikel · monatlich
Ausgewählte Top-Stücke mit einem Premium-Badge (einer goldenen Krone) – Starter 5 · Pro 12 · Max 25 pro Monat. Reset am 1.
Editor-Exporte · pro Tag und pro 30 Tage
Exporte aus den Editoren Tools, Texturen, Shaders und Mockups teilen sich ein Kontingent an verschiedenen Elementen, je nach Tarif: bis zu 30 pro Tag und 100 alle 30 Tage bei Starter, 60 und 200 bei Pro sowie 150 und 600 bei Max. Der Tag sind die letzten 24 Stunden. Ein erneuter Export desselben Elements innerhalb von 30 Tagen zählt in keinem Format erneut, sodass beliebig viele PNG- oder JPG-Bilder desselben Mockups als ein Element zählen.
Mockup-Videos (MP4) · alle 30 Tage
Zusätzlich zum Editor-Kontingent haben MP4-Videos ein eigenes Limit über die letzten 30 Tage: 20 bei Starter, 100 bei Pro und 400 bei Max, oder 5, wenn Ihr einziger Zugang eine Testphase ist. Ein zweites Video desselben Mockups innerhalb von 10 Minuten zählt nicht erneut, ein neuer Versuch oder eine kleine Änderung ist also kostenlos. In einem Max-Team hat jedes Mitglied einen eigenen Zähler mit den Limits des Tarifs.
Exporte Ihres KI-Agenten (MCP) · täglich
Komponenten, Textur-Looks, Shader und Mockup-HTML-Einbettungen, die Ihr KI-Coding-Agent über MCP exportiert, je nach Tarif: bis zu 30 verschiedene pro Tag und 100 alle 30 Tage bei Starter, 60 und 200 bei Pro sowie 150 und 600 bei Max. Der Tag wird um Mitternacht UTC zurückgesetzt, und bereits Exportiertes zählt nie erneut.
Zwei weitere Dinge, die Sie wissen sollten: Ein erneuter Download von etwas, das Sie bereits besitzen, zählt nie doppelt, und ein Produkt aus mehreren Dateien zählt als ein einzelner Download. Auf der Seite jedes Premium-Artikels sehen Sie, wie viele Premium-Downloads Ihnen diesen Monat noch bleiben.
Exporte aus den Editoren Tools, Texturen, Shaders und Mockups verbrauchen keine Library-Downloadkontingente. Library-Dateien, die Ihr KI-Coding-Agent über MCP für Sie herunterlädt, zählen als normale Downloads.
Anleitungen
Figma → Code mit KI
Viele HorizonX-Layer sind nur in Figma verfügbar – ein Design mit 3–4 ausgearbeiteten Sektionen, ohne Code. Sie können sie in eine voll funktionsfähige Website verwandeln, indem Sie einen KI-Coding-Agenten (wie Claude Code) über das Figma MCP mit Figma verbinden. So geht's.
Die Idee
Teilen Sie die Figma-Datei mit Claude Code und nutzen Sie einen strukturierten Prompt, um jede Sektion mit pixelperfekter Genauigkeit nachzubauen. Sobald er die vorhandenen Sektionen entwickelt und die visuelle Sprache verstanden hat – Layout, Abstände, Typografie, Farben –, können Sie ihn bitten, zusätzliche Sektionen zu generieren, die demselben Stil folgen und zum Originaldesign konsistent sind.
Der Workflow
Lesen, bevor Sie schreiben
Bitten Sie den Agenten, zuerst das Design über das Figma MCP zu lesen – Struktur, Tokens (Farben, Typografie, Abstände, Radien) und einen Referenz-Screenshot. Er sollte noch keinen Code generieren. Wenn ein Wert nicht vom MCP stammt, sollte der Agent es Ihnen sagen, statt ihn zu erfinden.
Assets manuell bereitstellen
Das Figma MCP extrahiert nicht immer jedes Asset korrekt – Bilder können fehlen, komprimiert oder falsch referenziert sein. Komplexe Elemente wie Verläufe, Masken, Schatten, Mischmodi und Texturen lassen sich möglicherweise nicht genau reproduzieren. Exportieren Sie sie in diesem Fall direkt aus Figma: Bilder als WebP oder PNG (je nach Transparenz), Icons und Logos als SVG und komplexe Verläufe oder Effekte als SVG, wenn CSS sie nicht erreichen kann.
Erst das Design-System etablieren
Extrahieren und zentralisieren Sie vor der ersten Sektion die Tokens – Farben, Typografie-Skalen, Abstände, Radien, Schatten, Breakpoints – an einem einzigen Ort (Tailwind-Config, CSS-Variablendatei oder Theme). Benennen Sie sie semantisch. Machen Sie wiederverwendbare Teile zu Komponenten (Buttons, Überschriften, Container). Genau das lässt Sektion 2, 3 und 4 schnell und konsistent entstehen, statt jedes Mal das Rad neu zu erfinden.
Eine Sektion nach der anderen bauen
Setzen Sie eine Sektion um und vergleichen Sie sie direkt mit dem Originaldesign in Figma bei derselben Bildschirmgröße. Prüfen Sie Abstände, Schriftgrößen, Zeilenhöhen, Ausrichtung, Bildpositionierung, Verläufe, Rahmenradien und responsives Verhalten. Korrigieren Sie Unterschiede, bevor Sie zur nächsten Sektion übergehen. Das ergibt ein deutlich präziseres Ergebnis, als wenn Sie den Agenten bitten, die gesamte Seite auf einmal nachzubauen.
Über das Original hinausgehen
Sobald die vorhandenen Sektionen gebaut und das Design-System etabliert ist, bitten Sie den Agenten, neue Sektionen zu erstellen – Preise, FAQ, Testimonials, Kontakt –, die derselben visuellen Sprache folgen. Die Design-System-Tokens und -Komponenten, die Sie eingerichtet haben, machen das schnell und konsistent.
Tipps
- Stellen Sie sicher, dass die Figma-URL die
node-idder jeweiligen Sektion enthält, nicht der gesamten Datei. - Organisieren Sie exportierte Assets in klar benannten Ordnern, bevor Sie sie dem Agenten geben.
- Geben Sie die richtigen Schriftarten, responsive Breakpoints, Hover-Zustände und Animationsspezifikationen an.
- Legen Sie Ihren Stack (Astro, Next.js, React usw.) im Voraus fest – wenn nicht, nimmt der Agent einen an.
Wiederverwendbare Prompt-Vorlage
Kopieren Sie diesen Prompt und fügen Sie ihn in Claude Code ein (oder in jeden KI-Coding-Agenten mit Figma-MCP-Zugriff). Füllen Sie die Figma-URL und Ihren Stack aus.
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.
Mit HTML-Layern arbeiten
HTML-Layer sind in sich geschlossene Dateien – eine Datei mit allem (Markup, Stilen, Skripten), die sich in jedem Browser öffnet. So holen Sie das Beste daraus heraus.
Sofort in der Vorschau ansehen
Laden Sie die HTML-Datei herunter und öffnen Sie sie in Ihrem Browser. Das ist das vollständige Ergebnis – kein Build-Schritt, keine Abhängigkeiten. Das ist Ihre Referenz dafür, wie die Sektion aussehen und sich anfühlen soll.
In Ihr Framework portieren
Das HTML ist bewusst stack-agnostisch. Geben Sie es Claude Code oder Ihrem KI-Coding-Agenten und bitten Sie ihn, die Sektion in Ihr Framework zu portieren – React, Svelte, Vue, Astro, Next.js. Der Agent kann das Markup lesen, die Stile extrahieren und es in Ihrer Komponentenstruktur nachbauen. Geben Sie ihm die HTML-Datei direkt, damit er die exakte Referenz hat.
Das Design-System extrahieren
Wie bei Figma-Layern bitten Sie den Agenten, die Tokens zu extrahieren – Farben, Typografie, Abstände, Radien – und sie vor dem Portieren im Design-System Ihres Projekts einzurichten. So können Sie später weitere Sektionen hinzufügen, die visuell konsistent sind.
Platzhalter ersetzen
Manche HTML-Layer enthalten Platzhalterbilder oder Demo-Texte. Tauschen Sie sie gegen Ihre eigenen Inhalte, Bilder und Ihre Marke aus. Struktur und Stile bleiben – nur der Inhalt ändert sich.
Tipp
Wenn die HTML-Datei Animationen, Interaktionen oder Drittanbieter-Skripte enthält, die sich nicht sauber portieren lassen, öffnen Sie die Originaldatei in einem Browser, studieren Sie ihr Verhalten und beschreiben Sie es Ihrem KI-Agenten – manchmal ist eine Beschreibung effektiver, als minifiziertes JS zu parsen.
FAQ
Jedes aktive Abo umfasst die gesamte Bibliothek. Keine separaten Käufe. Öffnen Sie ein Asset und seine Formataktionen (In Figma kopieren, HTML herunterladen usw.) erscheinen. Melden Sie sich an, gehen Sie zu Explore und holen Sie sich, was Sie brauchen.
Zwei unabhängige Kontingente je nach Plan. Reguläre Assets: 10 (Starter), 25 (Pro) oder 50 (Max) Downloads pro Tag, täglicher Reset. Premium-Artikel (die mit dem goldenen Premium-Badge): 5, 12 oder 25 pro Monat, Reset am 1. Das Stöbern ist immer unbegrenzt und erneute Downloads zählen nie doppelt.
Ja. Ihr Abo enthält eine kommerzielle Lizenz für HorizonX-Produkte. Nutzen und passen Sie diese Dateien in Ihren persönlichen, Kunden- und kommerziellen Projekten ohne Zusatzkosten an. Open-Source-Pakete behalten die Lizenz ihrer Urheber, die dem Download beiliegt.
Nein. Sie können sie in Ihren eigenen Projekten frei nutzen und anpassen, aber Sie dürfen die Quelldateien selbst nicht weiterverkaufen, weiterverbreiten oder unterlizenzieren.
Ja. Wir veröffentlichen regelmäßig neue Drops, und alles, was wir hinzufügen, ist in Ihrem Abo enthalten, solange es aktiv ist – ohne Zusatzkosten.
Nein. Du kannst ein Tool, eine Textur, einen Shader oder ein Mockup öffnen und jeden Regler bewegen, ohne dich anzumelden. Um das Ergebnis mitzunehmen, brauchst du eine Mitgliedschaft.
Nein. Es gibt nichts zu installieren und nichts, was nach Hause telefoniert. Einfache Stücke kommen als reines Markup und CSS heraus, und die mit echter Zeitleiste bringen den Animationscode mit, denselben, den die Vorschau ausgeführt hat.
Nein. Mockup-Exporte verbrauchen nie die täglichen oder monatlichen Premium-Downloadlimits der Bibliothek. Jedes verschiedene Mockup zählt einmal zum Editor-Kontingent, das du mit Tools, Texturen und Shaders teilst, und MP4-Videos haben zusätzlich ein eigenes Limit.
Über die letzten 30 Tage: 20 bei Starter, 100 bei Pro und 400 bei Max, oder 5, wenn dein einziger Zugang eine Testphase ist. Ein zweites Video desselben Mockups innerhalb von 10 Minuten zählt nicht erneut. In einem Max-Team hat jedes Mitglied einen eigenen Zähler mit den Limits des Tarifs.
Stöbern Sie in der Bibliothek.
Öffnen Sie Explore, finden Sie einen Layer und beginnen Sie, auf etwas Realem aufzubauen.