Ferramentas

Ultramock

ultramock.io

↗

Crie mockups de produto com acabamento profissional para apresentações, portfólios e lançamentos.

Thumb by Craftwork

thumb.craftwork.design

↗

Monte thumbnails e composições com fundos, sombras, molduras e exportação rápida.

Formia

formia.so

↗

Transforme logos 2D em ativos e animações 3D para experiências de marca.

Shots

shots.so

↗

Crie mockups, imagens e vídeos animados rapidamente para apresentações, sites e redes sociais.

Mockuuups Studio

mockuuups.studio

↗

Aplique telas em milhares de cenas fotográficas e dispositivos, inclusive diretamente no Figma.

Rotato

rotato.app

↗

Produza mockups e animações 3D de dispositivos com controle de câmera, reflexos e materiais.

Hello Mockup

hellomocku.com

↗

Mockups gratuitos de dispositivos, papelaria e embalagem para montar apresentação rápida.

MotionSites AI

motionsites.ai

↗

Referências premium de sites com motion e prompts prontos para gerar direções visuais com IA.

Figma Make & Sites Gallery

figma.com

↗

Projetos da comunidade feitos com Figma Make e Sites, com prompts e arquivos para explorar.

Replit Gallery

replit.com

↗

Galeria de sites e aplicações publicados pela comunidade, útil para observar soluções criadas e remixáveis.

Jiro · Free Components

jiro.build

↗

Biblioteca de componentes e seções com prompts prontos para reproduzir layouts em Bolt, Lovable, v0, Replit e outros builders.

5S Design Library

5sdesign.art

↗

Biblioteca visual de seções e componentes para explorar referências e acelerar a criação de interfaces com IA.

GetLayers

getlayers.ai

↗

Biblioteca AI-native de templates, cenas 3D, seções e backgrounds com prompts prontos para criar sites menos genéricos.

Motion Prompts

motionprompts.dev

↗

Biblioteca gratuita de animações GSAP e WebGL com demos e prompts validados para Claude Code, Cursor e outros agentes.

Design do Brasil

designdobrasil.co

↗

Curadoria brasileira de sites e portfólios com direção visual relevante.

Lapa Ninja

lapa.ninja

↗

Galeria extensa de landing pages e seções para pesquisar estrutura, composição e padrões de conversão.

Unsection

unsection.com

↗

Biblioteca de seções reais: hero, CTA, preços, recursos, depoimentos e muito mais.

Land-book · Hero

land-book.com

↗

Coleção de hero sections para estudar mensagem, hierarquia e impacto inicial.

Landingfolio

landingfolio.com

↗

Landing pages e blocos filtráveis por seção, indústria e estilo, com templates.

One Page Love

onepagelove.com

↗

Curadoria de sites de página única, ótima para estrutura enxuta e narrativa direta.

landing.love

landing.love

↗

Vitrine de sites com animação, para estudar ritmo, transição e scroll.

Bento Grids

bentogrids.com

↗

Coleção de layouts em bento, para resolver grade de features sem cair no óbvio.

Pinterest

pinterest.com

↗

Board visual pra garimpar direção de arte, fotografia e composição fora da bolha de UI.

SaaSpo

saaspo.com

↗

Landing pages SaaS organizadas por página, seção e elemento visual.

SaaSFrame

saasframe.io

↗

Telas e fluxos de produtos SaaS filtráveis por indústria, página e padrão.

The App Fuel

theappfuel.com

↗

Referências de campanhas, criativos e estratégias usadas por aplicativos em crescimento.

Dark Design

dark.design

↗

Galeria especializada em interfaces escuras, contraste e atmosfera.

Minimal Gallery

minimal.gallery

↗

Curadoria de sites minimalistas com foco em tipografia, espaço e precisão.

Godly

godly.website

↗

Sites modernos e experimentais com execução visual marcante.

Awwwards

awwwards.com

↗

Premiações, sites do dia e tendências para acompanhar a fronteira do web design.

A/B Test Design

abtest.design

↗

Resultados de testes A/B em onboarding, checkout, monetização e retenção.

Mobbin

mobbin.com

↗

Pesquise telas, elementos e jornadas de produtos reais em mobile e web, com integração MCP.

Refero

refero.design

↗

Biblioteca de telas e fluxos de produtos reais para pesquisa de UI, UX e padrões específicos.

Page Flows

pageflows.com

↗

Vídeos e sequências completas de onboarding, checkout, assinatura e outros fluxos de produto.

Thiings

thiings.co

↗

Biblioteca com milhares de ícones 3D gerados por IA, pronta para explorar e baixar.

Myicons

myicons.co

↗

Pack premium de ícones lineares minimalistas com plugin para Figma e web app.

Phosphor Icons

phosphoricons.com

↗

Família versátil com diferentes pesos e ótima cobertura para produtos digitais.

Hugeicons

hugeicons.com

↗

Coleção extensa com múltiplos estilos, integrações para código e plugin para Figma.

Lucide

lucide.dev

↗

Ícones open source, leves, consistentes e fáceis de personalizar.

Tabler Icons

tabler.io

↗

Mais de seis mil ícones SVG gratuitos, consistentes e prontos para Figma ou código.

Heroicons

heroicons.com

↗

Ícones SVG da equipe do Tailwind, com bibliotecas oficiais para React e Vue.

Iconify

iconify.design

↗

Pesquise centenas de milhares de ícones open source de diferentes famílias em um único lugar.

21st.dev

21st.dev

↗

Grande registro de componentes, blocos e estilos para React e Tailwind, prontos para copiar e adaptar.

Magic UI

magicui.design

↗

Biblioteca open source de componentes e efeitos animados para landing pages e produtos digitais.

Aceternity UI

ui.aceternity.com

↗

Componentes visuais em React e Tailwind com backgrounds, cards, motion e efeitos de alto impacto.

React Bits

reactbits.dev

↗

Coleção de componentes animados e efeitos React com visual menos convencional e código reutilizável.

Effect.app · ASCII

effect.app

↗

Transforme imagens e vídeos em composições ASCII com controles e exportação.

Laser Design Buttons

laser-design-buttons.webflow.io

↗

Botões clonáveis com hover em CSS, Webflow e GSAP.

60fps

60fps.design

↗

Biblioteca de animações e microinterações observadas em produtos reais.

Animista

animista.net

↗

Explore, ajuste e copie animações CSS para entradas, saídas, atenção e elementos de interface.

OriginKit

originkit.dev

↗

Componentes animados gratuitos para criar interfaces modernas com maior impacto.

Design Spells

designspells.com

↗

Catálogo de microinterações reais de produtos, com o detalhe explicado.

SVG Artista

svgartista.net

↗

Anime o traço de qualquer SVG e copie o CSS pronto.

Unicorn Studio

unicorn.studio

↗

Crie motion, shaders e experiências interativas em WebGL sem escrever GLSL.

ShaderGradient

shadergradient.co

↗

Gradients animados em WebGL com integração para web, Figma, Framer e React.

Mesh Gradient

meshgradient.com

↗

Editor simples para criar mesh gradients deformáveis usando WebGL shaders.

Grainient

grainient.supply

↗

Gradients suaves ou granulados, backgrounds animados, arte gerada por IA e ferramenta de shaders.

Haikei

haikei.app

↗

Gere blobs, waves, grids, gradients e outros assets SVG customizáveis para interfaces.

Background Supply

background.supply

↗

Coleções de fundos texturizados prontos, com prompts para gerar variações.

Frontend Design · Anthropic

github.com

↗

Ajuda agentes a definir uma direção visual clara e criar interfaces menos genéricas.

Frontend Skill · OpenAI

github.com

↗

Skill de direção de arte, hierarquia, motion e composição para experiências digitais.

Product Design Audit · OpenAI

github.com

↗

Estrutura auditorias de fluxos com evidências, riscos de acessibilidade e recomendações acionáveis.

Design System Rules · OpenAI

github.com

↗

Gera regras de design system ligadas ao código, tokens, acessibilidade e convenções do projeto.

GSAP Skills · Examples

github.com

↗

Exemplos oficiais para animações com JavaScript, React, Vue, timelines e ScrollTrigger.

Remotion · Agent Skills

github.com

↗

Boas práticas para agentes criarem vídeos e motion programático com Remotion.

Skills.sh · Design & UI

skills.sh

↗

Diretório para descobrir skills de design, UI, revisão visual e design systems para diferentes agentes.

Web Design Guidelines · Vercel

github.com

↗

Audita interfaces contra regras de spacing, tipografia, interação, acessibilidade e UX da Vercel.

Figma Implement Design · OpenAI

github.com

↗

Workflow oficial para transformar designs do Figma em código com fidelidade visual e uso de tokens.

Figma Generate Design · OpenAI

github.com

↗

Workflow oficial para criar e atualizar telas no Figma reutilizando componentes, variáveis e estilos.

Claude Code Templates

aitmpl.com

↗

Agentes, comandos, skills e MCPs prontos para instalar no Claude Code.

Design Systems Repo for the AI Era

designsystemsrepo.ai

↗

Curadoria dedicada a design systems preparados para IA, automação e agentes.

State of AI in Design Systems

github.com

↗

Pesquisa de campo sobre MCP, agent skills, llms.txt e repositórios de sistemas AI-friendly.

Design Systems Surf

designsystems.surf

↗

Diretório de sistemas reais com atalhos para Figma, repositórios e Storybooks.

UI Guideline · Components

uiguideline.com

↗

Boas práticas de componentes sintetizadas a partir de grandes design systems.

The Component Gallery

component.gallery

↗

Comparação de componentes em design systems reais, com exemplos e implementação.

Figma Community

figma.com

↗

UI kits, wireframes, templates, plugins, widgets e arquivos compartilhados pela comunidade.

TOOOLS.design

toools.design

↗

Diretório amplo e atualizado de recursos para UI, UX, produto, motion e design visual.

Craftwork

craftwork.design

↗

UI kits, ilustrações, mockups, fontes, templates e assets de alta qualidade.

UI Resources

ui-resources.com

↗

Biblioteca de recursos gratuitos com kits, plugins, texturas, efeitos e tutoriais.

Design Principles

principles.design

↗

Coleção aberta de princípios usados por equipes para orientar decisões de produto.

Framer University

framer.university

↗

Componentes, templates e efeitos gratuitos para Framer.

Color Bridge

figma.com

↗

Plugin do Figma para gerar paletas e avaliar contraste durante o trabalho.

OKLCH.fyi

oklch.fyi

↗

Crie paletas perceptualmente consistentes no espaço de cor OKLCH.

Radix Colors

radix-ui.com

↗

Monte escalas claras e escuras em 12 etapas para superfícies, bordas e texto.

UI Colors

uicolors.app

↗

Explore e gere escalas de cor no padrão do Tailwind.

MapCN

mapcn.dev

↗

Crie mapas personalizados com acabamento visual para produtos digitais.

FreeConvert · WebM

freeconvert.com

↗

Converta arquivos WebM para outros formatos de vídeo e mídia.

Figcomponents

figcomponents.com

↗

Componentes Figma selecionados para copiar, adaptar e acelerar interfaces.

v0

v0.dev

↗

Gere, edite e publique aplicações web a partir de instruções em linguagem natural.

Higgsfield

higgsfield.ai

↗

Gere imagens e vídeos cinematográficos com IA: câmera, personagens consistentes e criativos prontos para campanha.

Recraft

recraft.ai

↗

Gere vetores, ilustrações, ícones, imagens e ativos de marca com controle de estilo.

Figma Make

figma.com

↗

Transforme prompts e contexto de design em protótipos funcionais dentro do ecossistema Figma.