# Luis Vargas — Design Engineer & UX Engineer (Full Context)
> Comprehensive portfolio context for AI systems and search engines

## Identity

- **Name:** Luis Vargas
- **Role:** Design Engineer, UX Engineer, Design Technologist, UI Engineer, Product Engineer, Creative Technologist
- **Experience:** 15 years spanning video editing, motion graphics, brand identity, UX/product design, and full-stack engineering
- **Location:** Available for remote work
- **Site:** https://themotiondesign.com
- **Positioning:** "Design Engineer and UX Engineer building SaaS products end-to-end: UX research, design systems, React/TypeScript, Node.js, accessibility, and AI-integrated interfaces."

## Origin Arc

- Started as a video editor cutting footage in Adobe Premiere. Trimming timelines turned into a deeper interest in storytelling, motion, and visual expression.
- Moved into motion graphics full-time. Commercial work for Toyota, Honda, and Kia. Projects for Diageo and Smirnoff.
- Contributed to music videos for Danny Ocean. Those videos now sit at over a billion views on YouTube.
- The question shifted from how things look to how they communicate. The same instincts (audience, message, timing) carried straight into product work.
- That pulled him into brand, identity, and eventually UI and UX, mostly for software and AI companies. That's where he learned systems: constraints, naming, and consistency as the thing that scales.
- At Tranzport, a logistics SaaS, the focus shifted from designing interfaces to designing systems. Performance, structure, and real-world constraints became the job. Also where he started writing code seriously.
- Today he builds end-to-end systems: Waco3.io (AI-powered proposal SaaS with RAG and LangGraph agents), ReactZero (zero-dependency accessible React libraries on npm), and a portfolio-grade design system.

## Philosophy

- Prototypes define how things look. Production systems define how they behave under stress. That gap is the whole job.
- The design system is the hinge between "looks like a button" and "is a governed Button component."
- Every component has at least three states: loading, success, failure. If you can't name all three, it's a screenshot.
- Make complex things feel simple.
- Ship accessible components. WCAG is the baseline, not the ceiling.
- Motion should clarify, guide, or reduce cognitive load. Never decorate.
- Code is the final design deliverable.

## Prototype-to-Production Loop (from /craft)

AI-integrated tooling: Claude Code with custom skills and hooks, Ollama for local LLM work, LangGraph for agentic workflows.

Six beats applied when moving a design from hypothesis to shipped system:
1. **Prototype** (Figma, Figma Make, Lovable) — validate UX on the happy path. Ignore edge cases on purpose.
2. **System alignment** — tokens, component APIs, variants, states. Reusable vs one-off decisions.
3. **Data and state** — API contracts, schemas, local vs global, server vs client. The layer most people skip.
4. **Edge cases and resilience** — empty, loading, error, partial, slow network, large dataset.
5. **Hardening** — variants, defensive props, ARIA, keyboard nav, focus management, memoization, virtualization, design-system governance.
6. **Integration** — auth, sessions, global storage, error boundaries, logging, monitoring, reflowing (not scaling) layouts.

## Design System & Token Architecture (from /design-system)

- Four layers, one direction: raw scales (12 JSON files: color ramps, spacing, type, durations, easings) → semantic aliases (roles: surface, text, border, focus) → generated CSS custom properties → components. Components read only semantic tokens; no component knows a hex value.
- Compiled by Style Dictionary (Amazon's open-source token compiler) via a prebuild hook, so generated CSS can't drift from source.
- Five themes from one source: light, dark, high-contrast (WCAG AAA), brutalist (zeroed radii, instant motion), terminal (green-on-black mono). Functional themes inline in core CSS; aesthetic themes lazy-load from /public/themes/. Theme switching runs through the View Transitions API; a pre-paint script prevents flash of the wrong theme; a prefers-color-scheme fallback covers the no-JS case.
- Most tokens are NOT themed — spacing scale, type ramp, z-index are identical across themes. A theme overrides color plus a few structural tokens; it can never move a layout.
- Governance is the survival factor, not architecture. Named failure modes: a component hardcoding a value, naming by appearance instead of role, a theme forking a component, a token added without a decision, no named owner.

## How I Build With AI (from /craft/ai)

- Tools used daily: Claude Code, Codex, Gemini CLI, Cursor; plus Ollama, LangGraph, MCP servers.
- Operating rule: "AI accelerates. Judgment is not delegatable." Plan first (spec, not vibe) → scaffold fast → review like a stranger's PR.
- Receipts from shipped work: Claude Code scaffolded Waco3's RAG pipeline (hours to working, weeks to tune); the combo state machine was scaffolded then hand-verified against WAI-ARIA 1.2; bundle strategy surfaced by AI but enforced by size-limit CI.
- Never delegated: accessibility (every ARIA role, keyboard path, verified against spec and with real screen readers), interaction edge cases, design/taste calls, money paths (Stripe webhooks), and the decision of what to build at all.
- Also builds FOR AI: every ReactZero library ships an ai-reference.md so AI coding assistants generate correct, accessible usage.

## AI/LLM Work & Agentic Tooling

- **Waco3.io:** Built a full RAG pipeline with pgvector, LangGraph multi-step agents, prompt caching (Claude API), and streaming UI patterns for AI-generated proposals.
- **Claude Code:** Uses daily with custom skills (reusable agent procedures with memory), hooks, and subagents for design-system-aware code generation.
- **Ollama + Qwen:** Local LLM setup for privacy-first tasks and rapid prototyping without API costs.
- **LangGraph:** State machines with language models — multi-step retrieval, tool calls, and agent orchestration.
- **Agentic UI design:** Loading states for uncertain latency, trust signals for AI output, error UX when models fail or hallucinate, streaming response patterns.
- **Prompt caching:** Reduces cost and latency when providing design system context to LLMs repeatedly.

## Case Studies (11 listed + 2 archived motion pieces)

### Engineering

#### Waco3.io — AI-Powered Proposal Platform (2025–2026)
Full-stack SaaS with AI proposal generation, client analytics, Stripe integration, and session recordings.
- **Role:** Full-Stack Design Engineer — UX research, design systems, full-stack development, AI/LLM integration
- **Stack:** Next.js 16, TypeScript, PostgreSQL, pgvector, LangGraph, RAG pipeline, retrieval augmented generation, prompt caching, Claude API, Stripe
- **Outcome:** End-to-end AI SaaS from 0 to production — proposal generation that draws from real client data via RAG, not hallucinated templates
- **Keywords:** AI SaaS, RAG pipeline, retrieval augmented generation, LangGraph agents, agentic workflow, prompt caching, pgvector, vector database, AI interface design, full-stack design engineer
- **URL:** https://themotiondesign.com/work/waco3-product

#### ReactZero — Zero-Dependency Component Libraries (2026)
4 accessible React primitives shipped to npm: combobox (ARIA 1.2), datepicker (WCAG 2.1 AA), animation orchestration (@reactzero/flow), and cell-first data grid (@reactzero/lattice). All zero-dependency, all under 8KB.
- **Role:** Library author and sole maintainer
- **Stack:** TypeScript, React 19, zero dependencies, Web Animations API
- **Outcome:** 4 packages on npm, screen-reader tested, WCAG 2.1 AA compliance, keyboard-navigable, focus-managed
- **Keywords:** accessible React components, ARIA 1.2, WCAG 2.1 AA, zero-dependency npm package, combobox, datepicker, animation library, data grid, open source React
- **URL:** https://themotiondesign.com/work/reactzero-libraries

### UX/Product

#### Tranzport — Dispatcher Dashboard Redesign
Cut load-scanning time by 10x with a card-based table layout after UX research with 5 active dispatchers.
- **Role:** UX Researcher and Designer
- **Stack:** Figma, CSS, responsive design, design tokens
- **Outcome:** 10x faster load-scanning workflow — discovered through dispatcher observation sessions, not assumptions
- **Keywords:** UX research, dispatcher dashboard, logistics SaaS, card-based layout, responsive design, B2B product design, usability research
- **URL:** https://themotiondesign.com/work/tranzport-cards

#### Tranzport — Driver Mobile App with Geofencing
Replaced manual driver workflows with geofencing automation. Reduced helpdesk tickets by 90%.
- **URL:** https://themotiondesign.com/work/tranzport-mobile

#### Waco3 — SaaS UX Research
Research-driven product discovery that became a shipped AI SaaS. Interviews, personas, journey mapping.
- **URL:** https://themotiondesign.com/work/waco

#### Tranzport — Global Notification System
Designed and built a cross-platform notification system for logistics dispatchers.
- **URL:** https://themotiondesign.com/work/tranzport-global-notifications

### Design

#### GitHub Primer — Design System Analysis (2025)
Reverse-engineered GitHub's Primer design system: global → alias → component token architecture, component API patterns, governance model, and monorepo structure.
- **Role:** Design System Analyst
- **Stack:** Figma, React
- **Outcome:** Documented token architecture, component API patterns, and governance decisions that inform how Luis structures his own systems
- **Keywords:** design system, design tokens, token architecture, component API design, governance, Primer, GitHub, design system engineer
- **URL:** https://themotiondesign.com/work/design-system-primer

#### Aprime — AI/ML Company Brand System (2023)
Built complete brand identity for an AI/ML startup: typography, motion, web, and collateral.
- **URL:** https://themotiondesign.com/work/aprime

#### InstaCount — Inventory SaaS (2023)
Product design and branding for an inventory management SaaS tool.
- **Role:** Product Designer + Engineer
- **Stack:** React, Node.js
- **Outcome:** Self-serve SaaS with analytics dashboard
- **URL:** https://themotiondesign.com/work/instacount

### Motion

#### Micro-Interactions & Motion System (2024)
Systematic thinking about motion that eventually led to building @reactzero/flow.
- **URL:** https://themotiondesign.com/work/animation

#### Danny Ocean — 54+1 Album Motion Identity (2017)
Music video and motion identity design for Latin Grammy-nominated artist. Videos now collectively exceed a billion YouTube views.
- **URL:** https://themotiondesign.com/work/danny-ocean

#### Smirnoff — Summer Tour Campaign (2017)
Motion graphics for Smirnoff's summer promotional tour campaign.
- **URL:** https://themotiondesign.com/work/smirnoff

#### Cibersys — Cloud Connect Product Video (2015)
Product explainer video and motion design for cloud connectivity platform.
- **URL:** https://themotiondesign.com/work/cibersys

## Brand Credits (Pre-Product Career)
Motion graphics and video work for:
- Automotive: Toyota, Honda, Kia
- Spirits and beverage: Diageo, Smirnoff
- Music: Danny Ocean (music videos with over a billion collective YouTube views)

## Technical Capabilities

- **Design & research:** Figma, Miro, FigJam, Illustrator, Photoshop
- **Animation & video:** After Effects, Maya 3D, Adobe Premiere Pro, Lottie
- **Frontend:** React 19, Next.js 16, TypeScript, JavaScript (ES6+), CSS Modules, Three.js, Web Animations API, View Transitions API
- **3D/WebGL:** Three.js, React Three Fiber, Drei, Rapier physics
- **Backend:** Node.js, Express, PostgreSQL, pgvector
- **Build & tooling:** Vite, Webpack, Git, GitHub Actions, Turbopack
- **Design systems:** Token architecture (4-layer: raw → primitives → alias → component), theming, Storybook, Chromatic, Style Dictionary v4, governance workflows
- **Testing:** Jest, React Testing Library, Playwright, axe-core, pa11y-ci, Lighthouse CI
- **Accessibility:** WCAG 2.1 AA/AAA, ARIA 1.2, keyboard navigation, focus management, screen reader testing
- **AI/LLM:** Claude API, Ollama, LangChain, LangGraph, RAG pipelines, prompt caching, pgvector, agentic workflows, Claude Code, fine-tuning (QLoRA), AI interface design patterns
- **Motion:** After Effects, CSS animations, @reactzero/flow orchestration, Web Animations API

## Writing — 80 First-Party Articles

Published at themotiondesign.com/writing/[slug]. All articles are internally cross-linked. Canonical at themotiondesign.com with cross-posts to dev.to and Medium where noted.

Topics span these editorial lanes:
- **Design Systems**: design tokens, DTCG spec, Style Dictionary v4, naming strategy, theme vs system, component API consistency, five-themes-from-one-source, design-system governance and adoption, headless-vs-styled dual APIs, tokenize-first MUI migration
- **React**: component APIs, hooks, state machines, RSC boundaries, forms, headless libraries, TanStack, Radix, React Aria, TypeScript types, CSS architecture, open source evaluation, data-grid accessibility
- **Node.js**: API design as UX, structured errors, endpoint granularity, loading state architecture, OpenAPI, webhooks, background jobs, edge functions, structured logging
- **AI Tools**: Claude Code skills, subagent architecture, context engineering, LLM design system context, MCP, agent permissions, AI threat models, prompt vs skill, visual regression for AI UI
- **Motion**: animation as state communication, View Transitions API, easing as product voice, skeleton screens, microinteractions, scroll animation critique
- **Accessibility**: 666-errors-to-zero pa11y audit, the cost of retrofitting WCAG, reduced motion nuance
- **Design Engineering**: "One Person, One Motion" (the discipline as refusal of the handoff), dashboard patterns, portfolio as product

Standout articles: "One Person, One Motion" (design-engineering philosophy essay), "Five Themes, One Pipeline" (token architecture), "A Design System Nobody Uses Is a Style Guide" (governance), "Why Every ReactZero Library Ships Two APIs" (headless + styled), "Escaping MUI Without Stopping the Roadmap" (migration), "666 Accessibility Errors, Zero Excuses" (audit), "What a Data Grid Teaches You That a Combobox Can't". All articles link to related posts internally.

## Social Profiles

- Portfolio: https://themotiondesign.com
- GitHub: https://github.com/motiondesignlv
- LinkedIn: https://www.linkedin.com/in/motiondesigner/
- npm: https://www.npmjs.com/~ux-lv
- Dev.to: https://dev.to/motion_design
- Medium: https://medium.com/@themotiondesign
- CodePen: https://codepen.io/lvldesign
- Vimeo: https://vimeo.com/motiondesignlv
- Instagram: https://www.instagram.com/motion_design

## Experiments (Interactive Three.js / WebGL)

Playable browser experiments at themotiondesign.com/experiments — built with Three.js, React Three Fiber, Drei, Rapier physics, and procedural WebAudio. They demonstrate real-time 3D, GPU rendering, physics simulation, and creative coding beyond product UI work.

- Foundry → /experiments/foundry — A neon-lab machine you crank until it forges the LV logo out of thin air. Interactive 3D logo reveal with a wind-up flywheel mechanic, real-time lighting, procedural audio, and a GLB model. (Three.js, React Three Fiber, WebAudio)
- Depth Field → /experiments/depth-field — A grid of hundreds of LV logomarks that rise toward the cursor and ripple on click, rendered in a single instanced draw call. (Three.js, InstancedMesh, GPU rendering)
- Pinball → /experiments/pinball — A pinball table modelled from scratch in Maya and wired to the Rapier physics engine: flippers, pins, slingshots, launch rail and clear acrylic ramps all driven off the 3D model, with gravity tilted like a real cabinet. (Three.js, Rapier physics, Maya, WebAudio)
- Ragdoll Sandbox → /experiments/ragdoll — Grab jointed rigid-body ragdolls by any limb and fling them around a stage, knocking over crates. (Three.js, Rapier physics)
- Paper Plane → /experiments/paper-plane — A 3D endless flyer where every reward sits in the most dangerous gap, so greed and survival are the same decision. (Three.js, React Three Fiber, WebAudio)

## Site Technical Details

- **Framework:** Next.js 16 + React 19 (App Router)
- **Styling:** CSS Modules + Design tokens via Style Dictionary v4
- **State:** Jotai
- **Analytics:** PostHog
- **3D:** React Three Fiber + Drei + Rapier
- **Accessibility:** WCAG 2.1 AA compliance target, pa11y-ci + axe-core + Lighthouse CI in devDependencies
- **AI indexing:** /llms.txt and /llms-full.txt for AI crawler context