Voltar
Seja bem vindo a minha...
Caixa Criativa
Tudo que eu uso pra criar sites e mais, em um só lugar. Uma biblioteca completa que faz parte do meu processo criativo.
3D e mockups
-
Ultramock (abre em nova aba)
ultramock.ioMockups de produto caprichados, bons pra portfólio e lançamento.
-
Thumb by Craftwork (abre em nova aba)
thumb.craftwork.designMonta capa e thumbnail com fundo, sombra e moldura em poucos cliques.
-
Formia (abre em nova aba)
formia.soPega um logo plano e devolve em 3D, parado ou animado.
-
Shots (abre em nova aba)
shots.soColoca a tela num aparelho e exporta imagem ou vídeo curto pro post.
-
Mockuuups Studio (abre em nova aba)
mockuuups.studioMilhares de cenas com celular, notebook e tablet, e funciona dentro do Figma.
-
Rotato (abre em nova aba)
rotato.appAparelho em 3D com câmera em movimento, pra vídeo de apresentação.
-
Hello Mockup (abre em nova aba)
hellomocku.comMockups gratuitos de tela, papelaria e embalagem.
Repositórios de sites criados com IA
-
MotionSites AI (abre em nova aba)
motionsites.aiSites com bastante movimento e o prompt que gerou cada um.
-
O que a comunidade anda publicando com Figma Make e Figma Sites, com arquivo pra abrir.
-
Replit Gallery (abre em nova aba)
replit.comApps e sites publicados no Replit que dá pra abrir e remixar.
-
Jiro · Free Components (abre em nova aba)
jiro.buildSeções com prompt pronto pra colar no Lovable, Bolt, v0 ou Replit.
-
5S Design Library (abre em nova aba)
5sdesign.artReferências de seção e componente separadas por tipo, pra gerar interface com IA.
-
GetLayers (abre em nova aba)
getlayers.aiTemplates, cenas 3D e fundos com prompt, pra fugir do site com cara de IA.
-
Motion Prompts (abre em nova aba)
motionprompts.devAnimações em GSAP e WebGL com demo e o prompt que funciona no Claude Code e no Cursor.
-
Lovable · Templates (abre em nova aba)
lovable.devProjetos prontos feitos no Lovable, pra abrir, remixar e ajustar com prompt.
Sites de inspiração
-
Design do Brasil (abre em nova aba)
designdobrasil.coSó sites e portfólios brasileiros, com curadoria.
-
Lapa Ninja (abre em nova aba)
lapa.ninjaUm arquivo enorme de landing pages, bom pra comparar estrutura.
-
Unsection (abre em nova aba)
unsection.comSeções soltas de sites reais: hero, preço, depoimento, CTA.
-
Land-book (abre em nova aba)
land-book.comGaleria grande de landing pages e portfólios, com filtro por setor e estilo.
-
Land-book · Hero (abre em nova aba)
land-book.comSó primeiras dobras, pra ver como cada site abre a conversa.
-
Landingfolio (abre em nova aba)
landingfolio.comLanding pages e blocos filtrados por seção, setor e estilo.
-
One Page Love (abre em nova aba)
onepagelove.comSites de uma página só, pra quando o projeto é enxuto.
-
landing.love (abre em nova aba)
landing.loveSites com animação, pra estudar ritmo de scroll e transição.
-
Bento Grids (abre em nova aba)
bentogrids.comGrades em bento pra mostrar vários benefícios sem ficar repetitivo.
-
Pinterest (abre em nova aba)
pinterest.comDireção de arte, foto e composição de fora do mundo de UI.
-
SaaSpo (abre em nova aba)
saaspo.comPáginas de SaaS separadas por tipo de página e de seção.
-
SaaSFrame (abre em nova aba)
saasframe.ioTelas de SaaS por setor e por padrão de interface.
-
The App Fuel (abre em nova aba)
theappfuel.comCriativos e campanhas de apps que estão crescendo.
-
Dark Design (abre em nova aba)
dark.designSó interface escura, pra acertar contraste e clima.
-
Minimal Gallery (abre em nova aba)
minimal.gallerySites minimalistas em que tipografia e espaço fazem o trabalho.
-
Godly (abre em nova aba)
godly.websiteSites mais ousados, com execução visual forte.
-
Awwwards (abre em nova aba)
awwwards.comOs premiados do dia, pra acompanhar o que está saindo de novo.
-
A/B Test Design (abre em nova aba)
abtest.designTestes A/B reais em checkout, onboarding e retenção, com o resultado.
-
Dribbble · Web Design (abre em nova aba)
dribbble.comOs shots de web design mais curtidos, bom termômetro do que está em alta no visual.
Referências de produto e fluxos
-
Mobbin (abre em nova aba)
mobbin.comTelas e fluxos de apps conhecidos, com busca por elemento e conexão MCP.
-
Refero (abre em nova aba)
refero.designBusca por padrão de tela em produtos reais, pra pesquisa de UX.
-
Page Flows (abre em nova aba)
pageflows.comGravações de fluxos inteiros: cadastro, checkout, assinatura.
Packs de ícones
-
Thiings (abre em nova aba)
thiings.coMilhares de ícones 3D gerados por IA, prontos pra baixar.
-
Myicons (abre em nova aba)
myicons.coÍcones de linha minimalistas, com plugin pro Figma.
-
Phosphor Icons (abre em nova aba)
phosphoricons.comUma família com vários pesos, do fino ao preenchido.
-
Hugeicons (abre em nova aba)
hugeicons.comMuitos estilos na mesma coleção, com plugin e pacote pra código.
-
Lucide (abre em nova aba)
lucide.devOpen source, leve e fácil de ajustar.
-
Tabler Icons (abre em nova aba)
tabler.ioMais de seis mil SVGs gratuitos no mesmo traço.
-
Heroicons (abre em nova aba)
heroicons.comOs ícones do time do Tailwind, com pacote pra React e Vue.
-
Iconify (abre em nova aba)
iconify.designUm buscador que junta centenas de milhares de ícones abertos.
Componentes para UI com IA
-
21st.dev (abre em nova aba)
21st.devUm catálogo grande de componentes e blocos em React e Tailwind pra copiar.
-
Magic UI (abre em nova aba)
magicui.designComponentes animados open source pra landing page.
-
Aceternity UI (abre em nova aba)
ui.aceternity.comFundos, cards e efeitos de impacto em React e Tailwind.
-
React Bits (abre em nova aba)
reactbits.devComponentes animados com visual menos óbvio.
-
Uiverse (abre em nova aba)
uiverse.ioBotões, cards, loaders e inputs feitos pela comunidade, com o HTML e o CSS ou Tailwind pra copiar.
-
VibePrompt (abre em nova aba)
vibeprompts.devPrompts de seção prontos: você cola na IA e recebe o bloco em Tailwind.
Animações e efeitos
-
Effect.app · ASCII (abre em nova aba)
effect.appTransforma imagem e vídeo em arte ASCII e exporta.
-
Laser Design Buttons (abre em nova aba)
laser-design-buttons.webflow.ioBotões com hover em CSS e GSAP pra clonar no Webflow.
-
60fps (abre em nova aba)
60fps.designAnimações e microinterações gravadas de produtos reais.
-
Animista (abre em nova aba)
animista.netAnimações CSS de entrada, saída e destaque pra ajustar e copiar.
-
OriginKit (abre em nova aba)
originkit.devComponentes animados gratuitos.
-
Design Spells (abre em nova aba)
designspells.comDetalhes de interação que encantam, com a explicação de cada um.
-
SVG Artista (abre em nova aba)
svgartista.netAnima o traço de um SVG e entrega o CSS.
-
Kinetics (abre em nova aba)
kinetics.colorion.coAnimações de interface com física de mola, pra copiar em CSS ou React.
-
Text Effects (abre em nova aba)
text-effects.colorion.co90 efeitos de texto em CSS puro, do degradê ao glitch, sem JavaScript.
-
Circle Loaders (abre em nova aba)
circleloaders.dominikakissi.comLoaders redondos em SVG animado, cada um num arquivo só.
Shaders, gradients e backgrounds
-
Unicorn Studio (abre em nova aba)
unicorn.studioShaders e efeitos interativos em WebGL sem escrever código.
-
ShaderGradient (abre em nova aba)
shadergradient.coGradientes animados em WebGL que vão pro Figma, Framer e React.
-
Mesh Gradient (abre em nova aba)
meshgradient.comEditor direto de mesh gradient.
-
Grainient (abre em nova aba)
grainient.supplyGradientes lisos ou granulados, fundos animados e ferramenta de shader.
-
Haikei (abre em nova aba)
haikei.appGera ondas, blobs, grids e gradientes em SVG.
-
Background Supply (abre em nova aba)
background.supplyFundos com textura prontos, com prompt pra criar variações.
-
Three.js (abre em nova aba)
threejs.orgA biblioteca base do 3D no navegador: cenas, modelos, luz e shaders em WebGL.
Skills essenciais para UI
-
Faz o agente escolher uma direção visual antes de sair codando.
-
Frontend Skill · OpenAI (abre em nova aba)
github.comDireção de arte, hierarquia e movimento pra interfaces.
-
Audita um fluxo e aponta problemas de acessibilidade com o que corrigir.
-
Escreve as regras do design system a partir do código e dos tokens.
-
GSAP Skills · Examples (abre em nova aba)
github.comOs exemplos oficiais do GSAP: timeline, ScrollTrigger, React e Vue.
-
Remotion · Agent Skills (abre em nova aba)
github.comBoas práticas pro agente fazer vídeo com código usando Remotion.
-
Diretório pra achar skills de design e revisão visual.
-
Confere a interface contra as regras de espaçamento, tipo e acessibilidade da Vercel.
-
Leva o design do Figma pro código respeitando os tokens.
-
Cria e atualiza telas no Figma usando os componentes que já existem.
-
Claude Code Templates (abre em nova aba)
aitmpl.comAgentes, comandos, skills e MCPs pra instalar no Claude Code.
Design System + IA
-
Design Systems Repo for the AI Era (abre em nova aba)
designsystemsrepo.aiCuradoria de design systems preparados pra IA.
-
Pesquisa sobre MCP, skills e llms.txt em design systems.
-
Design Systems Surf (abre em nova aba)
designsystems.surfDesign systems reais com atalho pro Figma, repositório e Storybook.
-
UI Guideline · Components (abre em nova aba)
uiguideline.comO que os grandes design systems concordam sobre cada componente.
-
The Component Gallery (abre em nova aba)
component.galleryUm mesmo componente comparado em vários design systems.
-
DESIGN.md (abre em nova aba)
designmd.aiCentenas de design systems grátis num arquivo só, que o agente lê pra manter a interface coerente.
Recursos para designers de UI
-
Figma Community (abre em nova aba)
figma.comUI kits, templates, plugins e arquivos da comunidade.
-
TOOOLS.design (abre em nova aba)
toools.designDiretório grande de recursos de UI, UX e motion.
-
Craftwork (abre em nova aba)
craftwork.designUI kits, ilustrações, mockups e fontes caprichados.
-
UI Resources (abre em nova aba)
ui-resources.comKits, plugins e texturas gratuitos.
-
Design Principles (abre em nova aba)
principles.designPrincípios publicados por várias equipes, pra orientar decisão de produto.
-
Framer University (abre em nova aba)
framer.universityComponentes, templates e efeitos grátis pro Framer.
-
Framer Marketplace (abre em nova aba)
framer.comTemplates de site prontos pro Framer, grátis e pagos, pra adaptar em vez de começar do zero.
Ferramentas para designers
-
Color Bridge (abre em nova aba)
figma.comPlugin de Figma que gera paleta e checa contraste enquanto você desenha.
-
OKLCH.fyi (abre em nova aba)
oklch.fyiPaletas em OKLCH, com passos que parecem iguais pro olho.
-
Radix Colors (abre em nova aba)
radix-ui.comEscalas de 12 passos, clara e escura, pra fundo, borda e texto.
-
UI Colors (abre em nova aba)
uicolors.appGera escala de cor no formato do Tailwind.
-
MapCN (abre em nova aba)
mapcn.devMapas personalizados com visual bonito pra produto digital.
-
FreeConvert (abre em nova aba)
freeconvert.comConverte arquivo de quase tudo pra quase tudo: vídeo, imagem, áudio e documento.
-
Figcomponents (abre em nova aba)
figcomponents.comComponentes de Figma selecionados pra copiar e adaptar.
-
Squoosh (abre em nova aba)
squoosh.appComprime imagem no navegador comparando antes e depois, e exporta em WebP ou AVIF.
-
Transfonter (abre em nova aba)
transfonter.orgConverte fonte pra woff2 e já devolve o @font-face escrito.
-
PageSpeed Insights (abre em nova aba)
pagespeed.web.devMede a velocidade da página no celular e no computador e mostra o que pesa.
Ferramentas de IA
-
v0 (abre em nova aba)
v0.devDescreve a interface e ele gera, edita e publica o app.
-
Higgsfield (abre em nova aba)
higgsfield.aiImagem e vídeo com cara de cinema e personagem consistente.
-
Recraft (abre em nova aba)
recraft.aiVetor, ícone e ilustração com controle de estilo.
-
Figma Make (abre em nova aba)
figma.comTransforma prompt e design em protótipo funcionando dentro do Figma.
-
Magnific (abre em nova aba)
magnific.comA plataforma de IA da Freepik: gera imagem e vídeo e faz upscale até 4K.
-
Google Flow (abre em nova aba)
flow.google.comEstúdio de vídeo com IA do Google, da ideia à cena pronta.
-
ChatGPT (abre em nova aba)
chatgpt.comO chat da OpenAI pro dia a dia: texto, ideia, pesquisa e imagem.
-
Claude (abre em nova aba)
claude.aiA IA da Anthropic que eu uso pra escrever e pra montar site com código.