Social Media Quote Graphics - AiPro Institute\u2122 Prompt Library<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n background: #ffffff;\n padding: 2rem;\n line-height: 1.6;\n }\n\n .container {\n max-width: 900px;\n margin: 0 auto;\n }\n\n .header {\n text-align: center;\n margin-bottom: 2rem;\n }\n\n .header h1 {\n font-size: 2.5rem;\n background: linear-gradient(135deg, #7c3aed 0%, #3b82f6 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n font-weight: 800;\n margin-bottom: 0.5rem;\n }\n\n .card {\n background: white;\n border-radius: 16px;\n box-shadow: 0 20px 60px rgba(0,0,0,0.3);\n overflow: hidden;\n }\n\n .card-header {\n background: linear-gradient(135deg, #7c3aed 0%, #3b82f6 100%);\n color: white;\n padding: 2rem;\n }\n\n .card-header h2 {\n font-size: 2rem;\n margin-bottom: 0.5rem;\n }\n\n .card-header p {\n opacity: 0.95;\n font-size: 1.1rem;\n }\n\n .meta-badges {\n display: flex;\n gap: 0.75rem;\n flex-wrap: wrap;\n margin-top: 1rem;\n }\n\n .badge {\n display: inline-block;\n padding: 0.4rem 0.9rem;\n border-radius: 20px;\n font-size: 0.85rem;\n font-weight: 600;\n }\n\n .badge-skill-beginner {\n background: #10b981;\n color: white;\n }\n\n .badge-time {\n background: #10b981;\n color: white;\n }\n\n .badge-cost {\n background: #10b981;\n color: white;\n }\n\n .badge-format {\n background: #8b5cf6;\n color: white;\n }\n\n .tool-compatibility {\n margin-top: 1rem;\n padding-top: 1rem;\n border-top: 1px solid rgba(255,255,255,0.2);\n }\n\n .tool-compatibility h3 {\n font-size: 0.9rem;\n margin-bottom: 0.5rem;\n opacity: 0.9;\n }\n\n .tool-badges {\n display: flex;\n gap: 0.5rem;\n flex-wrap: wrap;\n }\n\n .tool-badge {\n padding: 0.35rem 0.75rem;\n background: rgba(255,255,255,0.2);\n border: 1px solid rgba(255,255,255,0.3);\n border-radius: 15px;\n font-size: 0.8rem;\n }\n\n .tool-badge.model-agnostic {\n background: rgba(255,255,255,0.3);\n font-weight: 600;\n }\n\n .card-body {\n padding: 2rem;\n }\n\n .section {\n margin-bottom: 2.5rem;\n }\n\n .section-title {\n font-size: 1.5rem;\n color: #7c3aed;\n margin-bottom: 1rem;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n }\n\n .section-title::before {\n content: '';\n width: 4px;\n height: 24px;\n background: linear-gradient(135deg, #7c3aed 0%, #3b82f6 100%);\n border-radius: 2px;\n }\n\n .prompt-box {\n background: #f8fafc;\n border: 2px solid #e2e8f0;\n border-radius: 12px;\n padding: 1.5rem;\n font-family: 'Courier New', monospace;\n font-size: 0.95rem;\n line-height: 1.8;\n position: relative;\n margin-bottom: 1rem;\n }\n\n .copy-button {\n position: absolute;\n top: 1rem;\n right: 1rem;\n background: linear-gradient(135deg, #7c3aed 0%, #3b82f6 100%);\n color: white;\n border: none;\n padding: 0.6rem 1.2rem;\n border-radius: 8px;\n cursor: pointer;\n font-weight: 600;\n font-size: 0.9rem;\n transition: all 0.3s ease;\n }\n\n .copy-button:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4);\n }\n\n .copy-button.copied {\n background: #10b981;\n }\n\n .placeholder {\n color: #f97316;\n font-weight: 600;\n }\n\n .logic-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 1.5rem;\n }\n\n .logic-item {\n background: #f0f9ff;\n padding: 1.25rem;\n border-radius: 10px;\n border-left: 4px solid #3b82f6;\n }\n\n .logic-item h4 {\n color: #1e40af;\n margin-bottom: 0.5rem;\n font-size: 1.05rem;\n }\n\n .logic-item p {\n color: #475569;\n font-size: 0.95rem;\n }\n\n .output-preview {\n background: #fefce8;\n border: 2px solid #fde047;\n border-radius: 12px;\n padding: 1.5rem;\n }\n\n .output-preview h4 {\n color: #854d0e;\n margin-bottom: 1rem;\n }\n\n .chain-strategy {\n background: linear-gradient(135deg, #fdf2f8 0%, #fae8ff 100%);\n border-radius: 12px;\n padding: 1.5rem;\n }\n\n .chain-steps {\n display: grid;\n gap: 1.5rem;\n margin-top: 1rem;\n }\n\n .chain-step {\n background: white;\n padding: 1.25rem;\n border-radius: 10px;\n border-left: 4px solid #a855f7;\n }\n\n .chain-step-header {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n margin-bottom: 0.75rem;\n }\n\n .step-number {\n background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);\n color: white;\n width: 32px;\n height: 32px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 700;\n font-size: 0.9rem;\n }\n\n .chain-step h4 {\n color: #7c3aed;\n font-size: 1.1rem;\n }\n\n .chain-step p {\n color: #475569;\n margin-bottom: 0.5rem;\n }\n\n .chain-step .example {\n background: #f8fafc;\n padding: 0.75rem;\n border-radius: 6px;\n font-size: 0.9rem;\n color: #64748b;\n margin-top: 0.5rem;\n }\n\n .hitl-tips {\n background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);\n border-radius: 12px;\n padding: 1.5rem;\n }\n\n .tips-grid {\n display: grid;\n gap: 1rem;\n margin-top: 1rem;\n }\n\n .tip-item {\n background: white;\n padding: 1rem;\n border-radius: 8px;\n border-left: 3px solid #10b981;\n }\n\n .tip-item h4 {\n color: #047857;\n font-size: 1rem;\n margin-bottom: 0.5rem;\n }\n\n .tip-item p {\n color: #475569;\n font-size: 0.9rem;\n }\n\n .tip-item .follow-up {\n background: #f0fdf4;\n padding: 0.6rem;\n border-radius: 6px;\n margin-top: 0.5rem;\n font-size: 0.85rem;\n color: #166534;\n font-style: italic;\n }\n\n .card-footer {\n background: #f8fafc;\n padding: 1.5rem 2rem;\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 2rem;\n flex-wrap: wrap;\n border-top: 1px solid #e2e8f0;\n }\n\n .stat {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n color: #475569;\n font-size: 0.95rem;\n }\n\n .stat strong {\n color: #1e293b;\n }\n\n .toast {\n position: fixed;\n bottom: 2rem;\n right: 2rem;\n background: #10b981;\n color: white;\n padding: 1rem 1.5rem;\n border-radius: 8px;\n box-shadow: 0 4px 12px rgba(0,0,0,0.3);\n display: none;\n align-items: center;\n gap: 0.5rem;\n animation: slideIn 0.3s ease;\n z-index: 1000;\n }\n\n .toast.show {\n display: flex;\n }\n\n @keyframes slideIn {\n from {\n transform: translateX(400px);\n opacity: 0;\n }\n to {\n transform: translateX(0);\n opacity: 1;\n }\n }\n\n @media (max-width: 768px) {\n body {\n padding: 1rem;\n }\n\n .header h1 {\n font-size: 2rem;\n }\n\n .card-header h2 {\n font-size: 1.5rem;\n }\n\n .logic-grid {\n grid-template-columns: 1fr;\n }\n\n .card-footer {\n flex-direction: column;\n gap: 1rem;\n }\n\n .copy-button {\n position: static;\n width: 100%;\n margin-top: 1rem;\n }\n\n .prompt-box {\n padding-top: 1.5rem;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <div class=\"header\">\n <h1>AiPro Institute\u2122<\/h1>\n <\/div>\n\n <div class=\"card\">\n <div class=\"card-header\">\n <h2>Social Media Quote Graphics<\/h2>\n <p>Create shareable, attention-grabbing quote graphics with professional typography and design that drives engagement across all social platforms<\/p>\n \n <div class=\"meta-badges\">\n <span class=\"badge badge-skill-beginner\">\u2728 Beginner<\/span>\n <span class=\"badge badge-time\">\u23f1\ufe0f 2-3 minutes<\/span>\n <span class=\"badge badge-cost\">\ud83d\udc8e Low Cost<\/span>\n <span class=\"badge badge-format\">\ud83d\uddbc\ufe0f Image Format<\/span>\n <\/div>\n\n <div class=\"tool-compatibility\">\n <h3>\ud83d\udee0\ufe0f Tool Compatibility<\/h3>\n <div class=\"tool-badges\">\n <span class=\"tool-badge\">Optimized for DALL-E 3<\/span>\n <span class=\"tool-badge\">Optimized for Canva AI<\/span>\n <span class=\"tool-badge\">Optimized for Ideogram<\/span>\n <span class=\"tool-badge model-agnostic\">\u2728 Model Agnostic<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"card-body\">\n \n <div class=\"section\">\n <h3 class=\"section-title\">\ud83d\udccb The Prompt<\/h3>\n <div class=\"prompt-box\">\n <button class=\"copy-button\" onclick=\"copyPrompt()\">\ud83d\udccb Copy Prompt<\/button>\n <div id=\"promptContent\">You are an expert graphic designer specializing in high-engagement social media quote graphics with 8+ years of experience creating viral, shareable content. Design a professional quote graphic that captures attention and encourages sharing.\n\n**Quote & Message:**\n- Quote Text: <span class=\"placeholder\">[Insert the exact quote text - keep it under 25 words for maximum impact]<\/span>\n- Quote Author\/Attribution: <span class=\"placeholder\">[Insert author name, or \"Anonymous\" or leave blank for unattributed quotes]<\/span>\n- Message Theme: <span class=\"placeholder\">[Insert theme - e.g., motivation, inspiration, wisdom, humor, business insight, self-care, mindfulness]<\/span>\n- Emotional Tone: <span class=\"placeholder\">[Insert tone - e.g., uplifting & empowering, calm & reflective, bold & energetic, warm & comforting]<\/span>\n\n**Brand & Context:**\n- Brand\/Account: <span class=\"placeholder\">[Insert brand name or personal brand identity]<\/span>\n- Target Audience: <span class=\"placeholder\">[Insert audience - e.g., entrepreneurs, wellness seekers, creative professionals, young parents]<\/span>\n- Platform Primary Use: <span class=\"placeholder\">[Insert platform - e.g., Instagram, LinkedIn, Facebook, Twitter\/X, Pinterest]<\/span>\n- Brand Colors: <span class=\"placeholder\">[Insert 2-3 brand colors with hex codes if available]<\/span>\n\n**Design Style & Visual Approach:**\n\n1. **Overall Aesthetic:**\n - Style Direction: <span class=\"placeholder\">[Insert style - e.g., minimalist & clean, bold & modern, elegant & sophisticated, playful & colorful, organic & natural, vintage & retro, tech & futuristic]<\/span>\n - Design Complexity: <span class=\"placeholder\">[Insert complexity - e.g., simple & minimal (text + solid color), moderate (text + subtle graphics), rich (text + illustrations\/photos)]<\/span>\n - Mood\/Vibe: <span class=\"placeholder\">[Insert vibe - e.g., professional, aspirational, cozy, energetic, luxurious, approachable]<\/span>\n\n2. **Background Design:**\n - Background Type: <span class=\"placeholder\">[Insert background - e.g., solid color, gradient (specify direction), textured (paper, fabric, concrete), photographic (blurred lifestyle image), illustrated elements, geometric patterns]<\/span>\n - Background Colors: <span class=\"placeholder\">[Insert color scheme - e.g., soft pastels (blush pink, mint), bold jewel tones (emerald, sapphire), neutral earth tones (cream, terracotta, sage), monochrome (black\/white\/grey)]<\/span>\n - Visual Elements: <span class=\"placeholder\">[Insert elements - e.g., none (pure minimalism), subtle geometric shapes, botanical illustrations, abstract brushstrokes, decorative borders]<\/span>\n\n3. **Typography Treatment:**\n - Primary Font Style: <span class=\"placeholder\">[Insert font style - e.g., modern sans-serif bold, elegant serif, handwritten script, geometric display font, clean condensed]<\/span>\n - Text Hierarchy: <span class=\"placeholder\">[Insert hierarchy - e.g., all same size, key words larger, gradient sizing across quote, first line emphasis]<\/span>\n - Text Color: <span class=\"placeholder\">[Insert text color - e.g., crisp black, pure white, brand color, gradient text effect]<\/span>\n - Text Alignment: <span class=\"placeholder\">[Insert alignment - e.g., centered, left-aligned, right-aligned, justified, asymmetrical artistic]<\/span>\n - Text Effects: <span class=\"placeholder\">[Insert effects - e.g., none (clean), subtle shadow, text outline, letter spacing emphasis, mixed fonts for contrast]<\/span>\n\n4. **Layout & Composition:**\n - Text Placement: <span class=\"placeholder\">[Insert placement - e.g., centered on canvas, upper third with space below, lower third with space above, offset left\/right for visual interest]<\/span>\n - Visual Balance: <span class=\"placeholder\">[Insert balance - e.g., symmetrical centered, asymmetrical dynamic, rule of thirds, golden ratio]<\/span>\n - Negative Space: <span class=\"placeholder\">[Insert space usage - e.g., abundant breathing room (70% empty space), balanced (50\/50), filled & vibrant (minimal empty space)]<\/span>\n - Decorative Elements: <span class=\"placeholder\">[Insert elements - e.g., quotation marks (subtle\/stylized\/none), underline accent, decorative line breaks, icons, corner flourishes]<\/span>\n\n5. **Branding Integration:**\n - Logo\/Brand Mark: <span class=\"placeholder\">[Insert branding - e.g., small logo bottom corner, brand name subtle footer, watermark, no branding (organic reach focus)]<\/span>\n - Brand Recognition: <span class=\"placeholder\">[Insert recognition strategy - e.g., consistent color scheme, signature design element, branded border, typography style]<\/span>\n\n**Technical Specifications:**\n- Aspect Ratio: <span class=\"placeholder\">[Insert ratio - e.g., 1:1 square (Instagram\/Facebook), 4:5 portrait (Instagram), 16:9 landscape (LinkedIn\/Twitter), 2:3 Pinterest tall]<\/span>\n- Dimensions: <span class=\"placeholder\">[Insert size - e.g., 1080x1080px, 1080x1350px, 1200x628px, 1000x1500px]<\/span>\n- Text Readability: Ensure text is highly legible at thumbnail size on mobile devices\n- File Format: <span class=\"placeholder\">[Insert format - e.g., PNG with transparent background option, JPG optimized, Instagram-ready]<\/span>\n\n**Content Strategy:**\n- Shareability Factor: <span class=\"placeholder\">[Insert strategy - e.g., relatable & universal message, controversial thought-provoking, actionable tip, emotional resonance]<\/span>\n- Call-to-Action (optional): <span class=\"placeholder\">[Insert CTA - e.g., \"Tag someone who needs this,\" \"Save for later,\" \"Follow for daily inspiration,\" or none]<\/span>\n\n**Style References:**\n<span class=\"placeholder\">[Insert inspiration - e.g., \"@createcultivate Instagram quote style,\" \"Headspace app aesthetic,\" \"minimalist Scandinavian design,\" \"bold Nike motivational graphics\"]<\/span>\n\nPlease generate a social media quote graphic that:\n- Features the quote text prominently with excellent readability\n- Captures attention in crowded social feeds (scroll-stopping design)\n- Reflects brand personality and appeals to target audience\n- Encourages saves, shares, and engagement\n- Works perfectly at both full-size and thumbnail preview\n- Feels professional, polished, and share-worthy\n- Balances aesthetic appeal with message clarity\n\nThe design should make people STOP scrolling, READ the quote, FEEL something, and SHARE it.<\/div>\n <\/div>\n <p style=\"color: #64748b; font-size: 0.9rem;\">\n \ud83d\udca1 <strong>Tip:<\/strong> Fill in the <span class=\"placeholder\">[orange placeholders]<\/span> with your specific details before using this prompt.\n <\/p>\n <\/div>\n\n \n <div class=\"section\">\n <h3 class=\"section-title\">\ud83e\udde0 The Logic (Why This Prompt Works)<\/h3>\n <div class=\"logic-grid\">\n <div class=\"logic-item\">\n <h4>Engagement-Focused Expertise<\/h4>\n <p>Positioning as \"high-engagement social media quote graphics specialist\" ensures the AI prioritizes shareability and scroll-stopping design over pure aesthetics. Quote graphics exist to be shared - this role assignment keeps that goal central.<\/p>\n <\/div>\n <div class=\"logic-item\">\n <h4>Typography as Primary Focus<\/h4>\n <p>The extensive typography section (font style, hierarchy, color, alignment, effects) recognizes that quote graphics live or die by text readability and impact. Bad typography kills even beautiful backgrounds.<\/p>\n <\/div>\n <div class=\"logic-item\">\n <h4>Platform-Specific Optimization<\/h4>\n <p>Specifying aspect ratios and thumbnail readability ensures the design works for the actual platform and viewing context. A LinkedIn quote graphic needs different proportions and formality than an Instagram story quote.<\/p>\n <\/div>\n <div class=\"logic-item\">\n <h4>Emotional Tone Specification<\/h4>\n <p>Quote graphics are emotional content. Defining the emotional tone (uplifting, calm, bold) ensures visual design choices (colors, fonts, imagery) reinforce rather than contradict the quote's emotional message.<\/p>\n <\/div>\n <div class=\"logic-item\">\n <h4>Negative Space Control<\/h4>\n <p>The \"Negative Space\" parameter prevents common mistakes: overcrowded designs that feel cluttered OR empty canvases that waste space. Strategic breathing room makes quotes feel premium and focused.<\/p>\n <\/div>\n <div class=\"logic-item\">\n <h4>Shareability Strategy<\/h4>\n <p>Explicitly requesting \"shareability factor\" and the final instruction to make people \"STOP, READ, FEEL, SHARE\" ensures the design isn't just pretty but strategically engineered for viral potential and engagement.<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"section\">\n <h3 class=\"section-title\">\ud83d\udc41\ufe0f Output Preview<\/h3>\n <div class=\"output-preview\">\n <h4>\ud83c\udfaf Example Result:<\/h4>\n <p style=\"margin-bottom: 1rem; color: #475569;\">\n <strong>Example Input:<\/strong> Motivational quote for entrepreneur audience on Instagram\n <\/p>\n <p style=\"color: #475569; font-style: italic; margin-bottom: 1rem;\">\n <strong>Quote:<\/strong> \"Don't wait for opportunity. Create it.\"<br>\n <strong>Theme:<\/strong> Entrepreneurial empowerment<br><br>\n\n<strong>Design Description:<\/strong><br>\nSquare 1080x1080px Instagram graphic with a soft gradient background flowing from warm coral (#FF6B6B) at top to deep navy (#2C3E50) at bottom. The quote text is set in a bold modern sans-serif font (Montserrat Bold style) in crisp white, centered on the canvas with generous negative space. \n\nThe word \"CREATE\" is 40% larger than surrounding words, emphasizing the action. Text is perfectly centered vertically and horizontally with 60% of the canvas left as breathing room around the text. \n\nSubtle geometric line elements (thin gold lines forming a minimal frame) accent the top-left and bottom-right corners without distracting from the message. The brand name appears in small, elegant text at the bottom in white at 40% opacity.\n\nThe overall aesthetic is bold yet sophisticated, energetic yet professional. The warm-to-cool gradient creates visual interest while the clean typography ensures instant readability even at thumbnail size. The design stops thumbs mid-scroll with its vibrant gradient, then delivers the powerful message clearly.\n <\/p>\n <p style=\"color: #854d0e; font-weight: 600; margin-top: 1rem;\">\n \u2705 This specification creates a scroll-stopping quote graphic that balances visual impact with message clarity, optimized for high engagement and sharing on social platforms.\n <\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"section\">\n <h3 class=\"section-title\">\u26d3\ufe0f Chain Strategy (Advanced Workflow)<\/h3>\n <div class=\"chain-strategy\">\n <p style=\"color: #6b21a8; font-weight: 600; margin-bottom: 1rem;\">\n <strong>3-Step Sequential Strategy for Quote Content Calendar:<\/strong> Build a consistent, engaging quote graphics series.\n <\/p>\n <div class=\"chain-steps\">\n <div class=\"chain-step\">\n <div class=\"chain-step-header\">\n <span class=\"step-number\">1<\/span>\n <h4>Curate Strategic Quote Collection<\/h4>\n <\/div>\n <p><strong>Prompt:<\/strong> \"Create a collection of 20 quotes perfectly aligned with my brand as <span class=\"placeholder\">[brand description]<\/span> targeting <span class=\"placeholder\">[audience]<\/span>. Include: (1) 5 motivational quotes that inspire action, (2) 5 wisdom\/insight quotes that make people think, (3) 5 relatable quotes that create 'this is me' moments, (4) 5 aspirational quotes about transformation. For each quote, note: the core emotion it evokes, why it resonates with our audience, and suggested posting time\/context.\"<\/p>\n <div class=\"example\">\n <strong>Why:<\/strong> Strategic quote curation ensures your graphics consistently reinforce brand values and resonate with your specific audience rather than generic motivational poster content.\n <\/div>\n <\/div>\n\n <div class=\"chain-step\">\n <div class=\"chain-step-header\">\n <span class=\"step-number\">2<\/span>\n <h4>Generate Hero Quote Graphic (This Prompt)<\/h4>\n <\/div>\n <p><strong>Action:<\/strong> Use the main Social Media Quote Graphics prompt above to design your first quote from the collection. This establishes your visual template and brand style for quote graphics.<\/p>\n <div class=\"example\">\n <strong>Why:<\/strong> Creating one polished template first ensures consistency across your entire quote graphics series. This hero design becomes your replicable style guide.\n <\/div>\n <\/div>\n\n <div class=\"chain-step\">\n <div class=\"chain-step-header\">\n <span class=\"step-number\">3<\/span>\n <h4>Create Consistent Quote Graphics Series<\/h4>\n <\/div>\n <p><strong>Prompt:<\/strong> \"Using the exact same design style, layout, and brand aesthetic as this template <span class=\"placeholder\">[describe hero quote graphic from Step 2]<\/span>, create quote graphics for these 9 additional quotes: <span class=\"placeholder\">[paste quotes 2-10]<\/span>. Maintain: (1) Identical typography style and hierarchy, (2) Same background approach with color variations from our brand palette, (3) Consistent negative space and layout, (4) Same decorative elements and branding placement. Vary only: background colors (use different brand colors for variety) and quote text. The series should be instantly recognizable as the same brand\/style.\"<\/p>\n <div class=\"example\">\n <strong>Why:<\/strong> Consistency creates brand recognition. When followers see your quote graphics in their feed, they should immediately recognize your brand before even reading the quote.\n <\/div>\n <\/div>\n <\/div>\n <p style=\"color: #6b21a8; font-weight: 600; margin-top: 1rem; font-size: 0.9rem;\">\n \ud83d\udca1 <strong>Pro Tip:<\/strong> Quote graphics are evergreen content - they never expire. Build a library of 50+ quote graphics and recycle them every 6-8 months. They'll continue driving engagement with zero additional effort.\n <\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"section\">\n <h3 class=\"section-title\">\ud83d\udca1 Human-in-the-Loop Refinement Tips<\/h3>\n <div class=\"hitl-tips\">\n <p style=\"color: #065f46; font-weight: 600; margin-bottom: 1rem;\">\n \ud83c\udfa8 + \ud83e\udd16 = \ud83d\ude80 AI generates the foundation\u2014your strategic eye makes it shareable. Use these refinement strategies:\n <\/p>\n <div class=\"tips-grid\">\n <div class=\"tip-item\">\n <h4>If text is hard to read or lacks contrast:<\/h4>\n <p>Readability is non-negotiable for quote graphics. Poor contrast means your message is lost, killing engagement.<\/p>\n <div class=\"follow-up\">\n <strong>Example refinement prompt:<\/strong> \"Increase text readability dramatically: Change text to pure white (#FFFFFF) if on dark background or pure black (#000000) if on light background. Add a subtle text shadow (2px, 20% opacity) or semi-transparent background box behind text (60% opacity) to ensure text pops clearly from background. Test that text is readable at 300px thumbnail size.\"\n <\/div>\n <\/div>\n\n <div class=\"tip-item\">\n <h4>If design feels too busy or cluttered:<\/h4>\n <p>Quote graphics should be simple and focused. If viewers can't read the quote in 2 seconds, the design has failed.<\/p>\n <div class=\"follow-up\">\n <strong>Example refinement prompt:<\/strong> \"Simplify this design significantly: Remove all decorative elements except <span class=\"placeholder\">[one key element]<\/span>. Increase negative space to 70% of canvas. Reduce to maximum 2 colors. Remove any background patterns or textures. The quote text should be the ONLY focus - everything else is just supporting its readability.\"\n <\/div>\n <\/div>\n\n <div class=\"tip-item\">\n <h4>To emphasize key words or phrases:<\/h4>\n <p>Strategic emphasis guides viewers to the core message and creates visual interest within the quote text itself.<\/p>\n <div class=\"follow-up\">\n <strong>Example refinement prompt:<\/strong> \"Add strategic emphasis to key words: Make the word '<span class=\"placeholder\">[key word]<\/span>' 50% larger than other text. Change '<span class=\"placeholder\">[power phrase]<\/span>' to <span class=\"placeholder\">[brand accent color]<\/span> while keeping other text <span class=\"placeholder\">[base color]<\/span>. This creates a visual hierarchy that guides the eye and reinforces the message's meaning.\"\n <\/div>\n <\/div>\n\n <div class=\"tip-item\">\n <h4>To adapt for different social platforms:<\/h4>\n <p>Each platform has optimal dimensions and stylistic norms. Quickly resize and adjust for multi-platform posting.<\/p>\n <div class=\"follow-up\">\n <strong>Example refinement prompt:<\/strong> \"Adapt this quote graphic for: (1) LinkedIn (1200x628px landscape) - make it more professional\/corporate with text moved to left third, (2) Instagram Story (1080x1920px tall) - vertical format with text in middle third, (3) Pinterest (1000x1500px) - tall format with text in upper half and brand CTA in lower quarter.\"\n <\/div>\n <\/div>\n\n <div class=\"tip-item\">\n <h4>To test multiple design variations quickly:<\/h4>\n <p>Create 3-4 visual treatments of the same quote to A\/B test what resonates best with your audience.<\/p>\n <div class=\"follow-up\">\n <strong>Manual enhancement:<\/strong> Request 3 variations with same quote: \"Version A: Minimalist (solid background, clean typography, maximum negative space), Version B: Bold (gradient or vivid colors, large impactful font, dramatic), Version C: Organic (textured background, handwritten font style, warm natural colors). Keep quote text identical, only change visual treatment. Test which style drives most engagement.\"\n <\/div>\n <\/div>\n\n <div class=\"tip-item\">\n <h4>To maintain brand consistency across quote series:<\/h4>\n <p>Create a reusable template system where only specific elements change while core brand identity remains constant.<\/p>\n <div class=\"follow-up\">\n <strong>Strategic approach:<\/strong> Define your \"quote graphic brand kit\": (1) 5 approved background colors\/gradients, (2) 2 approved font pairings, (3) Fixed layout template (text placement, margins, logo position), (4) 3 decorative element options. For every new quote graphic, only swap: quote text + choose one background option. Everything else stays identical. This creates instant brand recognition.\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"card-footer\">\n <div class=\"stat\">\u2b50 <strong>4.8<\/strong> (445 ratings)<\/div>\n <div class=\"stat\">\ud83d\udccb <strong>6,782<\/strong> copies<\/div>\n <div class=\"stat\">\ud83d\udcac <strong>289<\/strong> reviews<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"toast\" id=\"toast\">\n \u2705 Prompt copied to clipboard!\n <\/div>\n\n <script>\n function copyPrompt() {\n const promptContent = document.getElementById('promptContent').innerText;\n navigator.clipboard.writeText(promptContent).then(() => {\n const button = document.querySelector('.copy-button');\n const toast = document.getElementById('toast');\n \n button.textContent = '\u2705 Copied!';\n button.classList.add('copied');\n toast.classList.add('show');\n \n setTimeout(() => {\n button.textContent = '\ud83d\udccb Copy Prompt';\n button.classList.remove('copied');\n toast.classList.remove('show');\n }, 3000);\n });\n }\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Social Media Quote Graphics – AiPro Institute\u2122 Prompt Library AiPro Institute\u2122 Social Media Quote Graphics Create shareable, attention-grabbing quote graphics with professional typography and design that drives engagement across all social platforms \u2728 Beginner \u23f1\ufe0f 2-3 minutes \ud83d\udc8e Low Cost \ud83d\uddbc\ufe0f Image Format \ud83d\udee0\ufe0f Tool Compatibility Optimized for DALL-E 3 Optimized for Canva AI Optimized…<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[110,96],"tags":[],"class_list":["post-3656","post","type-post","status-publish","format-standard","hentry","category-marketing-visuals","category-visual-creation"],"acf":[],"_links":{"self":[{"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/posts\/3656","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/comments?post=3656"}],"version-history":[{"count":4,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/posts\/3656\/revisions"}],"predecessor-version":[{"id":3660,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/posts\/3656\/revisions\/3660"}],"wp:attachment":[{"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/media?parent=3656"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/categories?post=3656"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/tags?post=3656"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t\t\n\n\n \n \n Social Media Quote Graphics - AiPro Institute\u2122 Prompt Library<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n background: #ffffff;\n padding: 2rem;\n line-height: 1.6;\n }\n\n .container {\n max-width: 900px;\n margin: 0 auto;\n }\n\n .header {\n text-align: center;\n margin-bottom: 2rem;\n }\n\n .header h1 {\n font-size: 2.5rem;\n background: linear-gradient(135deg, #7c3aed 0%, #3b82f6 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n font-weight: 800;\n margin-bottom: 0.5rem;\n }\n\n .card {\n background: white;\n border-radius: 16px;\n box-shadow: 0 20px 60px rgba(0,0,0,0.3);\n overflow: hidden;\n }\n\n .card-header {\n background: linear-gradient(135deg, #7c3aed 0%, #3b82f6 100%);\n color: white;\n padding: 2rem;\n }\n\n .card-header h2 {\n font-size: 2rem;\n margin-bottom: 0.5rem;\n }\n\n .card-header p {\n opacity: 0.95;\n font-size: 1.1rem;\n }\n\n .meta-badges {\n display: flex;\n gap: 0.75rem;\n flex-wrap: wrap;\n margin-top: 1rem;\n }\n\n .badge {\n display: inline-block;\n padding: 0.4rem 0.9rem;\n border-radius: 20px;\n font-size: 0.85rem;\n font-weight: 600;\n }\n\n .badge-skill-beginner {\n background: #10b981;\n color: white;\n }\n\n .badge-time {\n background: #10b981;\n color: white;\n }\n\n .badge-cost {\n background: #10b981;\n color: white;\n }\n\n .badge-format {\n background: #8b5cf6;\n color: white;\n }\n\n .tool-compatibility {\n margin-top: 1rem;\n padding-top: 1rem;\n border-top: 1px solid rgba(255,255,255,0.2);\n }\n\n .tool-compatibility h3 {\n font-size: 0.9rem;\n margin-bottom: 0.5rem;\n opacity: 0.9;\n }\n\n .tool-badges {\n display: flex;\n gap: 0.5rem;\n flex-wrap: wrap;\n }\n\n .tool-badge {\n padding: 0.35rem 0.75rem;\n background: rgba(255,255,255,0.2);\n border: 1px solid rgba(255,255,255,0.3);\n border-radius: 15px;\n font-size: 0.8rem;\n }\n\n .tool-badge.model-agnostic {\n background: rgba(255,255,255,0.3);\n font-weight: 600;\n }\n\n .card-body {\n padding: 2rem;\n }\n\n .section {\n margin-bottom: 2.5rem;\n }\n\n .section-title {\n font-size: 1.5rem;\n color: #7c3aed;\n margin-bottom: 1rem;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n }\n\n .section-title::before {\n content: '';\n width: 4px;\n height: 24px;\n background: linear-gradient(135deg, #7c3aed 0%, #3b82f6 100%);\n border-radius: 2px;\n }\n\n .prompt-box {\n background: #f8fafc;\n border: 2px solid #e2e8f0;\n border-radius: 12px;\n padding: 1.5rem;\n font-family: 'Courier New', monospace;\n font-size: 0.95rem;\n line-height: 1.8;\n position: relative;\n margin-bottom: 1rem;\n }\n\n .copy-button {\n position: absolute;\n top: 1rem;\n right: 1rem;\n background: linear-gradient(135deg, #7c3aed 0%, #3b82f6 100%);\n color: white;\n border: none;\n padding: 0.6rem 1.2rem;\n border-radius: 8px;\n cursor: pointer;\n font-weight: 600;\n font-size: 0.9rem;\n transition: all 0.3s ease;\n }\n\n .copy-button:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4);\n }\n\n .copy-button.copied {\n background: #10b981;\n }\n\n .placeholder {\n color: #f97316;\n font-weight: 600;\n }\n\n .logic-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 1.5rem;\n }\n\n .logic-item {\n background: #f0f9ff;\n padding: 1.25rem;\n border-radius: 10px;\n border-left: 4px solid #3b82f6;\n }\n\n .logic-item h4 {\n color: #1e40af;\n margin-bottom: 0.5rem;\n font-size: 1.05rem;\n }\n\n .logic-item p {\n color: #475569;\n font-size: 0.95rem;\n }\n\n .output-preview {\n background: #fefce8;\n border: 2px solid #fde047;\n border-radius: 12px;\n padding: 1.5rem;\n }\n\n .output-preview h4 {\n color: #854d0e;\n margin-bottom: 1rem;\n }\n\n .chain-strategy {\n background: linear-gradient(135deg, #fdf2f8 0%, #fae8ff 100%);\n border-radius: 12px;\n padding: 1.5rem;\n }\n\n .chain-steps {\n display: grid;\n gap: 1.5rem;\n margin-top: 1rem;\n }\n\n .chain-step {\n background: white;\n padding: 1.25rem;\n border-radius: 10px;\n border-left: 4px solid #a855f7;\n }\n\n .chain-step-header {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n margin-bottom: 0.75rem;\n }\n\n .step-number {\n background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);\n color: white;\n width: 32px;\n height: 32px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 700;\n font-size: 0.9rem;\n }\n\n .chain-step h4 {\n color: #7c3aed;\n font-size: 1.1rem;\n }\n\n .chain-step p {\n color: #475569;\n margin-bottom: 0.5rem;\n }\n\n .chain-step .example {\n background: #f8fafc;\n padding: 0.75rem;\n border-radius: 6px;\n font-size: 0.9rem;\n color: #64748b;\n margin-top: 0.5rem;\n }\n\n .hitl-tips {\n background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);\n border-radius: 12px;\n padding: 1.5rem;\n }\n\n .tips-grid {\n display: grid;\n gap: 1rem;\n margin-top: 1rem;\n }\n\n .tip-item {\n background: white;\n padding: 1rem;\n border-radius: 8px;\n border-left: 3px solid #10b981;\n }\n\n .tip-item h4 {\n color: #047857;\n font-size: 1rem;\n margin-bottom: 0.5rem;\n }\n\n .tip-item p {\n color: #475569;\n font-size: 0.9rem;\n }\n\n .tip-item .follow-up {\n background: #f0fdf4;\n padding: 0.6rem;\n border-radius: 6px;\n margin-top: 0.5rem;\n font-size: 0.85rem;\n color: #166534;\n font-style: italic;\n }\n\n .card-footer {\n background: #f8fafc;\n padding: 1.5rem 2rem;\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 2rem;\n flex-wrap: wrap;\n border-top: 1px solid #e2e8f0;\n }\n\n .stat {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n color: #475569;\n font-size: 0.95rem;\n }\n\n .stat strong {\n color: #1e293b;\n }\n\n .toast {\n position: fixed;\n bottom: 2rem;\n right: 2rem;\n background: #10b981;\n color: white;\n padding: 1rem 1.5rem;\n border-radius: 8px;\n box-shadow: 0 4px 12px rgba(0,0,0,0.3);\n display: none;\n align-items: center;\n gap: 0.5rem;\n animation: slideIn 0.3s ease;\n z-index: 1000;\n }\n\n .toast.show {\n display: flex;\n }\n\n @keyframes slideIn {\n from {\n transform: translateX(400px);\n opacity: 0;\n }\n to {\n transform: translateX(0);\n opacity: 1;\n }\n }\n\n @media (max-width: 768px) {\n body {\n padding: 1rem;\n }\n\n .header h1 {\n font-size: 2rem;\n }\n\n .card-header h2 {\n font-size: 1.5rem;\n }\n\n .logic-grid {\n grid-template-columns: 1fr;\n }\n\n .card-footer {\n flex-direction: column;\n gap: 1rem;\n }\n\n .copy-button {\n position: static;\n width: 100%;\n margin-top: 1rem;\n }\n\n .prompt-box {\n padding-top: 1.5rem;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <div class=\"header\">\n <h1>AiPro Institute\u2122<\/h1>\n <\/div>\n\n <div class=\"card\">\n <div class=\"card-header\">\n <h2>Social Media Quote Graphics<\/h2>\n <p>Create shareable, attention-grabbing quote graphics with professional typography and design that drives engagement across all social platforms<\/p>\n \n <div class=\"meta-badges\">\n <span class=\"badge badge-skill-beginner\">\u2728 Beginner<\/span>\n <span class=\"badge badge-time\">\u23f1\ufe0f 2-3 minutes<\/span>\n <span class=\"badge badge-cost\">\ud83d\udc8e Low Cost<\/span>\n <span class=\"badge badge-format\">\ud83d\uddbc\ufe0f Image Format<\/span>\n <\/div>\n\n <div class=\"tool-compatibility\">\n <h3>\ud83d\udee0\ufe0f Tool Compatibility<\/h3>\n <div class=\"tool-badges\">\n <span class=\"tool-badge\">Optimized for DALL-E 3<\/span>\n <span class=\"tool-badge\">Optimized for Canva AI<\/span>\n <span class=\"tool-badge\">Optimized for Ideogram<\/span>\n <span class=\"tool-badge model-agnostic\">\u2728 Model Agnostic<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"card-body\">\n \n <div class=\"section\">\n <h3 class=\"section-title\">\ud83d\udccb The Prompt<\/h3>\n <div class=\"prompt-box\">\n <button class=\"copy-button\" onclick=\"copyPrompt()\">\ud83d\udccb Copy Prompt<\/button>\n <div id=\"promptContent\">You are an expert graphic designer specializing in high-engagement social media quote graphics with 8+ years of experience creating viral, shareable content. Design a professional quote graphic that captures attention and encourages sharing.\n\n**Quote & Message:**\n- Quote Text: <span class=\"placeholder\">[Insert the exact quote text - keep it under 25 words for maximum impact]<\/span>\n- Quote Author\/Attribution: <span class=\"placeholder\">[Insert author name, or \"Anonymous\" or leave blank for unattributed quotes]<\/span>\n- Message Theme: <span class=\"placeholder\">[Insert theme - e.g., motivation, inspiration, wisdom, humor, business insight, self-care, mindfulness]<\/span>\n- Emotional Tone: <span class=\"placeholder\">[Insert tone - e.g., uplifting & empowering, calm & reflective, bold & energetic, warm & comforting]<\/span>\n\n**Brand & Context:**\n- Brand\/Account: <span class=\"placeholder\">[Insert brand name or personal brand identity]<\/span>\n- Target Audience: <span class=\"placeholder\">[Insert audience - e.g., entrepreneurs, wellness seekers, creative professionals, young parents]<\/span>\n- Platform Primary Use: <span class=\"placeholder\">[Insert platform - e.g., Instagram, LinkedIn, Facebook, Twitter\/X, Pinterest]<\/span>\n- Brand Colors: <span class=\"placeholder\">[Insert 2-3 brand colors with hex codes if available]<\/span>\n\n**Design Style & Visual Approach:**\n\n1. **Overall Aesthetic:**\n - Style Direction: <span class=\"placeholder\">[Insert style - e.g., minimalist & clean, bold & modern, elegant & sophisticated, playful & colorful, organic & natural, vintage & retro, tech & futuristic]<\/span>\n - Design Complexity: <span class=\"placeholder\">[Insert complexity - e.g., simple & minimal (text + solid color), moderate (text + subtle graphics), rich (text + illustrations\/photos)]<\/span>\n - Mood\/Vibe: <span class=\"placeholder\">[Insert vibe - e.g., professional, aspirational, cozy, energetic, luxurious, approachable]<\/span>\n\n2. **Background Design:**\n - Background Type: <span class=\"placeholder\">[Insert background - e.g., solid color, gradient (specify direction), textured (paper, fabric, concrete), photographic (blurred lifestyle image), illustrated elements, geometric patterns]<\/span>\n - Background Colors: <span class=\"placeholder\">[Insert color scheme - e.g., soft pastels (blush pink, mint), bold jewel tones (emerald, sapphire), neutral earth tones (cream, terracotta, sage), monochrome (black\/white\/grey)]<\/span>\n - Visual Elements: <span class=\"placeholder\">[Insert elements - e.g., none (pure minimalism), subtle geometric shapes, botanical illustrations, abstract brushstrokes, decorative borders]<\/span>\n\n3. **Typography Treatment:**\n - Primary Font Style: <span class=\"placeholder\">[Insert font style - e.g., modern sans-serif bold, elegant serif, handwritten script, geometric display font, clean condensed]<\/span>\n - Text Hierarchy: <span class=\"placeholder\">[Insert hierarchy - e.g., all same size, key words larger, gradient sizing across quote, first line emphasis]<\/span>\n - Text Color: <span class=\"placeholder\">[Insert text color - e.g., crisp black, pure white, brand color, gradient text effect]<\/span>\n - Text Alignment: <span class=\"placeholder\">[Insert alignment - e.g., centered, left-aligned, right-aligned, justified, asymmetrical artistic]<\/span>\n - Text Effects: <span class=\"placeholder\">[Insert effects - e.g., none (clean), subtle shadow, text outline, letter spacing emphasis, mixed fonts for contrast]<\/span>\n\n4. **Layout & Composition:**\n - Text Placement: <span class=\"placeholder\">[Insert placement - e.g., centered on canvas, upper third with space below, lower third with space above, offset left\/right for visual interest]<\/span>\n - Visual Balance: <span class=\"placeholder\">[Insert balance - e.g., symmetrical centered, asymmetrical dynamic, rule of thirds, golden ratio]<\/span>\n - Negative Space: <span class=\"placeholder\">[Insert space usage - e.g., abundant breathing room (70% empty space), balanced (50\/50), filled & vibrant (minimal empty space)]<\/span>\n - Decorative Elements: <span class=\"placeholder\">[Insert elements - e.g., quotation marks (subtle\/stylized\/none), underline accent, decorative line breaks, icons, corner flourishes]<\/span>\n\n5. **Branding Integration:**\n - Logo\/Brand Mark: <span class=\"placeholder\">[Insert branding - e.g., small logo bottom corner, brand name subtle footer, watermark, no branding (organic reach focus)]<\/span>\n - Brand Recognition: <span class=\"placeholder\">[Insert recognition strategy - e.g., consistent color scheme, signature design element, branded border, typography style]<\/span>\n\n**Technical Specifications:**\n- Aspect Ratio: <span class=\"placeholder\">[Insert ratio - e.g., 1:1 square (Instagram\/Facebook), 4:5 portrait (Instagram), 16:9 landscape (LinkedIn\/Twitter), 2:3 Pinterest tall]<\/span>\n- Dimensions: <span class=\"placeholder\">[Insert size - e.g., 1080x1080px, 1080x1350px, 1200x628px, 1000x1500px]<\/span>\n- Text Readability: Ensure text is highly legible at thumbnail size on mobile devices\n- File Format: <span class=\"placeholder\">[Insert format - e.g., PNG with transparent background option, JPG optimized, Instagram-ready]<\/span>\n\n**Content Strategy:**\n- Shareability Factor: <span class=\"placeholder\">[Insert strategy - e.g., relatable & universal message, controversial thought-provoking, actionable tip, emotional resonance]<\/span>\n- Call-to-Action (optional): <span class=\"placeholder\">[Insert CTA - e.g., \"Tag someone who needs this,\" \"Save for later,\" \"Follow for daily inspiration,\" or none]<\/span>\n\n**Style References:**\n<span class=\"placeholder\">[Insert inspiration - e.g., \"@createcultivate Instagram quote style,\" \"Headspace app aesthetic,\" \"minimalist Scandinavian design,\" \"bold Nike motivational graphics\"]<\/span>\n\nPlease generate a social media quote graphic that:\n- Features the quote text prominently with excellent readability\n- Captures attention in crowded social feeds (scroll-stopping design)\n- Reflects brand personality and appeals to target audience\n- Encourages saves, shares, and engagement\n- Works perfectly at both full-size and thumbnail preview\n- Feels professional, polished, and share-worthy\n- Balances aesthetic appeal with message clarity\n\nThe design should make people STOP scrolling, READ the quote, FEEL something, and SHARE it.<\/div>\n <\/div>\n <p style=\"color: #64748b; font-size: 0.9rem;\">\n \ud83d\udca1 <strong>Tip:<\/strong> Fill in the <span class=\"placeholder\">[orange placeholders]<\/span> with your specific details before using this prompt.\n <\/p>\n <\/div>\n\n \n <div class=\"section\">\n <h3 class=\"section-title\">\ud83e\udde0 The Logic (Why This Prompt Works)<\/h3>\n <div class=\"logic-grid\">\n <div class=\"logic-item\">\n <h4>Engagement-Focused Expertise<\/h4>\n <p>Positioning as \"high-engagement social media quote graphics specialist\" ensures the AI prioritizes shareability and scroll-stopping design over pure aesthetics. Quote graphics exist to be shared - this role assignment keeps that goal central.<\/p>\n <\/div>\n <div class=\"logic-item\">\n <h4>Typography as Primary Focus<\/h4>\n <p>The extensive typography section (font style, hierarchy, color, alignment, effects) recognizes that quote graphics live or die by text readability and impact. Bad typography kills even beautiful backgrounds.<\/p>\n <\/div>\n <div class=\"logic-item\">\n <h4>Platform-Specific Optimization<\/h4>\n <p>Specifying aspect ratios and thumbnail readability ensures the design works for the actual platform and viewing context. A LinkedIn quote graphic needs different proportions and formality than an Instagram story quote.<\/p>\n <\/div>\n <div class=\"logic-item\">\n <h4>Emotional Tone Specification<\/h4>\n <p>Quote graphics are emotional content. Defining the emotional tone (uplifting, calm, bold) ensures visual design choices (colors, fonts, imagery) reinforce rather than contradict the quote's emotional message.<\/p>\n <\/div>\n <div class=\"logic-item\">\n <h4>Negative Space Control<\/h4>\n <p>The \"Negative Space\" parameter prevents common mistakes: overcrowded designs that feel cluttered OR empty canvases that waste space. Strategic breathing room makes quotes feel premium and focused.<\/p>\n <\/div>\n <div class=\"logic-item\">\n <h4>Shareability Strategy<\/h4>\n <p>Explicitly requesting \"shareability factor\" and the final instruction to make people \"STOP, READ, FEEL, SHARE\" ensures the design isn't just pretty but strategically engineered for viral potential and engagement.<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"section\">\n <h3 class=\"section-title\">\ud83d\udc41\ufe0f Output Preview<\/h3>\n <div class=\"output-preview\">\n <h4>\ud83c\udfaf Example Result:<\/h4>\n <p style=\"margin-bottom: 1rem; color: #475569;\">\n <strong>Example Input:<\/strong> Motivational quote for entrepreneur audience on Instagram\n <\/p>\n <p style=\"color: #475569; font-style: italic; margin-bottom: 1rem;\">\n <strong>Quote:<\/strong> \"Don't wait for opportunity. Create it.\"<br>\n <strong>Theme:<\/strong> Entrepreneurial empowerment<br><br>\n\n<strong>Design Description:<\/strong><br>\nSquare 1080x1080px Instagram graphic with a soft gradient background flowing from warm coral (#FF6B6B) at top to deep navy (#2C3E50) at bottom. The quote text is set in a bold modern sans-serif font (Montserrat Bold style) in crisp white, centered on the canvas with generous negative space. \n\nThe word \"CREATE\" is 40% larger than surrounding words, emphasizing the action. Text is perfectly centered vertically and horizontally with 60% of the canvas left as breathing room around the text. \n\nSubtle geometric line elements (thin gold lines forming a minimal frame) accent the top-left and bottom-right corners without distracting from the message. The brand name appears in small, elegant text at the bottom in white at 40% opacity.\n\nThe overall aesthetic is bold yet sophisticated, energetic yet professional. The warm-to-cool gradient creates visual interest while the clean typography ensures instant readability even at thumbnail size. The design stops thumbs mid-scroll with its vibrant gradient, then delivers the powerful message clearly.\n <\/p>\n <p style=\"color: #854d0e; font-weight: 600; margin-top: 1rem;\">\n \u2705 This specification creates a scroll-stopping quote graphic that balances visual impact with message clarity, optimized for high engagement and sharing on social platforms.\n <\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"section\">\n <h3 class=\"section-title\">\u26d3\ufe0f Chain Strategy (Advanced Workflow)<\/h3>\n <div class=\"chain-strategy\">\n <p style=\"color: #6b21a8; font-weight: 600; margin-bottom: 1rem;\">\n <strong>3-Step Sequential Strategy for Quote Content Calendar:<\/strong> Build a consistent, engaging quote graphics series.\n <\/p>\n <div class=\"chain-steps\">\n <div class=\"chain-step\">\n <div class=\"chain-step-header\">\n <span class=\"step-number\">1<\/span>\n <h4>Curate Strategic Quote Collection<\/h4>\n <\/div>\n <p><strong>Prompt:<\/strong> \"Create a collection of 20 quotes perfectly aligned with my brand as <span class=\"placeholder\">[brand description]<\/span> targeting <span class=\"placeholder\">[audience]<\/span>. Include: (1) 5 motivational quotes that inspire action, (2) 5 wisdom\/insight quotes that make people think, (3) 5 relatable quotes that create 'this is me' moments, (4) 5 aspirational quotes about transformation. For each quote, note: the core emotion it evokes, why it resonates with our audience, and suggested posting time\/context.\"<\/p>\n <div class=\"example\">\n <strong>Why:<\/strong> Strategic quote curation ensures your graphics consistently reinforce brand values and resonate with your specific audience rather than generic motivational poster content.\n <\/div>\n <\/div>\n\n <div class=\"chain-step\">\n <div class=\"chain-step-header\">\n <span class=\"step-number\">2<\/span>\n <h4>Generate Hero Quote Graphic (This Prompt)<\/h4>\n <\/div>\n <p><strong>Action:<\/strong> Use the main Social Media Quote Graphics prompt above to design your first quote from the collection. This establishes your visual template and brand style for quote graphics.<\/p>\n <div class=\"example\">\n <strong>Why:<\/strong> Creating one polished template first ensures consistency across your entire quote graphics series. This hero design becomes your replicable style guide.\n <\/div>\n <\/div>\n\n <div class=\"chain-step\">\n <div class=\"chain-step-header\">\n <span class=\"step-number\">3<\/span>\n <h4>Create Consistent Quote Graphics Series<\/h4>\n <\/div>\n <p><strong>Prompt:<\/strong> \"Using the exact same design style, layout, and brand aesthetic as this template <span class=\"placeholder\">[describe hero quote graphic from Step 2]<\/span>, create quote graphics for these 9 additional quotes: <span class=\"placeholder\">[paste quotes 2-10]<\/span>. Maintain: (1) Identical typography style and hierarchy, (2) Same background approach with color variations from our brand palette, (3) Consistent negative space and layout, (4) Same decorative elements and branding placement. Vary only: background colors (use different brand colors for variety) and quote text. The series should be instantly recognizable as the same brand\/style.\"<\/p>\n <div class=\"example\">\n <strong>Why:<\/strong> Consistency creates brand recognition. When followers see your quote graphics in their feed, they should immediately recognize your brand before even reading the quote.\n <\/div>\n <\/div>\n <\/div>\n <p style=\"color: #6b21a8; font-weight: 600; margin-top: 1rem; font-size: 0.9rem;\">\n \ud83d\udca1 <strong>Pro Tip:<\/strong> Quote graphics are evergreen content - they never expire. Build a library of 50+ quote graphics and recycle them every 6-8 months. They'll continue driving engagement with zero additional effort.\n <\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"section\">\n <h3 class=\"section-title\">\ud83d\udca1 Human-in-the-Loop Refinement Tips<\/h3>\n <div class=\"hitl-tips\">\n <p style=\"color: #065f46; font-weight: 600; margin-bottom: 1rem;\">\n \ud83c\udfa8 + \ud83e\udd16 = \ud83d\ude80 AI generates the foundation\u2014your strategic eye makes it shareable. Use these refinement strategies:\n <\/p>\n <div class=\"tips-grid\">\n <div class=\"tip-item\">\n <h4>If text is hard to read or lacks contrast:<\/h4>\n <p>Readability is non-negotiable for quote graphics. Poor contrast means your message is lost, killing engagement.<\/p>\n <div class=\"follow-up\">\n <strong>Example refinement prompt:<\/strong> \"Increase text readability dramatically: Change text to pure white (#FFFFFF) if on dark background or pure black (#000000) if on light background. Add a subtle text shadow (2px, 20% opacity) or semi-transparent background box behind text (60% opacity) to ensure text pops clearly from background. Test that text is readable at 300px thumbnail size.\"\n <\/div>\n <\/div>\n\n <div class=\"tip-item\">\n <h4>If design feels too busy or cluttered:<\/h4>\n <p>Quote graphics should be simple and focused. If viewers can't read the quote in 2 seconds, the design has failed.<\/p>\n <div class=\"follow-up\">\n <strong>Example refinement prompt:<\/strong> \"Simplify this design significantly: Remove all decorative elements except <span class=\"placeholder\">[one key element]<\/span>. Increase negative space to 70% of canvas. Reduce to maximum 2 colors. Remove any background patterns or textures. The quote text should be the ONLY focus - everything else is just supporting its readability.\"\n <\/div>\n <\/div>\n\n <div class=\"tip-item\">\n <h4>To emphasize key words or phrases:<\/h4>\n <p>Strategic emphasis guides viewers to the core message and creates visual interest within the quote text itself.<\/p>\n <div class=\"follow-up\">\n <strong>Example refinement prompt:<\/strong> \"Add strategic emphasis to key words: Make the word '<span class=\"placeholder\">[key word]<\/span>' 50% larger than other text. Change '<span class=\"placeholder\">[power phrase]<\/span>' to <span class=\"placeholder\">[brand accent color]<\/span> while keeping other text <span class=\"placeholder\">[base color]<\/span>. This creates a visual hierarchy that guides the eye and reinforces the message's meaning.\"\n <\/div>\n <\/div>\n\n <div class=\"tip-item\">\n <h4>To adapt for different social platforms:<\/h4>\n <p>Each platform has optimal dimensions and stylistic norms. Quickly resize and adjust for multi-platform posting.<\/p>\n <div class=\"follow-up\">\n <strong>Example refinement prompt:<\/strong> \"Adapt this quote graphic for: (1) LinkedIn (1200x628px landscape) - make it more professional\/corporate with text moved to left third, (2) Instagram Story (1080x1920px tall) - vertical format with text in middle third, (3) Pinterest (1000x1500px) - tall format with text in upper half and brand CTA in lower quarter.\"\n <\/div>\n <\/div>\n\n <div class=\"tip-item\">\n <h4>To test multiple design variations quickly:<\/h4>\n <p>Create 3-4 visual treatments of the same quote to A\/B test what resonates best with your audience.<\/p>\n <div class=\"follow-up\">\n <strong>Manual enhancement:<\/strong> Request 3 variations with same quote: \"Version A: Minimalist (solid background, clean typography, maximum negative space), Version B: Bold (gradient or vivid colors, large impactful font, dramatic), Version C: Organic (textured background, handwritten font style, warm natural colors). Keep quote text identical, only change visual treatment. Test which style drives most engagement.\"\n <\/div>\n <\/div>\n\n <div class=\"tip-item\">\n <h4>To maintain brand consistency across quote series:<\/h4>\n <p>Create a reusable template system where only specific elements change while core brand identity remains constant.<\/p>\n <div class=\"follow-up\">\n <strong>Strategic approach:<\/strong> Define your \"quote graphic brand kit\": (1) 5 approved background colors\/gradients, (2) 2 approved font pairings, (3) Fixed layout template (text placement, margins, logo position), (4) 3 decorative element options. For every new quote graphic, only swap: quote text + choose one background option. Everything else stays identical. This creates instant brand recognition.\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"card-footer\">\n <div class=\"stat\">\u2b50 <strong>4.8<\/strong> (445 ratings)<\/div>\n <div class=\"stat\">\ud83d\udccb <strong>6,782<\/strong> copies<\/div>\n <div class=\"stat\">\ud83d\udcac <strong>289<\/strong> reviews<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"toast\" id=\"toast\">\n \u2705 Prompt copied to clipboard!\n <\/div>\n\n <script>\n function copyPrompt() {\n const promptContent = document.getElementById('promptContent').innerText;\n navigator.clipboard.writeText(promptContent).then(() => {\n const button = document.querySelector('.copy-button');\n const toast = document.getElementById('toast');\n \n button.textContent = '\u2705 Copied!';\n button.classList.add('copied');\n toast.classList.add('show');\n \n setTimeout(() => {\n button.textContent = '\ud83d\udccb Copy Prompt';\n button.classList.remove('copied');\n toast.classList.remove('show');\n }, 3000);\n });\n }\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Social Media Quote Graphics – AiPro Institute\u2122 Prompt Library AiPro Institute\u2122 Social Media Quote Graphics Create shareable, attention-grabbing quote graphics with professional typography and design that drives engagement across all social platforms \u2728 Beginner \u23f1\ufe0f 2-3 minutes \ud83d\udc8e Low Cost \ud83d\uddbc\ufe0f Image Format \ud83d\udee0\ufe0f Tool Compatibility Optimized for DALL-E 3 Optimized for Canva AI Optimized…<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[110,96],"tags":[],"class_list":["post-3656","post","type-post","status-publish","format-standard","hentry","category-marketing-visuals","category-visual-creation"],"acf":[],"_links":{"self":[{"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/posts\/3656","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/comments?post=3656"}],"version-history":[{"count":4,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/posts\/3656\/revisions"}],"predecessor-version":[{"id":3660,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/posts\/3656\/revisions\/3660"}],"wp:attachment":[{"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/media?parent=3656"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/categories?post=3656"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/tags?post=3656"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}