Product & Visual Designer • Design Systems • AI Architecture

Bridging high-level visual craft with scalable UX/UI design systems.

With over 10 years of experience, I translate complex structural problems into human-centric digital products, robust component ecosystems, and intelligent AI-augmented design workflows. Based in Barcelona.

Experience

10+ Years Craft

Senior Product & Visual Design across B2B SaaS, mobile platforms, and boutique brand identities.

Core Focus

Editorial UX & Systems

Figma tokens, component governance, multi-tier design systems, and DesignOps pipelines.

Innovation

AI-Augmented Workflows

Single Source of Truth context injectors, Claude Code automation, and prompt architecture.

Explore Selected Work View Fils Flagship Case Study obradors.lluis@gmail.com

Portfolio

Selected Projects

Flagship Case Study & Prototype

Master's Final Project • 2024–2025

App Design (UX/UI) Behavioral Gamification Design System Master

Fils — Sustainable fashion traceability ecosystem

Bridging the gap between ethical consumer intent and cognitive overload. A mobile platform powered by sub-second barcode scanning, transparent supply-chain metrics, and behavioral habit gamification.

1.1s

Barcode Scan Speed

100+

Qualitative Interviews

4.8★

Prototype Usability

View Complete Interactive Case Study & Prototype

// Context Architecture & SSoT
const tokens = { brand: '#5778F0', eco: '#5CDCB6' };
export const designOps = new AutomationPipeline();
> Claude Code sync: 74% API Context Overhead Reduction

Design Systems AI Architecture

B2B SaaS AI Hub & DesignOps

Figma-to-code architecture, Markdown-based Single Source of Truth (SSoT), and local Claude Code automation pipelines.

App Design Healthcare / AI

Doula

Maternity support network app featuring the Materna AI assistant, postpartum tracking, and midwife consultation.

App Design Branding

Wine a Minute

Last-mile on-demand delivery app and brand identity for selected wines and artisanal beers.

E-Commerce UI/UX

Voy Verde

Online florist platform and botanical subscription experience designed for a Barcelona boutique.

E-Commerce Subscription

Localhopper

Craft beer marketplace, discoverability ecosystem, and curated monthly subscription club.

Fintech App Design

Tinka

Frictionless mobile experience for a modern "Buy Now Pay Later" installment financial service.

Branding Print Craft

Galeria Cromo

Risograph artisan visual identity and print collateral for an independent Barcelona illustration gallery.

Visual Identity Tech Platform

Humaind

Creative brand architecture, visual design system, and digital presence for a future-forward tech enterprise.

Editorial Design Swiss Grid

Asian Countries

Strict modular grid, precision typesetting, and aesthetic visual balance for a cultural travel booklet series.

Poster Design Campaign

Can Luc

Bold, music festival-inspired visual language and screen-printed poster campaign for an artisan cheese shop.

Advertising Healthcare

Park Medical Group

Out-of-home advertising, digital transit billboards, and cross-channel patient acquisition campaigns.

Operational Edge

The Architecture of Scale.

Design leadership is no longer just pushing pixels; it's about structuring design information and standardizing workflows so human product teams and AI models operate in complete synchronization.

Multi-Tier Token Systems

Strict 3-tier token hierarchy (Primitive → Semantic → Component) bridging Figma Variables with Tailwind CSS and React component libraries.

brand.500

#5778F0

eco.500

#5CDCB6

warning.500

#FFB09B

Figma Variables Sync Bi-directional

74% API Overhead Reduction

AI Context Architecture (SSoT)

Markdown-based Single Source of Truth architecture that compiles design tokens, layout rules, and brand guidelines directly into context injectors for Claude Code and local LLMs.

// Compiled SSoT Pipeline

File: brand_ssot.md

Target: Claude Code / Local Agentic Workflows

> Modules:

01. Typography Hierarchy & Responsive Clamp Scales

02. Semantic Color Roles & High-Contrast Tokens

03. Deterministic Python Slidedeck Automation

Lead DesignOps Genomcore & madeofgenes.ai

Execution Tooling Claude Code + Python Automation

Background

Design is architecture, craft, and clarity.

I am a Barcelona-based Senior Product and Visual Designer with a multidisciplinary trajectory spanning over a decade. My work unites the meticulous craft of editorial Swiss typography with the functional rigor of complex digital product design.

Over the years, I have architected design systems for B2B SaaS platforms in healthcare and genomics, designed high-retention consumer mobile applications, and pioneered AI-assisted DesignOps pipelines that drastically accelerate product turnaround without degrading brand fidelity.

Whether structuring a multi-brand token system or refining the sub-second interaction states of a mobile scanning experience, I design for longevity, human empathy, and structural clarity.

Product & UX/UI Design

End-to-end product discovery, qualitative user research, wireframing, high-fidelity UI design, user journey mapping, and usability testing.

Figma Rapid Prototyping Design Systems DesignOps

Visual Identity & Editorial Craft

Comprehensive brand architecture, modular Swiss grid systems, high-level typography, print production, and art direction.

Brand Guidelines Editorial Layout Typography Creative Direction

Engineering & AI Integration

Bridging design and code seamlessly: semantic HTML5, CSS tokens, Tailwind, React component systems, and AI context engineering.

Tailwind CSS React Claude Code Python Scripting

Open for Senior Roles & Consultations

Let's build something precise.

Interested in partnering on design systems, leading product design initiatives, or building AI-augmented workflows? Let's connect.

obradors.lluis@gmail.com LinkedIn → Adobe Portfolio →

Crafted in Barcelona • Vite • Tailwind • Cloudflare