Skip to content
Nada Khalil

Guidehouse AI Studio Design System

A cross-functional design system that connects Figma, Figma Make, Storybook, a versioned React/NPM package, and the existing GitHub project template to help teams create consistent, accessible, and implementation-ready digital products.

Design SystemAIEnterpriseWeb

Guidehouse AI Studio · Internal design-system initiative · 2026

The Problem

No design system, no owner. So we built one

There was no internal design system and little organizational priority behind one. Meanwhile, four groups across the organization needed a shared foundation.

  • Designers

    One source of truth for components and standards

  • Developers

    Components, tokens, and code they can ship

  • Business users

    Early prototypes without waiting for a design cycle

  • Project teams

    A starting point with the design system already in it

Constraints

  • No internal design system
  • No owner and little organizational priority
  • Scarce developer resources, hard to secure
  • Shared AI credits in Figma Make
  • The existing GitHub template had to be respected
  • AI output needs human review
Role
  • Product owner
  • UX designer
  • Dev management
Team
  • Co-designer
  • 3 developers
  • O&M team
  • Corporate experience team
  • Marketing
Scope
  • Figma library
  • Figma Make kit
  • Storybook
  • NPM package
  • Template integration
  • Org-wide rollout
Audiences
  • Business users
  • Designers
  • Developers
  • Project and delivery teams
  • Employee experience
  • Corporate management
  • AI Studio, AI TMO, and supporting cells

My Role

Owner of the system, from strategy to rollout

  • Strategy and ownership

    Direction, priorities, scope, and reuse rules

  • Resourcing

    Secured scarce development resources

  • Dev management

    Worked with the developers and followed the O&M handoff with them

  • Foundations and components

    Color, type, spacing, and states, co-designed with a UX/CX teammate

  • Mentoring

    Mentored and taught my co-designer

  • Documentation

    Storybook, Figma guidance, and a SharePoint wiki

  • Alignment

    Corporate experience team and marketing

  • Rollout and training

    Office hours, walkthroughs, and the team's learning curve

  • AI testing

    Installed the package with AI and tested it in VS Code

The System

Five resources, one design language

Each resource has one job and one audience.

  • Figma

    Figma library

    For designers

    Reusable components and patterns

  • Figma

    Figma Make kit

    For business users

    Fast, on-brand prototypes

  • Storybook

    Storybook

    For developers

    Documented components, variants, and states

  • npm

    NPM package

    For developers

    Versioned code and design tokens

  • GitHub

    GitHub template

    For project teams

    A consistent project foundation

Cleared up along the way

Not a separate template

The shared UI package is integrated into the existing project template.

Reference vs implementation

Storybook shows what exists and how to use it. The NPM package is the code.

The business-user route

Figma Make is the supported way for business users to prototype.

Figma

Prototype

Business users start in Figma Make

Add the kit, then prompt. Credits are shared, so efficient prompts matter.

Figma Make design system kits picker with the AI Studio Design System kit highlighted
FigmaFigma Make, the AI Studio Design System kit in the design system kits picker
Figma

Design

The visual foundation lives in Figma

Figma design system file with the page list in the sidebar and the Colors page open
FigmaFigma, one page of the design system library (Colors)
Storybook

Documentation

Where developers check what exists

Each component documents its anatomy, usage, and code.

Design System Storybook cover page with the component list in the sidebar and a welcome section on consistency, scalability, and accessibility
StorybookStorybook, Design System cover page with the component list in the sidebar

Build with AI

Developers build from the package

In VS Code, I had an AI agent install the NPM package, following the technical documentation. Then I asked it for an analytics dashboard “to test this design system.”

Rules and component metadata give the agent real context, so it stops inventing components, colors, and spacing.

VS Code with the AI chat prompt asking for an enterprise analytics dashboard that follows the design system, next to the Project Hub dashboard running on localhost
VS Code, the AI prompt in the chat panel and the Project Hub dashboard running locally

85–90%

On-brand accuracy in early testing. The output recognized the package.

Early internal result, not a formal benchmark

Distribution

From design files to a versioned package

npm

React and TypeScript package

One install command. Pin the version, so a team knows which release it builds on.

Internal design system package page on GitHub Enterprise marked Latest, with npm install instructions
GitHub Packages, package page (Latest) with npm install instructions
GitHub

Repository and project template

The UI package is integrated into the existing template, so new projects start with it.

Design system package repository on GitHub Enterprise, forked from the project template, with folders for Storybook, workflows, and docs
GitHub Enterprise, repository forked from the project template

The Hard Part

The components were the smaller problem

  • No owner, no priority

    Resources were scarce and hard to secure. I worked with the developers I could get and followed the O&M handoff with them

  • Different audiences

    Role-based routes on one design language

  • Library to working system

    Figma decisions had to reach Storybook, the package, and the template

  • Adoption over completeness

    Office hours, a wiki, and rules for reusing or requesting components

Whatthesystemgaveteams

The five resources

FigmaFigma library
One source of truth for color, type, spacing, and components
FigmaFigma Make kit
Business-user prototypes built on the design system
StorybookStorybook
One component reference for designers and developers
npmNPM package
Versioned React code for development teams
GitHubGitHub template
UI package integrated into the existing template

Around the system

AI context
Rules and component metadata so AI tools stop guessing
Accessibility
Guidance for accessibility and component states
Org-wide rollout
Office hours, walkthroughs, and a SharePoint wiki
Alignment
Aligned with the corporate experience team and marketing
O&M handoff
Handoff to the O&M team, followed through with the developers
Early AI test
85–90% on-brand accuracy in early internal testing