-
1.52 kB
initial commit
-
206 Bytes
# AI Agent Coding Prompt: Professional CPA Social Media Content Creator ## 🎯 PROJECT OVERVIEW You are tasked to build a **professional web application** specifically designed for **CPA (Cost Per Action) marketers** to create high-converting social media content for **Instagram and TikTok** promotions. This tool should focus on **VPN offers, mobile apps, and software promotions** with optimized aspect ratios and engagement-driven designs. --- ## 📱 CORE SPECIFICATIONS ### **Primary Focus Areas:** - **Instagram Stories/Reels**: 9:16 aspect ratio (1080x1920px) - **Instagram Feed Posts**: 1:1 aspect ratio (1080x1080px) - **TikTok Videos/Slides**: 9:16 aspect ratio (1080x1920px) - **Carousel Posts**: Multiple slides for step-by-step promotions ### **Target Niches:** - VPN services and privacy tools - Mobile productivity apps - Gaming applications - Security software - Streaming and entertainment apps - Finance and crypto apps --- ## 🚀 TECHNICAL REQUIREMENTS ### **Frontend Architecture:** ``` - HTML5 Canvas for dynamic content generation - CSS3 with modern animations and glassmorphism effects - Vanilla JavaScript or React.js framework - TensorFlow.js for AI-powered optimization - Responsive design for all devices ``` ### **Key Libraries to Include:** - **Fabric.js** for advanced canvas manipulation - **GSAP** for professional animations - **Chart.js** for data visualization elements - **QR Code generation** for landing page links - **Font loading** with Google Fonts API --- ## 🎨 DESIGN STUDIO FEATURES ### **Template Categories:** 1. **Hook Templates** - Attention-grabbing opening slides 2. **Problem/Solution** - Pain point identification and resolution 3. **Social Proof** - Testimonials and reviews mockups 4. **Before/After** - Transformation showcases 5. **Urgency/Scarcity** - Limited time offers and countdowns 6. **CTA (Call-to-Action)** - Conversion-focused final slides ### **Visual Elements Library:** ```html <!-- Implement these interactive components --> - Progress bars and loading animations - Fake notification bubbles - Mock phone interfaces with app screenshots - Gradient overlays with brand colors - Icon libraries (Lucide, Feather, FontAwesome) - Mockup frames (phone, laptop, tablet) - Emoji and reaction elements - Price comparison tables - Star ratings and review systems ``` ### **Content Generation Tools:** - **Hook Generator**: AI-powered opening line suggestions - **Pain Point Database**: Common problems for each niche - **Benefit Translator**: Feature → Benefit conversion - **Urgency Creator**: Scarcity and time-sensitive elements - **CTA Optimizer**: Action-oriented button and text generator --- ## 📊 CPA-FOCUSED FEATURES ### **Conversion Elements:** ```javascript // Implement these conversion-boosting components: const cpaElements = { socialProof: ['5-star ratings', 'user counters', 'testimonials'], urgency: ['countdown timers', 'limited spots', 'price increases'], authority: ['expert badges', 'security seals', 'certifications'], curiosity: ['hidden benefits', 'secret methods', 'exclusive access'], fear: ['what you lose', 'competitor advantages', 'missed opportunities'] }; ``` ### **A/B Testing Components:** - Multiple headline variations - Color scheme alternatives - CTA button text options - Layout arrangement tests - Font and typography choices ### **Analytics Integration:** - Click-through rate predictions - Engagement score calculations - Conversion probability estimates - Performance benchmarking --- ## 🛠️ INTERACTIVE FEATURES ### **Smart Content Builder:** 1. **Niche Selection** → Auto-load relevant templates 2. **Offer Input** → Generate compelling headlines 3. **Target Audience** → Adjust language and visuals 4. **Platform Choice** → Optimize dimensions and format 5. **Campaign Goal** → Focus on specific conversion actions ### **AI-Powered Enhancements:** ```javascript // TensorFlow.js implementations: - Color psychology optimization - Text readability analysis - Visual hierarchy scoring - Attention heatmap prediction - Conversion rate estimation - A/B test winner prediction ``` ### **Template Customization:** - **Drag-and-drop** element positioning - **Real-time preview** with device mockups - **Bulk generation** for campaign variations - **Brand kit integration** for consistent styling - **Export options**: PNG, JPG, MP4 (for animated content) --- ## 📈 MARKETING PSYCHOLOGY INTEGRATION ### **Persuasion Triggers Database:** ```json { "scarcity": ["Only 100 spots left", "Offer expires in 24h"], "authority": ["#1 Rated App", "Trusted by 1M+ users"], "social_proof": ["Join 50K satisfied customers", "Featured in TechCrunch"], "reciprocity": ["Free trial", "No credit card required"], "commitment": ["30-day guarantee", "Risk-free trial"], "liking": ["Made for people like you", "Perfect for [audience]"] } ``` ### **Emotional Hooks Library:** - **Fear-based**: "Your data is being sold right now..." - **Curiosity**: "The secret VPN trick nobody talks about..." - **Desire**: "Get premium features for free..." - **Pride**: "Join the smart ones who already know..." - **Greed**: "Save 90% with this hidden method..." --- ## 🎯 USER INTERFACE REQUIREMENTS ### **Dashboard Layout:** ``` ┌─────────────────────────────────────────────────────┐ │ 🎨 Quick Templates 📱 Platform Selector │ ├─────────────────────────────────────────────────────┤ │ 📊 Canvas Editor 🛠️ Element Library │ ├─────────────────────────────────────────────────────┤ │ 🎯 CPA Tools 📈 Performance Predictor │ ├─────────────────────────────────────────────────────┤ │ 💾 Export Hub 🔄 Batch Generator │ └─────────────────────────────────────────────────────┘ ``` ### **Mobile-First Approach:** - Touch-optimized controls - Swipe navigation between templates - Pinch-to-zoom canvas editing - Voice input for text elements - One-tap export to social platforms --- ## 🔧 TECHNICAL IMPLEMENTATION ### **Canvas System:** ```javascript // Advanced canvas implementation class CPAContentCreator { constructor() { this.canvas = new fabric.Canvas('editor'); this.templates = new TemplateManager(); this.aiOptimizer = new AIOptimizer(); } generateContent(niche, platform, goal) { // AI-driven content generation logic } optimizeForConversion() { // TensorFlow.js optimization algorithms } exportForPlatform(platform) { // Platform-specific export with correct dimensions } } ``` ### **Performance Requirements:** - **Loading time**: < 3 seconds initial load - **Canvas rendering**: 60fps smooth interactions - **Export speed**: < 5 seconds for high-res images - **Mobile responsiveness**: Works on all devices - **Offline capability**: Core features work without internet ### **Data Architecture:** ```javascript // Content structure for CPA optimization const contentData = { hook: "Attention-grabbing headline", problem: "Pain point identification", solution: "Product/service presentation", proof: "Social proof and testimonials", urgency: "Time-sensitive elements", cta: "Clear call-to-action", tracking: "UTM parameters and analytics" }; ``` --- ## 🎨 VISUAL DESIGN GUIDELINES ### **Color Psychology for CPA:** - **Red**: Urgency, action, alerts - **Green**: Trust, money, success - **Blue**: Security, reliability, tech - **Orange**: Enthusiasm, creativity, fun - **Purple**: Premium, luxury, exclusivity ### **Typography Hierarchy:** 1. **Headlines**: Bold, large, attention-grabbing 2. **Subheads**: Medium weight, supporting info 3. **Body text**: Readable, scannable, persuasive 4. **CTA text**: Action-oriented, contrasting ### **Layout Patterns:** - **F-Pattern**: For text-heavy content - **Z-Pattern**: For visual storytelling - **Grid System**: For organized information - **Center Focus**: For single call-to-action --- ## 🚀 ADVANCED FEATURES TO IMPLEMENT ### **AI Content Assistant:** - **Auto-headline generation** based on niche and offer - **Image suggestion** from stock photo APIs - **Color scheme recommendation** using color theory - **Layout optimization** based on conversion data - **Copy improvement** suggestions using NLP ### **Campaign Management:** ```javascript // Campaign tracking and optimization class CampaignManager { createCampaign(name, niche, budget) { // Campaign setup with tracking } generateVariations(baseContent, count) { // A/B test variations generator } trackPerformance(campaignId) { // Analytics and performance monitoring } } ``` ### **Integration Capabilities:** - **Social media APIs** for direct posting - **UTM builder** for campaign tracking - **Webhook support** for CPA networks - **CSV export** for bulk campaign data - **Third-party tool integrations** (ClickFunnels, etc.) --- ## 📱 PLATFORM-SPECIFIC OPTIMIZATIONS ### **Instagram Requirements:** ```javascript const instagramSpecs = { stories: { width: 1080, height: 1920, duration: 15 }, reels: { width: 1080, height: 1920, duration: 60 }, feed: { width: 1080, height: 1080 }, carousel: { width: 1080, height: 1080, maxSlides: 10 } }; ``` ### **TikTok Specifications:** ```javascript const tiktokSpecs = { video: { width: 1080, height: 1920, duration: 60 }, slideshow: { width: 1080, height: 1920, slides: '3-10' }, aspectRatio: '9:16', safeArea: { top: 100, bottom: 200 } // For UI elements }; ``` --- ## 🎯 SUCCESS METRICS & KPIs ### **App Performance Indicators:** - **User engagement**: Time spent in app - **Template usage**: Most popular templates - **Export rate**: Completion percentage - **User retention**: Return usage rates - **Feature adoption**: AI tool usage ### **CPA Campaign Metrics:** - **CTR prediction accuracy**: AI vs actual results - **Conversion rate improvement**: Before/after comparison - **Cost per acquisition**: Campaign efficiency - **ROAS (Return on Ad Spend)**: Revenue tracking --- ## 🛡️ TECHNICAL CONSIDERATIONS ### **Security & Privacy:** - **No user data storage** without consent - **GDPR compliance** for EU users - **Secure export** with watermark options - **API rate limiting** to prevent abuse ### **Scalability:** - **CDN integration** for fast asset delivery - **Modular architecture** for feature updates - **Database optimization** for quick template loading - **Caching strategies** for repeated operations --- ## 📋 DEVELOPMENT PHASES ### **Phase 1 - MVP (Minimum Viable Product):** - Basic canvas editor with templates - Instagram/TikTok dimension presets - Simple text and image editing - Basic export functionality ### **Phase 2 - CPA Enhancement:** - Conversion-focused templates - Psychology-based element library - A/B testing variations - Performance prediction tools ### **Phase 3 - AI Integration:** - TensorFlow.js optimization - Smart content suggestions - Automated campaign generation - Advanced analytics dashboard ### **Phase 4 - Platform Integration:** - Direct social media posting - Campaign tracking integration - Third-party tool connections - Enterprise features --- ## 🎨 FINAL IMPLEMENTATION NOTES **Code Architecture**: Use modern ES6+ JavaScript with modular design patterns. Implement Progressive Web App (PWA) features for mobile installation and offline usage. **User Experience**: Focus on one-click template selection, drag-and-drop simplicity, and instant preview updates. Every feature should reduce the time from idea to published content. **Conversion Focus**: Every design element, color choice, and template should be optimized for CPA campaign success. Include built-in best practices and automated optimization suggestions. **Performance**: Prioritize fast loading, smooth interactions, and quick exports. The tool should feel professional and reliable for daily marketing use. --- *This prompt provides a comprehensive blueprint for building a professional CPA-focused social media content creation tool. Implement with attention to conversion optimization, user experience, and platform-specific requirements.* - Initial Deployment
-
34.9 kB
# AI Agent Coding Prompt: Professional CPA Social Media Content Creator ## 🎯 PROJECT OVERVIEW You are tasked to build a **professional web application** specifically designed for **CPA (Cost Per Action) marketers** to create high-converting social media content for **Instagram and TikTok** promotions. This tool should focus on **VPN offers, mobile apps, and software promotions** with optimized aspect ratios and engagement-driven designs. --- ## 📱 CORE SPECIFICATIONS ### **Primary Focus Areas:** - **Instagram Stories/Reels**: 9:16 aspect ratio (1080x1920px) - **Instagram Feed Posts**: 1:1 aspect ratio (1080x1080px) - **TikTok Videos/Slides**: 9:16 aspect ratio (1080x1920px) - **Carousel Posts**: Multiple slides for step-by-step promotions ### **Target Niches:** - VPN services and privacy tools - Mobile productivity apps - Gaming applications - Security software - Streaming and entertainment apps - Finance and crypto apps --- ## 🚀 TECHNICAL REQUIREMENTS ### **Frontend Architecture:** ``` - HTML5 Canvas for dynamic content generation - CSS3 with modern animations and glassmorphism effects - Vanilla JavaScript or React.js framework - TensorFlow.js for AI-powered optimization - Responsive design for all devices ``` ### **Key Libraries to Include:** - **Fabric.js** for advanced canvas manipulation - **GSAP** for professional animations - **Chart.js** for data visualization elements - **QR Code generation** for landing page links - **Font loading** with Google Fonts API --- ## 🎨 DESIGN STUDIO FEATURES ### **Template Categories:** 1. **Hook Templates** - Attention-grabbing opening slides 2. **Problem/Solution** - Pain point identification and resolution 3. **Social Proof** - Testimonials and reviews mockups 4. **Before/After** - Transformation showcases 5. **Urgency/Scarcity** - Limited time offers and countdowns 6. **CTA (Call-to-Action)** - Conversion-focused final slides ### **Visual Elements Library:** ```html <!-- Implement these interactive components --> - Progress bars and loading animations - Fake notification bubbles - Mock phone interfaces with app screenshots - Gradient overlays with brand colors - Icon libraries (Lucide, Feather, FontAwesome) - Mockup frames (phone, laptop, tablet) - Emoji and reaction elements - Price comparison tables - Star ratings and review systems ``` ### **Content Generation Tools:** - **Hook Generator**: AI-powered opening line suggestions - **Pain Point Database**: Common problems for each niche - **Benefit Translator**: Feature → Benefit conversion - **Urgency Creator**: Scarcity and time-sensitive elements - **CTA Optimizer**: Action-oriented button and text generator --- ## 📊 CPA-FOCUSED FEATURES ### **Conversion Elements:** ```javascript // Implement these conversion-boosting components: const cpaElements = { socialProof: ['5-star ratings', 'user counters', 'testimonials'], urgency: ['countdown timers', 'limited spots', 'price increases'], authority: ['expert badges', 'security seals', 'certifications'], curiosity: ['hidden benefits', 'secret methods', 'exclusive access'], fear: ['what you lose', 'competitor advantages', 'missed opportunities'] }; ``` ### **A/B Testing Components:** - Multiple headline variations - Color scheme alternatives - CTA button text options - Layout arrangement tests - Font and typography choices ### **Analytics Integration:** - Click-through rate predictions - Engagement score calculations - Conversion probability estimates - Performance benchmarking --- ## 🛠️ INTERACTIVE FEATURES ### **Smart Content Builder:** 1. **Niche Selection** → Auto-load relevant templates 2. **Offer Input** → Generate compelling headlines 3. **Target Audience** → Adjust language and visuals 4. **Platform Choice** → Optimize dimensions and format 5. **Campaign Goal** → Focus on specific conversion actions ### **AI-Powered Enhancements:** ```javascript // TensorFlow.js implementations: - Color psychology optimization - Text readability analysis - Visual hierarchy scoring - Attention heatmap prediction - Conversion rate estimation - A/B test winner prediction ``` ### **Template Customization:** - **Drag-and-drop** element positioning - **Real-time preview** with device mockups - **Bulk generation** for campaign variations - **Brand kit integration** for consistent styling - **Export options**: PNG, JPG, MP4 (for animated content) --- ## 📈 MARKETING PSYCHOLOGY INTEGRATION ### **Persuasion Triggers Database:** ```json { "scarcity": ["Only 100 spots left", "Offer expires in 24h"], "authority": ["#1 Rated App", "Trusted by 1M+ users"], "social_proof": ["Join 50K satisfied customers", "Featured in TechCrunch"], "reciprocity": ["Free trial", "No credit card required"], "commitment": ["30-day guarantee", "Risk-free trial"], "liking": ["Made for people like you", "Perfect for [audience]"] } ``` ### **Emotional Hooks Library:** - **Fear-based**: "Your data is being sold right now..." - **Curiosity**: "The secret VPN trick nobody talks about..." - **Desire**: "Get premium features for free..." - **Pride**: "Join the smart ones who already know..." - **Greed**: "Save 90% with this hidden method..." --- ## 🎯 USER INTERFACE REQUIREMENTS ### **Dashboard Layout:** ``` ┌─────────────────────────────────────────────────────┐ │ 🎨 Quick Templates 📱 Platform Selector │ ├─────────────────────────────────────────────────────┤ │ 📊 Canvas Editor 🛠️ Element Library │ ├─────────────────────────────────────────────────────┤ │ 🎯 CPA Tools 📈 Performance Predictor │ ├─────────────────────────────────────────────────────┤ │ 💾 Export Hub 🔄 Batch Generator │ └─────────────────────────────────────────────────────┘ ``` ### **Mobile-First Approach:** - Touch-optimized controls - Swipe navigation between templates - Pinch-to-zoom canvas editing - Voice input for text elements - One-tap export to social platforms --- ## 🔧 TECHNICAL IMPLEMENTATION ### **Canvas System:** ```javascript // Advanced canvas implementation class CPAContentCreator { constructor() { this.canvas = new fabric.Canvas('editor'); this.templates = new TemplateManager(); this.aiOptimizer = new AIOptimizer(); } generateContent(niche, platform, goal) { // AI-driven content generation logic } optimizeForConversion() { // TensorFlow.js optimization algorithms } exportForPlatform(platform) { // Platform-specific export with correct dimensions } } ``` ### **Performance Requirements:** - **Loading time**: < 3 seconds initial load - **Canvas rendering**: 60fps smooth interactions - **Export speed**: < 5 seconds for high-res images - **Mobile responsiveness**: Works on all devices - **Offline capability**: Core features work without internet ### **Data Architecture:** ```javascript // Content structure for CPA optimization const contentData = { hook: "Attention-grabbing headline", problem: "Pain point identification", solution: "Product/service presentation", proof: "Social proof and testimonials", urgency: "Time-sensitive elements", cta: "Clear call-to-action", tracking: "UTM parameters and analytics" }; ``` --- ## 🎨 VISUAL DESIGN GUIDELINES ### **Color Psychology for CPA:** - **Red**: Urgency, action, alerts - **Green**: Trust, money, success - **Blue**: Security, reliability, tech - **Orange**: Enthusiasm, creativity, fun - **Purple**: Premium, luxury, exclusivity ### **Typography Hierarchy:** 1. **Headlines**: Bold, large, attention-grabbing 2. **Subheads**: Medium weight, supporting info 3. **Body text**: Readable, scannable, persuasive 4. **CTA text**: Action-oriented, contrasting ### **Layout Patterns:** - **F-Pattern**: For text-heavy content - **Z-Pattern**: For visual storytelling - **Grid System**: For organized information - **Center Focus**: For single call-to-action --- ## 🚀 ADVANCED FEATURES TO IMPLEMENT ### **AI Content Assistant:** - **Auto-headline generation** based on niche and offer - **Image suggestion** from stock photo APIs - **Color scheme recommendation** using color theory - **Layout optimization** based on conversion data - **Copy improvement** suggestions using NLP ### **Campaign Management:** ```javascript // Campaign tracking and optimization class CampaignManager { createCampaign(name, niche, budget) { // Campaign setup with tracking } generateVariations(baseContent, count) { // A/B test variations generator } trackPerformance(campaignId) { // Analytics and performance monitoring } } ``` ### **Integration Capabilities:** - **Social media APIs** for direct posting - **UTM builder** for campaign tracking - **Webhook support** for CPA networks - **CSV export** for bulk campaign data - **Third-party tool integrations** (ClickFunnels, etc.) --- ## 📱 PLATFORM-SPECIFIC OPTIMIZATIONS ### **Instagram Requirements:** ```javascript const instagramSpecs = { stories: { width: 1080, height: 1920, duration: 15 }, reels: { width: 1080, height: 1920, duration: 60 }, feed: { width: 1080, height: 1080 }, carousel: { width: 1080, height: 1080, maxSlides: 10 } }; ``` ### **TikTok Specifications:** ```javascript const tiktokSpecs = { video: { width: 1080, height: 1920, duration: 60 }, slideshow: { width: 1080, height: 1920, slides: '3-10' }, aspectRatio: '9:16', safeArea: { top: 100, bottom: 200 } // For UI elements }; ``` --- ## 🎯 SUCCESS METRICS & KPIs ### **App Performance Indicators:** - **User engagement**: Time spent in app - **Template usage**: Most popular templates - **Export rate**: Completion percentage - **User retention**: Return usage rates - **Feature adoption**: AI tool usage ### **CPA Campaign Metrics:** - **CTR prediction accuracy**: AI vs actual results - **Conversion rate improvement**: Before/after comparison - **Cost per acquisition**: Campaign efficiency - **ROAS (Return on Ad Spend)**: Revenue tracking --- ## 🛡️ TECHNICAL CONSIDERATIONS ### **Security & Privacy:** - **No user data storage** without consent - **GDPR compliance** for EU users - **Secure export** with watermark options - **API rate limiting** to prevent abuse ### **Scalability:** - **CDN integration** for fast asset delivery - **Modular architecture** for feature updates - **Database optimization** for quick template loading - **Caching strategies** for repeated operations --- ## 📋 DEVELOPMENT PHASES ### **Phase 1 - MVP (Minimum Viable Product):** - Basic canvas editor with templates - Instagram/TikTok dimension presets - Simple text and image editing - Basic export functionality ### **Phase 2 - CPA Enhancement:** - Conversion-focused templates - Psychology-based element library - A/B testing variations - Performance prediction tools ### **Phase 3 - AI Integration:** - TensorFlow.js optimization - Smart content suggestions - Automated campaign generation - Advanced analytics dashboard ### **Phase 4 - Platform Integration:** - Direct social media posting - Campaign tracking integration - Third-party tool connections - Enterprise features --- ## 🎨 FINAL IMPLEMENTATION NOTES **Code Architecture**: Use modern ES6+ JavaScript with modular design patterns. Implement Progressive Web App (PWA) features for mobile installation and offline usage. **User Experience**: Focus on one-click template selection, drag-and-drop simplicity, and instant preview updates. Every feature should reduce the time from idea to published content. **Conversion Focus**: Every design element, color choice, and template should be optimized for CPA campaign success. Include built-in best practices and automated optimization suggestions. **Performance**: Prioritize fast loading, smooth interactions, and quick exports. The tool should feel professional and reliable for daily marketing use. --- *This prompt provides a comprehensive blueprint for building a professional CPA-focused social media content creation tool. Implement with attention to conversion optimization, user experience, and platform-specific requirements.* - Initial Deployment
-
388 Bytes
initial commit