HorizonX Docs

So verwenden Sie es

Was ist HorizonX?

So funktioniert es

Drei Schritte – und der mittlere hängt vom Format ab.

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.

Für welches KI-Modell entwickeln Sie?

Die Bibliothek in drei Formen

Vorlagen

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.

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. Alles gehört Ihnen unter einer kommerziellen Lizenz: Nutzen und passen Sie es frei in Ihren persönlichen, Kunden- und kommerziellen Projekten an. Sie dürfen die Quelldateien selbst nicht weiterverkaufen, weiterverbreiten oder unterlizenzieren.

Downloads, Limits & Resets

Jeder Plan entsperrt die gesamte Bibliothek und lässt Sie ohne Limits darin stöbern – die Kontingente unten gelten nur, wenn Sie tatsächlich herunterladen. Es gibt zwei unabhängige Kontingente, sodass ein arbeitsreicher Tag mit regulären Downloads nie Ihr Premium-Kontingent aufbraucht.

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.

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.

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.

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.

FAQ