AI-Assisted Design Operations for Mery OS
The Challenge
Component fragmentation
Existing patterns lacked consistency and reusable logic.
Lack of operational workflows
No scaleable process connecting: tokens, components, documentation, implementation and validation.
Scalable Operational Foundations
Need for a structure readable by: designers, developers and AI Tooling.
Operational Workflow
With In House Team
Close collaboration with Product Designers, Development and Product Manager to constantly hone the product and keep business alignment.
Design System
Maintain, evolve and match alignment with development. Improve Design governance to define proper components.
Automation Flows Ownership
Building automated processes that can reduce the friction or enhance results in a constantly evolving product.
Strategic Approach: Intent-Based Token Architecture
Embedding semantic context into every building block to create a scalable system readable by both humans and machines.
Semantic Structure
Structuring tokens through an intent-based taxonomy that improves semantic clarity, scalability, and implementation consistency.
Visual Language
Glass-inspired material recipes balance depth, contrast, and readability while reinforcing visual hierarchy in complex inspection environments.
Operational Clarity
Structured props and semantic metadata improve clarity, reduce ambiguity, and strengthen design-to-code alignment.
Design Operations & Automation
Beyond component creation, the initiative focused on operationalizing the design system through automation, governance frameworks, and scalable workflows designed to improve consistency and reduce repetitive manual work.
Definitions of Done
Establishing maturity frameworks and review criteria to improve collaboration, reduce ambiguity, and standardize component readiness across the system.
Automated Documentation
Scripts and automation pipelines were introduced to reduce repetitive documentation work while improving consistency, scalability, and cross-functional alignment.
Repetitive workflow reduction
Developing custom plugins to reduce repetitive production workflows, including token generation pipelines, icon preparation, and documentation scaffolding also it enabled any person on the team using figma to make good use of it.
Applied Product Experiments
The design system also became a working environment for testing product decisions. Two focused prototypes turned open questions into comparable, reviewable experiences built with production-aligned components.
Streamlining Device Onboarding
The existing wizard covered the complete setup path, creating unnecessary length for users who only needed essential configuration. I rebuilt the current flow with system components and created three accelerated alternatives to compare how setup could be shortened without removing critical requirements.
Benchmarking Inspection Workspace Selection
I benchmarked asset-based tools such as Lightroom to understand how persistent working directories communicate location, content, and consequence. The resulting clickable study compares three patterns adapted for inspection assets, including images, video, captures, and supporting files.
The Observatory Vision
The Observatory is an independent, working proof of concept that explores how design-system documentation, implementation artifacts, validation, and AI-assisted workflows could operate as one connected source of truth. It has not been officially adopted as part of the Mery OS platform.
A Production-Aligned Component Playground
This focused excerpt shows the Slider component running in the Observatory playground, where implemented components can be inspected through real interactions, source references, and contract metadata. The broader prototype also explores Figma-to-code parity, component demos, and connected product flows. The full working prototype is shared only in an interview setting upon request.
Component Demo Pages
Component demo environments enable realistic interaction validation and improve design-to-development alignment before implementation begins.
Interactive Playgrounds
Prototype sandboxes built with implementation-ready components enable faster iteration, interaction testing, and workflow validation.
Health-State Monitoring
Automated audit reporting surfaces implementation gaps, parity issues, and system health metrics to improve governance and cross-functional alignment.
Impact
Reduced Ambiguity
Structured semantics and component anatomy improved clarity across the entire operational pipeline.
Stronger Consistency
Standardized structures enabled scalable system adoption while improving alignment across teams.
Reusable component structure
Reusable component foundations streamlined documentation, implementation, and automation workflows, enabling scalable production and system growth.
Improved alignment
Shared documentation, demo environments, and operational guidelines improved onboarding and strengthened alignment between design and engineering workflows.
Accelerated experimentation
Production-aligned playgrounds enabled rapid experimentation, interaction testing, and workflow validation earlier in the design process.
Mery OS became more than a visual modernization effort. It evolved into an exploration of how design systems, automation, and AI-assisted workflows can create scalable operational foundations for complex industrial software.
