Documentação da HorizonX
O que é a HorizonX, o que há dentro da biblioteca e como usá-la: Figma e código.
Introdução
Como usar
O que é a HorizonX?
A HorizonX permite começar um projeto a partir de algo real, em vez de uma página em branco. Peça a uma IA um site do zero e você recebe a média de tudo o que ela já viu: um hero centralizado, três cards, um gradiente chapado. Isso não é o modelo falhando; é o modelo sem nada em que se apoiar.
Uma camada é essa fundação. Cada uma é uma peça de design finalizada, com movimento, profundidade e atmosfera já resolvidos. Pegue-a, adapte-a, aprenda como foi construída ou use-a para dar o pontapé inicial em algo novo. É uma biblioteca para inspirar e acelerar, não um gerador do zero.
Quando usar
Quando você quer avançar rápido em algo que ainda parece intencional e prefere adaptar um ponto de partida forte a desenhar do zero.
Como funciona
Três passos, e o do meio depende do formato.
Escolha uma camada
Navegue pelo Explore e abra o que fizer sentido. A página de cada asset indica o Formato exato, para você saber de antemão se é Figma, código ou uma mistura.
Copie ou baixe
Figma → copie para o seu workspace. HTML → baixe e abra. Bundles → um único download com todos os arquivos que a peça precisa.
Faça seu
Remodele, porte para o seu framework ou use como faísca para algo novo. O trabalho de artesanato está feito; a sua direção criativa leva o resto do caminho.
Formatos: Figma e código
Nem toda camada existe em todos os formatos. Algumas são só Figma, outras só código, e algumas são uma mistura. A página de cada asset mostra o Formato exato de antemão, para você sempre saber o que está recebendo.
Arquivo Figma
O design editável, pronto para copiar direto para o seu workspace do Figma. Camadas, estilos e estrutura intactos, prontos para você remodelar e fazer seus.
Código (HTML)
Um arquivo HTML autocontido. Abra-o, publique como está ou porte para React, Svelte ou Vue, seja qual for a sua stack. Independente de stack de propósito.
Bundle
Quando uma peça precisa de mais de um arquivo (assets, especificações ou um pacote exportado), ela vem como um bundle que você baixa de uma vez.
Contra qual modelo de IA vocês constroem?
Não existe um único modelo fixo. Muitos dos designs são feitos à mão pelo nosso time. Algumas peças usam Fable, outras GPT 5.6, e o que publicamos é testado para funcionar bem com as ferramentas de IA atuais.
No fim das contas, a qualidade vem do time de designers e desenvolvedores por trás de cada camada e da direção criativa que você traz. O modelo é apenas uma ferramenta nesse processo, não quem faz o trabalho difícil.
A biblioteca, três formas
01Templates
Páginas completas e heroes independentes. Um ponto de partida completo que você pode adaptar de ponta a ponta, ou de onde pode extrair uma única tela.
Seções
Blocos autocontidos: sliders, grades de recursos, preços, FAQs, formulários. Encaixe um em um projeto ou estude como ele é construído.
Componentes
As peças menores: cards, navegações, botões, microinterações. Os blocos de construção por trás dos layouts maiores.
Por que alguns assets são só Figma (e outros só código)
Construímos cada peça no meio em que ela vive melhor. Um design com prioridade visual e muitos detalhes gráficos vive naturalmente no Figma, então é isso que publicamos. Uma peça com prioridade de código ou generativa (movimento, interação, 3D) faz mais sentido como HTML. Em vez de forçar uma versão capenga em todos os formatos, entregamos cada camada no formato que realmente faz justiça a ela. Algumas vêm em mais de um; a página do asset mostra exatamente o que você recebe.
Por que alguns códigos são entregues só em HTML
HTML é independente de stack e autocontido. Um único arquivo que abre em qualquer lugar, é fácil de ler e porta limpo para React, Svelte, Vue ou hospedagem estática simples. Entregar o HTML dá o resultado completo sem te prender a um framework: você é dono do port para o que realmente for construir. Para renderização no servidor e SEO, encaixe-o no framework da sua escolha.
Inspiração vs. produção
Os dois, e queremos ser realistas sobre isso. O trabalho é de nível de produção: polido, real, feito por um time sênior. Mas muitas camadas existem para inspirar um projeto ou tirar você do chão rápido, não para serem um plug-and-play que encaixa em qualquer contexto sem toque. Use-as como um ponto de partida forte e traga a sua própria direção.
Licenciamento e acesso
Qualquer assinatura ativa desbloqueia a biblioteca inteira, sem compras separadas. Tudo é seu sob uma licença comercial: use e adapte livremente em seus projetos pessoais, de clientes e comerciais. Você não pode revender, redistribuir ou sublicenciar os arquivos-fonte em si.
Downloads, limites e redefinições
Todo plano desbloqueia a biblioteca inteira e permite navegar sem limites: as cotas abaixo só valem quando você realmente baixa. Há dois baldes independentes, então um dia cheio de downloads regulares nunca consome sua cota Premium.
Assets regulares · diário
Componentes, seções, design systems, paletas e assets: Starter 3 · Pro 8 · Max 15 downloads por dia. Redefine todo dia.
Itens Premium · mensal
Peças de alto nível selecionadas, marcadas com o selo Premium (uma coroa dourada): Starter 3 · Pro 8 · Max 15 por mês. Redefine no dia 1.
Mais duas coisas que vale saber: baixar de novo algo que você já tem nunca conta em dobro, e um produto feito de vários arquivos conta como um único download. A página de cada item Premium mostra quantos downloads Premium restam no mês.
Guias
Figma → Código com IA
Muitas camadas da HorizonX são só Figma: um design com 3–4 seções polidas, sem código anexado. Você pode transformá-las em um site totalmente funcional conectando um agente de codificação de IA (como o Claude Code) ao Figma via Figma MCP. Veja como.
A ideia
Compartilhe o arquivo do Figma com o Claude Code e use um prompt estruturado para recriar cada seção com fidelidade de pixel perfeito. Depois que ele desenvolver as seções existentes e entender a linguagem visual (layout, espaçamento, tipografia, cores), você pode pedir que ele gere seções adicionais seguindo o mesmo estilo e consistentes com o design original.
O fluxo de trabalho
Leia antes de escrever
Peça ao agente para usar o Figma MCP e ler o design primeiro: estrutura, tokens (cores, tipografia, espaçamento, raios) e um screenshot de referência. Ele ainda não deve gerar código. Se um valor não vier do MCP, o agente deve te avisar em vez de inventar.
Forneça os assets manualmente
O Figma MCP nem sempre extrai todos os assets corretamente: imagens podem faltar, vir comprimidas ou com referências erradas. Elementos complexos como gradientes, máscaras, sombras, modos de mesclagem e texturas podem não se reproduzir com precisão. Quando isso acontecer, exporte direto do Figma: imagens em WebP ou PNG (dependendo da transparência), ícones e logos em SVG, e gradientes ou efeitos complexos em SVG quando o CSS não conseguir igualar.
Estabeleça o design system primeiro
Antes da primeira seção, extraia e centralize os tokens (cores, escalas tipográficas, espaçamento, raios, sombras, breakpoints) em um único lugar: config do Tailwind, arquivo de variáveis CSS ou tema. Dê nomes semânticos. Transforme peças reutilizáveis em componentes (botões, títulos, contêineres). É isso que faz as seções 2, 3 e 4 saírem rápido e consistentes, em vez de reinventar a roda a cada vez.
Construa uma seção por vez
Implemente uma seção e compare diretamente com o design original do Figma no mesmo tamanho de tela. Confira espaçamento, tamanhos de fonte, entrelinhas, alinhamento, posicionamento de imagens, gradientes, raios de borda e comportamento responsivo. Corrija qualquer diferença antes de passar para a próxima seção. Isso dá um resultado muito mais preciso do que pedir ao agente para recriar a página inteira de uma vez.
Vá além do original
Depois que as seções existentes estiverem construídas e o design system estabelecido, peça ao agente para criar novas seções (preços, FAQ, depoimentos, contato) que sigam a mesma linguagem visual. Os tokens e componentes do design system que você configurou tornam isso rápido e consistente.
Dicas
- Garanta que a URL do Figma inclua o
node-idda seção específica, não do arquivo inteiro. - Organize os assets exportados em pastas com nomes claros antes de entregá-los ao agente.
- Forneça as fontes corretas, os breakpoints responsivos, os estados de hover e as especificações de animação.
- Especifique sua stack (Astro, Next.js, React, etc.) de antemão; se não fizer, o agente vai assumir uma.
Modelo de prompt reutilizável
Copie este prompt e cole no Claude Code (ou em qualquer agente de codificação de IA com acesso ao Figma MCP). Preencha a URL do Figma e sua 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.
Trabalhando com camadas HTML
Camadas HTML são arquivos autocontidos: um único arquivo com tudo (markup, estilos, scripts) que abre em qualquer navegador. Veja como extrair o máximo deles.
Pré-visualize na hora
Baixe o arquivo HTML e abra no seu navegador. Esse é o resultado completo: sem etapa de build, sem dependências. É a sua referência de como a seção deve parecer e se sentir.
Porte para o seu framework
O HTML é intencionalmente independente de stack. Entregue-o ao Claude Code ou ao seu agente de codificação de IA e peça para portar a seção para o seu framework: React, Svelte, Vue, Astro, Next.js. O agente pode ler o markup, extrair os estilos e recriá-lo na estrutura dos seus componentes. Alimente-o com o arquivo HTML diretamente para que ele tenha a referência exata.
Extraia o design system
Assim como nas camadas do Figma, peça ao agente para extrair os tokens (cores, tipografia, espaçamento, raios) e configurá-los no design system do seu projeto antes de portar. Assim você pode adicionar mais seções depois, e elas serão visualmente consistentes.
Substitua os placeholders
Algumas camadas HTML incluem imagens de placeholder ou copy de demonstração. Troque pelo seu conteúdo, imagens e marca. A estrutura e os estilos permanecem; só o conteúdo muda.
Dica
Se o arquivo HTML incluir animações, interações ou scripts de terceiros que não portam limpo, abra o arquivo original no navegador, estude como ele se comporta e descreva esse comportamento ao seu agente de IA: às vezes uma descrição é mais eficaz do que tentar parsear JS minificado.
FAQ
Qualquer assinatura ativa inclui a biblioteca inteira. Sem compras separadas. Abra um asset e as ações de formato dele (Copiar no Figma, Baixar HTML etc.) aparecem. Entre na sua conta, vá para o Explore e comece a puxar o que precisar.
Duas cotas independentes por plano. Assets regulares: 3 (Starter), 8 (Pro) ou 15 (Max) downloads por dia, redefinindo diariamente. Itens Premium (os com o selo Premium dourado): 3, 8 ou 15 por mês, redefinindo no dia 1. Navegar é sempre ilimitado e downloads repetidos nunca contam em dobro.
Sim. Sua assinatura inclui uma licença comercial. Use e adapte esses arquivos em seus projetos pessoais, de clientes e comerciais sem custo extra.
Não. Você pode usá-los e adaptá-los livremente em seus próprios projetos, mas não pode revender, redistribuir ou sublicenciar os arquivos-fonte em si.
Sim. Lançamos novas levas regularmente, e tudo o que adicionamos está incluído na sua assinatura enquanto ela estiver ativa, sem custo extra.
Explore a biblioteca.
Abra o Explore, encontre uma camada e comece a construir a partir de algo real.