undefined

- 失效链接（404错误）
- 缺失图片
- 控制台中的JavaScript错误
- CSS渲染问题
- 响应式设计断点
- 颜色对比度（无障碍性）
- 排版一致性

**1B. 交互测试**
```markdown
Test every interactive element:
- [ ] Buttons: Click response, hover states, disabled states
- [ ] Forms: Validation, error messages, success states
- [ ] Navigation: All links work, breadcrumbs accurate
- [ ] Modals: Open/close, backdrop click, ESC key
- [ ] Dropdowns: Open/close, keyboard navigation
- [ ] Tables: Sorting, filtering, pagination
- [ ] Real-time updates: WebSocket connection, live data
- [ ] Loading states: Spinners, skeletons, placeholders

Map critical user journeys:
1. New user onboarding → Should be intuitive, max 3 steps
2. Core feature usage → Should be discoverable, max 2 clicks
3. Error recovery → Clear error messages, obvious next steps
4. Success confirmation → Visible feedback, celebratory if appropriate

Invoke Task tool with subagent_type="codex-deep-research"

Prompt:
"研究交互式演示和仪表板的最佳UX/UI实践。

背景信息：
- Project Conductor是一个工作流编排平台
- 演示展示了7模块工作流（Onboarding → Implementation）
- 技术栈：HTML、CSS、JavaScript（原生）、Socket.io
- 用户群体：产品经理、工程师、利益相关者

请提供以下方面的最佳实践：
1. **演示UX模式**
   - 交互式教程 vs 引导式游览
   - 进度指示器
   - 上下文帮助
   - 演示中的错误处理

2. **仪表板设计**
   - 卡片布局
   - 数据可视化
   - 实时更新（WebSocket）
   - 空状态
   - 加载状态

3. **导航设计**
   - 模块间流转
   - 面包屑导航
   - 返回按钮行为
   - 深度链接

4. **无障碍性**
   - 键盘导航
   - 屏幕阅读器支持
   - 焦点管理
   - ARIA标签

5. **性能优化**
   - 感知性能
   - 懒加载
   - 动画帧率
   - 内存泄漏

6. **错误处理**
   - 用户友好的错误提示
   - 恢复操作
   - 降级UI
   - 离线行为

请提供具体的代码示例和视觉模式。"

Invoke Task tool with subagent_type="gemini-research-analyst"

Prompt:
"调研Google的Gemini AI是否提供UX设计、易用性测试或UI生成工具。

调研方向：
1. Gemini驱动的UX分析工具
2. 自动化无障碍测试
3. UI组件生成
4. 用户流程优化
5. A/B测试建议
6. 热图分析工具

如果有可用工具，请说明如何与HTML/JS演示集成。"

// Check browser console for errors
// Common issues:
- Uncaught ReferenceError (missing variables)
- Uncaught TypeError (null/undefined access)
- Failed to fetch (broken API calls)
- WebSocket connection failed
- CORS errors
- 404 for assets (images, CSS, JS)

Check Network tab for:
- [ ] All resources load successfully (no 404s)
- [ ] API endpoints respond <200ms
- [ ] WebSocket connection established
- [ ] No unnecessary requests (optimize)
- [ ] Proper caching headers
- [ ] Compressed assets (gzip)

undefined

测试断点：
- 移动端：320px、375px、414px
- 平板端：768px、1024px
- 桌面端：1280px、1440px、1920px

检查内容：
- 水平滚动（应完全避免）
- 文本溢出
- 图片缩放
- 按钮触摸目标（最小44x44px）
- 可读字体大小（最小16px）

**3D. 跨浏览器测试**
```markdown
Test in:
- [ ] Chrome (latest)
- [ ] Firefox (latest)
- [ ] Safari (latest)
- [ ] Edge (latest)

Check for:
- CSS compatibility (flexbox, grid)
- JavaScript APIs (fetch, WebSocket)
- Event handlers (click, keyboard)
- CSS animations

Checklist:
- [ ] Clear value proposition (what is this?)
- [ ] Obvious starting point (where do I begin?)
- [ ] Contextual help (tooltips, hints)
- [ ] Progress indicators (how far have I gone?)
- [ ] Success feedback (I completed something!)
- [ ] Error prevention (guard rails)
- [ ] Easy recovery (undo, reset)

/* Apply visual hierarchy principles */
- Primary actions: Bold, high contrast, larger
- Secondary actions: Less prominent
- Tertiary actions: Text links, subtle
- Destructive actions: Red, confirmation required
- Disabled states: Greyed out, not clickable

/* Example */
.btn-primary {
  background: #007bff;
  color: white;
  font-weight: 600;
  padding: 12px 24px;
  font-size: 16px;
}

.btn-secondary {
  background: transparent;
  border: 1px solid #6c757d;
  color: #6c757d;
  padding: 10px 20px;
  font-size: 14px;
}

// Every user action needs feedback
function handleAction(action) {
  // 1. Immediate feedback (button state)
  button.disabled = true;
  button.textContent = 'Processing...';

  // 2. Action execution
  await performAction(action);

  // 3. Success feedback
  showToast('✅ Action completed successfully!', 'success');
  button.disabled = false;
  button.textContent = 'Done';

  // 4. Update UI to reflect change
  refreshData();
}

// Toast notification system
function showToast(message, type = 'info', duration = 3000) {
  const toast = document.createElement('div');
  toast.className = `toast toast-${type}`;
  toast.textContent = message;
  document.body.appendChild(toast);

  setTimeout(() => {
    toast.classList.add('fade-out');
    setTimeout(() => toast.remove(), 300);
  }, duration);
}

// 每个用户操作都需要反馈
function handleAction(action) {
  // 1. 即时反馈（按钮状态）
  button.disabled = true;
  button.textContent = '处理中...';

  // 2. 执行操作
  await performAction(action);

  // 3. 成功反馈
  showToast('✅ 操作成功完成！', 'success');
  button.disabled = false;
  button.textContent = '完成';

  // 4. 更新UI以反映变化
  refreshData();
}

// 提示通知系统
function showToast(message, type = 'info', duration = 3000) {
  const toast = document.createElement('div');
  toast.className = `toast toast-${type}`;
  toast.textContent = message;
  document.body.appendChild(toast);

  setTimeout(() => {
    toast.classList.add('fade-out');
    setTimeout(() => toast.remove(), 300);
  }, duration);
}

// Bad: Generic error
catch (error) {
  alert('Error');
}

// Good: Helpful error with action
catch (error) {
  showError({
    title: 'Unable to Load Projects',
    message: 'We couldn\'t connect to the server. Please check your internet connection and try again.',
    actions: [
      { label: 'Retry', onClick: () => retryLoad() },
      { label: 'Go Back', onClick: () => history.back() }
    ],
    icon: '🔌'
  });

  // Log detailed error for debugging
  console.error('Project load failed:', error);
}

// 错误示例：通用错误提示
catch (error) {
  alert('错误');
}

// 正确示例：带操作的有用错误提示
catch (error) {
  showError({
    title: '无法加载项目',
    message: '我们无法连接到服务器，请检查网络连接后重试。',
    actions: [
      { label: '重试', onClick: () => retryLoad() },
      { label: '返回', onClick: () => history.back() }
    ],
    icon: '🔌'
  });

  // 记录详细错误用于调试
  console.error('项目加载失败:', error);
}

// Ensure all interactive elements are keyboard accessible
document.querySelectorAll('button, a, input, select, textarea').forEach(el => {
  // Add focus visible styles
  el.addEventListener('focus', (e) => {
    e.target.classList.add('focus-visible');
  });

  // Support Enter/Space on custom buttons
  if (el.getAttribute('role') === 'button') {
    el.addEventListener('keydown', (e) => {
      if (e.key === 'Enter' || e.key === ' ') {
        e.preventDefault();
        el.click();
      }
    });
  }
});

// Trap focus in modals
function trapFocus(modal) {
  const focusableElements = modal.querySelectorAll(
    'a[href], button, textarea, input, select, [tabindex]:not([tabindex="-1"])'
  );
  const firstElement = focusableElements[0];
  const lastElement = focusableElements[focusableElements.length - 1];

  modal.addEventListener('keydown', (e) => {
    if (e.key === 'Tab') {
      if (e.shiftKey && document.activeElement === firstElement) {
        e.preventDefault();
        lastElement.focus();
      } else if (!e.shiftKey && document.activeElement === lastElement) {
        e.preventDefault();
        firstElement.focus();
      }
    } else if (e.key === 'Escape') {
      closeModal();
    }
  });
}

// 确保所有交互元素支持键盘导航
document.querySelectorAll('button, a, input, select, textarea').forEach(el => {
  // 添加焦点可见样式
  el.addEventListener('focus', (e) => {
    e.target.classList.add('focus-visible');
  });

  // 自定义按钮支持Enter/Space键
  if (el.getAttribute('role') === 'button') {
    el.addEventListener('keydown', (e) => {
      if (e.key === 'Enter' || e.key === ' ') {
        e.preventDefault();
        el.click();
      }
    });
  }
});

// 模态框焦点锁定
function trapFocus(modal) {
  const focusableElements = modal.querySelectorAll(
    'a[href], button, textarea, input, select, [tabindex]:not([tabindex="-1"])'
  );
  const firstElement = focusableElements[0];
  const lastElement = focusableElements[focusableElements.length - 1];

  modal.addEventListener('keydown', (e) => {
    if (e.key === 'Tab') {
      if (e.shiftKey && document.activeElement === firstElement) {
        e.preventDefault();
        lastElement.focus();
      } else if (!e.shiftKey && document.activeElement === lastElement) {
        e.preventDefault();
        firstElement.focus();
      }
    } else if (e.key === 'Escape') {
      closeModal();
    }
  });
}

<!-- Bad: No context for screen readers -->
<button onclick="save()">
  <svg>...</svg>
</button>

<!-- Good: Descriptive label -->
<button onclick="save()" aria-label="Save project changes">
  <svg aria-hidden="true">...</svg>
</button>

<!-- Dynamic content -->
<div role="status" aria-live="polite" aria-atomic="true">
  <span id="status-message">Loading projects...</span>
</div>

<!-- Form validation -->
<input
  type="email"
  id="email"
  aria-describedby="email-error"
  aria-invalid="true"
>
<span id="email-error" role="alert">
  Please enter a valid email address
</span>

<!-- 错误示例：屏幕阅读器无上下文 -->
<button onclick="save()">
  <svg>...</svg>
</button>

<!-- 正确示例：带描述性标签 -->
<button onclick="save()" aria-label="保存项目更改">
  <svg aria-hidden="true">...</svg>
</button>

<!-- 动态内容 -->
<div role="status" aria-live="polite" aria-atomic="true">
  <span id="status-message">加载项目中...</span>
</div>

<!-- 表单验证 -->
<input
  type="email"
  id="email"
  aria-describedby="email-error"
  aria-invalid="true"
>
<span id="email-error" role="alert">
  请输入有效的邮箱地址
</span>

// Ensure WCAG AA compliance (4.5:1 for normal text, 3:1 for large)
// Use tools: Chrome DevTools Lighthouse, axe DevTools

// Example: Check programmatically
function checkContrast(foreground, background) {
  const ratio = getContrastRatio(foreground, background);
  return {
    passAA: ratio >= 4.5,
    passAAA: ratio >= 7,
    ratio: ratio.toFixed(2)
  };
}

// Fix: Increase contrast
/* Before */
.text-muted { color: #999; } /* 2.8:1 - FAILS */

/* After */
.text-muted { color: #6c757d; } /* 4.5:1 - PASSES */

// 确保符合WCAG AA标准（普通文本对比度4.5:1，大文本3:1）
// 使用工具：Chrome DevTools Lighthouse、axe DevTools

// 示例：程序化检查
function checkContrast(foreground, background) {
  const ratio = getContrastRatio(foreground, background);
  return {
    passAA: ratio >= 4.5,
    passAAA: ratio >= 7,
    ratio: ratio.toFixed(2)
  };
}

// 修复方案：提升对比度
/* 修复前 */
.text-muted { color: #999; } /* 2.8:1 - 不通过 */

/* 修复后 */
.text-muted { color: #6c757d; } /* 4.5:1 - 通过 */

// Instant feedback, lazy load heavy content
async function loadDashboard() {
  // 1. Show skeleton immediately (0ms)
  showSkeleton();

  // 2. Load critical data first (100ms)
  const criticalData = await fetchCritical();
  renderCritical(criticalData);
  hideSkeleton();

  // 3. Load secondary data (background)
  fetchSecondary().then(renderSecondary);

  // 4. Prefetch likely next page
  prefetchNextPage();
}

// Skeleton UI
function showSkeleton() {
  const skeleton = `
    <div class="skeleton-card">
      <div class="skeleton-line skeleton-title"></div>
      <div class="skeleton-line"></div>
      <div class="skeleton-line"></div>
    </div>
  `;
  container.innerHTML = skeleton.repeat(6);
}

// 即时反馈，懒加载重型内容
async function loadDashboard() {
  // 1. 立即显示骨架屏（0ms）
  showSkeleton();

  // 2. 优先加载关键数据（100ms）
  const criticalData = await fetchCritical();
  renderCritical(criticalData);
  hideSkeleton();

  // 3. 后台加载次要数据
  fetchSecondary().then(renderSecondary);

  // 4. 预加载可能访问的下一页
  prefetchNextPage();
}

// 骨架屏UI
function showSkeleton() {
  const skeleton = `
    <div class="skeleton-card">
      <div class="skeleton-line skeleton-title"></div>
      <div class="skeleton-line"></div>
      <div class="skeleton-line"></div>
    </div>
  `;
  container.innerHTML = skeleton.repeat(6);
}

/* Bad: Causes layout thrashing */
.animate-bad {
  animation: slide-in 0.3s ease;
}
@keyframes slide-in {
  from { margin-left: -100px; }
  to { margin-left: 0; }
}

/* Good: GPU-accelerated */
.animate-good {
  animation: slide-in 0.3s ease;
}
@keyframes slide-in {
  from { transform: translateX(-100px); }
  to { transform: translateX(0); }
}

/* Use will-change for complex animations */
.will-animate {
  will-change: transform, opacity;
}

/* 错误示例：导致布局抖动 */
.animate-bad {
  animation: slide-in 0.3s ease;
}
@keyframes slide-in {
  from { margin-left: -100px; }
  to { margin-left: 0; }
}

/* 正确示例：GPU加速 */
.animate-good {
  animation: slide-in 0.3s ease;
}
@keyframes slide-in {
  from { transform: translateX(-100px); }
  to { transform: translateX(0); }
}

/* 复杂动画使用will-change */
.will-animate {
  will-change: transform, opacity;
}

// Bad: Event listeners not cleaned up
socket.on('update', handleUpdate);

// Good: Clean up on unmount
const listeners = [];

function addListener(event, handler) {
  socket.on(event, handler);
  listeners.push({ event, handler });
}

function cleanup() {
  listeners.forEach(({ event, handler }) => {
    socket.off(event, handler);
  });
  listeners.length = 0;
}

// Call cleanup when leaving page
window.addEventListener('beforeunload', cleanup);

// 错误示例：未清理事件监听器
socket.on('update', handleUpdate);

// 正确示例：卸载时清理
const listeners = [];

function addListener(event, handler) {
  socket.on(event, handler);
  listeners.push({ event, handler });
}

function cleanup() {
  listeners.forEach(({ event, handler }) => {
    socket.off(event, handler);
  });
  listeners.length = 0;
}

// 离开页面时调用清理
window.addEventListener('beforeunload', cleanup);

/* Smooth button interactions */
button {
  transition: all 0.2s ease;
  transform: scale(1);
}

button:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

button:active {
  transform: scale(0.98);
}

/* Loading spinner */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner {
  animation: spin 1s linear infinite;
}

/* 流畅的按钮交互 */
button {
  transition: all 0.2s ease;
  transform: scale(1);
}

button:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

button:active {
  transform: scale(0.98);
}

/* 加载动画 */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner {
  animation: spin 1s linear infinite;
}

<!-- Instead of blank screen -->
<div class="empty-state">
  <svg class="empty-icon"><!-- Icon --></svg>
  <h3>No projects yet</h3>
  <p>Create your first project to get started</p>
  <button class="btn-primary">Create Project</button>
</div>

<!-- 替代空白屏幕 -->
<div class="empty-state">
  <svg class="empty-icon"><!-- 图标 --></svg>
  <h3>暂无项目</h3>
  <p>创建你的第一个项目开始使用</p>
  <button class="btn-primary">创建项目</button>
</div>

Ensure consistency across:
- [ ] Button styles (primary, secondary, danger)
- [ ] Spacing (use 8px grid: 8, 16, 24, 32, 48, 64)
- [ ] Typography (max 3 font sizes, consistent weights)
- [ ] Colors (stick to design system palette)
- [ ] Icons (same style, size, stroke width)
- [ ] Shadows (consistent elevation levels)
- [ ] Border radius (consistent rounding)
- [ ] Animations (consistent timing, easing)

undefined

测试所有模块流转：
模块0（引导）→ 模块1（仪表板）
模块1（仪表板）→ 模块2（BRD）
模块2（BRD）→ 模块3（PRD）
模块3（PRD）→ 模块4（工程设计）
模块4（工程设计）→ 模块5（冲突处理）
模块5（冲突处理）→ 模块6（实施）
模块6（实施）→ 模块1（仪表板）

检查内容：
- [ ] 所有链接正常
- [ ] 面包屑导航更新
- [ ] 返回按钮正常
- [ ] 状态持久化（如适用）

// Test WebSocket functionality
- [ ] Connection establishes on page load
- [ ] Live updates appear without refresh
- [ ] Multiple tabs stay in sync
- [ ] Reconnects after disconnect
- [ ] Shows offline indicator if disconnected
- [ ] No duplicate updates

- [ ] Projects list loads correctly
- [ ] Requirements display properly
- [ ] Status badges show correct colors
- [ ] Progress bars update in real-time
- [ ] Filters work correctly
- [ ] Sorting works correctly
- [ ] Pagination works correctly
- [ ] Search works correctly

undefined

undefined