Create a modern and responsive interface for an AI-powered campaign builder, visually inspired by Apollo.io.Visual style:- Dark left-hand sidebar with icons and labels- White main canvas area- Medium rounded cards with light shadows- Bright blue as primary color for CTAs- Compact UI with tight spacing- Sans-serif modern fontsScreens:1. Campaign Dashboard with “Create New Campaign” CTA2. Audience selection step (filter panel on the left, selected tags on the top)3. AI prompt builder step with text area and 3 AI-generated email variants4. Flow builder with draggable email steps (e.g. Email 1 → Delay → Email 2)5. Final campaign review screen with summaryUX details:- Vertical step indicator on the left- Animated transitions between steps- Tailwind CSS only- Hover effects, tooltips, and subtle transitions
I'll create a modern AI-powered campaign builder interface inspired by Apollo.io's clean design aesthetic. This will be a multi-step application with a dark sidebar, step indicator, and smooth transitions between different campaign building phases.
I've created a comprehensive AI-powered campaign builder interface inspired by Apollo.io's clean design aesthetic. Here are the key features implemented:
Design Elements
- Dark left sidebar with navigation icons and step indicators
- Clean white main canvas with proper spacing and typography
- Medium rounded cards with subtle shadows and hover effects
- Bright blue primary color (
#2563eb) for CTAs and active states - Compact, modern UI with tight spacing and sans-serif fonts
Five Complete Screens
- Campaign Dashboard - Overview with metrics cards and campaign list
- Audience Selection - Filter panel with tag-based selection system
- AI Prompt Builder - Text area for campaign description with 3 AI-generated email variants
- Flow Builder - Draggable email sequence with delays (Email → Delay → Email)
- Campaign Review - Final summary screen with launch settings
UX Features
- Vertical step indicator in the dark sidebar with completion states
- Smooth transitions between steps with proper state management
- Hover effects on cards, buttons, and interactive elements
- Tooltips and badges for better user guidance
- Responsive design that works on different screen sizes
Interactive Elements
- Filter selection with visual feedback
- AI variant selection with different tones (Professional, Casual, Bold)
- Flow builder with email steps and delay configurations
- Campaign settings and launch options
The interface maintains Apollo.io's professional aesthetic while providing a comprehensive campaign building experience with modern React patterns and Tailwind CSS styling.
Design a responsive web interface for an AI-powered B2B campaign builder tool, similar in structure and style to Apollo.io.Goal: Let users describe their campaign goal, and let the AI assistant guide them step-by-step to launch — generating audience filters, email content, campaign flow, and feedback.Screens and features to include:1. Campaign Goal Input (Step 1):- A conversational chat-style prompt box where user types in their goal (e.g. “Reach SaaS founders in Canada with a product launch message”)- AI responds with a summary of suggested audience filters (e.g. “SaaS • Founder • Canada”)- Include button: “Apply these filters”2. Email Generator (Step 2):- AI generates 3 cold email variants (subject line + body)- Add editable fields to tweak generated content- Add a sidebar with real-time AI feedback: “Subject line too long”, “No CTA found”, etc.3. AI Campaign Flow Builder (Step 3):- Visual drag-and-drop cards: Email → Delay → Email → End- AI suggests a flow based on goal (e.g. “Send 2nd email after 3 days if no reply”)- Cards should be connected with arrows; allow users to rearrange4. Campaign Preview and Launch (Step 4):- Show audience filters, final email content, and flow structure- Add “Launch Campaign” buttonDesign details:- Use Tailwind CSS for styling- Include hover states and transitions- Sticky AI assistant box or chat widget on the right- Use modern layout: light canvas + dark sidebar (Apollo-style)Bonus (optional):- Animate transitions between steps- Show typing animation in AI responses- Add tooltip explanations near AI icons or buttons
I'll create a comprehensive AI-powered B2B campaign builder with a conversational interface, inspired by Apollo.io's clean design. This will include all 4 steps with chat-style interactions, drag-and-drop flow building, and real-time AI feedback.
I've created a comprehensive AI-powered B2B campaign builder with a conversational interface inspired by Apollo.io's design. Here are the key features implemented:
Core Features
1. Campaign Goal Input (Step 1)
- Conversational chat interface with typing animations
- AI assistant that responds to user goals
- Smart filter extraction from natural language input
- Real-time suggestions with estimated audience reach
- "Apply these filters" button to proceed
2. Email Generator (Step 2)
- 3 AI-generated email variants with different tones (Professional, Casual, Bold)
- Editable fields for subject line and body customization
Real-time AI feedback sidebar with warnings and suggestions:
- Subject line length warnings
- Missing personalization alerts
- CTA detection
- Email length optimization
3. AI Campaign Flow Builder (Step 3)
- Visual drag-and-drop interface with connected cards
- Smart flow suggestions based on campaign goals
- Different step types: Email → Delay → Condition → Email
- Editable flow components with hover effects
4. Campaign Preview & Launch (Step 4)
- Complete campaign summary with all settings
- Launch configuration options (immediate vs scheduled)
- Tracking settings for opens, clicks, and replies
- Final review before campaign launch
Design Elements
- Apollo.io-inspired layout: Dark sidebar + light main canvas
- Modern card-based UI with subtle shadows and rounded corners
- Smooth transitions and hover effects throughout
- Responsive design that works on all screen sizes
- Consistent color scheme with blue primary colors
AI Features
- Conversational interface with realistic typing animations
- Smart audience targeting from natural language
- Real-time email feedback with actionable suggestions
- Flow optimization recommendations
- Context-aware responses throughout the journey
Technical Implementation
- State management for multi-step workflow
- Real-time feedback system with validation
- Smooth animations and transitions
- Accessible design with proper ARIA labels
- Mobile-responsive layout
The interface guides users through a complete campaign creation process with AI assistance at every step, making complex B2B campaign building intuitive and efficient.