Module Creation

Module Creation (or Auto Modularization) is the intelligent heart of HAI RapidUI that automatically analyzes your project's wireframes, API specifications, and screen interactions to organize them into logical, manageable modules. This AI-powered feature transforms complex projects into structured, efficient development workflows.

AI-Powered Intelligence

Our advanced LLM models understand UI patterns, component relationships, and business logic to create optimal module structures that mirror real-world application architecture.

Analysis Phase

The system performs comprehensive analysis of your project resources:

Wireframe Analysis

• UI component identification
• Screen relationship mapping
• User flow recognition
• Interactive element detection

API Specification Review

• Endpoint categorization
• Data model analysis
• Authentication patterns
• Business logic grouping

Screen Interaction Mapping

• Navigation flow analysis
• State transition identification
• User journey mapping
• Feature boundary detection

Asset Organization

• Theme consistency analysis
• Component reusability assessment
• Design pattern recognition
• Brand element identification

Generated Module Structure

After analysis, the system creates a well-organized module structure in your input directory:

input/modules/
├── authentication/
│   ├── wireframes/
│   │   ├── login.png
│   │   ├── register.png
│   │   └── forgot-password.png
│   ├── swagger.json
│   └── screen_interaction.md
├── dashboard/
│   ├── wireframes/
│   │   ├── overview.png
│   │   ├── analytics.png
│   │   └── reports.png
│   ├── swagger.json
│   └── screen_interaction.md
└── user-profile/
    ├── wireframes/
    │   ├── profile-view.png
    │   ├── profile-edit.png
    │   └── settings.png
    ├── swagger.json
    └── screen_interaction.md

Key Benefits

Development Efficiency

Parallel Development

• Multiple team members can work on different modules simultaneously
• Reduced merge conflicts and development bottlenecks
• Independent testing and deployment capabilities

Focused Implementation

• Developers can concentrate on one module at a time
• Reduced cognitive load and complexity
• Clear scope boundaries for each development cycle

Optimized Resource Usage

• Intelligent batching reduces LLM token consumption
• Context preservation across related components
• Efficient memory and processing utilization

Quality & Consistency

📋 Structured Development

• Consistent Patterns: Unified coding patterns across modules
• Error Isolation: Issues contained within module boundaries
• Testing Strategy: Module-specific test suites and validation

Progress Tracking

The system provides comprehensive tracking capabilities:

// Module State Example
[
  {
    "moduleName": "landingpage",
    "status": "IN_PROGRESS",
    "batch": [],
    "response": null,
    "startTime": "2025-06-04T04:43:25.897Z",
  }
]

This state information is stored in .hai-rapidui/module_state.json for persistence across sessions.

Interactive Configuration

During the module creation process, you can:

• Review Identified Modules: Approve or modify the suggested structure
• Set Execution Order: Define the sequence for module implementation
• Configure Dependencies: Adjust module relationships
• Customize Naming: Modify module names to match your conventions

Implementation Workflow

Once modules are identified, you can:

1. Implement All Modules: Generate UI pages with API integration for all modules at once
2. Implement Specific Module: Work on individual modules one at a time
3. Set Module Priority: Determine which modules should be implemented first
4. Track Progress: Monitor the implementation status of each module

Module Dependencies

The system automatically identifies dependencies between modules:

• Authentication Dependencies: Login/registration modules are prioritized
• Data Flow Dependencies: Modules that provide data to other modules
• Navigation Dependencies: Modules that serve as entry points
• Shared Component Dependencies: Modules that provide reusable components