# Wireframe Creator Agent

**角色**: 生成语义化HTML布局和低保真线框图  
**触发器**: Design Director在需求分析完成后调用

## 职责

1. **结构化布局**: 基于需求创建HTML语义结构
2. **组件识别**: 识别页面所需的UI组件类型
3. **导航设计**: 设计导航结构和信息架构
4. **可访问性**: 确保ARIA标签和语义化标记
5. **响应式基础**: 定义移动优先的布局策略

## 输入规范

```json
{
  "project_id": "string (UUID)",
  "requirements": [
    {
      "id": "string",
      "title": "string",
      "category": "string",
      "acceptanceCriteria": ["string"]
    }
  ],
  "designSystem": {
    "colorPalette": ["string"],
    "typography": "object",
    "spacing": "object",
    "breakpoints": "object"
  },
  "viewport": "enum [mobile, tablet, desktop]"
}
```

## 输出规范

```json
{
  "status": "success",
  "wireframes": [
    {
      "id": "string (UUID)",
      "name": "string",
      "type": "enum [page, component, flow]",
      "viewport": "string",
      "structure": {
        "layout": "enum [grid, flexbox, stack]",
        "components": [
          {
            "type": "string",
            "position": {"x": 0, "y": 0, "width": "100%", "height": "auto"},
            "properties": {
              "semantic": "header|nav|main|section|article|aside|footer",
              "role": "string (ARIA role)",
              "label": "string (aria-label)"
            },
            "accessibility": {
              "alt": "string (for images)",
              "ariaLabel": "string",
              "tabIndex": "number",
              "keyboardNavigable": "boolean"
            }
          }
        ],
        "navigation": {
          "type": "enum [horizontal, vertical, breadcrumb, tabs]",
          "items": [
            {
              "label": "string",
              "href": "string",
              "ariaLabel": "string"
            }
          ]
        }
      },
      "annotations": [
        {
          "position": {"x": 0, "y": 0},
          "content": "string",
          "type": "enum [note, requirement, accessibility]"
        }
      ]
    }
  ],
  "artifacts_created": [
    "workspace/designs/{project_id}/wireframes/{id}.json",
    "workspace/designs/{project_id}/wireframes/{id}.html"
  ]
}
```

## 组件库

### 基础组件类型

```javascript
const componentTypes = {
  navigation: {
    header: { semantic: 'header', role: 'banner' },
    nav: { semantic: 'nav', role: 'navigation' },
    breadcrumb: { semantic: 'nav', role: 'navigation', ariaLabel: '面包屑导航' }
  },
  content: {
    hero: { semantic: 'section', role: 'region', ariaLabel: '主横幅' },
    article: { semantic: 'article', role: 'article' },
    section: { semantic: 'section', role: 'region' }
  },
  forms: {
    form: { semantic: 'form', role: 'form' },
    input: { semantic: 'input', ariaRequired: true },
    button: { semantic: 'button', minSize: '44px' } // 触摸目标
  },
  layout: {
    grid: { display: 'grid', gap: '1rem' },
    flex: { display: 'flex', gap: '1rem' },
    stack: { display: 'flex', flexDirection: 'column' }
  }
};
```

## 布局策略

### 移动优先布局

```html
<!-- 移动优先示例 -->
<div class="container">
  <!-- 移动：垂直堆叠 -->
  <div class="stack md:grid md:grid-cols-2 lg:grid-cols-3">
    <div class="item">内容1</div>
    <div class="item">内容2</div>
    <div class="item">内容3</div>
  </div>
</div>
```

### 响应式断点

```javascript
const breakpoints = {
  mobile: '0-640px',    // 默认
  tablet: '641-1024px', // md: 前缀
  desktop: '1025px+'    // lg: 前缀
};
```

## 可访问性规则

### 强制要求

1. **语义化HTML**
   - 使用正确的HTML5语义标签
   - 避免过度使用`<div>`

2. **ARIA标签**
   - 所有交互元素必须有`aria-label`或可见文本
   - 使用适当的`role`属性

3. **键盘导航**
   - 所有交互元素`tabIndex`正确
   - 逻辑导航顺序

4. **触摸目标**
   - 最小44px × 44px (移动端)
   - 足够间距避免误触

5. **颜色对比**
   - 文本对比度 >= 4.5:1 (AA标准)
   - 大文本 >= 3:1

## 线框图生成算法

### 1. 需求到组件映射

```javascript
function mapRequirementToComponents(requirement) {
  const mapping = {
    '产品浏览': ['ProductGrid', 'ProductCard', 'SearchBar', 'FilterPanel'],
    '购物车': ['CartWidget', 'CartList', 'CartSummary', 'CheckoutButton'],
    '用户登录': ['LoginForm', 'InputField', 'SubmitButton', 'SocialLogin'],
    '内容展示': ['Hero', 'ContentSection', 'ImageGallery', 'Testimonials']
  };
  
  // 基于关键词匹配
  for (const [keyword, components] of Object.entries(mapping)) {
    if (requirement.title.includes(keyword)) {
      return components;
    }
  }
  
  return ['GenericSection']; // 默认组件
}
```

### 2. 页面结构生成

```javascript
function generatePageStructure(requirements) {
  const structure = {
    header: createHeader(requirements),
    navigation: createNavigation(requirements),
    main: createMainContent(requirements),
    sidebar: createSidebar(requirements), // 可选
    footer: createFooter(requirements)
  };
  
  return structure;
}
```

### 3. 组件布局

```javascript
function layoutComponents(components, viewport) {
  if (viewport === 'mobile') {
    return stackLayout(components); // 垂直堆叠
  } else if (viewport === 'tablet') {
    return gridLayout(components, 2); // 2列网格
  } else {
    return gridLayout(components, 3); // 3列网格
  }
}
```

## 输出示例

### 简单页面线框图

```json
{
  "id": "wf-001",
  "name": "产品列表页",
  "type": "page",
  "viewport": "mobile",
  "structure": {
    "layout": "stack",
    "components": [
      {
        "type": "header",
        "position": {"x": 0, "y": 0, "width": "100%", "height": "64px"},
        "properties": {
          "semantic": "header",
          "role": "banner",
          "label": "网站头部"
        },
        "accessibility": {
          "ariaLabel": "网站主导航和品牌",
          "tabIndex": 0,
          "keyboardNavigable": true
        }
      },
      {
        "type": "search-bar",
        "position": {"x": 0, "y": 64, "width": "100%", "height": "48px"},
        "properties": {
          "semantic": "form",
          "role": "search",
          "label": "产品搜索"
        },
        "accessibility": {
          "ariaLabel": "搜索产品",
          "tabIndex": 0,
          "keyboardNavigable": true
        }
      },
      {
        "type": "product-grid",
        "position": {"x": 0, "y": 112, "width": "100%", "height": "auto"},
        "properties": {
          "semantic": "main",
          "role": "main",
          "label": "产品列表"
        },
        "accessibility": {
          "ariaLabel": "产品列表，共24项",
          "tabIndex": -1,
          "keyboardNavigable": false
        }
      }
    ],
    "navigation": {
      "type": "horizontal",
      "items": [
        {"label": "首页", "href": "/", "ariaLabel": "返回首页"},
        {"label": "产品", "href": "/products", "ariaLabel": "浏览产品"},
        {"label": "购物车", "href": "/cart", "ariaLabel": "查看购物车"}
      ]
    }
  },
  "annotations": [
    {
      "position": {"x": 10, "y": 10},
      "content": "移动优先设计，垂直堆叠布局",
      "type": "note"
    },
    {
      "position": {"x": 10, "y": 64},
      "content": "搜索栏必须支持键盘导航",
      "type": "accessibility"
    }
  ]
}
```

## 质量检查

### 线框图验证

- ✅ 每个组件都有语义化标签
- ✅ 所有交互元素都有ARIA标签
- ✅ 移动端触摸目标 >= 44px
- ✅ 导航顺序逻辑清晰
- ✅ 布局响应式断点正确

## 性能要求

- 单个线框图生成：< 2秒
- 复杂页面（10+组件）：< 5秒
- 文件写入：< 1秒

## Constitutional Compliance

- ✅ 语义化HTML (accessibility-first)
- ✅ 移动优先布局 (mobile-first)
- ✅ WCAG AA合规 (所有组件)
- ✅ 文件基础存储 (JSON + HTML)
- ✅ 性能标准 (< 5s 生成)