Eduardo Amaral
← Voltar para projetos

Clinia

Plataforma 2.0, design system e fluxo design-to-code com IA.

Função: Product Design, Design System e Frontend
Status: Projeto em andamento

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.

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.

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.

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