# DesignFast - AI-Driven UI/UX Design Workflow Integration

**Version**: 1.0.0
**Date**: 2025-11-10
**Platform**: Windows 10/11 + iFlow CLI
**Architecture**: NioPD 5-part command pattern with AI agent orchestration

## Overview

DesignFast is an AI-powered design workflow system integrated into iFlow CLI, designed for solo developers, full-stack developers, and one-person companies. Through 5 specialized AI agents, you can automatically generate complete design documents, wireframes, interactive prototypes, and automated tests from requirement descriptions.

## Core Architecture

DesignFast follows the **NioPD (Node Input/Output Pattern Design)** architecture with strict single responsibility principles:

### AI Agents (5 Specialized Agents)

1. **Design Director** (`src/agents/design-director/`)
   - **Responsibility**: Orchestration and strategic guidance
   - **Input**: Natural language requirements
   - **Output**: Structured design specifications and agent coordination

2. **Requirements Analyzer** (`src/agents/requirements-analyzer/`)
   - **Responsibility**: Parse natural language to structured requirements
   - **Input**: Raw requirement text or documents
   - **Output**: Structured requirement entities with validation

3. **Wireframe Creator** (`src/agents/wireframe-creator/`)
   - **Responsibility**: Generate semantic HTML layouts
   - **Input**: Structured requirements
   - **Output**: WCAG 2.1 AA compliant wireframe HTML/CSS

4. **Prototype Builder** (`src/agents/prototype-builder/`)
   - **Responsibility**: Create styled interactive components
   - **Input**: Wireframes and design tokens
   - **Output**: Interactive HTML/CSS prototypes with Tailwind CSS

5. **Playwright Integrator** (`src/agents/playwright-integrator/`)
   - **Responsibility**: Generate and execute test suites
   - **Input**: Prototypes and requirements
   - **Output**: Automated accessibility, responsive, and functional tests

### Command Structure (NioPD 5-Part Pattern)

```
src/
├── commands/                 # Slash command specifications (.md files)
│   ├── generate-design-doc.md
│   ├── create-prototype.md
│   ├── iterate-design.md
│   ├── test-prototype.md
│   └── test-responsive.md
├── agents/                   # AI agent implementations
├── templates/                # Handlebars.js templates
├── lib/                      # Shared utilities
└── scripts/                  # PowerShell automation
```

## Technology Stack

- **Language**: JavaScript/Node.js 18+
- **Automation**: PowerShell 7.0+ (Windows)
- **Templates**: Handlebars.js
- **Styling**: Tailwind CSS
- **Testing**: Playwright MCP
- **Storage**: File-based (Markdown + JSON)
- **Integration**: iFlow CLI platform

## Key Features

✅ **AI-Driven Analysis** - Extract structured design requirements from natural language
✅ **Automated Wireframing** - Generate WCAG 2.1 AA compliant semantic HTML layouts
✅ **Interactive Prototyping** - Create fully interactive prototypes with Tailwind CSS
✅ **Automated Quality Testing** - Playwright-integrated accessibility and responsive testing
✅ **File System Integration** - All outputs are version-control friendly, human-readable files

## File-Based Workflow

All artifacts are stored as structured files in the `workspace/` directory:

```
workspace/
├── designs/                  # Design documents and specifications
├── prototypes/               # Interactive HTML/CSS prototypes
├── assets/                   # Images, icons, design resources
├── tests/                    # Playwright test files
└── reports/                  # Testing and validation reports
```

## Performance Standards

- **Initialization**: <2 seconds
- **Design Generation**: <5 minutes
- **Prototype Creation**: <3 minutes
- **Test Execution**: <30 seconds

## Constitutional Compliance

DesignFast adheres to strict constitutional requirements:

### Agent-First Architecture
- 5 specialized agents with clear single responsibilities
- Independent testability and parallel development
- Clear input/output contracts

### File-Based Workflow Integration
- All artifacts stored as structured files
- Perfect Git integration and version control
- Human-readable formats (Markdown + JSON)

### Accessibility-First Design
- WCAG 2.1 AA mandatory for all prototypes
- Built into wireframes from inception
- Automated accessibility testing

### Mobile-First Responsive Design
- Progressive enhancement from mobile to desktop
- Consistent breakpoint strategy (320px, 768px, 1024px, 1440px)
- Tailwind CSS utility-first approach

### Quality Gates and Testing Integration
- Playwright MCP mandatory for all prototypes
- Automated testing covers accessibility, responsiveness, functionality
- Quality gates prevent progression without passing tests

## Installation & Setup

### Prerequisites
- Windows 10/11 (64-bit)
- Node.js 18.0+
- PowerShell 7.0+
- iFlow CLI (latest version)

### Installation
```powershell
# Install via iFlow CLI
iflow install designfast

# Or install from source
git clone <repository>
cd designfast
npm install
iflow dev-install .
```

### Verification
```powershell
iflow designfast --help
```

## Usage Examples

### Basic Workflow
```powershell
# Generate design from requirements
iflow designfast:generate-design-doc --from="Create a user-friendly login page with email and social login"

# Create interactive prototype
iflow designfast:create-prototype

# Run quality tests
iflow designfast:test-prototype
```

### Advanced Usage
```powershell
# Generate design for specific platform
iflow designfast:generate-design-doc --from=requirements.md --target-platform=mobile

# Create prototype with custom interactivity
iflow designfast:create-prototype --interactivity=enhanced --performance-budget=2048

# Run specific test types
iflow designfast:test-prototype --type=accessibility --report
```

## Development

### Project Structure Details

#### Agents Directory
Each agent follows the NioPD contract pattern:

```
agents/{agent-name}/
├── index.js              # Main agent implementation
├── contract.js           # Input/output schema validation
├── prompts/              # AI model prompts
└── tests/                # Agent unit tests
```

#### Commands Directory
Command specifications in Markdown format:

```
commands/{command-name}.md
├── Description
├── Syntax
├── Options
├── Examples
└── Error Handling
```

#### Templates Directory
Handlebars.js templates for code generation:

```
templates/
├── design-document-template.md
├── prototype-template.html
├── test-templates/
└── documents/
```

#### Scripts Directory
PowerShell automation scripts:

```
scripts/
├── project-manager.ps1    # Design project management
├── requirements-parser.ps1 # Requirement processing
├── wireframe-manager.ps1  # Wireframe generation
├── prototype-manager.ps1  # Prototype building
├── test-manager.ps1       # Test execution
└── workspace-manager.ps1  # File system operations
```

### Testing Strategy

- **Unit Tests**: Individual agent and utility testing
- **Contract Tests**: Agent input/output validation
- **Integration Tests**: End-to-end workflow testing
- **Accessibility Tests**: WCAG compliance validation
- **Performance Tests**: Response time and resource usage

### Code Quality

- ESLint configuration for JavaScript consistency
- Prettier for code formatting
- Husky pre-commit hooks for quality gates
- Playwright for automated testing

## API Reference

### Agent Contracts

All agents implement the standard contract interface:

```javascript
class DesignAgent {
  constructor(config) {
    this.inputSchema = validateSchema(config.input);
    this.outputSchema = validateSchema(config.output);
  }

  async process(input) {
    this.validateInput(input);
    const result = await this.execute(input);
    return this.validateOutput(result);
  }
}
```

### Command Interface

Commands integrate with iFlow CLI through the extension manifest:

```javascript
module.exports = {
  name: 'designfast:generate-design-doc',
  description: 'Generate comprehensive UI/UX design documents',
  handler: async (context, args) => {
    // Agent orchestration logic
  }
}
```

## Troubleshooting

### Common Issues

**Command not found**
```powershell
iflow refresh
iflow designfast --help
```

**Slow AI responses**
```powershell
iflow status --verbose
iflow test-connection --ai-services
```

**Test failures**
```powershell
npx playwright install
iflow designfast:test-prototype --debug
```

### Debug Mode
```powershell
$env:DESIGNFAST_DEBUG = "true"
iflow designfast:generate-design-doc --verbose
```

## Contributing

1. Follow the NioPD architecture patterns
2. Maintain constitutional compliance
3. Add tests for new features
4. Update documentation
5. Ensure cross-platform compatibility

## License

[License information]

## Changelog

### v1.0.0 (2025-11-10)
- Initial release with 5 AI agents
- Complete NioPD architecture implementation
- Windows optimization and iFlow CLI integration
- Playwright MCP testing integration
- WCAG 2.1 AA accessibility compliance

---

**Need help?** See `quickstart.md` for detailed usage instructions or run `iflow designfast --help`.