Product Design

Interaction Design

Strategic Communication

Technical Documentation

Collaborative Infrastructure

Agents by Docker: 10 People, 6 Sprints, Zero Trade-offs

Brought onto Docker's stealth Project Taco team to support D_AGENT (Agents by Docker) launch. Through an RFC on shadcn/ui, token pipeline automation, and collaborative infrastructure—helped 10 people ship faster while leveling up quality in tandem, sustaining 6 sprints of dream-state velocity. Market validation: 2,000 GitHub stars in 5 days.

Role

Staff Designer (Design Systems)

Timeline

August 2024 - Present (2+ months, ongoing)

Company

Docker

The Problem: Rapid Build Without Sacrificing Quality or Team Velocity

Docker's CPO launched Project Taco—a stealth skunkworks hyper-cycling on MCP + Docker, getting Agents running inside Docker Desktop, and enhancing Gordon (Docker's Gen AI feature). Inside Taco, a new team formed around Agents and Agentic Workflows. Docker had shipped C_AGENT (CLI-based agent for Docker functions) as open source and got great attention, but UxR showed only developers were using it.

The challenge: build D_AGENT (desktop GUI, later named 'Agents by Docker') to package C_AGENT for general knowledge workers—people who use Anthropic or OpenAI but don't live in the CLI or GitHub. The team needed to move fast (pre-alpha build cycles, PRDs changing daily), but Docker's Design System wasn't in position to support rapid velocity without becoming a bottleneck.

I was brought in as Staff Designer from the Design Systems team to support Javier Alonso (Lead Product Designer) on interaction design, visual design, and sub-branding. The real challenge wasn't just designing screens—it was creating collaborative infrastructure where 10 people (6 devs, PM, stakeholders, Javier, me) could ship fast without sacrificing quality or alignment.

"We needed to move at startup velocity inside an enterprise. The tooling and workflows Chad set up meant we never had to choose between speed and quality—we got both, for 6 sprints straight."

— Javier Alonso, Staff Product Designer

My Approach: Communication, Documentation, Technical Proof—Not Authority

I'm a Staff Designer on the Design Systems team, supporting a Lead Product Designer on a fast-moving product team. I didn't have authority over anyone. My leverage came from three things: writing an RFC that unlocked the team, automating the token pipeline so Figma and code stayed aligned, and proving technical decisions through working migrations—not presentations.

The strategy was simple: make it easier to stay aligned than drift. shadcn/ui + Tailwind + token automation meant designers and developers worked from shared infrastructure. No one had to ask permission or wait for design handoff—the tooling orchestrated collaboration from the center, and I led by making that infrastructure work.

Week 1

RFC: shadcn/ui as Rapid Prototyping Solution

Wrote Request for Comment on standing up Electron desktop app with shadcn/ui. Pitched: use it stock with minimal mutations, token pipeline can shape visuals anytime. Derek (engineer) used Claude Code to assess migration. Team unlocked next day—swapped entire UI stack from MUI to shadcn/ui in 24 hours.

Week 2-3

Tooling Setup: Figma Component Library + Token Pipeline

Set up Javier and myself with shadcn/ui Figma component library. Ran automated token pipeline (cross-reference: Figma Production Pipeline) to ensure Figma-to-code parity. Zero design phase—took the legos out of the box and focused on workflows from day one.

Week 4-8

Hyper-Cycle: Onboarding, MCP Marketplace, Micro-interactions

Owned initial run, first run, and onboarding UI/UX (micro-interactions, novel animations). Designed MCP marketplace cards with hover states and progressive disclosure. Maintained craft (loading states, page transitions, progressive UI) while PRDs and acceptance criteria changed daily.

Week 9-10

Usability Studies + 6-Sprint Sustained Velocity

Led usability engineering studies with non-technical users and developers after shipping internal pre-alpha. Validated: general knowledge workers successfully building agents. Sustained dream-state velocity for 6 sprints—devs free to try their own ideas, design never the bottleneck.

The Work: Craft + Collaborative Infrastructure

v0 Electron App - Pre UX/UI Revisions (9 Early Screens)

The state of the app before Javier and I joined the team. Functional but lacking design system alignment, cohesive interaction patterns, and visual polish. These 9 screens show the starting point.

Main dashboard - Initial MUI layout

Agent configuration - Early functional UI

MCP tools selector - Pre-design system

Settings panel - MUI default components

Agent list view - Early information architecture

Deployment flow - Functional but unpolished

Status monitoring - Pre-shadcn/ui migration

Tool configuration - Early prototype state

Agent details - Before UX/UI revisions

The RFC Process: Technical Evaluation with the Team

I wrote an RFC demonstrating shadcn/ui + Tailwind + token pipeline as a better fit than MUI for rapid prototyping. The team reviewed, commented, and Derek used Claude Code to assess migration cost. We proved switching cost < maintenance cost through real evaluation, not presentations.

RFC screenshot: Team discussion and evaluation process around shadcn/ui migration

RFC document: Technical proof demonstrating no installation overhead, superior token integration, and extensibility benefits

The Line of Scrimmage: RFC Accepted, Stack Swapped in 24 Hours

BeforeAfter

Before: v0 Electron App with MUI, no design system alignment, functional but lacking cohesion. This was the line of scrimmage.

After: UI stack swapped to shadcn/ui + Tailwind in 24 hours. Progressive UI with skeleton loading states, token pipeline alignment, polished interactions. Everything changed in one sprint.

Discovery Work: Starting from Zero

After RFC approval from devs and stakeholders, Javier and I pivoted from MUI + DDS to rolling a completely new UI approach with shadcn/ui. We had no customer data, no time to find users, and no existing patterns to lean on. So I started with the Fogg Behavior Model—choosing low mastery, high motivation as the design constraint that would drive the D_AGENT UI rebuild. This discovery phase was chaotic and divergent: loading modal animations built in Figma, system tray widget concepts, non-linear workflow explorations, and component library setups to drive rapid prototyping. Not everything shipped, but this exploration unlocked the final solution and gave the team velocity to iterate without bottlenecks.

Fogg Behavior Model

Behavioral framework used to guide initial design decisions under constraint. With no data, no customers, and no time—I chose low mastery, high motivation as the product's strategic starting point.

Exploration Artifacts: Testing Wild Ideas

The messy, divergent exploration phase. Loading modal animations built in Figma, system tray widget concepts hooked into Javier's prototypes, chaotic discovery pages testing non-linear workflows, and component library builds driving rapid iteration. This is where the team learned what worked by building what didn't.

Loading modal animation prototype built in Figma

Early system tray widget idea—prototype hooked into Javier's work to test interaction patterns

Divergent, non-linear workflow exploration—testing multiple paths simultaneously

Component library setup to drive prototypes and interaction testing

Widget Behavior: Responsive Views

Explored how each widget view could expand into a full responsive React Native app view. Three interaction states showing the widget's progressive disclosure pattern—from collapsed to expanded to full app context. This exploration validated how users would discover and interact with agents in Docker Desktop.

Widget collapsed state

Widget expanded view

Full app view (responsive React Native)

Icon Concept Exploration

Initial icon concepts by Chad, refined into grid system work by Javier. Collaborative craft from the start.

Icon concept exploration: Initial concepts by Chad, grid system work by Javier. Collaborative craft from the start.

Loading Exploration: Testing Spinners with the Team

Before adding loading states to prototypes, I explored multiple spinner variations with the team to find the right balance between personality and performance perception.

Variation 1: Circular spinner with Docker blue accent

Variation 2: Pulsing logo animation

Variation 3: Sequential dot animation (selected for production)

D_AGENT Presentation Demo

September 4, 2025 presentation demo showcasing the polished product with onboarding flow, agent configuration, and deployment workflows.

D_AGENT presentation demo (September 4, 2025): Polished product showcasing onboarding flow, agent configuration, and deployment workflows.

Evolution: MVP Layouts to Production Polish

From early MVP explorations to final production-ready designs with next-gen app icon.

MVP layout exploration: Testing information architecture and navigation patterns

MVP prototype: Validating workflows and interaction models with stakeholders

Next revision app icon for D_AGENT: Sub-branding work for Agents by Docker

components/agent-card.tsx

// shadcn/ui Component Usage - No Installation Required
// Just import and use with Tailwind + Design Tokens

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"

export function AgentCard({ agent }) {
  return (
    <Card className="hover:shadow-lg transition-shadow duration-200">
      <CardHeader>
        <CardTitle>{agent.name}</CardTitle>
        <CardDescription>{agent.capabilities.length} capabilities</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="flex gap-2">
          {agent.tools.map(tool => (
            <Badge key={tool.id} variant="secondary">
              {tool.name}
            </Badge>
          ))}
        </div>
        <Button className="mt-4 w-full">Configure Agent</Button>
      </CardContent>
    </Card>
  )
}

// Why this worked:
// 1. No npm install for every component - just call and use
// 2. Tailwind classes consume design tokens automatically
// 3. Figma component library mirrors code structure exactly
// 4. Developers free to extend and iterate without breaking alignment
// 5. Token pipeline (Figma → Style Dictionary → Tailwind) runs automatically

// Result:
// - 10 people shipping in concert
// - No design handoff bottleneck
// - 6 sprints of sustained velocity
// - Quality maintained through rapid iteration

shadcn/ui component example: no installation, Tailwind classes consume design tokens, Figma-to-code parity built in. This architectural decision unlocked 6 sprints of sustained velocity.

tailwind.config.js

// Automated Token Pipeline: Figma → Style Dictionary → Tailwind
// Tokens update automatically, no manual sync required

// tailwind.config.js - Generated from Docker Design Tokens
module.exports = {
  theme: {
    extend: {
      colors: {
        // Design tokens from Figma Variables
        'docker-blue': 'var(--color-docker-blue)',
        'docker-navy': 'var(--color-docker-navy)',
        'agent-primary': 'var(--color-agent-primary)',
        'agent-secondary': 'var(--color-agent-secondary)',
      },
      spacing: {
        // Spacing tokens from DDS
        'agent-card-padding': 'var(--spacing-card-padding)',
        'agent-grid-gap': 'var(--spacing-grid-gap)',
      },
      borderRadius: {
        // Border radius tokens
        'agent-card': 'var(--radius-card)',
        'agent-button': 'var(--radius-button)',
      },
      animation: {
        // Micro-interaction timing tokens
        'agent-hover': 'hover 200ms ease-in-out',
        'agent-transition': 'transition 150ms cubic-bezier(0.4, 0, 0.2, 1)',
      }
    }
  }
}

// How this enabled velocity:
// - Designers update tokens in Figma Variables
// - Style Dictionary runs automatically (CI/CD)
// - Tailwind config updates
// - Developers pull latest, everything stays aligned
// - No design review bottleneck for token changes
// - Quality maintained, velocity sustained

Token pipeline kept Figma and code aligned automatically—no manual sync, no drift, no bottleneck. This is how 10 people shipped in concert for 6 sprints.

The Impact: 10 People Shipping Faster with Higher Quality

10 people

Team Force Multiplier

Helped 6 developers, 1 PM, Javier (Lead Designer), stakeholders, and myself ship faster while leveling up quality in tandem. No one had to choose between velocity and alignment—collaborative infrastructure orchestrated both.

6 sprints

Sustained Dream-State Velocity

Maintained team velocity for 6 sprints straight as PRDs and acceptance criteria changed daily. Developers were free to try their own ideas. Design never became the bottleneck. Stability, team trust, developer productivity, and DX stayed high throughout.

2k stars

Market Validation (5 Days)

C_AGENT repository hit 2,000 GitHub stars in less than 5 days after public launch. Social media posts showed users building with D_AGENT/Agents by Docker. Team win translated to public impact.

24 hours

UI Stack Migration Speed

Derek used Claude Code to assess migration from MUI to shadcn/ui. Team swapped the entire UI stack in 24 hours after RFC approval. Proved switching cost < maintenance cost, influenced Docker's broader runtime strategy.

Zero

Design Phase Duration

No upfront design phase. Set up Figma component library + token pipeline, then took the legos out of the box and started building workflows immediately. Focused on product execution from day one, not tooling debates.

Key Outcomes & Strategic Lessons

Lead from the center through infrastructure, not authority

I was a Staff Designer from the Design Systems team supporting a Lead Product Designer. I didn't manage anyone. My leverage came from writing an RFC that unlocked the team, automating the token pipeline, and proving technical decisions through working code. Leadership without authority means making it easier to stay aligned than drift—and orchestrating collaboration through shared infrastructure.

Communication + Documentation + Technical Proof beats politics

The RFC on shadcn/ui wasn't a presentation deck—it was a technical proof. Derek used Claude Code to assess the migration, we demonstrated switching cost < maintenance cost with working code, and the team swapped the entire UI stack in 24 hours. No committees, no approval cycles, just proof that the new approach worked better. Staff-level impact comes from building working infrastructure and showing it works, not convincing people in meetings.

Velocity and quality aren't trade-offs when infrastructure is right

The team sustained 6 sprints of dream-state velocity while PRDs changed daily—because the tooling made alignment automatic. shadcn/ui + Tailwind + token pipeline meant designers and developers worked from shared infrastructure. No handoff bottleneck, no drift, no design QA gate. Quality stayed high because the infrastructure enforced it. This is how 10 people ship faster with higher quality simultaneously: build infrastructure that makes the right thing the easy thing.

"Chad set up the design-to-code pipeline so seamlessly that we were building screens in hours instead of debating tooling for weeks. shadcn/ui + his token automation meant Figma and production stayed aligned without us thinking about it. We just started designing and shipping—no bottlenecks, no drift, just velocity."

Javier Alonso

Staff Product Designer at Docker

"I used Claude Code to assess our Electron app, and Chad's RFC on shadcn/ui made the decision obvious. We swapped the entire UI stack in a day. The best part? Design and dev were always in sync because Chad's tooling just worked. We iterated fast for 6 sprints without the usual 'wait for design' or 'that's not what I built' problems. It was the smoothest build cycle I've experienced."

Derek

Sr Software Engineer at Docker

Continue Exploring

More Case Studies