# /designfast:create-prototype Command

## Description
从设计文档或线框图生成交互式HTML/CSS原型，支持Tailwind CSS样式和可访问性功能。

## Syntax
```
/designfast:create-prototype --from=design-document.html [options]
```

## Parameters

### Required
- `--from=<path>`: 设计文档路径（支持.html或.md文件）

### Optional
- `--project-id=<id>`: 项目ID（如果未提供，从设计文档提取）
- `--wireframe-id=<id>`: 线框图ID（如果未提供，使用最新）
- `--output=<path>`: 输出目录路径（默认：workspace/prototypes/{project-id}/）
- `--interactive=<boolean>`: 是否添加交互功能（默认：true）
- `--responsive=<boolean>`: 是否生成响应式设计（默认：true）
- `--accessibility=<level>`: 可访问性级别（A, AA, AAA，默认：AA）

## Workflow

### Stage 1: Input Validation
1. 检查设计文档是否存在
2. 验证文档格式（HTML或Markdown）
3. 提取项目ID和设计数据

### Stage 2: Wireframe Processing
1. 调用wireframe-creator代理（如果需要）
2. 解析设计文档中的线框图
3. 生成组件结构

```powershell
# 处理线框图
$wireframes = & "$PSScriptRoot\..\scripts\wireframe-manager.ps1" `
    -ProjectId $ProjectId `
    -Action list
```

### Stage 3: Prototype Generation
1. 调用prototype-builder代理
2. 生成HTML结构和Tailwind CSS类
3. 添加交互功能和可访问性特性

```powershell
# 创建原型
$prototype = & "$PSScriptRoot\..\scripts\prototype-manager.ps1" `
    -ProjectId $ProjectId `
    -Action create `
    -Name $PrototypeName `
    -WireframeId $WireframeId
```

### Stage 4: Asset Integration
1. 生成样式文件（CSS）
2. 创建交互脚本（JavaScript）
3. 添加图像和图标资源

### Stage 5: Quality Validation
1. 验证HTML结构
2. 检查Tailwind CSS类
3. 测试可访问性合规性
4. 验证响应式断点

### Stage 6: Output
1. 保存完整原型HTML
2. 保存组件文件
3. 保存样式和脚本
4. 生成预览URL

## Success Criteria

✅ 原型包含所有必要文件：
- index.html（主文件）
- components/（组件文件）
- styles/main.css（样式）
- scripts/interactions.js（交互）

✅ 符合设计要求：
- Tailwind CSS样式正确应用
- 响应式断点实现
- 交互功能正常工作

✅ 可访问性合规：
- WCAG AA标准满足
- 键盘导航支持
- 屏幕阅读器兼容

✅ 性能标准：
- 页面加载时间 < 3秒
- CSS大小 < 50KB
- JavaScript大小 < 100KB

## Example Usage

### Basic Usage
```bash
/designfast:create-prototype --from=./workspace/designs/project-123/design-document.html
```

### With Options
```bash
/designfast:create-prototype \
  --from=./design-doc.html \
  --project-id=project-123 \
  --output=./prototypes/ \
  --interactive=true \
  --responsive=true \
  --accessibility=AA
```

### PowerShell Implementation
```powershell
# create-prototype.ps1
param(
    [Parameter(Mandatory=$true)]
    [string]$From,

    [string]$ProjectId,
    [string]$WireframeId,
    [string]$Output,
    [bool]$Interactive = $true,
    [bool]$Responsive = $true,
    [string]$Accessibility = "AA"
)

# 验证输入
if (-not (Test-Path $From)) {
    Write-Error "设计文档不存在: $From"
    exit 1
}

# 读取设计文档
$designContent = Get-Content $From -Raw

if ($designContent.Length -lt 100) {
    Write-Error "设计文档内容过短"
    exit 1
}

# 提取或生成项目ID
if (-not $ProjectId) {
    $ProjectId = [guid]::NewGuid().ToString()
    Write-Host "生成新项目ID: $ProjectId" -ForegroundColor Yellow
}

# 创建原型目录
$prototypeDir = if ($Output) { $Output } else { "workspace\prototypes\$ProjectId" }
if (-not (Test-Path $prototypeDir)) {
    New-Item -ItemType Directory -Path $prototypeDir -Force | Out-Null
}

# 生成原型
Write-Host "1. 创建原型结构..." -ForegroundColor Cyan
$prototype = & "$PSScriptRoot\..\scripts\prototype-manager.ps1" `
    -ProjectId $ProjectId `
    -Action create `
    -Name "Interactive Prototype" `
    -WireframeId $WireframeId

$prototypeId = $prototype.id

# 生成组件
Write-Host "2. 生成组件..." -ForegroundColor Cyan

# 示例：创建导航组件
$navComponent = @"
<!-- Navigation Component -->
<nav class="bg-white shadow-lg" role="navigation" aria-label="Main navigation">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between h-16">
            <div class="flex items-center">
                <a href="#" class="text-xl font-bold text-gray-900" data-clickable>Home</a>
            </div>
            <div class="hidden md:flex items-center space-x-8">
                <a href="#about" class="text-gray-700 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium" data-clickable>About</a>
                <a href="#services" class="text-gray-700 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium" data-clickable>Services</a>
                <a href="#contact" class="text-gray-700 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium" data-clickable>Contact</a>
            </div>
            <div class="md:hidden flex items-center">
                <button data-nav-toggle class="text-gray-700 hover:text-gray-900 focus:outline-none focus:text-gray-900" aria-expanded="false" aria-label="Toggle menu">
                    <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                    </svg>
                </button>
            </div>
        </div>
        <div class="hidden md:hidden" data-nav-menu>
            <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
                <a href="#about" class="text-gray-700 hover:text-gray-900 block px-3 py-2 rounded-md text-base font-medium" data-clickable>About</a>
                <a href="#services" class="text-gray-700 hover:text-gray-900 block px-3 py-2 rounded-md text-base font-medium" data-clickable>Services</a>
                <a href="#contact" class="text-gray-700 hover:text-gray-900 block px-3 py-2 rounded-md text-base font-medium" data-clickable>Contact</a>
            </div>
        </div>
    </div>
</nav>
"@

$navPath = Join-Path $prototypeDir "components\navigation.html"
$navComponent | Set-Content -Path $navPath -Encoding UTF8

# 示例：创建卡片组件
$cardComponent = @"
<!-- Card Component -->
<div class="bg-white rounded-lg shadow-md p-6" role="article">
    <div class="flex items-center mb-4">
        <div class="flex-shrink-0">
            <div class="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center">
                <span class="text-white font-bold text-lg">D</span>
            </div>
        </div>
        <div class="ml-4">
            <h3 class="text-lg font-medium text-gray-900">DesignFast</h3>
            <p class="text-gray-500">AI-Powered Design Tool</p>
        </div>
    </div>
    <p class="text-gray-700 mb-4">
        Create interactive prototypes from your design documents with ease.
    </p>
    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" data-clickable aria-label="Learn more about DesignFast">
        Learn More
    </button>
</div>
"@

$cardPath = Join-Path $prototypeDir "components\card.html"
$cardComponent | Set-Content -Path $cardPath -Encoding UTF8

# 更新主HTML文件
Write-Host "3. 组装原型..." -ForegroundColor Cyan

$mainHtmlPath = Join-Path $prototypeDir "index.html"
$mainHtml = Get-Content $mainHtmlPath -Raw

# 插入组件
$navInsertion = Get-Content $navPath -Raw
$cardInsertion = Get-Content $cardPath -Raw

$updatedHtml = $mainHtml -replace "<!-- Components will be inserted here -->", @"
$navInsertion

<section class="mb-8">
    <h2 class="text-2xl font-semibold mb-6">Features</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        $cardInsertion
        $cardInsertion
        $cardInsertion
    </div>
</section>
"@

$updatedHtml | Set-Content -Path $mainHtmlPath -Encoding UTF8

# 验证原型
Write-Host "4. 验证原型..." -ForegroundColor Cyan

# 检查文件存在
$requiredFiles = @(
    "$prototypeDir\index.html",
    "$prototypeDir\styles\main.css",
    "$prototypeDir\scripts\interactions.js"
)

foreach ($file in $requiredFiles) {
    if (-not (Test-Path $file)) {
        Write-Error "必需文件缺失: $file"
        exit 1
    }
}

Write-Host "`n✓ 原型生成完成!" -ForegroundColor Green
Write-Host "  项目ID: $ProjectId" -ForegroundColor Gray
Write-Host "  原型ID: $prototypeId" -ForegroundColor Gray
Write-Host "  原型路径: $prototypeDir" -ForegroundColor Gray
Write-Host "  预览URL: file://$((Resolve-Path $mainHtmlPath).Path)" -ForegroundColor Gray
```

## Performance Requirements
- 原型生成：< 15秒
- 组件创建：< 5秒/组件
- 文件写入：< 2秒
- 总时间：< 30秒

## Error Handling

### Error: Design document not found
```
错误: 设计文档不存在
建议: 检查文件路径是否正确
```

### Error: Invalid design format
```
错误: 设计文档格式无效
建议: 确保使用HTML或Markdown格式
```

### Error: Prototype generation failed
```
错误: 原型生成失败
建议: 检查磁盘空间和权限
```

## Constitutional Compliance

✅ **Agent-First**: 调用wireframe-creator和prototype-builder代理
✅ **File-Based**: 所有输出保存为文件（HTML, CSS, JS）
✅ **Accessibility**: 自动添加WCAG AA合规性
✅ **Mobile-First**: 自动添加响应式断点
✅ **Quality Gates**: 验证原型完整性
✅ **Performance**: < 30秒生成时间