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.
Editores: a parte com que você constrói
Metade do HorizonX é uma biblioteca de onde você baixa. A outra metade são editores que rodam no seu navegador. Você abre um, muda o que quiser, vê o resultado se atualizar enquanto trabalha e sai com o arquivo quando ele ficar do seu jeito.
Há quatro coleções de editores. Tools reúne componentes interativos. Textures aplica efeitos às suas imagens e vídeos. Shaders oferece cor e movimento animados. Mockups coloca seus designs em cenas 3D e fotográficas. Cada editor tem uma prévia ao vivo e formatos de exportação adequados ao que você está criando.
Teste no navegador
Você pode abrir um editor e mexer em cada controle sem conta. Com uma assinatura, você leva o resultado, dentro da cota de exportação do seu plano.
Tools: componentes interativos que você ajusta
Um tool não é um arquivo pronto. É o gerador por trás dele. Você abre um e o componente real roda na página: um menu que se abre, uma galeria que gira, um botão que responde ao cursor. Ao lado fica um painel com todos os controles daquele componente.
Coloque suas próprias imagens. Mude a direção, o espaçamento, a duração, a curva de easing. A prévia é o próprio componente, não uma gravação dele, então o que você aprova na tela é exatamente o que exporta.
Quando ficar bom, escolha um formato e exporte. Você recebe um único arquivo HTML que abre em qualquer lugar, um componente Svelte ou JSX de React. As versões em Svelte e React são escritas a partir do mesmo documento que você acabou de aprovar, então o código não tem como divergir da prévia que você aceitou.
Texturas: suas imagens e vídeos, em outro material
Texturas parte de um material que você traz. Escolha um visual da coleção, solte sua foto ou seu vídeo, e o efeito renderiza ao vivo. Um retrato vira um campo de caracteres digitados. Uma foto de produto ganha o brilho de uma tela CRT antiga. A luz vira tinta de meio-tom ou papel iridescente.
Cada visual tem controles próprios: o conjunto de caracteres, a grade, o tom, a cor, o brilho, o movimento. Você move um controle e a prévia acompanha.
O que você pode exportar depende do visual e do que você entregou a ele. Imagens paradas saem em PNG ou JPEG. Fontes em vídeo e visuais animados oferecem MP4 ou uma sequência de PNG. Alguns visuais somam SVG, o ASCII pode devolver texto puro e o WEB PACK empacota o que um site precisa. O painel de exportação só mostra os formatos que a sua combinação realmente suporta.
Shaders: cor, luz e movimento animados
Um shader é arte desenhada em tempo real, e não reproduzida. Pense no gradiente que respira atrás de um hero, no campo de ruído que segue o cursor, nas ondas que rolam sob um título. Nada disso é arquivo de vídeo, então o loop não aparece e nada perde nitidez quando a tela cresce.
Os controles ficam ao lado da tela: paleta, velocidade, escala, grão, direção. Você muda um valor e a animação responde na hora, em taxa cheia de quadros.
Shaders exportam como os componentes, em HTML, Svelte ou React, com o código da animação incluído exatamente como a prévia o executa. Não há runtime para instalar nem nada que nos chame de volta.
Mockups: coloque seu design em uma cena
Mockups é uma coleção de mockups 3D de celulares, notebooks, tablets, relógios e cartões.
Abra um mockup, coloque seu design e ajuste o ângulo, a iluminação, o fundo e o formato: 9:16, 4:5, 1:1 ou 16:9. Cenas 3D também podem ser animadas com a linha do tempo de keyframes ou os presets de Motion. Mockups está incluído em todos os planos sem custo extra. Sem plano, você pode abrir qualquer mockup e testar; para exportar é preciso um plano.
Levar seu trabalho
As opções de exportação dependem do editor. Componentes e shaders entregam código, então oferecem os frameworks, a cópia para o Figma e o prompt. Texturas entregam arquivos prontos. Mockups exportam imagens PNG ou JPG, vídeo MP4 ou um embed HTML. As exportações contam na cota dos editores explicada em “Downloads, limites e renovações”.
HTML
Um único arquivo autocontido com a marcação, os estilos e o código da animação. Abra no navegador, coloque numa página ou entregue a quem constrói o site.
Svelte e React
O mesmo componente escrito para o seu framework. Os dois são gerados a cada exportação a partir do documento que você aprovou, por isso sempre batem com o que você viu.
Copy to Figma
Em componentes e shaders, isso coloca a peça na área de transferência num formato que o Figma entende. Cole num arquivo e ela chega como camadas reais para você continuar desenhando, ou como imagem plana quando a arte não tem formas a descrever.
Copy Prompt
Em componentes e shaders, isso escreve sua configuração atual como texto para uma ferramenta de IA, com cada valor que você escolheu. A próxima seção mostra o que vai dentro.
Imagens, vídeos e HTML de mockups
PNG, com fundo transparente quando a cena permite, e JPG de até 4096 px no lado maior. Vídeo MP4 em H.264 sem áudio, de até 1920 px no lado maior a 30 ou 60 fps; os presets de clipe vão de 3 a 15 segundos e uma linha do tempo de keyframes pode durar de 1 a 30 segundos. O HTML entrega um embed interativo ao vivo, como um componente. Cada mockup diferente conta uma vez na cota dos editores; vídeos MP4 também contam no próprio limite, e o HTML nunca.
Copy Prompt: entregue sua configuração a uma ferramenta de IA
Ao lado de Export, em componentes e shaders, está Copy Prompt. Ele descreve sua configuração atual em palavras simples, prontas para Claude, Cursor, ChatGPT ou outra ferramenta de IA. Textures e Mockups têm seus próprios painéis de exportação.
O que o prompt leva
- O nome da peça e a descrição de uma linha da página dela no catálogo.
- O framework que você escolheu, para a resposta voltar em HTML, Svelte ou React e não num chute.
- Cada ajuste no valor exato que você acabou de escolher, agrupado como o painel de controles agrupa.
- As regras da casa que pediríamos de qualquer jeito: preencher o contêiner, continuar nítido em telas de alta resolução, ficar parado para quem pede movimento reduzido no sistema e entregar código funcionando, sem placeholders.
- Um link de volta para a página original, para poder apontar o modelo à fonte.
A ideia é que o modelo parta das suas decisões em vez de tirar a média de tudo o que já leu. Peça para ele refazer a peça no seu stack, adaptá-la ao seu design system ou levar a ideia para onde nunca fomos.
O prompt é escrito a partir do que o editor já sabe, então não custa nada produzir e funciona mesmo enquanto a arte ainda carrega.
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. Os produtos da HorizonX são seus 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. Pacotes de código aberto mantêm a licença de seus autores, que vem incluída no download.
Downloads, limites e redefinições
Todos os planos liberam a biblioteca inteira, e navegar por ela não tem limites. As cotas abaixo valem quando você baixa ou exporta. Os downloads da biblioteca usam duas cotas separadas, então um dia cheio de downloads comuns nunca consome sua cota Premium. As exportações pelos editores têm uma cota própria.
Assets regulares · diário
Componentes, seções, design systems, paletas e assets: Starter 10 · Pro 25 · Max 50 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 5 · Pro 12 · Max 25 por mês. Redefine no dia 1.
Exportações pelos editores · por dia e a cada 30 dias
As exportações pelos editores de Tools, Texturas, Shaders e Mockups dividem uma cota de itens diferentes, por plano: até 30 por dia e 100 a cada 30 dias no Starter, 60 e 200 no Pro, e 150 e 600 no Max. O dia são as últimas 24 horas. Exportar um item novamente dentro de 30 dias não conta outra vez, seja qual for o formato, então todas as imagens PNG ou JPG que você precisar do mesmo mockup contam como um único item.
Vídeos de mockups (MP4) · a cada 30 dias
Além da cota dos editores, os vídeos MP4 têm um limite próprio nos últimos 30 dias: 20 no Starter, 100 no Pro e 400 no Max, ou 5 se o seu único acesso for um teste. Um segundo vídeo do mesmo mockup dentro de 10 minutos não conta outra vez, então uma nova tentativa ou um pequeno ajuste é grátis. Em uma equipe Max, cada membro tem a própria contagem com os limites do plano.
Exportações do seu agente de IA (MCP) · diário
Componentes, looks de textura, shaders e incorporações HTML de mockups que seu agente de código com IA exporta via MCP, conforme o plano: até 30 diferentes por dia e 100 a cada 30 dias no Starter, 60 e 200 no Pro, e 150 e 600 no Max. O dia é redefinido à meia-noite UTC, e um item já exportado não conta de novo.
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.
Exportações dos editores de Tools, Texturas, Shaders e Mockups nunca consomem os limites de download da Library. Os arquivos da Library que seu agente de IA baixa por você via MCP contam como downloads normais.
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, 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.
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: 10 (Starter), 25 (Pro) ou 50 (Max) downloads por dia, redefinindo diariamente. Itens Premium (os com o selo Premium dourado): 5, 12 ou 25 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 para os produtos da HorizonX. Use e adapte esses arquivos em seus projetos pessoais, de clientes e comerciais sem custo extra. Pacotes de código aberto mantêm a licença de seus autores, que vem incluída no download.
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.
Não. Você pode abrir uma ferramenta, textura, shader ou mockup e mexer em cada controle sem se cadastrar. Para levar o resultado, é preciso uma assinatura.
Não. Não há nada para instalar nem nada que ligue de volta para nós. Peças simples saem como marcação e CSS puros, e as que precisam de uma linha do tempo de verdade levam junto o código da animação, o mesmo que a prévia estava rodando.
Não. As exportações de mockups nunca usam os limites de download diários ou mensais Premium da biblioteca. Cada mockup diferente conta uma vez na cota dos editores que você divide com Tools, Texturas e Shaders, e os vídeos MP4 também têm um limite próprio.
Nos últimos 30 dias: 20 no Starter, 100 no Pro e 400 no Max, ou 5 se o seu único acesso for um teste. Um segundo vídeo do mesmo mockup dentro de 10 minutos não conta outra vez. Em uma equipe Max, cada membro tem a própria contagem com os limites do plano.
Explore a biblioteca.
Abra o Explore, encontre uma camada e comece a construir a partir de algo real.