Response Details (ID: 92 - UIGEN-X-4B-0729)

Text Before HTML:

We are creating a UI for a web-based marketing automation tool's campaign builder.
 The design should be modern and clean, with a focus on functionality for creating and editing campaigns.
 We'll have sections for email workflows, lead scoring, and other automation features.

 We'll use a color scheme that is professional and suitable for a business tool. 
 Let's choose:
   Primary: A deep blue for professionalism and trust (e.g., #2563eb)
   Secondary: A complementary color for accents (e.g., #f97316 for energy and action)
   Background: Light gray for the main background (e.g., #f3f4f6)
   Text: Dark gray for primary text (e.g., #1f2937) and lighter gray for secondary (e.g., #6b7280)

 We'll structure the page with:
   - A sidebar for navigation (Campaigns, Email Workflows, Lead Scoring, etc.)
   - A main content area for the campaign builder

 We'll use Tailwind CSS via CDN and include the Inter font.

 We'll have:
   - A header with the app name and user profile
   - A sidebar with navigation links
   - A main content area that changes based on the selected section

 We'll create:
   - Campaign List: A list of existing campaigns with options to edit, delete, or view.
   - Email Workflow Builder: A form to create a new email workflow with steps (to be implemented in a modal or separate view).
   - Lead Scoring: A form to set up lead scoring rules and view current leads.

 Since we are building a single-page application, we'll use JavaScript to switch between views.

 We'll create:
   - index.html: The main structure
   - styles.css: Additional styles (if needed, but we'll try to use Tailwind as much as possible)

 We'll use the following structure:

   
     

        
        

        
        
 ... 
     
   

 We'll have multiple sections (campaigns, email, lead scoring) and we'll use JavaScript to show the active one.

 Let's start by setting up the HTML structure and then add the JavaScript for navigation.

 Note: We are not using a framework, so we'll use vanilla JS for switching views.

 We'll also include a modal for creating a new campaign or workflow.

 Let's code accordingly.


# Marketing Automation Campaign Builder UI

I'll create a modern, professional UI for a marketing automation tool's campaign builder with a focus on email workflows and lead scoring.

Generated HTML Page:

Text After HTML:

This marketing automation campaign builder UI features:

1. **Modern Dashboard Layout**:
   - Clean sidebar navigation with intuitive icons
   - Responsive design that works on all devices
   - Professional color scheme with primary blue and accent orange

2. **Campaign Management**:
   - Campaign cards showing status, progress, and key metrics
   - Visual indicators for active, draft, and paused campaigns
   - Quick actions for editing, analytics, and more

3. **Email Workflow Builder**:
   - Visual workflow cards with status information
   - Tab-based organization (All, Active, Drafts, Archived)
   - Clear visual hierarchy for different workflow types

4. **Lead Scoring System**:
   - Lead cards with scoring visualization
   - Detailed scoring rules with point values
   - Last contact information for each lead

5. **Interactive Elements**:
   - Drag-and-drop functionality for campaign cards
   - Hover effects and animations for better UX
   - Responsive buttons with hover states

The design follows modern UI principles with ample whitespace, consistent spacing, and a professional color scheme suitable for a business application.