HorizonX docs
What HorizonX is, what is inside the library, and how to use it — Figma, code and prompts.
What is HorizonX?
HorizonX lets you start a project from something real, instead of a blank page. Ask an AI for a website from nothing and you get the average of everything it has seen — a centered hero, three cards, a flat gradient. That is not the model failing; it is the model with nothing to build on.
A layer is that foundation. Each one is a finished piece of design — motion, depth and atmosphere already worked out. Take it, adapt it, learn how it was built, or use it to kickstart something new. It is a library to inspire and accelerate, not a from-scratch generator.
When to use it
When you want to move fast on something that still looks intentional — and you would rather adapt a strong starting point than design from zero.
How it works
Three steps, and the middle one depends on the format.
Pick a layer
Browse Explore and open anything that fits. Every asset page lists its exact Format — so you know upfront whether it is Figma, code, a prompt, or a mix.
Copy, download or prompt
Figma → copy it into your workspace. HTML → download and open it. Prompt → paste it into your AI tool and generate a self-contained file.
Make it yours
Restyle it, port it to your framework, or use it as the spark for something new. The craft is done — your creative direction takes it the rest of the way.
Formats: Figma, code & prompts
Not every layer comes in every format. Some are Figma-only, some are code-only, some are just a prompt — and a few are a mix. Each asset page shows its exact Format upfront, so you always know what you are getting.
Figma file
The editable design, ready to copy straight into your own Figma workspace. Layers, styles and structure intact — restyle it and make it yours.
Code (HTML)
A self-contained HTML file. Open it, ship it as-is, or port it to React, Svelte or Vue — whatever your stack is. Stack-agnostic on purpose.
Prompt
The prompt behind the piece. Paste it into Claude or your AI tool of choice and regenerate, remix or take it in a new direction.
Bundle
When a piece needs more than one file — assets, specs or a packaged export — it ships as a bundle you download in one go.
Which AI model do you build against?
There is no single locked model. A lot of the designs are built by hand by our team — some pieces use Fable, others GPT 5.6 — and the prompts we ship are tested to work well across current AI tools.
At the end of the day the quality comes from the team of designers and developers behind each layer, and the creative direction you bring to it. The model is just one tool in that process, not the thing doing the hard part.
The library — three shapes
01Templates
Full pages and standalone heroes — a complete starting point you can adapt end to end, or lift a single screen from.
Sections
Self-contained blocks — sliders, feature grids, pricing, FAQs, forms. Drop one into a project or study how it is built.
Components
The smaller pieces — cards, navs, buttons, micro-interactions. The building blocks behind the bigger layouts.
Why some assets are Figma-only (and others code-only)
We build each piece in the medium it lives best. A design-first layout with heavy visual detail lives naturally in Figma, so that is what ships. A code-first or generative piece — motion, interaction, 3D — makes more sense as HTML or a prompt. Rather than force a half-baked version in every format, we deliver each layer in the format that actually does it justice. Some come in more than one; the asset page shows exactly what you get.
Why some code is delivered only as HTML
HTML is stack-agnostic and self-contained — one file that opens anywhere, is easy to read, and ports cleanly to React, Svelte, Vue or plain static hosting. Shipping the HTML gives you the full result without locking you into a framework: you own the port to whatever you actually build in. For server-side rendering and SEO, drop it into your framework of choice.
Inspiration vs production
Both — and we want to be realistic about it. The craft is production-grade: polished, real, built by a senior team. But a lot of layers are meant to inspire a project or get you off the ground fast, not to be a drop-in that fits every context untouched. Use them as a strong starting point, then bring your own direction.
Licensing & access
Any active subscription unlocks the entire library — no separate purchases. Everything is yours under a commercial license: use and adapt it freely in your own personal, client and commercial projects. You may not resell, redistribute or sublicense the source files themselves.
Downloads, limits & resets
Every plan unlocks the whole library and lets you browse it with no limits — the allowances below only apply when you actually download. There are two independent buckets, so a busy day of regular downloads never eats into your Premium allowance.
Regular assets · daily
Components, sections, design systems, palettes, assets and prompts — Starter 3 · Pro 8 · Max 15 downloads per day. Resets every day.
Premium items · monthly
Select top-tier pieces marked with a Premium badge (a gold crown) — Starter 3 · Pro 8 · Max 15 per month. Resets on the 1st.
Two more things worth knowing: re-downloading something you already have never counts twice, and a product made of several files counts as a single download. Each Premium item's page shows how many Premium downloads you have left for the month.
Guides
Figma → Code with AI
Many HorizonX layers are Figma-only — a design with 3–4 polished sections, no code attached. You can turn them into a fully working website by connecting an AI coding agent (like Claude Code) to Figma via the Figma MCP. Here is how.
The idea
Share the Figma file with Claude Code and use a structured prompt to recreate each section with pixel-perfect fidelity. Once it has developed the existing sections and understands the visual language — layout, spacing, typography, colors — you can ask it to generate additional sections that follow the same style and feel consistent with the original design.
The workflow
Read before you write
Ask the agent to use the Figma MCP to read the design first — structure, tokens (colors, typography, spacing, radii), and a reference screenshot. It should not generate code yet. If a value does not come from the MCP, the agent should tell you instead of inventing it.
Provide assets manually
The Figma MCP does not always extract every asset correctly — images may be missing, compressed, or incorrectly referenced. Complex elements like gradients, masks, shadows, blend modes and textures may not reproduce accurately. When that happens, export them directly from Figma: images as WebP or PNG (depending on transparency), icons and logos as SVG, and complex gradients or effects as SVG when CSS cannot match them.
Establish the design system first
Before the first section, extract and centralize the tokens — colors, typography scales, spacing, radii, shadows, breakpoints — in a single place (Tailwind config, CSS variables file, or theme). Name them semantically. Componentize reusable pieces (buttons, headings, containers). This is what makes sections 2, 3, 4 come out fast and consistent instead of reinventing the wheel each time.
Build one section at a time
Implement one section, then compare it directly against the original Figma design at the same screen size. Check spacing, font sizes, line heights, alignment, image positioning, gradients, border radii and responsive behavior. Correct any differences before moving to the next section. This gives you a much more accurate result than asking the agent to recreate the entire page at once.
Extend beyond the original
Once the existing sections are built and the design system is established, ask the agent to create new sections — pricing, FAQ, testimonials, contact — that follow the same visual language. The design system tokens and components you set up make this fast and consistent.
Tips
- Make sure the Figma URL includes the
node-idof the specific section, not the whole file. - Organize exported assets into clearly named folders before giving them to the agent.
- Provide the correct fonts, responsive breakpoints, hover states, and animation specs.
- Specify your stack (Astro, Next.js, React, etc.) upfront — if you do not, the agent will assume one.
Reusable prompt template
Copy this prompt and paste it into Claude Code (or any AI coding agent with Figma MCP access). Fill in the Figma URL and your 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.
Working with HTML layers
HTML layers are self-contained files — one file with everything (markup, styles, scripts) that opens in any browser. Here is how to get the most out of them.
Preview instantly
Download the HTML file and open it in your browser. That is the full result — no build step, no dependencies. This is your reference for what the section should look and feel like.
Port to your framework
The HTML is intentionally stack-agnostic. Give it to Claude Code or your AI coding agent and ask it to port the section to your framework — React, Svelte, Vue, Astro, Next.js. The agent can read the markup, extract the styles, and recreate it in your component structure. Feed it the HTML file directly so it has the exact reference.
Extract the design system
Just like with Figma layers, ask the agent to extract the tokens — colors, typography, spacing, radii — and set them up in your project's design system before porting. This way you can add more sections later and they will be visually consistent.
Replace placeholders
Some HTML layers include placeholder images or demo copy. Swap them with your own content, images, and branding. The structure and styles stay — only the content changes.
Tip
If the HTML file includes animations, interactions or third-party scripts that do not port cleanly, open the original file in a browser, study how it behaves, and describe the behavior to your AI agent — sometimes a description is more effective than trying to parse minified JS.
FAQ
Any active subscription unlocks the whole library — no separate purchases. Open an asset and its format actions (Copy Figma, Download HTML, and so on) appear. Sign in, head to Explore and start pulling what you need.
Two independent allowances by plan. Regular assets: 3 (Starter), 8 (Pro) or 15 (Max) downloads per day, resetting daily. Premium items — the ones with a gold Premium badge — 3, 8 or 15 per month, resetting on the 1st. Browsing is always unlimited and re-downloads never count twice.
Yes. Your subscription includes a commercial license — use and adapt these files in your own personal, client and commercial projects at no extra cost.
No. You may use and adapt them freely in your own projects, but you may not resell, redistribute or sublicense the source files themselves.
Yes — we release new drops regularly, and everything we add is included in your subscription while it is active, at no extra cost.
Browse the library.
Open Explore, find a layer, and start building from something real.