Patagonia's AI Agent
Conversational B2C interface shaped by the brand's personality and values.
UpSkill Agentic Design System
Building an AI-driven operating system around a component library, so maintainers and AI agents can create, validate and maintain UI components side by side with minimal upkeep.
Role
Senior Product Designer
Main Goal
Agentic design system
Challenge
Production-ready components without 24/7 agent orchestration
AI generates UI fast, but the result only looks fine on the surface; by default it's expensive to run and unreliable. At scale it drifts: invented components, misused tokens, stale Figma files.
The real challenge is guiding the LLM to understand design intent and stay aware of the system's state, without 24/7 orchestration or costly live MCP calls.
Approach
Turning unpredictable AI output into reliable code
Where I started, and why it changed
Figma as the source of truth. It can't hold every state, accessibility rule or code-only property, and syncing it needed an Enterprise-only API. So code became the source and Figma a checked mirror.
A single large AGENTS.md file. It became tiered, loading rules
by task instead of all at once.
One contract file per component. It became two: a metadata file on how to use a component, and a spec on how to build it.
The framework
The system follows the four parts of a common agent architecture, and keeps the model out of every part a script can handle.
- Tools. More than 60 deterministic scripts, commands and workflows sync the system and prepare the data agents read, without spending a single token.
- Memory. The repo is the single source of truth. It records what components mean, how work is done, why the system is this way and what is true right now, and agents load only the part a task needs.
- Planning. Nine Claude commands handle design intent, like proposing a component API or generating one, and run only when a maintainer triggers them.
- Guards. Automated checks stop bad changes before they merge, and an adversarial reviewer agent challenges interactive components. A status command shows maintainers each component's build and review state, and issues found in audits become new rules agents follow, so they aren't repeated.
Giving AI the right context at the right time
Each task loads only the context it needs: too much costs money and distracts the model, too little makes it guess. The system's memory lives in four layers an agent reads on demand. See memory layers
- Intent: what things mean. Component contracts, token layers, docs and glossary, loaded only when a task touches them.
- Procedure: how work is done. A small
AGENTS.mdloads in every session, kept under 8KB by CI. Detailed rules, commands and skills load on demand, so every developer and agent works the same way. - History: why it is this way. Decision records (ADRs) explain each structural choice, and handoff files let a fresh agent pick up where the last one stopped.
- State: what is true right now. Snapshot files hold each
component's lifecycle stage, token use and sign-off, rolled into one
STATUS_QUO.mdsummary. Agents, the CLI, Storybook and Airtable all read from it, so nothing queries Figma live.
Loops that build, review and learn
Before building, the agent picks one of seven answers, from reuse to build new or escalate, each backed by a decision record.
The add-component loop then proposes an API and waits for
my approval. That proposal becomes the spec that code and Figma are
built from, followed by automated checks, my Storybook review and, for interactive
components, an adversarial reviewer agent with a full behavioural accessibility
review.
Other loops keep the system current: stale docs get rewritten and review findings update the rules.
Keeping only what tests prove
Context, loops and rules stay only if a test shows they help. Each test hid the answer key and recorded a prediction before the first run, so misses were reported instead of tuned away.
- Context over loops. I deleted three shipped components and had the agent rebuild each one three times. Without the written rules and decisions, 6 of 9 builds came out clean; with them, all 9 did. The full review loop didn't add a single clean build and cost 1.7× more, so the adversarial reviewer and its full behavioural accessibility review now run only on interactive components.
- Governance. I gave the agent 11 past build decisions with the answers hidden. It matched 10 and turned down every request outside the system's scope.
- Figma fidelity. With the component contract, the agent rebuilt two Figma components with a 96% match in structure. From code alone it reached 40%, and my hand-built file scores 98%.
"patterns": [...],
"antiPatterns": [...],
"accessibility": [...],
"composition": [...],
"tokens": [...]
"patterns": [
{
"name": "course-curriculum",
"description": "A list of course modules, each expandable to reveal a description.",
"tree": "Accordion > [AccordionItem(title, subtitle), AccordionItem(title, subtitle), ...]"
},
{
"name": "faq-list",
"description": "A set of frequently asked questions where each answer is hidden by default.",
"tree": "Accordion > [AccordionItem(title='Question?') > Text(answer), ...]"
}
]
Gives the agent accepted composition patterns and usage examples.
"antiPatterns": [
{
"scenario": "Nesting Accordion inside another Accordion",
"reason": "Deep nesting creates a confusing mental model and breaks the heading hierarchy.",
"alternative": "Flatten the information architecture or use a sub-section heading and Text"
},
{
"scenario": "Passing both the open prop (controlled) and defaultOpen prop simultaneously to AccordionItem",
"reason": "The component cannot resolve two competing sources of truth. The controlled open prop silently wins over defaultOpen; a DEV-only console.warn is emitted, but the initial state discrepancy still occurs at runtime.",
"alternative": "Use open + onOpenChange for fully controlled mode, or defaultOpen alone for uncontrolled mode. Never supply both."
}
]
Stops the agent from repeating documented mistakes.
"keyboardInteractions": [
{
"key": "Enter",
"action": "Toggles the focused accordion item open or closed"
},
{
"key": "Space",
"action": "Toggles the focused accordion item open or closed"
},
{
"key": "Tab",
"action": "Moves focus sequentially through any focusable content within an open panel, then to the next accordion trigger. Focusable descendants inside a collapsed panel are skipped — the panel's inert DOM property is set while closed, so Tab cannot land on them even though they remain in the DOM for aria-controls."
}
]
Fixes ARIA and keyboard behavior the agent can't infer on its own.
"composition": {
"composedOf": ["Icon", "Text"],
"accepts": ["AccordionItem"],
"containedBy": ["Box", "Stack", "Card"]
}
Tells the agent what's valid to nest and wrap.
Solution
AI as infrastructure
Build quality goes up, in code and in Figma. Contracts define properties, states and behaviour, so code and Figma match beyond tokens.
It costs little to run. Scripts do the routine work and nothing runs around the clock, so cost follows actual work.
Every contributor reads the same source. Every touchpoint, from the Airtable board to Storybook, is generated from the repo, so no one updates one by hand or asks which version is current.
Governance guides every change. Before a component is added or modified, the agent checks it against the component specs and recorded decisions and recommends a path, so new maintainers decide with the system's history in hand, without having to learn it first.
Impact
In numbers
- 50% more components ready to ship: 9 of 9 clean builds against 6 of 9 for the same repo without its written rules.
- 2.4× more accurate Figma components: measured across all 16 components linked to Figma, before and after contracts.
- Zero model spend on routine work: 22 scripts, 37 npm commands and 7 GitHub Actions run with no AI calls.
- 20 live API calls replaced by snapshots: across 7 commands, each read is up to 62× smaller and returns the same result every time.
- Guided governance on 10 of 11 decisions: with the answers hidden, the agent recommended the path recorded in the decision history, and declined every out-of-scope request.
Result
Screens
