Central de Referências — fontes para qualquer projeto

O que é esta página. Uma central de referências pra puxar em qualquer projeto — NGP Space, sites e sistemas da Amplasoft, Fala App, protótipos avulsos. Não é dependência instalada nem decisão fechada: é fonte pré-avaliada. Toda adoção real ainda passa por ADR + build verde.

Como usar no dia a dia. Quando surgir um problema — "preciso de um contador animado", "quero um kit de componentes pronto", "cadê uma fonte de logos" — é só perguntar: eu procuro aqui se já tem algo que resolve e implemento. Quando a fonte for JS embutível, ela roda ao vivo na própria seção.

Como cresce. Uma página só, de cima a baixo, sem menu — igual a um documento. Você manda o link de uma fonte, eu abro uma seção nova abaixo com todas as perguntas respondidas. Mesma página, mesmo link, sempre.

Animação

anime.js animação v4.1.4 · MIT site principal ↗

Veredito

Aplicar cirúrgico, não como dependência geral. CSS Modules já resolve ~90% dos casos (fade, hover, modal, tema). anime.js entra onde CSS puro sofre: sequência orquestrada, desenho de SVG, stagger em grade, física de mola.

O que faz

Motor de animação em JavaScript. Anima propriedades CSS, transforms, atributos e paths de SVG, cores e até objetos JS puros (um número subindo, por exemplo).

Como faz

Interpola valores ao longo do tempo com easing/spring, usando a Web Animations API quando possível. Módulos separados e tree-shakeable: animate timeline svg stagger text utils draggable.

Por que faz / pra que faz

Pra dar controle fino de movimento que keyframe de CSS não expressa: linha do tempo com offsets, física de mola, atraso calculado em grade 2D, desenho progressivo de traço. Objetivo é polir a experiência — carregamento, apresentação, dashboards.

Como serve (como se usa)

npm i animejs e importa só o módulo que precisa. Em React/Next roda dentro de useEffect com cleanup (.revert()). Snippet real logo abaixo dos demos.

O que ajuda (prós)

Leve (~15kb gzip) e agnóstico de framework.
Desenho/morph de SVG — o que CSS não faz.
Timeline com offsets relativos e stagger em grade.
Anima valores numéricos (KPI, contador) fácil.

O que atrapalha (contras)

Draggable colide com o @dnd-kit já usado no board.
Overkill se CSS já resolveria — vira bundle à toa.
API mudou de v3→v4 (named exports); exemplo antigo quebra.

Aplicar ou não — onde sim, onde não

✓

Aplicar em: tela de carregamento (logo se desenhando), modo apresentação/pitch, entrada de KPIs no dashboard, reveal no scroll de landing page.

Não aplicar em: micro-interação que o CSS já faz (hover, modal, tema); e nunca usar o módulo Draggable em projeto que já tem @dnd-kit.

Onde pesquisar

animejs.com/documentation — doc oficial v4. Buscar por: timeline svg draw stagger grid spring text split

Demo ao vivo — anime.js rodando embutido nesta página

Stagger em grade

animate · stagger

Atraso calculado do centro pra fora

Desenho de SVG (loading)

svg.createDrawable

O traço se desenha do zero

Timeline sequenciada

createTimeline

Três barras em cascata com offset

Contador numérico

animate · utils

R$0

Valor sobe com desaceleração — ideal p/ KPI

Texto revelando

text.split · stagger

Grupo NGP

Split por caractere + entrada em cascata

Draggable (físico)

createDraggable ⚠︎

arraste-me

Momentum com mola — evite no board (dnd-kit)

📄 LoadingLogo.tsx — uso real em React / Next

// npm i animejs — importa só o que usa (tree-shakeable)
import { animate, svg } from 'animejs'
import { useEffect } from 'react'

export function LoadingLogo() {
  useEffect(() => {
    const [h] = svg.createDrawable('.h')
    const anim = animate(h, {
      draw: ['0 0', '0 1'], duration: 1200,
      ease: 'inOutQuad', loop: true,
    })
    return () => anim.revert()   // cleanup no unmount
  }, [])
  return <svg><path className="h" d="M44 38..." /></svg>
}

Qual engine de animação usar quando — as 5 comparadas

Lib	Escopo	Paradigma	Bundle gz	Curva	Licença	Melhor pra
anime.js (já temos)	Agnóstico	Timeline/tween leve	~9 kb	Baixa	MIT	Animação leve e direta — o que já roda no Space
GSAP	Agnóstico	Timeline imperativa + ScrollTrigger/SplitText	~23–27 kb +plugins	Média-alta	Grátis total (incl. plugins)	Scroll-telling, morph SVG, sequência complexa, hero cinematográfico
Motion (ex-Framer)	React/JS/Vue	Spring + layout animations declarativo	~4.6–34 kb	Média	MIT	UI React declarativa, gestos, AnimatePresence
React Spring	React-only	Física de mola	~26 kb	Média	MIT	Spring natural em React; casa com react-three-fiber (3D)
React Bits	React-only	Não é engine — roda sobre GSAP/Motion/Spring/Three	por componente	Baixa	MIT+Commons	Efeitos prontos de texto/background em React

Recomendação: você já tem anime.js. Se precisar de animação séria (scroll-telling, SplitText, morph), o upgrade natural é GSAP — agnóstico (cola no CSS Modules), agora 100% grátis com plugins, e substitui o anime.js num motor só. Não empilhe Motion nem React Spring sobre o anime.js: seriam um 2º motor redundante. Regra: físico/spring → Motion/Spring · timeline/sequência → GSAP · leve → anime.js.

GSAPanimação · engine 100% grátis · incl. plugins site principal ↗

Veredito

O upgrade natural do anime.js — e o que menos atrita com o Space. Agnóstico (drop-in no CSS Modules), e desde abr/2025 (Webflow) ficou 100% grátis com TODOS os plugins (ScrollTrigger, SplitText, MorphSVG). Substitui o anime.js num motor só quando a animação escalar. A mais poderosa das cinco.

O que faz

Timelines precisas, ScrollTrigger, SplitText, MorphSVG, DrawSVG, ScrollSmoother — animação complexa e sequenciada.

Como faz

Vanilla JS agnóstico (React, Vue, HTML puro). Wrapper @gsap/react (useGSAP). Plugins tree-shakeable via gsap.registerPlugin().

Por que / pra que faz

Quando a animação passa do "polir" pro "narrar": scroll-telling, hero cinematográfico, morph de SVG, timelines longas com controle fino.

Como serve (como se usa)

npm i gsap, registra os plugins que usar. Versão atual 3.15.

O que ajuda (prós)

Agnóstico → cola no CSS Modules sem fricção.
Grátis total, plugins antes pagos agora livres.
O mais poderoso pra sequência/scroll/SVG.

O que atrapalha (contras)

Core ~23–27 kb + peso por plugin.
API imperativa (curva maior em React que Motion/Spring).
Redundante com anime.js — escolher um.

Aplicar ou não — onde sim, onde não

✓

Aplicar em: scroll-telling, morph SVG, sequência complexa — e como substituto do anime.js quando escalar.

Não aplicar em: somar por cima do anime.js (dois motores). Escolher GSAP OU anime.js, não os dois.

Onde pesquisar

gsap.com/docs/v3 — buscar: ScrollTrigger SplitText timeline useGSAP

Motionanimação · engine MIT · Motion+ pago site principal ↗

Veredito

Drop-in técnico, mas sobrepõe o anime.js. Ex-Framer Motion. Roda em React sem Tailwind, então cola — porém adotar é trocar de motor, não somar. Só se você migrar de propósito pra animação declarativa em React (aí aposenta o anime.js).

O que faz

Animação production-grade: springs, gestos, layout animations, scroll, orquestração.

Como faz

React/JS/Vue, declarativo. Import motion/react (antigo framer-motion).

Por que / pra que faz

UI React onde animação é declarativa: <motion.div>, AnimatePresence, gestos, transição de layout automática.

Como serve (como se usa)

npm i motion. LazyMotion baixa sob demanda (~4.6 kb) com setup extra.

O que ajuda (prós)

Layout animations e AnimatePresence — difíceis à mão.
Declarativo casa com React.

O que atrapalha (contras)

<motion> cheio ~34 kb.
Compete com anime.js E React Spring — não ter os três.

Aplicar ou não — onde sim, onde não

✓

Aplicar em: projeto React novo com animação declarativa/layout como base (sem anime.js).

Não aplicar em: adicionar ao Space por cima do anime.js — vira 2º motor.

Onde pesquisar

motion.dev/docs

React Springanimação · spring MIT site principal ↗

Veredito

Redundante com o anime.js pro nosso caso. React-only, só física de mola (sem timeline rica). Só valeria pra animação spring-heavy ou 3D — casa bem com react-three-fiber. Fora disso, não adiciona nada que já não tenhamos.

O que faz

Animações por física de mola (useSpring, componentes animated).

Como faz

React-only, via hooks. Pacote @react-spring/web (v10.1.2).

Por que / pra que faz

Movimento físico-natural em React — listas, transições, drag com inércia.

Como serve (como se usa)

npm i @react-spring/web

O que ajuda (prós)

Spring natural e fluido.
Ecossistema pmndrs — casa com 3D (react-three-fiber).

O que atrapalha (contras)

Só spring — sem timeline/keyframes rica.
~26 kb; compete com anime.js e Motion.

Aplicar ou não — onde sim, onde não

✓

Aplicar em: projeto React com foco em spring físico ou cena 3D (react-three-fiber).

Não aplicar em: o Space — redundante com o anime.js que já está lá.

Onde pesquisar

react-spring.dev/docs

React Bitsanimação · componentes React MIT+Commons · Pro pago site principal ↗

Veredito

A única fonte de "componentes" desta leva aproveitável no Space. Tem variante CSS (não-Tailwind). Mas não é engine: cada componente puxa GSAP/Motion/Spring/Three por baixo — padronizar numa engine só pra não meter três motores no bundle.

O que faz

140+ componentes React animados: texto que monta (SplitText), backgrounds reativos, efeitos de UI.

Como faz

React-only; motor plugável (GSAP/Motion/Spring/Three conforme o componente). Duas versões por componente: JS/TS e CSS/Tailwind.

Por que / pra que faz

Pegar efeito de destaque pronto (hero animado, texto montando, fundo reativo) sem codar do zero.

Como serve (como se usa)

CLI jsrepo/shadcn ou copy-paste. No Space: escolher a variante CSS, não a Tailwind.

O que ajuda (prós)

Variante CSS → dá pra usar no CSS Modules.
Você fica dono do código; customizável.

O que atrapalha (contras)

Cada componente pode arrastar uma engine diferente.
Misturar vários = GSAP+Motion+Spring no bundle.
Commons Clause: não pode revender a lib.

Aplicar ou não — onde sim, onde não

✓

Aplicar em: efeito de texto/hero em React, na variante CSS, padronizando numa engine única.

Não aplicar em: pegar vários componentes de engines diferentes — enche o bundle de motores.

Onde pesquisar

reactbits.dev

Componentes UI

As fontes abaixo são Tailwind-first (Kokonut soma shadcn). O NGP Space é CSS Modules, sem Tailwind — então nenhuma cola como código pronto aqui. Valem como referência visual; usar o código exigiria adotar Tailwind (mudança de stack → ADR) ou reescrever à mão. Em projeto novo da Amplasoft que já use Tailwind/shadcn, aí sim colam direto.

Efferd componentes UI freemium site principal ↗

Veredito

Ouro como referência e prompt — não como código no Space. Os dashboards são shadcn/Tailwind lindos pra roubar layout e gerar via "Copy Prompt". Mas o Space é CSS Modules (sem Tailwind): o código não é drop-in aqui. Vale a inspiração + o prompt; em projeto novo da Amplasoft que aceite shadcn, aí cola direto.

O que faz

Coleção de blocos de dashboard prontos (analytics, e-commerce, finanças, suporte, observability) com charts, tabelas, KPI cards e métricas.

Como faz

Componentes React sobre shadcn/ui (Radix + Tailwind + Lucide). Cada bloco tem preview, botão de copiar código e botão Copy Prompt pra recriar via IA.

Por que / pra que faz

Acelerar tela de dashboard sem começar do zero — e roubar hierarquia de KPI, disposição de cards e gráficos que já funcionam visualmente.

Como serve (como se usa)

Preview → copiar código (se o projeto for shadcn) ou copiar prompt (pra IA gerar no seu stack). 5 dashboards grátis, 5 no Pro.

O que ajuda (prós)

Layouts production-ready de casos reais (finanças, analytics) que batem com cockpit/relatórios.
"Copy Prompt" — reaproveita o design mesmo fora do stack shadcn.

O que atrapalha (contras)

Stack = Tailwind/shadcn ≠ CSS Modules do Space → colar código traria Tailwind junto.
Só 5 grátis; resto no Pro.

Aplicar ou não — onde sim, onde não

✓

Aplicar em: referência visual e "Copy Prompt" pro cockpit/relatórios do Space; código direto em projeto Amplasoft que já use shadcn.

Não aplicar em: colar o código dentro do Space (arrastaria Tailwind pra um projeto CSS Modules).

Onde pesquisar

efferd.com/blocks/dashboard — preview + código + prompt de cada bloco.

Hover.devcomponentes UI freemium site principal ↗

Veredito

Referência de micro-interação, não código. Componentes animados lindos (grids, cards, kanban) — mas React + Tailwind + Framer Motion. Não cola no Space, e o kanban dele compete com o @dnd-kit. Vale pra roubar a ideia da animação.

O que faz

Componentes com micro-interação e animação: grids, cards, botões, kanban, carrosséis, seções de landing.

Como faz

React + Tailwind + Framer Motion/Motion. Copy-paste ("Get the code"), não é npm.

Por que / pra que faz

Landing pages e seções de marketing chamativas prontas.

Como serve (como se usa)

Copiar o código do componente. Parte grátis, resto no "Go Pro".

O que ajuda (prós)

Animações bem-feitas de referência.
Pronto pra quem já usa Tailwind + Framer.

O que atrapalha (contras)

Arrasta Tailwind + Framer Motion.
Não drop-in no Space; kanban compete com @dnd-kit.

Aplicar ou não

✓

Aplicar em: referência visual da animação; código direto só em projeto Tailwind+Framer.

Não aplicar em: colar no Space (CSS Modules).

Onde pesquisar

hover.dev/components/grids

Preline UIcomponentes UI open source + Pro site principal ↗

Veredito

Biblioteca gigante, mas 100% Tailwind → não drop-in. 1.500+ componentes e 940+ blocks. No Space serve como referência; o markup vem cheio de classes utilitárias que só fazem sentido com Tailwind.

O que faz

1.500+ componentes/exemplos, 940+ blocks, 21 templates, design system Figma.

Como faz

HTML/JS/TS + Tailwind. Plugin pra elementos headless (dropdown, modal). Guias React/Vue/Next/Laravel/Django.

Por que / pra que faz

Cobertura ampla de componentes pra dashboards e apps admin em Tailwind.

Como serve (como se usa)

npm i preline (JS de comportamento) + copy-paste do markup Tailwind.

O que ajuda (prós)

Volume enorme; núcleo grátis.
JS de comportamento leve.

O que atrapalha (contras)

100% dependente de Tailwind.
Blocks/templates premium são pagos.

Aplicar ou não

✓

Aplicar em: projeto Tailwind; referência de padrão de componente.

Não aplicar em: o Space (CSS Modules).

Onde pesquisar

preline.co

Kokonut UIcomponentes UI open source + Pro site principal ↗

Veredito

Bonito e animado, mas presume shadcn + Tailwind + Motion. 100+ componentes via registry shadcn. No Space não cola e ainda puxaria o Motion (que competiria com o anime.js). Referência.

O que faz

100+ componentes modernos e animados pra sites e apps.

Como faz

React + Next + Tailwind + shadcn/ui + Motion. Reconhecido pelo OSS da Vercel.

Por que / pra que faz

Componentes com acabamento e animação prontos pra stack shadcn.

Como serve (como se usa)

npx shadcn@latest add @kokonutui/<name> — você fica dono do código.

O que ajuda (prós)

Acabamento alto; você é dono do código.
Base grátis; Pro soma 70+.

O que atrapalha (contras)

Presume shadcn + Tailwind + Motion instalados.
Fora desse trio, não roda sem reescrita; Motion competiria com anime.js.

Aplicar ou não

✓

Aplicar em: projeto Next que já use shadcn + Tailwind.

Não aplicar em: o Space; e evita puxar Motion junto do anime.js.

Onde pesquisar

kokonutui.com

Pagedonecomponentes UI open source + Pro site principal ↗

Veredito

Design system Tailwind pra prototipar página inteira rápido. 300+ componentes, 1.100+ blocks. "Framework-agnóstico" = agnóstico de JS-framework, não de CSS: Tailwind é obrigatório. No Space, referência.

O que faz

300+ componentes, 1.100+ blocks, 15+ templates, 12.000+ recursos (ícones, cores).

Como faz

Tailwind v4.1, agnóstico de JS-framework (React, Vue, Angular, HTML). Copy-paste puro (sem npm).

Por que / pra que faz

Prototipar páginas inteiras rápido em qualquer stack com Tailwind.

Como serve (como se usa)

Copy-paste. 310+ grátis; lib cheia em planos pagos (acesso vitalício).

O que ajuda (prós)

Muita coisa grátis; página inteira montável.
Uso comercial permitido.

O que atrapalha (contras)

Tailwind obrigatório.
Proíbe repackage/revenda como tema/builder.

Aplicar ou não

✓

Aplicar em: prototipagem rápida em projeto Tailwind.

Não aplicar em: o Space (CSS Modules).

Onde pesquisar

pagedone.io

Spell UI componentes UI · React + Tailwind MIT · grátis site principal ↗

Veredito

Cola direto só em projeto Amplasoft com Tailwind + shadcn. No Space, é referência de motion, não código. É registry shadcn (Tailwind + Motion): no Space (CSS Modules, anime.js) o componente entra com um motor de animação a mais e uma stack de CSS a mais. A ideia visual (light rays, text reveal, tilt card) vale copiar reimplementando com anime.js.

O que faz

Coleção de ~30 componentes React com foco em motion e micro-interação: text reveal, animated gradient, light rays, tilt card, marquee, pop button, signature, perspective book. Copy-paste em qualquer projeto React.

Como faz

React + Tailwind CSS, publicado como registry shadcn (instala pela CLI do shadcn, o código-fonte cai no seu projeto). Componentes animados usam Motion (framer-motion). Autor: Tom (@tomm_ui / xxtomm), open-source MIT, 1.2k+ estrelas, ativo em 2026.

Por que / pra que faz

Preencher o vão que shadcn/ui deixa: componentes "de efeito" (hero, landing, cartão de destaque) prontos, sem construir animação do zero.

Como serve (como se usa)

npx shadcn add apontando pro registry do spell.sh, ou copiar o código da doc. Tem servidor MCP (seção /docs/mcp) pra agente de IA puxar componente direto. Também existe port pra SvelteKit (spelte, de terceiro).

O que ajuda (prós)

MIT, grátis, código vira seu (não é dependência preta).
Efeitos de qualidade que dão "cara premium" em LP em minutos.
MCP + registry: bom pra fluxo VibeCoding da Amplasoft.

O que atrapalha (contras)

Exige Tailwind + shadcn: no Space não é drop-in (mudança de stack = ADR).
Traz Motion: não empilhar com anime.js no mesmo projeto.
Projeto de uma pessoa: manutenção depende do autor.
Componente de efeito pesa bundle; usar com parcimônia em app, não só em LP.

Aplicar ou não — onde sim, onde não

✓

Aplicar em: sites/LPs Amplasoft já em Next + Tailwind + shadcn (hero, seção de destaque, prova social animada).

Não aplicar em: NGP Space (CSS Modules + anime.js) e qualquer projeto que já tenha outro motor de animação.

Onde pesquisar

spell.sh/docs · github.com/xxtomm/spell-ui · buscar na doc: "MCP", "Installation", nome do componente (Light Rays, Text Reveal, Tilt Card).

Tipografia / Fontes

Fontjoy tipografia grátis site principal ↗

Veredito

Usar pra DECIDIR a dupla de fontes, não pra implementar. Resolve o "que fonte combina com essa" em segundos. A implementação segue a regra do projeto: next/font no Space, @font-face data-URI em artifact (o CSP bloqueia CDN de fonte).

O que faz

Gera pares de fontes que combinam — uma pra título, outra pra corpo.

Como faz

Uma rede neural treinada pra achar contraste/harmonia entre tipos. Fonte-base: Google Fonts. Controles: Generate / Lock / Edit.

Por que / pra que faz

Pra quem não é designer tipográfico acertar o pareamento sem chute — o gargalo real de escolher fonte pra site, LP ou deck.

Como serve (como se usa)

Clica Generate até gostar, Lock na que quer manter enquanto troca a outra, Edit pra escolher manual. Anota os nomes.

O que ajuda (prós)

Tira o chute do pareamento.
Base Google Fonts: grátis e fácil de servir (next/font).

O que atrapalha (contras)

Só Google Fonts — sem fontes premium/foundry.
É sugestão de IA: precisa de olho humano pra fechar.

Aplicar ou não — onde sim, onde não

✓

Aplicar em: escolher a dupla de fontes de qualquer site, LP ou apresentação.

Cuidado: não é implementação — no Space use next/font; em artifact, inline via data-URI (CSP).

Onde pesquisar

fontjoy.com · depois buscar os nomes em fonts.google.com.

Ícones (3D)

Thiings ícones 3D grátis · PNG site principal ↗

Veredito

Ilustração 3D pontual, com a licença conferida antes. 10.000+ objetos 3D com estilo consistente — ótimo pra empty state, hero e marketing. Mas é PNG (raster), não vetor, e a licença comercial da coleção é paga: conferir os termos antes de usar em produto que cobra.

O que faz

Biblioteca de 10.000+ ícones/objetos 3D gerados por IA, estilo "coisinha" renderizada.

Como faz

Ícones AI-generated, agrupados por tema (tecnologia, natureza, formas…). Download em PNG com fundo transparente. Feito por Charlie Clark.

Por que / pra que faz

Ilustrar sem ilustrador — dar cara 3D moderna a empty states, onboarding, hero e peças de marketing.

Como serve (como se usa)

Navega por tema, baixa o PNG. Individual grátis pra uso pessoal; licença comercial vitalícia pra usar a coleção.

O que ajuda (prós)

Volume enorme e estilo coeso.
PNG transparente, download rápido.

O que atrapalha (contras)

Raster (PNG) — não escala como vetor/SVG.
Estilo 3D pode brigar com UI flat/clean.
Licença comercial da coleção é paga; proíbe revender como pacote.

Aplicar ou não — onde sim, onde não

✓

Aplicar em: ilustração pontual — marketing, empty state, deck, onboarding.

Não aplicar em: onde precisa de vetor escalável (ícone de UI); e sem conferir a licença em produto pago.

Onde pesquisar

thiings.co/things · termos em thiings.co/terms.

Imagens / Fotos IA

Lummi imagens IA freemium site principal ↗

Veredito

Stock de IA sem custo e sem atribuição — pra onde foto real não é essencial. 16.000+ imagens comerciais royalty-free. Cuidado onde o cliente espera pessoa/produto real: imagem de IA às vezes entrega "cara de IA".

O que faz

Banco de 16.000+ imagens, ilustrações e 3D gerados por IA, royalty-free.

Como faz

Curadoria de artistas de IA; busca + ajuste de brilho/saturação/contraste antes de baixar. Tem integração nativa com Figma.

Por que / pra que faz

Imagem de stock sem o clichê de banco de imagem e sem custo/atribuição — pra site, blog, social, deck.

Como serve (como se usa)

Busca, ajusta, baixa. Grátis, comercial, sem atribuição; plano Pro desbloqueia extras.

O que ajuda (prós)

Comercial sem atribuição.
Ajuste de imagem embutido + Figma nativo.

O que atrapalha (contras)

Pode ter "cara de IA"/pequenos erros.
Parte do acervo atrás do Pro.
Consistência de estilo entre várias imagens exige curadoria.

Aplicar ou não — onde sim, onde não

✓

Aplicar em: hero, blog, social e deck onde foto real não é obrigatória.

Não aplicar em: onde se espera pessoa/produto real (cliente pode estranhar IA).

Onde pesquisar

lummi.ai

Inspiração / Referência de design

Refero Styles DESIGN.md para agentes de IA grátis em beta · MCP no Refero pago site principal ↗

Veredito

Adotar como passo zero de todo projeto novo com IA: escolher um estilo, colar o DESIGN.md na raiz e só depois pedir a primeira tela. É a fonte mais alinhada ao fluxo VibeCoding da Amplasoft e ao Claude Code. Não é código nem lib: é o "gosto" do agente em Markdown. No Space vale só como referência de tokens (cor, tipo, espaçamento), traduzida pra CSS Modules.

O que faz

Biblioteca de 2.000+ sistemas de design extraídos de sites de produtos reais e empacotados como DESIGN.md: cores, tipografia, escala de espaçamento, motion e padrões de componente, legíveis por agente de IA.

Como faz

Busca por marca, mood, cor, tipografia ou URL. Cada estilo tem screenshots do produto original + o DESIGN.md pronto pra Cursor, Claude Code, Codex, v0, Lovable. Feito pela Refero (biblioteca de pesquisa de UI paga). Servidor MCP em refero.design/mcp deixa o agente buscar estilos, telas e fluxos sozinho.

Por que / pra que faz

Resolver o "UI genérica de IA": em vez de descrever o visual em prompt vago, o agente recebe um sistema de design real, com números, e gera telas coerentes com ele.

Como serve (como se usa)

Navega, copia o DESIGN.md (grátis, sem cadastro na beta) e salva na raiz do projeto (ou em CLAUDE.md/regras do Cursor). Alternativa: conectar o MCP do Refero e pedir "use o estilo X". MCP de terceiro no mcpservers.org: não confirmado se oficial.

O que ajuda (prós)

Grátis (beta) e sem lock-in: é Markdown.
Encaixa no fluxo que já uso (DESIGN.md + Impeccable + Claude Code).
Dá base real (produto no ar) pra briefing de cliente: "quero algo como a marca X".

O que atrapalha (contras)

Preço pós-beta e licença de uso do DESIGN.md: não confirmados.
É extração automática: tokens podem vir imprecisos; conferir antes de virar design system de cliente.
Copiar estilo de marca conhecida de forma literal pode gerar site "clone"; usar como ponto de partida, não como resultado.
MCP completo depende do plano pago do Refero.

Aplicar ou não — onde sim, onde não

✓

Aplicar em: todo projeto Amplasoft do zero (site, LP, SaaS) e no kickoff de design do Fala App: DESIGN.md antes da primeira tela.

Não aplicar em: NGP Space como "cola e roda" (já tem identidade e CSS Modules); ali só serve de referência pontual de token.

Onde pesquisar

styles.refero.design · /ai-agents/design-md-examples · /ai-agents/design-prompts · buscar: "MCP", "DESIGN.md", nome da marca ou mood (ex.: "dashboard", "fintech", "dark").

Inspora inspiração visual · arquivo curado grátis · sem cadastro site principal ↗

Veredito

Moodboard de bolso pra briefing e pra "descolar" do padrão IA: usar antes de desenhar, nunca como asset. É galeria de trabalho alheio, sem código e sem licença de uso: serve pra apontar direção (com print) no kickoff de site/LP e pra alimentar o Impeccable com referência concreta. Nada dali entra em projeto.

O que faz

Arquivo curado à mão de trabalhos visuais recentes, atualizado de hora em hora, em 7 categorias: Web, Branding, Product, Motion, Illustration, 3D e Print.

Como faz

Galeria de imagens (WebP) com post individual por projeto e link pra fonte original. Sem cadastro; newsletter opcional. Curadoria de um criador independente (@neropursue no X). Não confirmado: quantos itens, critério de seleção.

Por que / pra que faz

Substituir a rolagem infinita de Dribbble/Behance por uma seleção pequena e recente do que está bom agora.

Como serve (como se usa)

Abrir, filtrar a categoria, salvar prints/links das 3-5 referências que definem a direção do projeto. Levar os prints pro briefing com o cliente e pro prompt de design (Impeccable / DESIGN.md).

O que ajuda (prós)

Grátis, rápido, sem ruído de ranking social.
Cobre branding, motion e print, não só UI.
Link pra fonte original: dá pra creditar e aprofundar.

O que atrapalha (contras)

Zero código, zero token: não acelera implementação, só decisão.
Imagens são de terceiros: não usar como asset nem copiar layout literal.
Depende de um curador só; pode parar de atualizar sem aviso.
Sem busca por texto visível: descoberta é por rolagem e categoria.

Aplicar ou não — onde sim, onde não

✓

Aplicar em: kickoff de site/LP/branding (NGP e Amplasoft), moodboard pra cliente, referência de motion pra hero e deck.

Não aplicar em: como fonte de imagem/ícone pra produto, ou como "modelo pra clonar" de layout.

Onde pesquisar

inspora.design · ?category=Web · ?category=Motion · ?category=Branding

Modelo de cada nova fonte

Toda referência que você mandar (só o link já basta) entra numa seção como a de cima, na categoria certa, respondendo:

O que faz

Como faz

Por que / pra que faz

Como serve (como se usa)

O que ajuda (prós)

O que atrapalha (contras)

Aplicar ou não — onde sim / onde não

Link principal + onde pesquisar

Quando for JS embutível, adiciono demo ao vivo. Fonte visual (logos, componentes, inspiração) entra com preview/print e link. Pode mandar as próximas quando quiser.

Tudo que serve de referência pra um projeto, num lugar só — e crescendo.

Stagger em grade

Desenho de SVG (loading)

Timeline sequenciada

Contador numérico

Texto revelando

Grupo NGP

Draggable (físico)

Modelo de cada nova fonte