Best Practices

This guide outlines recommended best practices for using HAI RapidUI effectively. Following these guidelines will help you achieve optimal results and streamline your UI modernization workflow.

In This Guide

• Implementation Mode Selection
• Responsive Design Organization
• Importance of Screen Interaction Details
• Assets Configuration Files
• Recommended LLM Model

Implementation Mode Selection

Choose the right implementation mode based on your project requirements:

• Use Replicate Mode when:

  • Pixel-perfect accuracy is required
  • You need to maintain brand consistency and established design systems
  • Your project requires strict adherence to provided wireframes
  • You're converting existing designs to code with minimal creative interpretation

• Use Modernize Mode when:

  • You're updating legacy applications with outdated interfaces
  • You want to enhance user experience with contemporary design patterns
  • Your project needs improved accessibility and responsive design
  • You're open to creative interpretation that maintains functional requirements

Selecting the appropriate mode at the beginning of your project will ensure that HAI RapidUI generates code that aligns with your expectations and project goals.

Responsive Design Organization

When working with multi-device interfaces, place all related UI designs (web, tablet, mobile) in the same module for better output and consistency:

input/modules/
├── dashboard/
│   ├── wireframes/
│   │   ├── dashboard-overview-webui.png
│   │   ├── dashboard-analytics-webui.png
│   │   ├── dashboard-overview-tabletui.png
│   │   ├── dashboard-analytics-tabletui.png
│   │   ├── dashboard-overview-mobileui.png
│   │   └── dashboard-analytics-mobileui.png
│   ├── swagger.json
│   └── screen_interaction.md

This organization ensures:

• Consistent component reuse across device types
• Unified styling and theming
• Streamlined responsive implementation
• Better context for the AI to understand device-specific adaptations
• Improved code generation with shared logic and responsive variants

Importance of Screen Interaction Details

Screen interaction details provide critical context for the AI to understand how users navigate and interact with your application:

• Enhanced User Experience: Detailed interaction specifications result in more intuitive and user-friendly interfaces
• Accurate Navigation Flows: Properly documented screen transitions ensure logical user journeys
• Optimized Component Behavior: Clear interaction details lead to appropriate state management and event handling
• Consistent Interaction Patterns: Standardized interaction documentation promotes uniform behavior across the application

Coming Soon

An automated screen interaction details generation feature is currently in development, which will streamline this documentation process.

Assets Configuration Files

Properly configured input files are essential for optimal results with HAI RapidUI. Follow these best practices for your configuration files:

assets.config.json

This configuration file defines your project's visual identity and assets:

{
  "colors": {
    "primary": "#3b82f6",
    "secondary": "#64748b",
    "accent": "#f59e0b"
  },
  "typography": {
    "fontFamily": "Inter, system-ui, sans-serif",
    "fontSources": {
      "inter": "/fonts/Inter-Variable.woff2"
    }
  },
  "logos": {
    "primary": "/logos/logo.svg",
    "favicon": "/logos/favicon.ico"
  },
  "images": {
    "hero": "/images/hero.jpg"
  }
}

Best Practices for assets.config.json:

• Consistent Color Scheme: Define a comprehensive color palette with primary, secondary, and accent colors along with their variants
• Typography System: Specify a clear typography hierarchy with appropriate font families and weights
• Asset Organization: Keep all referenced assets in the correct directories relative to the paths in your configuration
• Responsive Assets: Provide multiple sizes of logos and images for different device resolutions when needed
• Semantic Naming: Use descriptive, semantic names for colors and assets rather than generic names

Recommended LLM Model

Choosing the right LLM provider can significantly impact the quality and efficiency of your UI generation. HAI RapidUI supports multiple providers, with Anthropic's Claude models delivering the best results.

Recommended LLM Models

Rank	Model	Provider	Recommended Use Case
1	Claude 4	Anthropic	Great for modernizing UI
2	Claude 3.7	Anthropic	Stable for modernize and replica UI
3	Claude 3.5	Anthropic	Decent result in both

For detailed configuration instructions, refer to the Multi-Provider LLM Support documentation.