O que Índice de Inspiração de Design faz?
Um mapa de recuperação: "Preciso de inspiração para X, então vá para a fonte Y." É um índice de galerias e registros públicos, não uma autoridade de design; depois de obter referências, construa com a skill ui e verifique o resultado com anti-slop. Detalhes por site (acesso, formato, filtros, dicas de recuperação) estão em references/galleries.md.
Nada aqui é obrigatório. Cada fonte é um site público; os dois que têm servidores MCP (Mobbin, Refero) são opcionais e só valem a pena conectar se você os usar com frequência.
Quando você precisar de X, vá para Y
| Você precisa de | Vá para | Observações |
|---|---|---|
| Um site completo para admirar (entrada ampla de gosto) | collected.li (aleatório), siteofsites.co (filtrável), unmatchedstyle.com (editorial), recent.design (diário) | collected mostra 8 sites aleatórios; siteofsites filtra por plataforma; unmatchedstyle tem artigos de tendência |
| Um hero ou layout de página inteira | landing.love (movimento), craftwork.design/inspiration/websites (amplo) | landing.love grava vídeo de página inteira |
| Uma landing page em movimento | landing.love | filtre pelas coleções GSAP, WebGL ou ThreeJS |
| Um site de marketing SaaS ou um tipo de página SaaS | saaspo.com | filtre por tipo de página (preços, recursos) e setor |
| Uma página de preços | saaspo.com (tipo de página) e cta.gallery (o bloco CTA) | |
| Uma navbar, cabeçalho ou mega menu | navbar.gallery | filtre por sticky, mega menu, barra lateral, tela cheia |
| Um call to action, bloco de inscrição ou newsletter | cta.gallery | filtre por setor e por botão, formulário, newsletter, modal |
| Uma ideia de animação ou micro-interação | 60fps.design (o movimento), designspells.com (a ideia e o porquê) | designspells explica um detalhe encantador, mobile e desktop |
| Um detalhe encantador, easter egg ou toque "mágico" | designspells.com | tags: easter egg, confete, transição, 404 |
| UI de produto real: tipos de página, fluxos, padrões de UX (web) | refero.design | filtre por tipo de página, fluxo, padrão, elemento ou fonte; tem um servidor MCP opcional |
| Imagens OG, capturas de tela da App Store, ícones de aplicativos | recent.design | abas dedicadas que poucos outros têm |
| Um logotipo, identidade visual ou rebranding | rebrand.gallery | a única fonte de branding aqui |
| Como construir ou nomear um componente de UI | component.gallery | referência cruzada entre sistemas com aliases de nome (Accordion = Collapse = Disclosure) |
| Código de componente para implementar (React) | shadcn/ui, mapcn (mapas) | comece com o que o projeto já usa |
| Blocos de aplicativos pré-construídos (formulários, autenticação, barras laterais, tabelas) | blocks.so | gratuito, copie e cole |
| Blocos de marketing e landing pré-construídos | tailark.com (curado), shadcnblocks.com (grande, freemium), shadcnspace.com | freemium |
| Um widget composto complexo (Gantt, Kanban, editor, tabela) | kibo-ui.com | gratuito, registro CLI shadcn |
| Código de componente animado ou micro-interação | smoothui.dev, ui-layouts.com | Baseado em Motion ou GSAP |
| Geração de tema para shadcn | shadcnstudio.com | nível gratuito da comunidade |
| Um visual retrô ou pixel art | 8bitcn.com | reformulação shadcn, nicho por design |
| Componentes acessíveis em React Aria (não Radix) | intentui.com | não se mistura bem com shadcn baseado em Radix |
| Um ícone ou SVG | lucide.dev (padrão), react-icons, reicon.dev, hugeicons.com | Lucide é o padrão shadcn, estilo traço; react-icons agrupa muitos conjuntos, incluindo logotipos de marcas; Reicon tem contorno e preenchido; Hugeicons é grande e freemium |
| Fluxos e telas de aplicativos móveis | Mobbin | requer login; use seu servidor MCP se tiver, caso contrário o site |
| O sistema de design de uma marca famosa descrito | o repositório awesome-design-md (github.com/VoltAgent/awesome-design-md) | leia dois ou três antes de definir uma linguagem de design |
| Um princípio de UX nomeado para um achado de revisão | lawsofux.com | cite a lei pelo nome: Fitts, Hick, Jakob, Pico-Fim |
| Pesquisa de componentes ou variantes de UI geradas | 21st.dev | pesquise antes de escrever uma UI nova manualmente |
Bibliotecas de componentes gratuitas que possuem seu próprio registro valem a pena serem verificadas antes de escrever um bloco manualmente. Adapte qualquer coisa que importar aos tokens e regras de acessibilidade do projeto.
Designers de engenharia para estudar
Pessoas de alto sinal cujos sites e trabalhos de código aberto valem a pena estudar e seguir.
| Pessoa | Site | Conhecido por |
|---|---|---|
| Emil Kowalski | emilkowal.ski | Sonner, Vaul; arte em animação web |
| shadcn | shadcn.com | shadcn/ui; componentes copiados e registros |
| Paco Coursey | paco.me | cmdk, next-themes; UI minimalista focada em teclado |
| Rauno Freiberg | rauno.me | invariantes de interface e o porquê por trás do polimento |
| Raphael Salaja | raphaelsalaja.com | portfólio rico em movimento, arte de interação lúdica |
| Gavin Nelson | nelson.co | design de produto e ícone |
| floguo | floguo.com | micro-interações expressivas, personalidade |
| Syed Subhan | syedsubhan.in | micro-transições; construiu Amicro (amicro.vercel.app), uma coleção de padrões reutilizáveis de micro-transição |
Mobbin e Refero: servidores MCP opcionais
Ambos exigem login e são melhor consultados através de um servidor MCP, se você tiver um conectado. Mobbin expõe pesquisa de tela, fluxo e seção; o servidor da Refero está em https://api.refero.design/mcp (docs: https://doc.refero.design/mcp/getting-started) e retorna capturas de tela reais de produtos. Se você não tiver nenhum dos dois, navegue pelos sites manualmente. Não faça scraping.
Folha de dicas de acesso
Verifique antes de confiar; os sites mudam.
- Aberto e gratuito, sem login: landing.love, navbar.gallery, cta.gallery, 60fps.design, collected.li, siteofsites.co, unmatchedstyle.com, recent.design, designspells.com, lucide.dev, reicon.dev, component.gallery, saaspo.com.
- Freemium (navegue gratuitamente, pague por ativos ou pela biblioteca completa): craftwork.design, rebrand.gallery, hugeicons.com, refero.design.
- Login ou MCP: Mobbin, refero.design.
Vários desses (saaspo.com, component.gallery, landing.love, designspells.com) bloqueiam buscas automatizadas com 403 ou 429, mas abrem normalmente em um navegador comum. godly.website agora redireciona para recent.design. Para extrair dados de um site bloqueado programaticamente, use um navegador real (por exemplo, com um MCP Playwright, se instalado) em vez de uma requisição HTTP simples.
Como estender este índice
Adicione uma nova galeria a references/galleries.md com os mesmos campos (nome, URL, categoria, melhor para, acesso, formato, dica de recuperação) e, em seguida, adicione uma linha de roteamento à tabela acima.