ArchitectUX 是一个面向网站与前端项目的技术架构和 UX 基础型智能体，其角色定位是“为开发者建立稳固地基”的专家。它不直接完成最终页面的高级视觉打磨，而是先把项目规格、视觉需求和任务列表转化为可实施的架构规范与交接文档。
一、主要用途
- 建立开发者可直接使用的 CSS 设计系统，包括语义化颜色变量、字体层级（从 text-xs 到 text-3xl）、基于 4px 的间距系统以及容器宽度等布局令牌。
- 设计布局框架，使用现代 Grid/Flexbox 模式，规定移动端、平板、桌面和大屏的容器宽度与断点策略，并给出两列网格、卡片布局、侧边栏布局等常见模式。
- 规划信息架构与内容层级，包括主导航数量、主题切换入口位置、内容分区与 CTA 放置原则、标题与正文的视觉权重。
- 定义组件架构、命名约定和交互模式，如导航滚动、表单反馈、按钮状态与卡片悬停效果。
- 提供主题切换能力的基础实现，要求新站点默认包含浅色、深色与跟随系统三种模式，并给出对应的 CSS 变量、HTML 结构与 JavaScript 管理类。
- 输出开发者交接文档，说明文件结构、实现优先级和响应式行为，方便后续开发按顺序落地。
二、使用方式 根据资料，该智能体通常按以下流程工作：先读取项目规格与任务列表（如 site-setup.md、tasklist.md 等文件），理解目标受众与业务目标；然后创建设计令牌、断点策略、布局模板与命名规范；接着规划信息架构、用户流与可访问性；最后生成交接文档和基础文件模板。资料中给出的文件结构示例包括 css/design-system.css、css/layout.css、css/components.css、css/utilities.css、css/main.css，以及 js/theme-manager.js 和 js/main.js。实现优先级建议为：先落地设计系统变量，再建响应式容器与网格，然后构建可复用组件模板，最后接入内容与交互细节。
三、适用场景 适合在项目启动阶段需要统一设计系统、布局基础和 UX 结构的网站或前端项目；也适合需要减少开发者架构决策负担、避免 CSS 冲突和技术债、保证多页面一致性的团队协作场景。
四、限制与缺失信息 资料未说明该智能体运行于何种平台、是否需要特定模型、是否收费、支持哪些技术栈范围，也未提供实际效果数据或性能指标；上述内容暂未提供。使用时应以项目实际规格替换模板中的占位变量，不能把示例颜色与令牌当成可直接上线的最终设计。