[Voltar](https://eduardoamaral.me/projetos/) Clinia # Como reduzir inconsistências e erros na plataforma Clinia e acelerar o design com IA? - Product Design - Design System - Frontend Desafio ## A versão 2.0 começou pelo entendimento do problema. Entrei na Clinia para construir a versão 2.0 da plataforma. Antes de propor telas ou componentes, mapeei as dores, os gargalos e os motivos para reconstruir um produto existente. A nova Clinia nasce com uma tecnologia mais moderna, próxima do que startups maduras usam para escalar produto. A versão anterior tinha uma experiência visual menos alinhada ao momento atual da empresa e uma estrutura que dificultava evolução. A empresa também não tinha um design system estruturado. Por isso, o trabalho começou com auditoria do projeto, leitura do cenário e organização das fundações que permitiriam criar uma base mais consistente. Antes ## Interfaces antes da reconstrução. Tela de inbox da versão anterior da Clinia. Essa base ajudou a mapear gargalos, limitações de escala e oportunidades para a nova plataforma. Tela de configurações da versão anterior, usada na auditoria para entender densidade, organização de preferências e padrões de navegação. Tela de login da versão anterior, útil para entender a linguagem visual original, hierarquia de marca e padrões de entrada na plataforma. Como resolvemos ## shadcn como ponte entre identidade, Figma e frontend. Quando entrei, já existia uma linha visual que a empresa queria seguir e algumas referências de frameworks de frontend para acelerar a construção. A decisão foi seguir com shadcn como base de componentes. A partir disso, adaptei a estrutura do Figma para respeitar a identidade visual da Clinia e, ao mesmo tempo, manter proximidade com a implementação real. O objetivo era evitar um design system bonito no Figma, mas distante do código. Base de componentes open source usada como ponto de partida para o design system da Clinia, adaptada à identidade visual da marca. shadcn customizado ## Componentes e tokens adaptados para a Clinia. shadcn customizado para a identidade da Clinia, com variantes, estados e propriedades organizadas para uso em produto. Estrutura de componentes no Figma com páginas e propriedades preparadas para escalar o design system da plataforma. Coleções de variáveis com modos light e dark, conectando Tailwind, tema, customizações e motion ao design system. Prototipação real ## Claude, Cursor e MCP do Figma no fluxo. Uso do Claude, Cursor e MCP do Figma para criar protótipos reais e sincronizados com as interfaces do Figma. Usamos Claude, Cursor e MCP do Figma para criar protótipos reais sincronizados com as interfaces do Figma. O objetivo é reduzir a distância entre decisão de design, validação de fluxo e implementação. Processo - 01 Entendimento das dores, gargalos e motivos para criar uma versão 2.0 mesmo com uma plataforma já existente. - 02 Auditoria da experiência atual para mapear inconsistências, ausência de fundações e pontos que dificultavam escala. - 03 Adaptação da linha visual desejada pela empresa para uma estrutura de design system no Figma baseada em shadcn. - 04 Construção dos componentes equivalentes em código com Cursor, criando uma ponte prática entre design e frontend. Workflow ## Designers também entregam código. ### Diagnóstico Antes de redesenhar, o foco foi entender por que a nova versão precisava existir e quais gargalos impediam evolução. ### Design System A identidade visual desejada foi organizada em fundações e componentes reutilizáveis dentro do Figma. ### shadcn como base A estrutura foi adaptada para conversar com uma stack moderna e com padrões de frontend usados por startups. ### Cursor e Claude O design system também foi implementado em código, usando IA no fluxo diário de designers e desenvolvedores. ### Repositório frontend Criamos um repositório separado para alimentar componentes continuamente e reduzir distância entre design e produto. ### Próximos passos A evolução natural é começar a contribuir diretamente no repositório oficial de frontend da plataforma. IA no processo ## Figma, Cursor e Claude sincronizados no dia a dia. Um ponto diferencial da Clinia é que designers usam Cursor e Claude como ferramentas de trabalho. Depois de sincronizar Figma e código, criamos um repositório de frontend separado que é alimentado continuamente com componentes e padrões. Com esse fluxo, desenvolvedores conseguem usar ferramentas de IA para consumir o design do Figma e implementar com mais velocidade. A entrega deixa de ser apenas interface estática e passa a incluir código, intenção e estrutura reutilizável. Paralelamente a essa base, também estamos trabalhando no novo onboarding, nas áreas de estatísticas, CRM e em outras evoluções da plataforma, além da página de Pricing no site. Solução Figma e código passaram a falar a mesma língua, com componentes mais próximos da implementação real. Designers passaram a entregar telas, componentes e código em um repositório dedicado. Devs conseguem consumir o design do Figma e acelerar implementação com apoio de ferramentas de IA. A próxima etapa é aproximar esse fluxo do repositório oficial de frontend da plataforma. Próximo Case [Talqui Plataforma de atendimento com IA, redesign e design system](https://eduardoamaral.me/projetos/talqui/) Source: https://eduardoamaral.me/projetos/clinia/ Language: pt-BR