Design System

Pando is Pluralsight’s design system. As its Principal Product Designer, I built the component library, drove adoption, and kept the decisions grounded in accessibility. The goal was making Pando the thing designers reach for without thinking about it.

Claude Code can connect to Figma through the Figma Model Context Protocol server, which turns Figma into a tool the agent can call. With the Pando skill loaded and the codebase in scope, a prompt in the terminal produces editable Pando components on the Figma canvas.

I built a Claude skill that encodes the Pando Design System, from its components and tokens to its accessibility standards, content guidelines, and authoring patterns. Once loaded, Claude produces on-system output by default across Claude Code, Figma Make, and chat, without re-explaining the rules every session.

A sample of ongoing component and pattern work in Pando: a card refresh, responsive tabs shaped by user research, a new pagination component, modal iterations, and a badge redesign that came out of the Pluralsight rebrand.

The Pando Figma UI-kit gets maintained alongside the React component library. Staying current has meant adopting Figma’s newer capabilities, working through a Pluralsight rebrand, and building out the features that make the kit genuinely useful rather than just complete.

I created a set of design guidelines based on the Pando Design System component set, color values, typography, and UX best practices.

As Principal Product Designer, Design System at Pluralsight, I worked on standing up the Pando Design System - a framework-agnostic and accessibility-driven suite of design and development tools and guidelines.

For Cars.com, I helped steer a transition from using Invision, Sketch, and Zeplin apps and services to primarily Figma for our Product Design team.