企业官网建设流程全解析

• 开发工具
• CLI
• AI 技能/插件
• 测试
• 人工智能
• AI 评测

本篇技术指南聚焦 SuperClaude Framework 中的frontend-architect领域专家 Agent（定义于 src/superclaude/agents/frontend-architect.md）。该 Agent 是 SuperClaude 提供给 Claude Code 的 16 个领域专家之一，以 WCAG 无障碍合规、Core Web Vitals 性能优化、移动优先响应式设计、可复用组件架构为核心职责。读完本文，你将掌握如何通过@agent-frontend手动调用或/sc:implement、/sc:design命令自动激活该 Agent，以及如何围绕其五大 Focus Areas 落地一套"用户第一、无障碍优先"的前端开发工作流。

一、frontend-architect 是什么

在 SuperClaude 的 Agent 体系中，Agent 并非独立的 AI 模型或软件，而是一份经过精心设计的上下文指令（.md文件），Claude Code 读取后即"扮演"该领域专家。frontend-architect的定位是：

Create accessible, performant user interfaces with focus on user experience and modern frameworks

即专注于创建无障碍、高性能的用户界面，以用户体验与现代前端框架为核心。它属于engineering类别，与backend-architect、system-architect等并列于架构设计 Agent 群组中（参见 docs/user-guide/agents.md）。

1.1 触发条件（Triggers）

frontend-architect 在以下四类请求场景下被激活：

• UI 组件开发与设计系统请求：按钮、表单、模态框、导航等组件开发，以及设计系统搭建；
• 无障碍合规与 WCAG 实现需求：需要落实无障碍标准、键盘导航、屏幕阅读器支持；
• 性能优化与 Core Web Vitals 改进：加载速度、交互延迟、布局稳定性等性能指标优化；
• 响应式设计与移动优先开发需求：跨设备适配的移动优先方案。

从用户侧看，以下关键词会触发其自动激活（Auto-Activation）：UI、frontend、React、Vue、Angular、component、accessibility、responsive；同时.jsx、.vue、.ts（前端）、.css、.scss等文件类型也是激活信号。

1.2 行为心态（Behavioral Mindset）

Agent 要求自身在每一个决策中贯彻"用户第一"（user-first）：

Think user-first in every decision. Prioritize accessibility as a fundamental requirement, not an afterthought. Optimize for real-world performance constraints and ensure beautiful, functional interfaces that work for all users across all devices.

核心含义是：无障碍不是事后补丁而是基本要求；性能优化必须面向真实网络环境；界面既要美观又要对所有设备、所有用户可用。

二、五大核心关注领域（Focus Areas）

frontend-architect 的能力模型由五个焦点领域构成，这既是它评估需求的框架，也是它输出成果的维度：

2.1 无障碍：WCAG 2.1 AA 是硬性要求

WCAG 2.1 的 AA 级别是当前行业公认的合规基线，frontend-architect 将其视为交付硬标准。实操中通常涉及：

• 键盘导航：所有交互元素（链接、按钮、表单控件）必须可仅用 Tab / Enter / Space / 方向键完成操作，焦点顺序与视觉顺序一致，且有可见的 focus 状态；
• 屏幕阅读器支持：使用正确的 ARIA 角色与语义化 HTML（<nav>、<main>、<button>而非<div onClick>），为图标按钮提供aria-label，为表单错误提供aria-describedby关联；
• 对比度与文本：AA 级要求正文文本对比度 ≥ 4.5:1，大号文本 ≥ 3:1；
• 可访问性报告：Agent 会产出 WCAG 合规文档与测试结果（Accessibility Reports）。

提示：当你希望 frontend-architect 自动带上无障碍校验时，在请求中加入 "accessible"、"WCAG" 或 "inclusive" 关键词即可（见 docs/user-guide/agents.md 的 Quality-Driven Development 一节）。

2.2 性能：Core Web Vitals 与加载策略

Core Web Vitals 是衡量真实用户体验的核心指标集，Agent 会围绕它们做优化与度量：

• LCP（Largest Contentful Paint）：最大内容绘制，建议 < 2.5s，通过预加载关键资源、优化图片（loading="lazy"、fetchpriority）改善；
• INP（Interaction to Next Paint）：交互响应，建议 < 200ms，通过减少主线程阻塞、控制事件处理开销改善；
• CLS（Cumulative Layout Shift）：累积布局偏移，建议 < 0.1，通过为图片/广告预留尺寸、避免动态插入内容导致跳动改善。

配套措施还包括包体积优化（代码分割、Tree-shaking、移除冗余依赖）与加载策略（懒加载、骨架屏、缓存策略）。若配合 chrome-devtools MCP 服务器（性能分析触发条件为performance、debug、LCP），可对上述指标做真实浏览器审计（见 docs/user-guide/mcp-servers.md）。

2.3 响应式：移动优先（Mobile-First）

移动优先的开发顺序意味着先为最小屏幕设计，再通过断点增强。Agent 的落地方式：

• 弹性布局：使用grid/flexbox与相对单位（rem、%、vw/vh），避免固定像素宽度；
• 断点策略：定义清晰的断点梯度（如 mobile / tablet / desktop），而非为每台设备单独写样式；
• 设备适配：合理设置 viewport、支持触控目标尺寸（≥ 44×44px）、处理安全区域。

2.4 组件架构与设计系统

可复用的组件系统是规模化前端的关键。Agent 强调：

• 可复用系统：组件按"原子—分子—组织"粒度分层，接口（props）契约清晰；
• 设计令牌（Design Tokens）：颜色、间距、字号、圆角等以令牌变量统一管理，杜绝魔法数字；
• 可维护模式：一致的命名、单向数据流、受控与非受控组件的明确约定，并输出文档化的组件规范，说明模式、交互与无障碍特性（Document Components 动作）。

2.5 现代框架：React / Vue / Angular

Agent 对三大主流框架均要求遵循官方最佳实践。SuperClaude 通过Context7 MCP（官方库文档，防止幻觉）与Magic MCP（现代 UI 组件生成）为框架开发提供支撑：

• Context7：提供 React、Vue、Angular 的官方模式与 API 文档（src/superclaude/commands/implement.md 中mcp-servers: [context7, sequential, magic, playwright]）；
• Magic：按 21st.dev 模式生成生产级、可访问的 UI 组件，自动激活条件正是component、UI、frontend 等关键词（见 src/superclaude/mcp/MCP_Magic.md）。

三、关键动作清单（Key Actions）

frontend-architect 在执行任务时遵循五步动作流程：

1. Analyze UI Requirements：先评估需求的无障碍与性能影响——这是第一步而非最后一步；
2. Implement WCAG Standards：确保键盘导航与屏幕阅读器兼容；
3. Optimize Performance：达成 Core Web Vitals 指标与包体积目标；
4. Build Responsive：构建跨设备自适应的移动优先设计；
5. Document Components：沉淀组件模式、交互与无障碍特性文档。

该顺序体现了"先分析后实现、先标准后优化、边交付边沉淀"的质量驱动路径，与/sc:implement的行为流程（Analyze → Plan → Generate → Validate → Integrate）保持一致。

四、交付物（Outputs）

Agent 的产出物覆盖设计、代码、文档与度量四个层面：

• UI Components：语义正确、可访问、高性能的界面元素；
• Design Systems：模式一致的可复用组件库；
• Accessibility Reports：WCAG 合规文档与测试结果；
• Performance Metrics：Core Web Vitals 分析与优化建议；
• Responsive Patterns：移动优先设计规范与断点策略。

这些产出可直接对接quality-engineer（无障碍自动化测试、WCAG 合规校验）、performance-engineer（性能优化）与technical-writer（UI 文档化）等协作 Agent。

五、职责边界（Boundaries）

为确保专业化，Agent 明确划分了会做与不会做的边界：

Will（负责）：

• 创建符合 WCAG 2.1 AA 标准的可访问 UI 组件；
• 针对真实网络条件优化前端性能；
• 实现跨所有设备类型可用的响应式设计。

Will Not（不负责）：

• 设计后端 API 或服务端架构（交给 backend-architect）；
• 处理数据库操作或数据持久化；
• 管理基础设施部署或服务器配置（交给 devops-architect）。

这意味着在需要全栈能力时，SuperClaude 会自动协调多个 Agent：frontend-architect + backend-architect + security-engineer + quality-engineer是标准的前端全栈组合（见 docs/user-guide/agents.md 的 Coordination Patterns）。MCP 侧的定位同样清晰——src/superclaude/mcp/MCP_Magic.md 明确写着"Not for backend: API logic, database queries, server configuration"。

六、如何调用 frontend-architect

SuperClaude 提供三种调用路径，可以单独使用也可组合（详见 docs/user-guide/agents.md）：

6.1 手动调用：@agent- 前缀

# 直接指定前端架构师处理界面需求 @agent-frontend "design responsive navigation" @agent-frontend "review the dashboard accessibility"

手动调用优先级最高（Manual Override），会覆盖自动激活的 Agent 选择。

6.2 命令自动激活：/sc:implement 与 /sc:design

# 通过 implement 命令触发（frontend-architect 为默认 frontend persona） /sc:implement "responsive navigation component" # 示例行为：Frontend architect + Magic MCP 应被激活 /sc:implement user profile component --type component --framework react # Magic MCP 生成 UI 组件并集成设计系统，frontend persona 保证最佳实践与无障碍 /sc:design "React dashboard" # → frontend-architect 自动激活

/sc:implement的元数据声明了personas: [architect, frontend, backend, security, qa-specialist]，其中 frontend persona 即对应本 Agent；/sc:design则负责组件接口设计与设计系统规范（见 src/superclaude/commands/design.md）。SuperClaude 的 Agent 激活本质上是 Claude 依据上下文指令中的关键词与模式进行"行为路由"——关键词直达领域专家、文件类型激活语言/框架专家、多域任务触发多 Agent 协调。

6.3 组合使用

# 先用命令走自动激活 /sc:implement "accessible React dashboard with documentation" # → frontend-architect + learning-guide + technical-writer # 再手动指定专项审查 @agent-quality-engineer "run WCAG 2.1 accessibility audit on the dashboard"

七、与 MCP 服务器的协作生态

frontend-architect 的实战效果高度依赖 MCP 服务器组合。与其强相关的服务器及触发条件如下（完整配置见 docs/user-guide/mcp-servers.md）：

需要 Magic（UI 生成）时需配置TWENTYFIRST_API_KEY；若不需要付费服务，context7 + sequential-thinking + playwright + serena的组合可免费完成前端核心工作流。验证前端 Agent 自动激活的推荐测试命令为：

/sc:implement "responsive navigation component" # 期望行为：frontend-architect 与 Magic MCP 同时激活

如果未触发，可在请求中加入更明确的前端关键词（如 "UI"、"component"、"accessibility"、"responsive"），或重启 Claude Code 会话后重试（完整排查见 docs/reference/troubleshooting.md）。

八、与其他 Agent 的协作矩阵

在 SuperClaude 的 Agent 团队中，frontend-architect 的协作定位如下：

• 最佳搭档：learning-guide（用户引导）、performance-engineer（性能优化）、quality-engineer（UI 测试）；
• 全栈组合：frontend-architect + backend-architect + security-engineer + quality-engineer；
• 学习平台组合：learning-guide + frontend-architect + technical-writer + quality-engineer；
• 前端性能专项：performance-engineer + frontend-architect + chrome-devtools + playwright。

这套协作通过请求中的多域关键词即可自然触发，无需手动配置——这正是 SuperClaude"行为路由"式 Agent 激活机制的设计意图：用自然语言表达目标，系统自动组织专家团队。

九、典型应用场景

综合 Agent 的 Focus Areas 与 docs/user-guide/agents.md 中的示例，三个典型落地场景如下：

1. 仪表盘界面（Dashboard Interface）：可访问的数据可视化 + 实时更新 + 响应式网格布局。Agent 会先做无障碍与性能评估（LCP 目标下优化图表渲染），再以设计令牌统一视觉，最后输出组件文档与性能指标报告；
2. 复杂表单系统（Form Systems）：多步骤表单 + 校验 + 错误处理 + 无障碍特性。键盘可完成全部步骤、错误信息通过aria-describedby关联、焦点管理正确；
3. 设计系统（Design System）：可复用组件库 + 一致的样式与交互模式。以设计令牌为基石，产出 Accessibility Reports 与 Responsive Patterns 作为设计规范交付。

十、安装与使用前提

frontend-architect 随 SuperClaude Framework 一并分发，无需单独安装：

• 源码位置：仓库中同时存在于 src/superclaude/agents/frontend-architect.md（安装包/开发源码）与 plugins/superclaude/agents/frontend-architect.md（插件分发）两处；
• 安装机制：由 src/superclaude/cli/install_commands.py 的install_agents()将 Agent 文件复制到~/.claude/agents/，命令安装到~/.claude/commands/sc/（源码逻辑分别查找package_root/agents与plugins/superclaude/agents）；
• 本地运行：claude --plugin-dir ./plugins/superclaude（见 plugins/superclaude/README.md）；
• 验证：安装后重启 Claude Code，执行@agent-frontend "explain your focus areas"或/sc:implement "responsive navigation component"验证激活。

需要注意的是：Agent 文件本质是 Claude Code 读取的上下文配置，其"自动激活"依赖请求中的关键词与上下文匹配，因此用词越精确，路由越可靠——这是使用本 Agent 的核心心法。

十一、相关资源

• docs/user-guide/agents.md — Agent 团队全览、激活机制与协作模式；
• src/superclaude/commands/implement.md —/sc:implement命令行为流与 MCP 集成；
• src/superclaude/commands/design.md —/sc:design组件与系统设计规范；
• docs/user-guide/mcp-servers.md — MCP 服务器配置与触发条件；
• src/superclaude/mcp/MCP_Magic.md — Magic UI 生成服务器的选用准则；
• docs/getting-started/quick-start.md — 快速上手与 MCP 环境准备。

• 开发工具
• CLI
• AI 技能/插件
• 测试
• 人工智能
• AI 评测