---
title: "UX Architect"
type: source
tags: [agent, ux, css, architecture, design-system, frontend]
date: 2026-04-24
---

## Source File
- [[Agent/agency-agents/design/design-ux-architect.md]]

## Summary（用中文描述）
- 核心主题：AI Agent 系统中 UX Architect（技术架构与用户体验专家）的角色定义与交付物规范
- 问题域：多 Agent 协作系统中，如何为开发者提供可靠的技术基础和清晰的实现路径
- 方法/机制：CSS 设计系统（变量/间距/字体）→ 布局框架（Grid/Flexbox）→ 组件层级 → 主题切换（light/dark/system）→ PM 与开发之间的翻译桥梁
- 结论/价值：Foundation-first 理念，通过消除架构决策疲劳提升开发者生产力，确保项目一致性和可扩展性

## Key Claims（用中文描述）
- ArchitectUX Agent 通过提供 CSS 设计系统、布局框架和清晰的实现规范，为 LuxuryDeveloper 消除架构决策疲劳
- CSS 变量系统应涵盖颜色、排版、间距三个维度，并原生支持 light/dark/system 三种主题模式
- Theme Toggle 是所有新站点的默认必备组件，优先使用 localStorage + `prefers-color-scheme` 检测
- 组件命名应遵循 BEM/Utility-first/Component-based 三种方法之一，并在项目内保持一致
- ArchitectUX 在 ProjectManager 和 LuxuryDeveloper 之间充当翻译层，确保专业 UX 基线在 premium polish 之前落地

## Key Quotes
> "Create scalable CSS architecture before implementation begins" — Foundation-First Approach，CSS 架构应在实现之前完成设计
> "Eliminate architectural decision fatigue for developers" — 核心价值主张，开发者不需要做架构决策
> "Ensure professional UX baseline before premium polish is added" — 与 LuxuryDeveloper 的分工边界

## Key Concepts
- [[CSS-Design-System]]：颜色变量、排版比例、间距系统的基础架构，是所有新项目交付的起点
- [[Layout-Framework]]：基于 CSS Grid 和 Flexbox 的响应式布局框架，包含容器系统和网格模式
- [[Component-Architecture]]：组件命名规范和层级结构，Layout > Content > Interactive > Utility 四级
- [[Theme-Toggle]]：light/dark/system 三态主题切换组件，基于 localStorage 和 `prefers-color-scheme` 实现
- [[Theme-Manager]]：JavaScript 类，管理主题状态持久化、切换和应用逻辑
- [[Responsive-Breakpoints]]：移动优先的断点策略（320px → 768px → 1024px → 1280px）
- [[Information-Architecture]]：页面层级和内容组织结构，导航策略与视觉权重系统

## Key Entities
- [[LuxuryDeveloper]]：后续接手的开发者，依据 ArchitectUX 提供的规范进行高级实现
- [[ProjectManager]]：输出任务列表，ArchitectUX 在此基础上添加技术基础层
- [[ArchitectUX]]：技术架构和 UX 基础专家，本文档描述的 Agent 角色本身

## Connections
- [[agents-orchestrator]] ← coordinates ← [[design-ux-architect]]（UX Architect 由 Orchestrator 协调编排）
- [[design-ux-architect]] ← handoff_to ← [[specialized-luxury-developer]]（UX 基础 → LuxuryDeveloper 实现）
- [[design-ux-architect]] ← receives_tasks_from ← [[project-manager-agent]]（PM 输出任务 → ArchitectUX 添加技术层）
- [[design-ux-architect]] ← depends_on ← [[engineering-software-architect]]（软件架构师提供系统拓扑，UX 负责前端落地）

## Contradictions
- 与 [[specialized-luxury-developer]] 的边界模糊：
  - 冲突点：LuxuryDeveloper 是否应该在实现过程中做架构决策
  - 当前观点：ArchitectUX 认为架构决策应由 UX Architect 在前期完成，LuxuryDeveloper 仅执行
  - 对方观点：LuxuryDeveloper 的场景中，开发者可能需要根据具体需求调整架构
  - 协调：两者属于时序分工，ArchitectUX 负责 Foundation，LuxuryDeveloper 负责 Polish，分界线在"专业 UX 基线建立"之后