Designing a Workflow for Humans and AI

01Challenge

Evolving the system. Rethinking how we build.

Our original component library, Shoelace, was being sunset in favor of Web Awesome. We needed to migrate without losing our existing design language.

The challenge went beyond replacing components:

• Architecture: Decide what to retain, adapt, or retire while both libraries coexisted.
• Consistency: Minimize design drift across Figma, code, and the style guide.
• Workflow: Develop an AI-assisted design-to-code approach our team hadn't used before.

Following each token from primitive to component

Pause

01Existing primitives

$brand-darker-blue

$brand-lighter-grey

$content-text-body

$brand-active-blue

token-system.md

02Web Awesome roles

--wa-color-blue-50

--wa-color-gray-80

--wa-color-text-normal

--wa-color-blue-70

03Components

SaveButton

MonthQuarterToggle

Select…Select

View reportLink

02Design to Production

Starting with Figma. Moving closer to code.

I developed and implemented an AI-assisted workflow that evolved from creating components in Figma to building them directly in code.

1. Figma-first

   I used Claude to create components in Figma before gaining development access.

2. Figma to code

   Once I had access, I implemented those existing Figma components in code.

3. Code-first

   I began implementing components directly in code with Claude, then aligning Figma.

Making a growing library easier to navigate.

As the component library grew, finding components became harder. I reviewed navigation patterns in other libraries, then designed and implemented search in our internal style guide to improve discoverability.

From handoff to PR reviews.

With engineering lead Tom Horn helping set up my development environment and reviewing my PRs, I designed and implemented components directly in code with Claude.

During PR review, Tom’s AI agent flagged Radio Group as a cleaner alternative to extending Button Group. Tom and I evaluated both approaches, agreed on Radio Group, and I shipped Toggle to production.

FigmaToggle, from the build

Code reviewTwo approaches

Explored firstButton Group

<wa-button-group label="View">
  <wa-button>Month</wa-button>
  <wa-button>Quarter</wa-button>
</wa-button-group>

ShippedRadio Group

<wa-radio-group label="View">
  <wa-radio value="month">Month</wa-radio>
  <wa-radio value="quarter">Quarter</wa-radio>
</wa-radio-group>

Flagged in PR review and evaluated together. Simplified examples, not production code.