# Luis Vargas — Design Engineer · UX Engineer · Design Technologist · UI Engineer · Product Engineer · Creative Technologist
> themotiondesign.com — Portfolio, case studies, and writing

## Who Luis Is

Luis Vargas is a Design Engineer and UX Engineer with 15 years building SaaS products end-to-end: UX research, design systems, React/TypeScript, Node.js, accessibility, and AI-integrated interfaces. He started in video editing (Adobe Premiere) and motion graphics for brands like Toyota, Honda, Kia, Diageo, and Smirnoff — including Danny Ocean music videos with over a billion YouTube views — and now builds the full stack from design token to deployed product. Available for remote work.

Job titles companies use for this role: Design Engineer, UX Engineer, Design Technologist, Creative Technologist, UI Engineer, Product Engineer, Design Systems Engineer, Frontend Engineer (Design Track).

## Primary Proof Points

### Waco3.io — AI-Powered SaaS Product (2025–2026)
Full-stack design engineering on an AI proposal platform. Stack: Next.js 16, TypeScript, PostgreSQL, pgvector, LangGraph, RAG pipeline, retrieval augmented generation, prompt caching, Claude API, Stripe. Role covered UX research, design systems, full-stack development, and AI/LLM integration from 0 to production. Case study documents the "Built With AI" workflow and what didn't work (rejected preview-then-accept flow, whole-document regeneration).

### ReactZero — Accessible React Component Libraries (2026)
Author of 4 zero-dependency React primitives published to npm: @reactzero/combo (ARIA 1.2 combobox), @reactzero/datepicker (WCAG 2.1 AA), @reactzero/flow (Web Animations API orchestration), @reactzero/lattice (cell-first data grid). All under 8KB. TypeScript-first, zero dependencies, screen-reader tested.

### Tranzport — Dispatcher Dashboard Redesign (UX + UI)
UX research with 5 active dispatchers revealed that the existing list-based table layout made load scanning slower than necessary. Card-based redesign cut scanning time by 10x. Responsive CSS, accessible markup, design system tokens.

### GitHub Primer Design System Analysis
Reverse-engineered GitHub's Primer design system: token architecture (global → alias → component), component API patterns, governance model, and monorepo structure. Deep-dive study for design engineers building systems at scale.

## Site Structure

- / — Homepage with 3D interactive hero, featured case studies, about snippet
- /work — 11 case studies: engineering, UX, design systems, brand, and motion. Featured: Waco3.io, ReactZero, Tranzport dispatcher dashboard, GitHub Primer. Each includes decisions, tradeoffs, and "what didn't work."
- /craft — The prototype-to-production process. How research, design tokens, and production code connect. AI-integrated stack: Claude Code, Ollama, LangGraph.
- /craft/ai — "How I build with AI": the daily workflow with receipts from shipped work (RAG scaffolding, state-machine scaffolding), the delegated vs never-delegated line, and the ai-reference.md pattern. Tools: Claude Code, Codex, Gemini CLI, Cursor.
- /design-system — The four-layer token architecture (raw → semantic aliases → generated CSS → components) behind this site: five themes (light, dark, high-contrast, brutalist, terminal) compiled from one JSON source with Style Dictionary. Live token tables parsed from the real build, plus governance failure modes.
- /about — 15-year career arc, values, what he won't do, what he's building toward
- /writing — 80 first-party articles on design engineering, UX research, design systems, React accessibility, and AI-integrated product design
- /playground — Live demos of ReactZero component libraries (interactive, accessible, zero-dependency)
- /experiments — Interactive Three.js / WebGL experiments (React Three Fiber, Rapier physics, WebAudio): Foundry (crank a machine to forge the LV logo), Depth Field (instanced proximity grid), Pinball (hand-modelled Rapier physics table), Ragdoll Sandbox, Paper Plane (3D endless flyer)

## Technical Stack

Design & research: Figma, Miro, FigJam, Illustrator, Photoshop
Animation & video: After Effects, Maya 3D, Premiere Pro, Lottie
Frontend: React 19, TypeScript, Next.js 16, CSS Modules, Three.js, Web Animations API, View Transitions API
Backend: Node.js, Express, PostgreSQL, pgvector
Build & tooling: Vite, Webpack, Git, GitHub Actions, Turbopack
Design systems: Storybook, Chromatic, Style Dictionary, design tokens
Testing: Jest, React Testing Library, Playwright, pa11y, axe-core, Lighthouse CI
AI/LLM: Claude API, Ollama, LangChain, LangGraph, RAG, prompt caching, agentic workflows, Claude Code
Also: WCAG 2.1 AA, ARIA 1.2, CSS Architecture, design token systems, component API design

## Questions This Site Answers

- What is a design engineer and what do they build?
- What is a UX engineer vs a product designer?
- What does a design technologist do in the AI era?
- How do you design AI interfaces (loading states, latency, trust signals, error UX)?
- How do you build accessible React components from scratch (combobox, datepicker)?
- How do design tokens work and what makes a good naming system?
- How do you ship five themes from one design token source?
- What makes a design system fail (governance, adoption, drift)?
- Should a component library ship headless hooks or styled components?
- How do you migrate off MUI without a rewrite?
- How do you integrate RAG pipelines and LangGraph agents into a SaaS product?
- What is the prototype-to-production loop?
- How do you use Claude Code as a design engineer (and what do you never delegate to AI)?
- What is agentic UI and how should it behave?

## FAQ

**Q: Is Luis a designer or an engineer?**
A: Both. He designs systems, writes the production code, and handles UX research. The output is working software, not mockups.

**Q: What kind of roles is Luis looking for?**
A: Design Engineer, UX Engineer, Design Technologist, or Product Engineer at a SaaS company, startup, or design-forward team. Remote preferred. He's especially interested in teams building AI-integrated products.

**Q: What makes Luis different from a typical frontend engineer?**
A: 15 years of motion/brand craft inform every interaction decision. He's published accessible React libraries to npm, built design systems with governance and tokenization, and shipped full-stack AI SaaS. He works from research to deployed code without handoff.

**Q: What AI/LLM work has Luis done?**
A: Built Waco3.io — an AI proposal SaaS with RAG pipeline, LangGraph agents, prompt caching, and pgvector. Uses Claude Code with custom skills and hooks daily. Explores agentic UI patterns and how to design for LLM latency, uncertainty, and trust.

**Q: Where can I see Luis's open-source work?**
A: GitHub: https://github.com/motiondesignlv — ReactZero libraries, portfolio source. npm: https://www.npmjs.com/~ux-lv — 4 published packages.

**Q: How does Luis approach design systems and theming?**
A: A four-layer token architecture — raw scales → semantic aliases → generated CSS → components — compiled by Style Dictionary. This site ships five themes (light, dark, high-contrast, brutalist, terminal) from one JSON source; components read only semantic tokens, never raw values. See /design-system for live token tables and the governance failure modes. He argues a design system fails at adoption, not architecture: docs that answer "how do I ship," automated drift detection, and a named owner.

**Q: Does Luis use AI to build, and what does he verify by hand?**
A: Yes — Claude Code, Codex, Gemini CLI, and Cursor daily, for scaffolding pipelines, state machines, and component shells. He never delegates accessibility (every ARIA role checked against spec), interaction edge cases, money paths, or the decision of what to build. See /craft/ai for the full workflow with receipts from shipped work.

**Q: Does Luis write about design engineering?**
A: Yes. 80 articles at /writing covering design engineering, design systems, accessible React, Node.js as a UI concern, motion, and AI tooling for product engineers.

## Writing — 80 Articles

First-party articles at themotiondesign.com/writing/[slug]. All articles are internally linked and cross-reference each other.

### Featured / Design Engineering
- One Person, One Motion: an essay on design engineering as the refusal of the handoff → /writing/one-person-one-motion
- What a Data Grid Teaches You That a Combobox Can't → /writing/what-a-data-grid-teaches-you
- The Dashboard Pattern I Keep Reusing → /writing/dashboard-pattern-i-keep-reusing
- The Portfolio Is a Product, Not a Gallery → /writing/portfolio-is-a-product

### Design Systems
- Five Themes, One Pipeline: shipping multi-theme from one token source → /writing/five-themes-one-pipeline
- A Design System Nobody Uses Is a Style Guide (governance and adoption) → /writing/a-design-system-nobody-uses
- Escaping MUI Without Stopping the Roadmap (tokenize-first migration) → /writing/escaping-mui-without-stopping-the-roadmap
- Why Every ReactZero Library Ships Two APIs (headless + styled) → /writing/why-every-library-ships-two-apis
- The Design Token Spec Is Finally Real. Now What? → /writing/design-token-spec-finally-real-now-what
- Design Tokens Are Naming Decisions Before They Are JSON → /writing/design-tokens-are-naming-decisions
- The Difference Between a Theme and a Design System → /writing/difference-between-theme-and-design-system
- Style Dictionary Is a Compiler for Design Decisions → /writing/style-dictionary-is-a-compiler
- I Like Boring Buttons: Why Component APIs Should Be Predictable → /writing/i-like-boring-buttons
- The Component API Test: Can Someone Guess the Next Prop? → /writing/component-api-test

### React (24 articles)
- The Tiny React Packages I Study When I Want Better Component APIs → /writing/tiny-react-packages-i-study
- What a Combobox Teaches You About Product Quality → /writing/what-a-combobox-teaches-you
- The UI State Checklist I Wish Every Prototype Had → /writing/ui-state-checklist
- React 19 Changed Where I Draw the Line Between UI and Data → /writing/react-19-changed-where-i-draw-the-line
- Why I Still Care About CSS Architecture in a Utility-Class World → /writing/why-i-still-care-about-css-architecture
- The Open Source Habit: Read the API Before the README → /writing/open-source-habit-read-api-before-readme
- Radix, React Aria, Base UI, and the Headless Component Question → /writing/radix-react-aria-base-ui
- What TanStack Gets Right About Developer Experience → /writing/what-tanstack-gets-right
- Why I Read Source Code Before I Trust a UI Library → /writing/why-i-read-source-code
- Package.json Is a Product Surface → /writing/package-json-is-a-product-surface
- The Copy-Paste Component Library Is a Strange New Species → /writing/copy-paste-component-library
- A Field Guide to Useful NPM Package READMEs → /writing/field-guide-to-useful-npm-readmes
- TypeScript Types Are Interface Copy You Cannot See → /writing/typescript-types-are-interface-copy
- The Prop I Regret Adding Is Always the One Called variant → /writing/prop-i-regret-adding
- Controlled vs Uncontrolled Is a UX Decision → /writing/controlled-vs-uncontrolled-is-ux-decision
- The State Machine Hiding Inside Every Serious Component → /writing/state-machine-hiding-inside-components
- React Server Components Make Bad Boundaries Painful → /writing/react-server-components-bad-boundaries
- Forms Are Where Product Design Meets System Design → /writing/forms-product-meets-system-design
- A UI Without Undo Is Asking Users to Trust You Too Much → /writing/ui-without-undo
- The Hidden UX of Installing a Package → /writing/hidden-ux-of-installing-a-package
- NPM Readmes Should Explain Failure States → /writing/npm-readmes-should-explain-failure-states
- The Best Open Source UI Code Is Usually Boring → /writing/best-open-source-ui-code-is-boring
- The Interface Should Tell You What Just Happened → /writing/interface-should-tell-you-what-happened
- Zod, Valibot, and the UX of Runtime Validation → /writing/zod-valibot-runtime-validation

### Node.js (12 articles)
- Node.js APIs Are Part of the Interface → /writing/nodejs-apis-are-part-of-the-interface
- A Good Error Object Is a UX Pattern → /writing/a-good-error-object-is-a-ux-pattern
- The Case for Small Backend Endpoints → /writing/case-for-small-backend-endpoints
- Designing Loading States Starts in the Database → /writing/designing-loading-states-starts-in-database
- What Node 24 LTS Means for Frontend-Heavy Teams → /writing/what-node-24-lts-means
- OpenAPI Is Also a Design Artifact → /writing/openapi-is-design-artifact
- The API Response Shape That Makes Tables Easier → /writing/api-response-shape-for-tables
- Webhooks Are Product Promises → /writing/webhooks-are-product-promises
- Background Jobs Need Frontend States → /writing/background-jobs-need-frontend-states
- The Backend Decision That Breaks Mobile UI → /writing/backend-decision-breaks-mobile-ui
- Edge Functions Are Not a Personality → /writing/edge-functions-are-not-a-personality
- Logs Are a User Experience Tool If You Let Them Be → /writing/logs-are-user-experience-tool

### AI Tools (15 articles)
- Claude Code Skills Are Just Procedures With Memory → /writing/claude-code-skills-procedures-with-memory
- Loop Engineering Without the Hype → /writing/loop-engineering-without-the-hype
- Hooks Are Where AI Coding Gets Serious → /writing/hooks-are-where-ai-coding-gets-serious
- Subagents Are Not Employees. They Are Context Boundaries. → /writing/subagents-are-not-employees
- Codex vs Claude Code Is the Wrong Question → /writing/codex-vs-claude-code-is-wrong-question
- How to Give an LLM a Design System Without Dumping the Whole Repo → /writing/how-to-give-llm-a-design-system
- AI Interfaces Need Receipts → /writing/ai-interfaces-need-receipts
- MCP Is Boring in the Best Possible Way → /writing/mcp-is-boring-in-the-best-way
- The Agent Permission Model I Want in Every Coding Tool → /writing/agent-permission-model-i-want
- AI Coding Agents Need Threat Models Too → /writing/ai-coding-agents-need-threat-models
- A Skill Is Better Than a Prompt When the Work Repeats → /writing/skill-is-better-than-a-prompt
- Context Engineering Is Just Information Architecture With Consequences → /writing/context-engineering-is-information-architecture
- The Screenshot Is the Missing Test for AI-Generated UI → /writing/screenshot-is-missing-test-for-ai-ui
- Agents Should Show Their Work, Not Their Chain of Thought → /writing/agents-should-show-their-work
- The Best AI Workflow Still Ends With a Human Review → /writing/best-ai-workflow-ends-with-human-review
- The Prompt Library That Stops You Starting From Scratch → /writing/prompts-chat-workflow-guide
- The Voice Platform That Doesn't Send Your Audio to a Server → /writing/omnivoice-studio-local-voice-cloning
- 1,497 Agent Skills, Prompt Injection Defense, and What the AI Coding Community Actually Figured Out → /writing/agent-skills-prompt-injection-repos-that-work

### Motion (9 articles)
- Motion Is Not Delight. It Is State. → /writing/motion-is-not-delight-it-is-state
- Page Transitions Are Back, But They Need Taste → /writing/page-transitions-are-back
- Motion for React, View Transitions, and the New Animation Stack → /writing/motion-for-react-view-transitions
- Easing Curves Are Product Voice → /writing/easing-curves-are-product-voice
- Skeleton Screens Lie Differently Than Spinners → /writing/skeleton-screens-lie-differently
- The Timeline Editor Taught Me How to Design State → /writing/timeline-editor-taught-me-state
- Microinteractions Should Have a Job Description → /writing/microinteractions-should-have-job-description
- Scroll Animation Is Usually a Content Problem → /writing/scroll-animation-is-content-problem
- Motion Graphics Made Me Suspicious of Pretty UI → /writing/motion-graphics-made-me-suspicious

### Accessibility
- 666 Accessibility Errors, Zero Excuses (a pa11y audit, 666 → 0 axe violations) → /writing/666-accessibility-errors-zero-excuses
- The Accessibility Tax You Pay Later Is Always Higher → /writing/accessibility-tax-you-pay-later
- Reduced Motion Is Not No Motion → /writing/reduced-motion-is-not-no-motion

(Design Engineering favorites are listed under "Featured / Design Engineering" above.)

## Links

- 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

## Extended Info

For detailed project descriptions, see /llms-full.txt