Select Page
Built the infrastructure to onboard an entire product design team onto AI-assisted workflows, connecting them to the design system, shared skills, and a vibe coding environment using real components.
 
Role    Design Systems Lead
Timeline    January 2026 – Present
Team    Design Systems (me), 15+ product designers, UX Engineering
Key Outcome    Transformed the design system from a static component library into a team-wide AI platform — every product designer now queries the Iris Design System in natural language, shares versioned AI skills, and builds interactive prototypes using real production components.

Problem

Design systems teams typically maintain a component library and documentation. But between releases, the knowledge lives in scattered places — Confluence pages, Figma files, Storybook, and tribal memory. When the team adopted AI coding assistants, a gap appeared: the AI tools had no connection to our design system, and designers had no way to set them up.

The result was isolation. Each designer was on their own — configuring tools from scratch, asking the same questions the AI couldn’t answer, and unable to prototype with real components without access to engineering repos. There was no shared knowledge, no shared process, and no shared starting point.

The design system was already the team’s shared language for components. The question was whether it could also become the foundation for shared tools and workflows.

Process

Discovery

I started by mapping what designers actually needed to be effective with AI tools. The blockers weren’t conceptual — they were practical: Cisco GitHub access, Artifactory tokens for internal npm packages, MCP server authentication, and understanding how AI context scoping works. Most designers had never used a terminal. The gap wasn’t willingness; it was access and education.

Define

I scoped a phased approach: first get everyone connected, then build shared tooling, then establish distribution. The critical dependency was the frontend-core MCP server — an internal tool that exposes Iris Design System metadata (components, props, usage guidelines) to AI assistants. Without it, the AI couldn’t answer basic questions like “what variants does TeButton support?” With it, every designer could query the design system in natural language.

Design

Onboarding guide. I wrote a 12-step onboarding guide covering everything from requesting GitHub and Artifactory access to configuring MCP servers for Jira, Confluence, Figma, and the Iris Design System. It assumed zero terminal experience and included verification steps at each stage.
Shared GitHub repo.  I set up a shared GitHub repo for the design team holding Cursor rules, skills, and prompts — the team’s collective AI knowledge. An install script symlinks these into each designer’s local Cursor setup, so new tools added by anyone appear automatically after a git pull. No manual file copying, no version drift.
 
Context and MCP education. I walked designers through how MCP servers work, how AI context scoping affects response quality, and how their workspace structure (AGENTS.md, project folders, rules) shapes what the AI knows. This wasn’t just setup — it was building the mental model so designers could configure and improve their own workflows over time.
Vibe coding template. Inside the shared repo, I built a Vue 3 prototype environment that imports the actual Iris production packages (@te/iris, @te/iris-charts, @te/iris-tokens-and-styles) and ships with a standard ThousandEyes product shell — global header, left navigation, page layout. The router auto-discovers project folders, so a designer drops in a folder, adds an App.vue, and starts building. Finished prototypes live in the shared repo, runnable by anyone on the team.

Validate

I piloted the onboarding with individual designers, watching where they got stuck and revising the guide. The biggest friction points were Artifactory token generation (unfamiliar process) and understanding which GitHub account to use (personal vs. Cisco EMU). Both were addressed with explicit callouts and wait-time expectations in the guide.

Deliver

The team now has: a complete onboarding path, a shared GitHub with auto-syncing rules and skills, AI-powered access to the full Iris component API, and a prototype environment built on real design system components. Designers who had never opened a terminal are now querying component props through AI and vibe coding interactive prototypes.

My Role

  • Initiated the entire effort — this was not assigned; I identified the gap and proposed the approach

  • Built the 12-step onboarding guide — from GitHub access to MCP configuration, assuming zero terminal experience

  • Designed the shared repo architecture — install script, symlink distribution, auto-syncing rules and skills across the team

  • Wrote the MCP and context education material — building the mental model designers needed to improve their own workflows

  • Created the vibe coding template — Vue 3 environment with real Iris components and a product shell, so prototypes start from real product context

  • Ran every onboarding session — observed friction points and iterated the guide based on direct feedback

Outcome & Impact

  • Established a model where the design system serves as the foundation not just for UI consistency, but for team tooling, shared knowledge, and collaborative workflows
  • Every product designer onboarded to AI tools with direct access to the Iris Design System through natural language queries
  • Shared GitHub repo distributing rules, skills, and prompts across the team — new tools appear automatically after a pull
  • Vibe coding environment using real Iris components, enabling designers to build and share interactive prototypes without engineering repo access

Reflection

What I learned: The design system’s most valuable role isn’t always the components themselves — it’s being the connective layer that makes shared tools and processes possible. Because the system already had structured metadata (component APIs, props, tokens), it could power AI-assisted workflows directly. That’s a capability most teams haven’t explored yet.

 

What I’d do differently: Start the MCP education earlier. Designers who understood how context scoping works became significantly more effective than those who treated the AI as a black box. Building that mental model should be step one, not a supplement.

 

How this informs future work: This infrastructure opens the door to team-wide AI skills that encode design system knowledge — audit workflows, component research patterns, content guidelines — all shareable and version-controlled. The design system becomes a platform, not just a library.