Sou SayNoob_TYT, responsável pelo m3 kit, um starter demonstrativo independente para explorar Material 3 na web e no Android. O código completo está disponível sob licença MIT. Este post foi preparado e publicado com um assistente de IA, com minha autorização.
A ideia é oferecer uma base concreta para estudar cores, temas e interações antes de adaptar a interface ao seu próprio produto. Não é uma biblioteca oficial da Google nem um sistema completo com backend.
Experimente antes de instalar
A demo web permite testar tema claro/escuro, laboratório de cores e a galeria de interações. A galeria usa dados fictícios: serve para observar o comportamento da interface, não para gerenciar um negócio.
Um detalhe da versão 1.0.1 é a seleção conectada: dentro de um grupo de botões, o fundo colorido se desloca até a opção selecionada. Há também ripple no ponto de interação. No Android, o exemplo fica em Explorar → Seleção conectada.
Rodando a versão web
Depois de clonar o repositório, use Node 20.19+ ou 22.12+ e npm:
git clone https://github.com/in3zalo-gk/material-you-starter-kit.git
cd material-you-starter-kit/web
npm ci
npm run dev
Comece pelo exemplo mínimo em /examples/minimal.html, servido pelo ambiente local. Evite abrir os arquivos de desenvolvimento diretamente por file://. Para gerar os arquivos de hospedagem estática, execute npm run build; o resultado fica em web/dist/.
Personalizando as cores
O laboratório web usa Material Color Utilities e permite exportar tokens CSS. Um caminho prático é escolher uma paleta, exportar os tokens e revisar os componentes nos dois temas antes de adicionar telas. Também há extração de cores de imagem processada localmente e idiomas pt/en/es.
A interface web usa CSS próprio. A versão Android é uma implementação separada com Compose Material 3, não o mesmo código renderizado nas duas plataformas.
Experimentando no Android
Abra a pasta android/ no Android Studio. O ambiente documentado usa JDK 17, SDK 36 e Gradle 8.13. Com essas ferramentas configuradas, o comando é:
gradle -p android assembleDebug lintDebug
Há tema sistema/claro/escuro, Dynamic Color e um exemplo mínimo separado em android/example. Os APKs da release são demonstrações assinadas com chave debug, não builds de produção para a Play Store.
Usando como contexto para um assistente de código
Você pode fornecer o README e um exemplo mínimo à sua ferramenta de IA e pedir uma mudança pequena de cada vez. Por exemplo: adaptar uma tela preservando os tokens de cor e os estados de foco, depois revisar o resultado no navegador. Isso é uma forma de trabalhar com o código, não uma integração de IA embutida no kit. Revise o diff e teste as alterações antes de incorporar ao seu projeto.
Onde ele se encaixa e onde não
É uma base para protótipos e estudo de temas e interações, com exemplos web e Android disponíveis para modificar. A licença MIT também permite uso comercial, respeitando seus termos. Não existe uma edição paga escondendo o código completo.
Por outro lado, o starter não cobre todo o catálogo Material 3 e não inclui login, pagamentos ou serviços remotos. Algumas APIs Android exigem opt-in experimental. Testes automatizados não substituem avaliação de acessibilidade com seu conteúdo, TalkBack e dispositivos reais.
Código, documentação e instruções: github.com/in3zalo-gk/material-you-starter-kit.
Se você experimentar, feedback sobre os exemplos mínimos e a clareza das instruções é especialmente útil. Qual parte costuma dar mais trabalho ao começar uma interface Material 3: cores, temas ou comportamento dos componentes?
Top comments (0)