Voltar

Clinia

Como reduzir inconsistências e erros na plataforma Clinia e acelerar o design com IA?

  • Product Design
  • Design System
  • Frontend
Capa do projeto Clinia Plataforma

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

  1. 01

    Entendimento das dores, gargalos e motivos para criar uma versão 2.0 mesmo com uma plataforma já existente.

  2. 02

    Auditoria da experiência atual para mapear inconsistências, ausência de fundações e pontos que dificultavam escala.

  3. 03

    Adaptação da linha visual desejada pela empresa para uma estrutura de design system no Figma baseada em shadcn.

  4. 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

Copyright Eduardo Amaral © 2026