Jenkins Design System Reference
For AI-assisted Prototyping: Building shared infrastructure that makes AI tooling reliable for the whole team
Company
CloudBees (CI)
Role
Lead Product Designer
Industry
Design Systems · AI Tooling · Internal Infrastructure
Duration
2 Months
Overview
While prototyping with AI tools like Claude Code, I ran into a recurring issue: outputs were inconsistent because there was no structured reference of the Jenkins design system to guide them.
So I built one.
I designed and shipped a centralized design system reference, optimized for both humans and AI tools, and published it to the team’s internal workbench.
Impact:
Improved consistency in AI-generated prototypes
Reduced time spent correcting design outputs
Created shared infrastructure for the entire design team
The problem
AI-assisted prototyping broke down without a reliable system reference.
Designers were facing:
Inconsistent outputs (wrong components, spacing, styles)
Time lost manually fixing generated designs
Knowledge scattered across the product and individual teams
The missing piece wasn’t tooling, it was structured input.
My role
I drove this end-to-end:
Identified the gap through hands-on AI prototyping
Audited and structured the Jenkins design system
Built and published the reference using Claude Code
Made it accessible as a shared team resource
This was a self-initiated project focused on team enablement, not just individual productivity.
The solution
I created a single, structured source of truth designed for AI-assisted workflows.
1. Consolidated system reference
Tokens, components, and usage guidelines in one place
→ Eliminates guesswork and fragmented knowledge
2. Structured for AI consumption
Organized to be easily used in prompts and generation workflows
→ Improves accuracy and consistency of outputs
3. Accessible team infrastructure
Published to the internal workbench
→ Enables adoption across the entire design team
How I approached it
This wasn’t just documentation, it was about making the system usable in a new context (AI workflows).
Audited tokens (colors, typography, spacing) and component usage
Structured content in layers: tokens → components → guidelines
Built directly in code using Claude Code
Iterated until outputs matched real product behavior
Outcomes
New team capability
Enabled designers to prototype faster and more reliably with AI tools
Consistency at scale
Reduced visual drift between AI-generated designs and the real product
Leverage beyond individual work
Turned a personal workaround into shared infrastructure
What I’d do next
Evolve this into a maintained system:
Add interactive component previews
Validate structure with the broader team
Integrate with existing design system workflows and updates
Key takeaway
AI doesn’t replace design systems, it depends on them.
This project shows how I think beyond screens, building the infrastructure that makes new ways of working possible.
Other projects
Lang.ai CX Platform
AI Workflows for Support Teams: Reducing ticket resolution time by 20% through intelligent automation
Jenkins++ Integration Experience
CloudBees Unify: Redesigning multi-controller setup for platform engineers at scale
Release Notes Redesign
CloudBees CI: Turning a wall of documentation into a searchable, structured experience
Unify AI Dashboards
Product Direction & Design: Defining an AI-powered analytics layer for engineering teams (concept validated, deprioritised)
CI Pipeline Dashboards
Troubleshooting at a Glance: Reimagining failure investigation as a proactive, AI-assisted workflow (concept validated)
Lang.ai Design System
Built from Scratch: From zero to a documented component library boosting team delivery by 25%