154 peças de página prontas, de graça — a IA só encaixa
Você não precisa que a IA invente a seção. Precisa entregar a peça pronta e mandar ela encaixar. O catálogo abre sem login e o código é seu.
Eu parei de pedir pra IA inventar seção de página. E cara, isso mudou mais coisa do que trocar de modelo.
Você pede uma seção de depoimento. Ela devolve três caixinhas cinzas com aspas gigantes, estrela que não alinha, foto redonda esmagada. Pede de novo, vem outra coisa feia. Terceira tentativa, quarta.
Eu confesso pra vocês que já perdi muito tempo brigando com a IA por causa disso. Só que o problema nunca foi o prompt. É que você tá mandando ela inventar uma peça que já existe pronta, testada, no mundo.
No post passado eu falei do arquivo de regras — o DESIGN.md, o clima da página. Aquilo resolve o "como deve parecer". Hoje é a outra metade: a peça em si.
O site em questão é o opensourceui.in. Abri sem login. Sem cadastro, sem trial, sem cartão. Etiqueta verde FREE no topo e a frase oficial: "copy-paste library of thoughtfully crafted, production-ready components". Em português: uma biblioteca de peças de página prontas pra copiar e colar.
Componente, aqui, é uma peça isolada de interface: a seção de time, a tabela de preço, o formulário de contato, o cronômetro regressivo. Cada uma com o código completo, aberto, na tela. Enfim, a parada que a IA tenta reinventar toda vez.
O tamanho real do catálogo
A página de catálogo declara: 154 componentes em 26 categorias.
Eu não acreditei no número e fui contar. Puxei a lista inteira: 154 endereços únicos de componente. Somei categoria por categoria — Widgets 29, Botões 16, Campos de formulário 14, Notificações 10, Redes sociais 10, e por aí até o último. Soma exata: 154.
Cara, é o primeiro site desse tipo em muito tempo que o número da vitrine bate com o número de dentro.
Sobre o projeto, o que dá pra verificar hoje: repositório público bidyut10/opensourceui, criado em 5 de junho de 2026, 135 estrelas, licença MIT. O último envio de código foi hoje de manhã. Tá vivo, e é obra de uma pessoa só — Bidyut Kundu.
E por que isso importa pra mim: aqui na Nomics a gente já fez mais de 400 páginas. Componente que a IA inventa do zero sempre foi onde a gente mais queimou tempo.
Passo 1. Ache a peça pelo nome do problema, não pelo nome bonito
Não entra pelo menu. Entra pela busca.
O atalho é Command + K (ou Ctrl + K no Windows). Você digita o que precisa em inglês e o catálogo filtra na hora.
Eu digitei ticket. Voltaram 2: Cinema Ticket e Event Ticket. Digitei receipt. Voltou 1: Thermal Receipt, um recibo de papel térmico com borda serrilhada e QR code no pé.
Termos que funcionam bem porque descrevem o problema: pricing, form, testimonial, countdown, calendar, table, notification, profile.
Passo 2. Abra a ficha e olhe o que a página entrega
Toda ficha tem a mesma estrutura, e é aqui que o site ganha da maioria: prévia em cima, código embaixo, na mesma tela. Sem aba, sem "abrir no sandbox", sem esperar carregar editor. E o melhor de tudo é que a prévia não é foto do componente — é o componente rodando.
Peguei a ficha que serviu de porta de entrada aqui — Team Member Profile Grid, a grade de perfis da equipe.
Rola um pouco e vem o "How to use". Quatro passos numerados, e o primeiro é o único comando de terminal da história:
npm install clsx tailwind-merge lucide-reactTraduzindo os quatro passos, em português comum:
- Instalar três bibliotecas pequenas de apoio (o comando acima)
- Copiar um arquivinho chamado
lib/cn.ts— 6 linhas, serve pra juntar estilos sem conflito. Se seu projeto já tem, pula - Copiar o arquivo do componente e salvar na pasta que a ficha indica
- Importar e usar, com o exemplo já escrito na tela
O código completo aparece embaixo, com número de linha e um botão de copiar no canto. Você clica uma vez e o arquivo inteiro vai pra área de transferência.
Passo 3. O virador — cole na IA com papel definido
Aqui é onde a maioria estraga, tá? Cola o código e escreve "usa isso aí".
A IA então reescreve o componente inteiro. Muda nome, tira propriedade, "melhora" o espaçamento. E você volta pro problema do começo.
O que funciona é dar o papel de cada coisa antes de colar. O prompt que eu usaria, do jeito que eu falaria com o Claude Code ou com o Cursor:
Vou te dar o código de um componente pronto, tirado de uma biblioteca open source.
Regras:
1. Não reescreva o componente. Ele está aprovado como está.
2. Salve exatamente no caminho indicado no comentário do topo.
3. Sua tarefa é SÓ trocar o conteúdo pelos meus dados e encaixar na página [NOME DA PÁGINA].
4. Se alguma cor ou fonte do componente brigar com o meu design, me pergunte antes de mudar. Não decida sozinho.
5. No fim, me diga em uma linha o que você mudou.
Meus dados: [COLE AQUI NOMES, CARGOS, TEXTOS, PREÇOS]
Código do componente:
[COLE O CÓDIGO]A diferença entre "usa isso aí" e esse bloco é a diferença entre pedir invenção e pedir montagem. Mesma IA, mesmo dia. Só que agora ela monta em vez de inventar — e a regra 1 sozinha já corta metade do retrabalho.
O que tem de mais atrativo lá dentro
Deixei pro final e separei pelo critério que interessa pra quem vende: o que a IA não faria sozinha e o que entra numa página que converte.
Tabela de preço com chave mensal/anual. A ficha se chama Toggle Pricing Cards, e a descrição oficial diz o que ela é: "SaaS pricing page, one paste away". Três planos lado a lado, chave que troca entre mensal e anual, desconto marcado, lista de benefícios com visto verde. Isso é meia hora de briga com IA resolvida em uma colada.
Cronômetro regressivo de evento. Conta dias, horas e minutos até a data, atualizando sozinho. A descrição oficial faz questão de dizer "no ticker gimmicks" — sem aquele numerinho girando de página de lançamento vagabunda. Tipografia editorial, sóbrio.
Carrossel de depoimento. Estrelas, aspas, avatar, bolinhas de navegação, avança sozinho. Exatamente a peça do começo desse texto, a que a IA nunca acerta na primeira.
Formulário de contato com armadilha de robô. Tem contador de caracteres, validação de campo, estado de carregando e tela de confirmação. E tem "honeypot": um campo invisível que humano não preenche e robô de spam preenche. Se veio preenchido, é robô. É o tipo de detalhe que ninguém lembra de pedir.
Moldura de navegador pro seu print. Você joga o print da sua página dentro de uma janela de navegador com os três pontinhos e a barra de endereço. Claro, escuro ou transparente. É o jeito mais barato de fazer print de página parecer produto.
E os que existem só porque alguém teve capricho, que são os que fazem uma página parecer feita por gente:
Tem também dock do macOS com aquele salto do ícone, tocador de música completo, post de Instagram inteiro, recibo, ingresso de cinema, cartão de embarque, placa de museu, capa de revista. Nenhum desses resolve conversão. Todos resolvem a sensação de "isso aqui foi feito por alguém que se importa".
O que eu não vou te vender
Agora a parte que ninguém te conta, porque os limites são reais:
- Só serve pra React ou Next.js com Tailwind CSS v4. Se sua página é WordPress, Elementor, Wix ou Webflow, o código não entra direto. Serve como referência visual pra IA, não como colada.
- É projeto de uma pessoa. 135 estrelas no GitHub, sete cópias. Está vivo hoje — o último envio foi de manhã. Mas não é uma biblioteca com empresa por trás e garantia de manutenção.
- MIT tem uma obrigação, e é justa. A página escreve com todas as letras: você usa de graça no comercial, não precisa dar crédito na tela, mas precisa manter o aviso de copyright da licença dentro do arquivo que você copiou. Não apague o cabeçalho.
- Não tem MCP nem skill oficial. É copiar e colar mesmo. Não existe integração automática que o Claude Code consuma sozinho.
- As fotos e os textos são de exemplo. Toda ficha vem com placeholder. Se você publicar sem trocar, sua página de time vai apresentar o Bidyut.
- Eu não medi conversão. Não rodei teste A/B com e sem esses componentes. Não tenho número de CPL, de venda ou de tempo de página. O que eu tenho é o catálogo aberto e o código na mão.
E o óbvio que todo mundo esquece: componente bonito não salva oferta ruim. Tabela de preço linda com preço errado continua sendo preço errado.
O que fazer hoje, em 15 minutos
- Abra opensourceui.in/components e aperte Command + K
- Busque a peça que hoje está feia na sua página. Comece por
testimonialoupricing - Abra a ficha, leia os quatro passos, clique no botão de copiar do arquivo do componente
- Cole na IA com o bloco de prompt lá de cima — o que tem a regra "não reescreva"
- Compare com o que você tinha antes
Se você fizer, me manda o print. Inclusive se ficar ruim — caso ruim ensina mais que caso bom.
Valeu, e bora. Nos vemos no próximo.
- Vini