Magic DS
O Magic Design System foi criado para unificar a linguagem visual dos produtos da Spotlar e estabelecer uma base compartilhada entre Design e Engenharia. Mais do que padronizar interfaces, o projeto preparou o ecossistema para um novo fluxo de desenvolvimento assistido por IA, acelerando a construção de funcionalidades sem abrir mão da consistência.
- Ano
- 2026
- Indústria
- Proptech
- Empresa
- Spotlar
- Plataforma
- Web
Uma base para produtos em evolução
Com a evolução dos produtos da Spotlar, diferentes padrões visuais e comportamentais começaram a surgir entre as aplicações, aumentando o esforço de manutenção e reduzindo a velocidade de desenvolvimento.
Utilizamos a biblioteca Devias (Material UI) como ponto de partida, adaptando seus componentes à identidade da Spotlar e estruturando um Design System próprio. O objetivo era criar uma única fonte de verdade para Design e Engenharia, garantindo consistência visual e servindo como referência para ferramentas de IA durante a geração de interfaces.
Inter
Inter é uma família de fontes variáveis cuidadosamente elaborada e projetada para telas de computador. A fonte Inter apresenta uma altura-x elevada para facilitar a legibilidade de textos com letras maiúsculas e minúsculas.
Construindo uma base para evolução
- Adaptar a biblioteca Devias à identidade visual da Spotlar.
- Estruturar componentes reutilizáveis e escaláveis.
- Padronizar a comunicação entre Design e Engenharia.
- Criar uma base confiável para desenvolvimento assistido por IA.
- Garantir consistência entre diferentes produtos da plataforma.
Design, código e IA conectados
O Magic Design System foi implementado inicialmente no SpotApp, tornando-se a base para a evolução do produto.
Com os componentes documentados em Storybook e integrados ao repositório, consegui conectar os protótipos desenvolvidos no Figma ao Claude Code, gerando interfaces em front-end altamente fiéis ao Design System.
Esse fluxo acelerou validações com usuários, reduziu retrabalho e permitiu que a Engenharia concentrasse esforços na revisão do código e na integração com o backend.
