BRAND & POSITIONING
WEBSITE & CONVERSION
MARKETING & CONTENT
MOTION & STORYTELLING

AVAILABLE FOR FREELANCE
FULL-TIME / PART-TIME

Email: CONTACT@AVAARTJOURNEY.COM

AI Systems & Design Engineering Concepts | Ava Liu

Technical Concepts · Systems Vocabulary

AI Systems &
Design Engineering

A practical map of the AI, product engineering, and design engineering concepts I use to build production systems—from retrieval and runtime architecture to full-stack infrastructure, semantic interfaces, motion, and governed human control.

75 conceptsExamples + Case StudiesProduction-oriented
How to read this map

Not a glossary of buzzwords.

Each concept pairs a concise definition with a real project example showing how it was applied and what it enabled. Working Knowledge or Conceptual labels appear only where the portfolio does not show direct production application.

I work across the system, not only the interface.

End-to-end capability path
Design
Frontend
Backend
AI Runtime
Knowledge
Evaluation
Governance
Production
75 concepts
01

AI SYSTEMS & AGENTS

10 concepts

AI Agent

A system that can reason over a task, choose actions, call tools, use state, and iterate toward an outcome rather than only generate a single response.

Example

The agent investigates inbound support requests with live tools and governed knowledge, then produces a draft while keeping the final outbound action under human control.

View Governed AI Email Agent case study →

Agentic AI

AI behavior organized around goals, tool use, state, iteration, and controlled autonomy. I use bounded agentic patterns rather than unrestricted autonomous execution.

Example

A bounded reasoning loop lets the agent decide which tools to call and what evidence to gather before drafting, reducing manual investigation without allowing autonomous sending.

View Governed AI Email Agent case study →

Tool Calling

Lets a model invoke approved functions or APIs to retrieve live data or perform structured actions instead of guessing from model memory.

Example

The agent calls account, subscription, entitlement, login, and product-help tools to ground its response in live system state instead of guessing.

View Governed AI Email Agent case study →

Agent Orchestration

Coordinates model calls, tools, state, validation, retries, and handoffs so a multi-step AI workflow behaves as one governed system.

Example

A controlled tool-use loop coordinates investigation, evidence gathering, drafting, escalation, and approval as one governed workflow.

View Governed AI Email Agent case study →

HITL — Human-in-the-Loop

Places human judgment at defined decision points. I use HITL when an action is consequential, such as approving outbound communication before it is sent.

Example

AI handles investigation and draft generation, while a human reviews, edits, sends, escalates, or closes the case before any customer-facing action occurs.

View Governed AI Email Agent case study →

Bounded Execution

Constrains an agent with explicit tools, iteration limits, permissions, validation rules, and stop conditions so autonomy stays inspectable and controlled.

Example

The tool-using loop is capped and constrained by allowed actions, preventing open-ended autonomous behavior while still enabling multi-step investigation.

View Governed AI Email Agent case study →

Escalation

Routes uncertain, sensitive, or unresolved cases to a human or higher-authority workflow instead of forcing the model to produce a confident-looking answer.

Example

When evidence or confidence is insufficient, the workflow routes the case to a human instead of forcing the model to complete an uncertain answer.

View Governed AI Email Agent case study →

Persistent Traces

Stores agent runs, tool calls, decisions, drafts, and outcomes so behavior can be inspected, debugged, evaluated, and audited after execution.

Example

Agent runs, messages, drafts, tool activity, and audit history are persisted so decisions can be inspected and reconstructed after execution.

View Governed AI Email Agent case study →

Human Approval Gate

A hard system checkpoint that requires explicit human authorization before a consequential action can proceed.

Example

Generated drafts cannot be sent automatically; explicit human approval separates AI reasoning from the irreversible customer-facing action.

View Governed AI Email Agent case study →

AI Trust

A product and systems discipline focused on evidence, provenance, permissions, uncertainty, validation, and human control—not just model accuracy.

Example

Canonical evidence, source lineage, claim verification, and explicit uncertainty states make recommendations inspectable rather than asking users to trust an opaque score.

View Career Agent case study →
02

RETRIEVAL, KNOWLEDGE & EVALUATION

13 concepts

RAG — Retrieval-Augmented Generation

Retrieves relevant external knowledge at runtime and supplies it to the model before generation, grounding answers in current or controlled sources.

Example

Relevant product and support knowledge is retrieved into runtime context before generation, improving grounding while keeping responses tied to governed source material.

View Governed AI Email Agent case study →

Retrieval

The process of finding the most relevant information for a task before generation or decision-making. Retrieval can be keyword-based, semantic, filtered, or hybrid.

Example

The runtime moved away from loading all available context and retrieves only relevant material for each request, reducing unnecessary context growth.

View Production AI Agent Runtime case study →

Semantic Retrieval

Finds information by meaning rather than exact wording, allowing conceptually related evidence to surface even when the query uses different language.

Example

Meaning-based retrieval connects job requirements to relevant career evidence even when the wording differs, improving evidence selection beyond literal keyword matching.

View Career Agent case study →

Hybrid Retrieval

Combines multiple retrieval signals—such as semantic similarity, deterministic filters, metadata, or keyword matching—to improve precision and recall.

Example

Semantic and lexical retrieval are combined to select a smaller, higher-signal context set, addressing the scaling failure caused by a growing file corpus.

View Production AI Agent Runtime case study →

Embeddings

Numeric representations of meaning used to compare semantic similarity between queries, documents, evidence, or requirements.

Example

Semantic representations support meaning-based matching between requirements and evidence, helping surface relevant experience beyond exact phrase overlap.

View Career Agent case study →

Knowledge Engineering

Structures information so AI systems can retrieve, trace, reason over, and safely reuse it. This includes canonical sources, metadata, relationships, and evidence boundaries.

Example

Career evidence is organized into canonical, reusable knowledge with source lineage and claim boundaries, giving downstream analysis a more reliable foundation.

View Career Agent case study →

Semantic Evaluation

Evaluates meaning and degree of fit rather than only exact keyword overlap—for example, assessing how strongly verified experience maps to a job requirement.

Example

Requirements are evaluated by meaning and evidence strength—not simple keyword overlap—so the system can distinguish direct, transferable, partial, and missing matches.

View Career Agent case study →

Source Lineage / Provenance

Preserves where a fact or claim came from so outputs can be traced back to canonical evidence rather than treated as unsupported model text.

Example

Generated claims retain a path back to canonical evidence, making it possible to verify where a recommendation or resume statement came from.

View Career Agent case study →

Evidence Grounding

Requires recommendations or generated claims to be supported by retrieved, verified, or system-authoritative evidence.

Example

Recommendations and generated resume claims are constrained to supported career evidence, reducing unsupported embellishment and making outputs easier to audit.

View Career Agent case study →

Claim Verification

Checks whether a generated statement is actually supported by available evidence before allowing it into a trusted output.

Example

Before a claim is reused in tailored materials, the system checks it against canonical evidence and its source boundary to reduce overstatement.

View Career Agent case study →

Confidence-Based Escalation

Uses uncertainty or insufficient evidence as a routing signal: high-confidence cases can proceed, while ambiguous cases are escalated or held for review.

Example

Low-confidence or ambiguous requirements are surfaced for clarification instead of being silently converted into unsupported claims.

View Career Agent case study →

Leakage-Controlled Validation

Evaluates predictive systems while preventing future information from leaking into training or evaluation, preserving realistic out-of-sample testing.

Example

Decision Lab evaluates frozen strategy behavior on later chronological market windows, helping test generalization without leaking future information into development.

View AI Financial Data Analytics case study →
03

LLM RUNTIME & CONTEXT

12 concepts

Runtime Architecture

The architecture governing what happens while an AI system is executing: context assembly, model calls, tool use, state, retries, validation, escalation, and delivery.

Example

The request lifecycle was re-architected after a 99-file context pipeline crossed its production time boundary, separating retrieval, context assembly, and model execution more deliberately.

View Production AI Agent Runtime case study →

Context Engineering

Designs what information enters an AI system’s working context, when it enters, how it is selected, and how it is structured for reliable execution.

Example

Context is selected, structured, and assembled around the task instead of treating every available file as prompt input, improving scalability and signal quality.

View Production AI Agent Runtime case study →

Context Selection

Chooses the smallest relevant subset of available information for a task instead of sending every available file or record to the model.

Example

Only task-relevant context is selected from the larger corpus, reducing the amount of irrelevant material passed into the model.

View Production AI Agent Runtime case study →

Context Assembly

Builds the final model input from system rules, retrieved evidence, task state, conversation history, and structured data in a controlled order.

Example

Retrieved evidence is organized into a deliberate runtime payload before the model call, making the prompt smaller and easier to reason about.

View Production AI Agent Runtime case study →

Context Window

The amount of input and output a model can process in one request. More context is not automatically better; relevance and assembly quality matter.

Example

The production failure exposed why available context capacity is not the same as useful context; the redesign prioritizes relevant information rather than filling the window.

View Production AI Agent Runtime case study →

Token Optimization

Reduces unnecessary model input/output while preserving required evidence and behavior, improving latency, cost, and reliability.

Example

Selective retrieval and tighter context assembly reduce unnecessary provider input, improving runtime efficiency without simply lowering model capability.

View Production AI Agent Runtime case study →

Prompt Engineering

Designs instructions, constraints, examples, and output expectations for a model. In production, I treat prompts as one layer of a larger system architecture.

Example

System instructions define role, allowed behavior, evidence use, output constraints, and escalation rules so the model operates inside a predictable product workflow.

View Governed AI Email Agent case study →

System Prompt

The highest-level model instruction layer used to define role, operating rules, boundaries, output behavior, and tool-use expectations.

Example

The system prompt establishes tool-use rules, response boundaries, and human-approval requirements before the agent begins investigating a request.

View Governed AI Email Agent case study →

Structured Output

Forces model responses into predictable machine-readable structures so downstream code can validate and safely use the result.

Example

The model returns machine-readable fields instead of free-form prose alone, allowing the product to reliably drive UI state and downstream workflow.

View Governed AI Email Agent case study →

JSON Schema

Defines the exact structure, required fields, data types, and constraints expected from structured AI output or APIs.

Example

Strict JSON Schema constrains model output to the fields the application expects, reducing parsing ambiguity between the LLM and product code.

View Governed AI Email Agent case study →

Model Routing

Selects different models or reasoning tiers for different workloads based on complexity, cost, latency, or quality requirements.

Example

Different analysis depths can be routed to different model tiers so fast screening and deeper evaluation do not require the same runtime cost.

View Career Agent case study →

Fine-tuning

Weight-level model adaptation using training examples. I understand where it fits, but my current production AI systems primarily use prompting, tools, retrieval, structured context, and evaluation rather than weight-level fine-tuning.

Example

In hands-on generative-AI experimentation, I trained an SDXL LoRA on curated visual examples to adapt model behavior at the weight level rather than relying only on prompt styling.

View AI Storytelling Animation case study →
04

FULL-STACK PRODUCT & INFRASTRUCTURE

20 concepts

API

A defined interface that lets software systems request data or actions from one another. APIs connect the frontend, backend, AI providers, payments, and external services.

Example

API is applied in the full-stack financial product to connect product behavior, data, and production infrastructure into a reliable end-to-end workflow.

View AI Financial Data Analytics case study →

REST API

An HTTP-based API pattern using routes and methods such as GET, POST, PATCH, and DELETE to expose application data and operations.

Example

REST API is applied in the full-stack financial product to connect product behavior, data, and production infrastructure into a reliable end-to-end workflow.

View AI Financial Data Analytics case study →

FastAPI

A Python framework I use to build typed backend APIs, application services, AI orchestration endpoints, webhooks, and data workflows.

Example

FastAPI is applied in the full-stack financial product to connect product behavior, data, and production infrastructure into a reliable end-to-end workflow.

View AI Financial Data Analytics case study →

React

A component-based JavaScript library for building interactive user interfaces and reusable product behavior.

Example

React is used to translate design intent into reusable, accessible production components and interaction behavior.

View Design Engineering + Motion case study →

Next.js

A React framework I use for production frontends, routing, rendering, application structure, and full-stack product interfaces.

Example

Next.js is applied in the full-stack financial product to connect product behavior, data, and production infrastructure into a reliable end-to-end workflow.

View AI Financial Data Analytics case study →

TypeScript

Adds static typing to JavaScript so component contracts, data models, and application behavior are easier to reason about and maintain.

Example

TypeScript is used to translate design intent into reusable, accessible production components and interaction behavior.

View Design Engineering + Motion case study →

Backend

The server-side layer that handles business logic, data access, authentication, integrations, AI execution, and secure operations behind the interface.

Example

Backend is applied in the full-stack financial product to connect product behavior, data, and production infrastructure into a reliable end-to-end workflow.

View AI Financial Data Analytics case study →

Database

Persistent structured storage for application state, users, events, traces, transactions, evidence, analytics, and workflow history.

Example

Database is applied in the full-stack financial product to connect product behavior, data, and production infrastructure into a reliable end-to-end workflow.

View AI Financial Data Analytics case study →

SQLite

A lightweight relational database used in several systems for durable application state, migrations, traces, and transactional records.

Example

SQLite supports auditable growth infrastructure across attribution, revenue, commissions, authorization, and operational control.

View Affiliate & Creator Growth System case study →

Authentication

Verifies who a user is—for example, through login and session handling—before granting access to protected product areas.

Example

Authentication is applied in the full-stack financial product to connect product behavior, data, and production infrastructure into a reliable end-to-end workflow.

View AI Financial Data Analytics case study →

Authorization

Determines what an authenticated user is allowed to see or do, including Admin-only actions and capability-based access.

Example

Authorization supports the governed support-agent workflow, helping turn model behavior into a controlled, inspectable product process rather than an isolated chat response.

View Governed AI Email Agent case study →

Webhook

An event-driven HTTP callback that lets an external service push a change to the application, such as an inbound email or payment event.

Example

Webhook supports the governed support-agent workflow, helping turn model behavior into a controlled, inspectable product process rather than an isolated chat response.

View Governed AI Email Agent case study →

Stripe Integration

Connects subscriptions and payment events to product access, revenue state, attribution, commissions, and financial workflows.

Example

Stripe Integration is applied in the full-stack financial product to connect product behavior, data, and production infrastructure into a reliable end-to-end workflow.

View AI Financial Data Analytics case study →

DNS

The naming layer that maps domains and subdomains to infrastructure. I have configured domains, API subdomains, email-related DNS, and production routing.

Example

DNS is applied in the full-stack financial product to connect product behavior, data, and production infrastructure into a reliable end-to-end workflow.

View AI Financial Data Analytics case study →

HTTPS / TLS

Encrypts traffic between users and services. It is a baseline production requirement for authenticated apps, APIs, and payment-connected systems.

Example

HTTPS / TLS is applied in the full-stack financial product to connect product behavior, data, and production infrastructure into a reliable end-to-end workflow.

View AI Financial Data Analytics case study →

Reverse Proxy

Sits in front of application services to route requests, terminate HTTPS, apply caching or security rules, and expose internal services safely.

Example

Reverse Proxy is applied in the full-stack financial product to connect product behavior, data, and production infrastructure into a reliable end-to-end workflow.

View AI Financial Data Analytics case study →

Caching

Stores reusable responses or assets closer to the requester to reduce repeated work, latency, and origin load.

Example

Caching is applied in the full-stack financial product to connect product behavior, data, and production infrastructure into a reliable end-to-end workflow.

View AI Financial Data Analytics case study →

Cloudflare

Used for domain/DNS management, HTTPS, proxying, caching, and security around self-hosted product infrastructure.

Example

Cloudflare is applied in the full-stack financial product to connect product behavior, data, and production infrastructure into a reliable end-to-end workflow.

View AI Financial Data Analytics case study →

MCP — Model Context Protocol

A standardized protocol for connecting AI clients to external tools, resources, and context. I use MCP to connect Figma with AI development environments including Claude and Codex, enabling AI-assisted workflows to work directly with design context through a shared integration layer.

Example

I connect Figma to Claude and Codex through MCP so AI tools can access design context through a standardized interface, bridging design and AI-assisted implementation workflows without building a separate custom integration for each client.

MHS — Model Hardware Standard

Research Preview

A shared specification for AI agents to safely discover, understand, and operate physical devices through standardized hardware interfaces. MHS is model-agnostic and can be accessed by agent harnesses through standard protocols such as MCP.

Current Status · Aug 2026

Anthropic opened MHS as a research preview with partners across science, robotics, electronics, and manufacturing. The preview is focused on interoperability, physical-world safety evaluations, and deployment best practices ahead of a planned open-source release.

View Anthropic research preview →
05

DESIGN ENGINEERING & ACCESSIBILITY

11 concepts

DOM — Document Object Model

The browser’s structured representation of a webpage. JavaScript and frameworks interact with the DOM to render and update interface behavior.

Example

DOM — Document Object Model is used to translate design intent into reusable, accessible production components and interaction behavior.

View Design Engineering + Motion case study →

Semantic DOM

Uses meaningful HTML structure and elements so interfaces remain understandable to browsers, assistive technology, developers, and automation.

Example

Semantic DOM is used to translate design intent into reusable, accessible production components and interaction behavior.

View Design Engineering + Motion case study →

DOM Component

A reusable interface unit whose rendered HTML structure, states, interactions, accessibility, and styling behave as a coherent component in the DOM.

Example

DOM Component is used to translate design intent into reusable, accessible production components and interaction behavior.

View Design Engineering + Motion case study →

Component Architecture

Defines reusable interface primitives, variants, state ownership, composition rules, and boundaries so product UI scales without becoming inconsistent.

Example

Component Architecture is used to translate design intent into reusable, accessible production components and interaction behavior.

View Design Engineering + Motion case study →

Design System

A governed system of reusable components, tokens, patterns, interaction rules, documentation, and standards shared across product and brand experiences.

Example

Design System was applied across the product and design system to improve consistency, responsive behavior, accessibility, and cross-team reuse.

View Island Dental Design System case study →

Design Tokens

Reusable named values for color, typography, spacing, radius, motion, and other design decisions that keep implementation consistent.

Example

Design Tokens was applied across the product and design system to improve consistency, responsive behavior, accessibility, and cross-team reuse.

View Island Dental Design System case study →

Responsive UI

Interface behavior that adapts layout, hierarchy, controls, and content across screen sizes rather than simply shrinking a desktop design.

Example

Responsive UI was applied across the product and design system to improve consistency, responsive behavior, accessibility, and cross-team reuse.

View Island Dental Design System case study →

Accessibility

Designing and implementing interfaces so people with a wide range of abilities can perceive, navigate, understand, and operate them.

Example

Accessibility was applied across the product and design system to improve consistency, responsive behavior, accessibility, and cross-team reuse.

View Island Dental Design System case study →

WCAG

Web Content Accessibility Guidelines: the core technical and design guidance I use for contrast, keyboard access, semantics, focus, and accessible interaction.

Example

WCAG was applied across the product and design system to improve consistency, responsive behavior, accessibility, and cross-team reuse.

View Island Dental Design System case study →

ADA

A U.S. civil-rights law that shapes accessibility requirements for digital experiences. In product work, I translate it into practical accessible design and implementation decisions.

Example

ADA was applied across the product and design system to improve consistency, responsive behavior, accessibility, and cross-team reuse.

View Island Dental Design System case study →

Interaction Architecture

Defines how states, transitions, events, feedback, and motion work together as a system instead of as isolated visual effects.

Example

Interaction Architecture is used to translate design intent into reusable, accessible production components and interaction behavior.

View Design Engineering + Motion case study →
06

MOTION, CREATIVE AI & PRODUCTION

9 concepts

GSAP

A JavaScript animation library I use for precisely controlled timelines, scroll behavior, transitions, and reusable motion systems.

Example

GSAP coordinates multi-step motion timelines where sequencing and interruption matter, turning dense product-state changes into readable visual transitions.

View Design Engineering + Motion case study →

Framer Motion

A React motion library suited to component-level transitions, gestures, layout animation, and state-driven UI motion. My strongest production motion evidence currently uses GSAP.

Example

Framer Motion handles reusable React component transitions and microinteractions, while GSAP is reserved for more orchestrated data-flow timelines and complex sequencing.

View Design Engineering + Motion case study →

Motion System

A reusable set of timing, easing, transition, state, and interaction rules that turns motion into a consistent product behavior layer.

Example

Motion System is used to translate design intent into reusable, accessible production components and interaction behavior.

View Design Engineering + Motion case study →

Generative AI

Models that generate new text, images, video, or other media. I use generative AI inside governed product and creative workflows rather than as a standalone novelty.

Example

Generative AI supports a reusable creative system that keeps brand direction consistent while making multi-format production faster to scale.

View OnMed Brand System case study →

AI-Assisted Creative Workflow

Combines generative tools with reusable templates, brand constraints, human art direction, review, and production automation.

Example

AI-Assisted Creative Workflow supports a reusable creative system that keeps brand direction consistent while making multi-format production faster to scale.

View OnMed Brand System case study →

LoRA

A parameter-efficient adaptation technique commonly used to specialize generative models. I have hands-on experience training LoRA for image-generation workflows on cloud GPU infrastructure.

Example

I trained an SDXL LoRA on curated visual examples to create a reusable style adaptation, gaining hands-on experience with lightweight model fine-tuning for image generation.

View AI Storytelling Animation case study →

Image Generation

Uses generative image models as one stage in a product or production workflow, with prompting, style control, selection, iteration, and human quality review.

Example

Image Generation supports a productized generative-AI workflow that combines automation with human quality control and customer-facing output.

View AI Pet Portrait case study →

Human Art Direction

Keeps concept, taste, composition, consistency, selection, and final quality decisions under human control even when AI accelerates production.

Example

Human Art Direction supports a reusable creative system that keeps brand direction consistent while making multi-format production faster to scale.

View OnMed Brand System case study →

Creative Automation

Automates repeatable production steps while preserving brand constraints, review points, and human ownership of high-impact creative decisions.

Example

Creative Automation supports a reusable creative system that keeps brand direction consistent while making multi-format production faster to scale.

View OnMed Brand System case study →
From Concepts to Production

Technology in practice.

These concepts are part of the systems I design and build—from AI agents and retrieval architecture to full-stack products, design engineering, and motion. Each example connects the technology to a real implementation and its role in the final product.

Ava Liu · Forward Deployed Engineer · Design + Full-Stack + AI Systems