Agents produce fast. I design the conditions to trust what they deliver.
Moving fast with AI is easy. Knowing whether what it produced is correct: that's a different question.
An agent can create a component in 3 seconds. It can also create a component that looks right, compiles, and silently bypasses the design system.
Trust doesn't come from the agent's capabilities. It comes from the system built around it. This portfolio documents that architecture: the flows, the rules, the first pieces deployed.
Case studyPart of this system governs the Design Ops case studyTime gain
Quality gain
AI trust
Understand
Notes, qualitative feedback, quantitative inputs
Structure
Problem framing, workflows, decision criteria
Explore
Options, scenarios, alternatives, edge cases
Prototype
Interactive flows, states, first implementation paths
Evaluate
Critique, test scenarios, risks, blind spots
Decide
Trade-offs, product risks, solution choices
Document
Specs, memory, guidelines, design system notes
Communicate
Narrative, alignment, presentations, team conversations
Produce without guardrails
Components, tokens, accessibility: no verification
Produce with evidence
Verified components, respected tokens, declared compliance
Three flows show how I industrialise the design system with AI: from HiFi mockup creation to code synchronisation, through governed DS evolution in Figma.
Standard flow
DS complete
Extended flow
Missing component
Product hand-off
Designer receives the product hand-off: validated spec, ticket, wireframes: starting point for the HiFi mockup
Scaffold components
Scans the wireframe and spec, creates a Figma page (ticket name) with candidate DS components laid out as a draft
Compose the mockup
Designer composes screens from candidate components, adjusts states and spacing
Create LoFi component
Designer creates a low-fi frame (box + component name) where the missing component should be
Co-draft the brief
Scans the usage context of the missing component and produces a first brief: designer validates and enriches
Validate the brief
Component brief co-drafted and validated by the designer: ready to feed into the DS scaling flow
→ Scale the DS
Redirects to the design system creation / evolution flow to resolve the gap
Audit compliance
Checks tokens, hardcoded values and components outside the library: generates a DS compliance report
Deliver the mockup
HiFi mockup finalised, annotated, ready for dev handoff
Generate the report
Generates a flow report: ticket, components used, lane taken, gaps detected, DS adoption: updates memory.md
Standard flow
DS complete
Product hand-off
Designer receives the product hand-off: validated spec, ticket, wireframes: starting point for the HiFi mockup
Scaffold components
Scans the wireframe and spec, creates a Figma page (ticket name) with candidate DS components laid out as a draft
Compose the mockup
Designer composes screens from candidate components, adjusts states and spacing
Audit compliance
Checks tokens, hardcoded values and components outside the library: generates a DS compliance report
Deliver the mockup
HiFi mockup finalised, annotated, ready for dev handoff
Generate the report
Generates a flow report: ticket, components used, lane taken, gaps detected, DS adoption: updates memory.md
Every file has a precise role. Agents read, write and update these files at each step of the flow.
/design-system
# AGENTS.md ## Role Design system agent. You contribute to maintaining and evolving the DS in a governed way. ## Absolute rules - Read /system/governance.md before any action - Check /components/component-catalog.md before creating - Never hardcode token values - Declare every deviation in a compliance report ## Work cycle 1. Read the context files (/system) 2. Analyse the request and evaluate the risk 3. Run the flow for the matching lane 4. Produce deliverables in /reports 5. Update /system/memory.md
# AGENTS.md ## Role Design system agent. You contribute to maintaining and evolving the DS in a governed way. ## Absolute rules - Read /system/governance.md before any action - Check /components/component-catalog.md before creating - Never hardcode token values - Declare every deviation in a compliance report ## Work cycle 1. Read the context files (/system) 2. Analyse the request and evaluate the risk 3. Run the flow for the matching lane 4. Produce deliverables in /reports 5. Update /system/memory.md
What happened
A component implemented without min/max-width and min/max-height tokens, despite them being present in the Figma.
Why
The scan skill didn't target sizing constraint properties, so they were silently ignored.
How I fixed it
scan-figma.md updated with explicit rules to extract all sizing and constraint properties.
What happened
The agent created a Button component that already existed at v2.4 in the design system.
Why
The catalog listed component names but not variants; the agent didn't recognise the existing coverage.
How I fixed it
component-catalog.md enriched with variants, states and version for each component.
What happened
On a composite page, the agent recoded existing components from scratch instead of reusing DS ones.
Why
Figma layers had inconsistent names, so the agent couldn't connect them to existing code components.
How I fixed it
Layer naming convention + strict recognition rules added to AGENTS.md. Added a naming-check agent.
What happened
A compliance.md report generated by the agent declared 0 deviations. The component was using a deprecated token (`--color-primary`) instead of the active one (`--token-color-primary`): valid CSS, no build error, but silently outside the token architecture.
Why
The scan skill only targeted hardcoded values (hex, arbitrary px). Valid but deprecated CSS aliases were outside the verification scope: the agent detected no violation.
How I fixed it
governance.md updated: any token not prefixed `--token-*` is treated as a declarable deviation. Deprecated alias list added to the scan scope.
