Riley Safer Holmnes Cancila

Website design system - Code/MCP server workflow

Primary role

Design System Lead

Year

2026

Main tools used

Figma, Copilot AI

Main kit created with AI

with premade kit to supercharge design/development

AI pipelines established

partnering with developers to grow automation

Project goal

Create a law firm website design system almost entirely with AI to reduce cost and add value to their users

Project description

Riley Safer Holmes & Cancila needed a full website design system built fast, without the headcount to support a traditional multi-month build.

As Design System Lead along with developers designed a Figma-to-code workflow built around AI-readable tokens and Code Connect so a small team could deliver a fully componentized law firm site the AI could reliably build from. This cuts typical build time significantly.

Riley Safer Holmes & Cancila needed a full website design system built fast, without the headcount to support a traditional multi-month build.

Problems to solve

The challenges become different when you have different, digital coworkers. So, I discovered what questions to start with first in order to grow this system.

I answered these questions in order of dependency: the Figma intake structure had to exist before developer collaboration could be defined and developer collaboration had to be defined before we could commit to a token/codebase connection. Building any of these out of order would have meant redoing work once AI limitations surfaced.

Our workflow - What structure needed to be built?

I treated the AI-driven build with the same design discipline as any website project: establishing user context, content strategy and creative-director moodboards before touching components. From there the wireframes from our UX Designer turned into a prioritized component system. This sequenced which pages (homepage, people detail, insights & events) needed components first based on business priority.

Each set of components was prioritized by the pages that needed to be build such as the home page, people detail page, insights & events and more.

Each page had its own visual and interaction priorities determined by the UX designer and their research.
Components were then created with all three breakpoints also created template components to then be used by the AI for development guidance.

Each set of components was prioritized by the pages that needed to be build such as the home page, people detail page, insights & events and more.

Each page had its own visual and interaction priorities determined by the UX designer and their research.
Components were then created with all three breakpoints also created template components to then be used by the AI for development guidance.

Component examples with documentation

Homepage template laid out in all breakpoints/components

The key AI differentiator: Component tokens

When working with developers, we not only came up with various pipeline as aspects to the Figma file that would enable the AI to figure out how to code the components, but establishing a normal layer of tokens that are component-specific like CardHeight-Padding-X to make it easier for AI to read the components and build the correct one.

Early AI-generated builds kept creating duplicate components instead of reusing existing ones, because generic semantic tokens gave the AI no way to identify which component it was looking at. I solved this by designing a component-level token layer (like CardHeight-Padding-X) that stems from semantic tokens. This gives the AI enough specificity to consistently map back to the correct, existing component instead of generating a new one each time.

In partnership with a developer, established the MCP Server pipeline so it returned code instructions rather than raw HTML, using Code Connect to point every component reference back to a single source of code. This was the deciding factor in whether AI treated the design system as a living reference or just generated throwaway markup each time.

Token structure example using component-level tokens that stem from semantic tokens

AI development pipeline is crucial to define and understand for any designer when collaborating with front-end developers

After project reflection

The token and Code Connect pipeline built let RSHC’s small team ship a fully componentized law firm site with AI reliably reusing existing components instead of duplicating them. This proved an AI-assisted workflow could match traditional build quality at a fraction of the timeline. I’m continuing to refine this approach, particularly around token editing and restructuring, on future AI-assisted engagements.