---
description: "Export design artifacts to development-ready formats"
category: "design-workflow"
priority: "P3"
dependencies: ["export-manager.ps1"]
---

# Command: export-design

**Purpose**: Export DesignFast design artifacts to production-ready formats for team handoff and integration

**Category**: Design Workflow - Output & Integration

**Related Commands**: 
- `generate-design-doc` - Creates design documents that can be exported
- `create-prototype` - Generates prototypes for HTML package export
- `create-design-system` - Produces design systems for JSON export

---

## Command Syntax

```bash
/designfast:export --format=<html|pdf|json> --input=<path> --output=<path> [--include-assets]
```

### Parameters

| Parameter | Type | Required | Default | Description |
|-----------|------|----------|---------|-------------|
| `--format` | enum | ✅ Yes | - | Export format: `html`, `pdf`, or `json` |
| `--input` | path | ✅ Yes | - | Source file path (relative to workspace) |
| `--output` | path | ✅ Yes | - | Output file path (relative to workspace/exports/) |
| `--include-assets` | flag | ❌ No | false | Include images and static resources (HTML format only) |

---

## Export Formats

### 1. HTML Package Export

**Format**: `--format=html`

**Output**: ZIP archive containing interactive prototype with all dependencies

**Structure**:
```
output-package.zip
├── index.html              # Main prototype file
├── assets/                 # Images and resources (if --include-assets)
│   ├── images/
│   └── icons/
└── README.txt             # Usage instructions
```

**Use Case**: Share interactive prototypes with developers, stakeholders, or QA teams for browser-based review

**Example**:
```bash
/designfast:export --format=html --input=prototypes/dashboard.html --output=dashboard-v1.zip --include-assets
```

**Technical Implementation**:
- Bundles HTML prototype with embedded Tailwind CSS
- Copies referenced assets from workspace/assets/
- Creates standalone package (no server required)
- Generates README with browser compatibility info

---

### 2. PDF Documentation Export

**Format**: `--format=pdf`

**Output**: Rendered PDF document from Markdown design specifications

**Use Case**: Offline documentation review, stakeholder presentations, design archives

**Example**:
```bash
/designfast:export --format=pdf --input=designs/project-spec.md --output=design-spec-v2.pdf
```

**Technical Implementation**:
- Converts Markdown to PDF via Pandoc (if installed)
- Preserves formatting, headings, and structure
- Embeds images and diagrams
- Fallback: Creates conversion guide if Pandoc unavailable

**Requirements**:
- **Pandoc** (recommended): https://pandoc.org/installing.html
- Alternative: wkhtmltopdf, browser print-to-PDF

---

### 3. JSON Component Library Export

**Format**: `--format=json`

**Output**: Structured JSON with design tokens, components, and system metadata

**Structure**:
```json
{
  "metadata": {
    "exportedAt": "2025-11-10T14:30:00",
    "version": "1.0.0",
    "source": "workspace/designs/design-system.json"
  },
  "designSystem": {
    "colors": { "primary": "#3B82F6", ... },
    "typography": { "fontFamily": "Inter", ... },
    "spacing": { "base": "8px", ... }
  },
  "components": [
    {
      "name": "Button",
      "variants": ["primary", "secondary"],
      "props": { ... }
    }
  ]
}
```

**Use Case**: Import design tokens into frontend frameworks, maintain design-code sync, programmatic component generation

**Example**:
```bash
/designfast:export --format=json --input=designs/design-system.json --output=tokens-library.json
```

**Technical Implementation**:
- Extracts design tokens and component definitions
- Adds metadata (timestamp, version, source)
- Formats as developer-friendly JSON
- Compatible with design token tools (Style Dictionary, Theo)

---

## Agent Orchestration

### Primary Agent
**design-director** - Coordinates export process and format validation

### Execution Flow

```
User Command
    ↓
design-director validates parameters
    ↓
export-manager.ps1 invoked
    ├─→ HTML: Bundle prototype + assets → ZIP
    ├─→ PDF: Convert Markdown → PDF (via Pandoc)
    └─→ JSON: Extract tokens → Structured JSON
    ↓
Output written to workspace/exports/
    ↓
Success confirmation with file path
```

### Error Handling

| Error Code | Condition | Resolution |
|------------|-----------|------------|
| `ERR_EXPORT_001` | Source file not found | Verify `--input` path exists in workspace |
| `ERR_EXPORT_002` | Invalid format specified | Use `html`, `pdf`, or `json` |
| `ERR_EXPORT_003` | Output path invalid | Check `--output` directory permissions |
| `ERR_EXPORT_004` | Pandoc not installed (PDF) | Install Pandoc or use conversion guide |
| `ERR_EXPORT_005` | Assets not found (HTML) | Verify assets/ directory exists |

---

## Examples

### Example 1: Export HTML Prototype Package

**Scenario**: Share interactive dashboard prototype with development team

```bash
/designfast:export --format=html --input=prototypes/admin-dashboard.html --output=admin-dashboard-sprint5.zip --include-assets
```

**Output**:
```
✓ Exporting HTML package...
✓ Including assets...
✓ HTML package exported successfully
  Location: workspace/exports/admin-dashboard-sprint5.zip
```

---

### Example 2: Export PDF Design Documentation

**Scenario**: Create offline documentation for stakeholder review

```bash
/designfast:export --format=pdf --input=designs/e-commerce-redesign.md --output=redesign-proposal.pdf
```

**Output** (Pandoc installed):
```
✓ Exporting PDF documentation...
✓ PDF exported successfully using Pandoc
  Location: workspace/exports/redesign-proposal.pdf
```

**Output** (Pandoc not installed):
```
⚠ PDF tools not available. Conversion guide created at:
  workspace/exports/redesign-proposal-CONVERSION-GUIDE.txt
  Install Pandoc for automatic PDF generation
```

---

### Example 3: Export JSON Design Tokens

**Scenario**: Export design system for frontend integration

```bash
/designfast:export --format=json --input=designs/corporate-design-system.json --output=design-tokens-v3.json
```

**Output**:
```
✓ Exporting JSON component library...
✓ JSON library exported successfully
  Location: workspace/exports/design-tokens-v3.json
```

---

## Success Criteria

- [X] Command accepts all required parameters (format, input, output)
- [X] Validates format is one of: html, pdf, json
- [X] Verifies source file exists before export
- [X] Creates workspace/exports/ directory if missing
- [X] HTML export produces valid ZIP with standalone prototype
- [X] PDF export handles Pandoc availability gracefully
- [X] JSON export includes metadata and structured tokens
- [X] Returns clear success/error messages with file paths
- [X] Execution time < 10 seconds for typical exports
- [X] Generated files compatible with standard tools (browsers, PDF viewers, JSON parsers)

---

## Constitutional Compliance

### File-Based Workflow
✅ All exports written to `workspace/exports/` directory  
✅ Original source files remain unmodified  
✅ Output files version-control friendly (except binary ZIPs)

### Agent Architecture
✅ design-director orchestrates export process  
✅ Delegates to export-manager.ps1 for format-specific logic  
✅ Clear separation: command → agent → script → output

### Performance Standards
✅ Export execution < 10 seconds (typical files)  
✅ Async processing for large HTML packages  
✅ Progress feedback for multi-file exports

### Accessibility
✅ PDF exports preserve semantic heading structure  
✅ HTML packages maintain WCAG 2.1 AA compliance  
✅ JSON exports include accessibility metadata when present

---

## Implementation Notes

### PowerShell Script Integration

This command invokes `src/scripts/export-manager.ps1`:

```powershell
& "$PSScriptRoot\..\scripts\export-manager.ps1" `
    -Format $Format `
    -Input $InputPath `
    -Output $OutputPath `
    -IncludeAssets:$IncludeAssets
```

### Output Directory Structure

```
workspace/exports/
├── html-packages/          # ZIP archives
├── pdf-docs/               # PDF documents
├── json-libraries/         # JSON token files
└── README.md              # Export catalog
```

### Version Control Integration

Exported files automatically tracked via version-manager.ps1 (FR-012):
- Auto-commit on successful export: `"Export created: [timestamp] - filename.zip"`
- Version history accessible: `/designfast:version --history --file=exports/package.zip`

---

## Related Documentation

- **FR-013**: Export functionality specification
- **export-manager.ps1**: PowerShell implementation script
- **design-director agent**: Export orchestration logic
- **version-manager.ps1**: Git integration for export tracking

---

## Changelog

| Version | Date | Changes |
|---------|------|---------|
| 1.0.0 | 2025-11-10 | Initial export command specification with 3 formats (HTML/PDF/JSON) |

---

**Last Updated**: 2025-11-10  
**Specification Status**: ✅ Complete  
**Implementation Status**: 🔄 In Progress (Phase 8 - T081)