Building a Design System for consistent AI Prototyping (DevOps)
Structuring the Jenkins design system for Claude Code and more consistent AI-generated prototypes
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
Turning Customer Conversations into AI Summaries & Sentiment Insights (CX Product)
AI-powered summaries and sentiment analysis for faster customer insight discovery
Designing AI-Powered Routing & Automation Recommendations (CX Product)
AI recommendations for identifying routing and automation opportunities
Designing a Multi-Controller Integration & Setup Experience (DevOps)
Introducing a new CI integration and rethinking existing integration workflows for platform engineers
Redesigning the Release Notes Page (DevOps)
Rebuilding a searchable, structured release notes experience with Claude Code
Defining an AI-Powered Analytics Dashboard (DevOps)
Turning fragmented engineering data into actionable insights
Reimagining CI Troubleshooting with AI Dashboards (DevOps)
An AI-assisted workflow for investigating pipeline failures
Building a Design System from Scratch (CX Product)
Creating a documented component library that improved team delivery by 25%