Clinia # Platform 2.0, design system and AI-powered design-to-code workflow. - Product Design - Design System - Frontend Challenge ## Version 2.0 started with understanding the problem. I joined Clinia to help build platform 2.0. Before proposing screens or components, I mapped the pain points, bottlenecks, and reasons for rebuilding an existing product. The new Clinia is built on more modern technology, closer to what mature startups use to scale their products. The previous version had a visual experience less aligned with the company's current moment and a structure that made evolution difficult. The company also didn't have a structured design system. So the work started with a project audit, reading the landscape, and organizing the foundations that would allow creating a more consistent base. Before ## Interfaces before the rebuild. Inbox screen from the previous version of Clinia. This foundation helped map bottlenecks, scaling limitations, and opportunities for the new platform. Settings screen from the previous version, used in the audit to understand density, preferences organization, and navigation patterns. Login screen from the previous version, useful for understanding the original visual language, brand hierarchy, and platform entry patterns. How we solved it ## shadcn as the bridge between identity, Figma, and frontend. When I joined, there was already a visual direction the company wanted to follow and some references to frontend frameworks to accelerate development. The decision was to go with shadcn as the component base. From there, I adapted the Figma structure to respect Clinia's visual identity while maintaining proximity to the real implementation. The goal was to avoid a design system that looked great in Figma but was far from the code. Open source component base used as the starting point for Clinia's design system, adapted to the brand's visual identity. Custom shadcn ## Components and tokens adapted for Clinia. Customized shadcn adapted to Clinia's identity, with variants, states, and organized properties for use in product. Component structure in Figma with pages and properties prepared to scale the platform's design system. Variable collections with light and dark modes, connecting Tailwind, theme, customizations, and motion to the design system. Real prototyping ## Claude, Cursor and Figma MCP in the flow. Using Claude, Cursor and Figma MCP to create real prototypes synchronized with Figma interfaces. We use Claude, Cursor and Figma MCP to create real prototypes synchronized with Figma interfaces. The goal is to reduce the gap between design decisions, flow validation and implementation. Process - 01 Understanding the pain points and reasons for building a 2.0 even with an existing platform. - 02 Audit of the current experience to map inconsistencies, missing foundations, and bottlenecks blocking scale. - 03 Adapting the company's desired visual identity into a design system structure in Figma based on shadcn. - 04 Building equivalent components in code with Cursor, creating a practical bridge between design and frontend. Workflow ## Designers also ship code. ### Diagnosis Before redesigning, the focus was on understanding why the new version needed to exist and what bottlenecks prevented growth. ### Design System The desired visual identity was organized into reusable foundations and components inside Figma. ### shadcn as a base The structure was adapted to work with a modern stack and the frontend standards used by startups. ### Cursor and Claude The design system was also implemented in code, using AI in the daily workflow of designers and developers. ### Frontend repository We created a separate repository to continuously supply components and reduce the distance between design and product. ### Next steps The natural evolution is to start contributing directly to the platform's official frontend repository. AI in the process ## Figma, Cursor and Claude synchronized daily. A differentiating aspect of Clinia is that designers use Cursor and Claude as work tools. After syncing Figma and code, we created a separate frontend repository that is continuously fed with components and patterns. With this workflow, developers can use AI tools to consume the Figma design and implement with more speed. The deliverable stops being just a static interface and starts to include code, intent, and reusable structure. Alongside this foundation, we're also working on the new onboarding, statistics, CRM areas, and other platform evolutions, as well as the Pricing page on the site. Solution Figma and code started speaking the same language, with components closer to the real implementation. Designers began delivering screens, components and code in a dedicated repository. Devs can consume the Figma design and accelerate implementation with AI tool support. The next step is to bring this workflow closer to the platform's official frontend repository. Next Case Study [Talqui AI-powered support platform, redesign, and design system](https://eduardoamaral.me/projects/talqui/) Source: https://eduardoamaral.me/projects/clinia/ Language: en