Comparison Chart Design - AiPro Institute\u2122 Prompt Library<\/title>\n <style>\n * {margin: 0; padding: 0; box-sizing: border-box;}\n body {font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; background: #ffffff; padding: 2rem; line-height: 1.6;}\n .container {max-width: 900px; margin: 0 auto;}\n .header {text-align: center; margin-bottom: 2rem;}\n .header h1 {font-size: 2.5rem; background: linear-gradient(135deg, #7c3aed 0%, #3b82f6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: 800; margin-bottom: 0.5rem;}\n .card {background: white; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); overflow: hidden;}\n .card-header {background: linear-gradient(135deg, #7c3aed 0%, #3b82f6 100%); color: white; padding: 2rem;}\n .card-header h2 {font-size: 2rem; margin-bottom: 0.5rem;}\n .card-header p {opacity: 0.95; font-size: 1.1rem;}\n .meta-badges {display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1rem;}\n .badge {display: inline-block; padding: 0.4rem 0.9rem; border-radius: 20px; font-size: 0.85rem; font-weight: 600;}\n .badge-skill-beginner {background: #10b981; color: white;}\n .badge-time {background: #10b981; color: white;}\n .badge-cost {background: #f59e0b; color: white;}\n .badge-format {background: #8b5cf6; color: white;}\n .tool-compatibility {margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.2);}\n .tool-compatibility h3 {font-size: 0.9rem; margin-bottom: 0.5rem; opacity: 0.9;}\n .tool-badges {display: flex; gap: 0.5rem; flex-wrap: wrap;}\n .tool-badge {padding: 0.35rem 0.75rem; background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.3); border-radius: 15px; font-size: 0.8rem;}\n .tool-badge.model-agnostic {background: rgba(255,255,255,0.3); font-weight: 600;}\n .card-body {padding: 2rem;}\n .section {margin-bottom: 2.5rem;}\n .section-title {font-size: 1.5rem; color: #7c3aed; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem;}\n .section-title::before {content: ''; width: 4px; height: 24px; background: linear-gradient(135deg, #7c3aed 0%, #3b82f6 100%); border-radius: 2px;}\n .prompt-box {background: #f8fafc; border: 2px solid #e2e8f0; border-radius: 12px; padding: 1.5rem; font-family: 'Courier New', monospace; font-size: 0.95rem; line-height: 1.8; position: relative; margin-bottom: 1rem;}\n .copy-button {position: absolute; top: 1rem; right: 1rem; background: linear-gradient(135deg, #7c3aed 0%, #3b82f6 100%); color: white; border: none; padding: 0.6rem 1.2rem; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 0.9rem; transition: all 0.3s ease;}\n .copy-button:hover {transform: translateY(-2px); box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4);}\n .copy-button.copied {background: #10b981;}\n .placeholder {color: #f97316; font-weight: 600;}\n .logic-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem;}\n .logic-item {background: #f0f9ff; padding: 1.25rem; border-radius: 10px; border-left: 4px solid #3b82f6;}\n .logic-item h4 {color: #1e40af; margin-bottom: 0.5rem; font-size: 1.05rem;}\n .logic-item p {color: #475569; font-size: 0.95rem;}\n .output-preview {background: #fefce8; border: 2px solid #fde047; border-radius: 12px; padding: 1.5rem;}\n .output-preview h4 {color: #854d0e; margin-bottom: 1rem;}\n .chain-strategy {background: linear-gradient(135deg, #fdf2f8 0%, #fae8ff 100%); border-radius: 12px; padding: 1.5rem;}\n .chain-steps {display: grid; gap: 1.5rem; margin-top: 1rem;}\n .chain-step {background: white; padding: 1.25rem; border-radius: 10px; border-left: 4px solid #a855f7;}\n .chain-step-header {display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem;}\n .step-number {background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%); color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.9rem;}\n .chain-step h4 {color: #7c3aed; font-size: 1.1rem;}\n .chain-step p {color: #475569; margin-bottom: 0.5rem;}\n .chain-step .example {background: #f8fafc; padding: 0.75rem; border-radius: 6px; font-size: 0.9rem; color: #64748b; margin-top: 0.5rem;}\n .hitl-tips {background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); border-radius: 12px; padding: 1.5rem;}\n .tips-grid {display: grid; gap: 1rem; margin-top: 1rem;}\n .tip-item {background: white; padding: 1rem; border-radius: 8px; border-left: 3px solid #10b981;}\n .tip-item h4 {color: #047857; font-size: 1rem; margin-bottom: 0.5rem;}\n .tip-item p {color: #475569; font-size: 0.9rem;}\n .tip-item .follow-up {background: #f0fdf4; padding: 0.6rem; border-radius: 6px; margin-top: 0.5rem; font-size: 0.85rem; color: #166534; font-style: italic;}\n .card-footer {background: #f8fafc; padding: 1.5rem 2rem; display: flex; justify-content: center; align-items: center; gap: 2rem; flex-wrap: wrap; border-top: 1px solid #e2e8f0;}\n .stat {display: flex; align-items: center; gap: 0.5rem; color: #475569; font-size: 0.95rem;}\n .stat strong {color: #1e293b;}\n .toast {position: fixed; bottom: 2rem; right: 2rem; background: #10b981; color: white; padding: 1rem 1.5rem; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.3); display: none; align-items: center; gap: 0.5rem; animation: slideIn 0.3s ease; z-index: 1000;}\n .toast.show {display: flex;}\n @keyframes slideIn {from {transform: translateX(400px); opacity: 0;} to {transform: translateX(0); opacity: 1;}}\n @media (max-width: 768px) {body {padding: 1rem;} .header h1 {font-size: 2rem;} .card-header h2 {font-size: 1.5rem;} .logic-grid {grid-template-columns: 1fr;} .card-footer {flex-direction: column; gap: 1rem;} .copy-button {position: static; width: 100%; margin-top: 1rem;} .prompt-box {padding-top: 1.5rem;}}\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <div class=\"header\">\n <h1>AiPro Institute\u2122<\/h1>\n <\/div>\n <div class=\"card\">\n <div class=\"card-header\">\n <h2>Comparison Chart Design<\/h2>\n <p>Create clear, scannable comparison charts that help audiences make informed decisions by visualizing feature differences, pricing tiers, and product options side-by-side<\/p>\n <div class=\"meta-badges\">\n <span class=\"badge badge-skill-beginner\">\ud83c\udfaf Beginner<\/span>\n <span class=\"badge badge-time\">\u23f1\ufe0f 7-10 minutes<\/span>\n <span class=\"badge badge-cost\">\ud83d\udcb0 ~350 tokens<\/span>\n <span class=\"badge badge-format\">\ud83c\udfa8 Data Visualization<\/span>\n <\/div>\n <div class=\"tool-compatibility\">\n <h3>\ud83d\udee0\ufe0f Tool Compatibility<\/h3>\n <div class=\"tool-badges\">\n <span class=\"tool-badge model-agnostic\">\u2728 Model Agnostic<\/span>\n <span class=\"tool-badge\">GPT-4o<\/span>\n <span class=\"tool-badge\">Claude 3.5<\/span>\n <span class=\"tool-badge\">Canva<\/span>\n <span class=\"tool-badge\">Google Sheets<\/span>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"card-body\">\n <div class=\"section\">\n <h3 class=\"section-title\">\ud83d\udcdd The Prompt<\/h3>\n <div class=\"prompt-box\">\n <button class=\"copy-button\" onclick=\"copyPrompt()\">\ud83d\udcdd Copy Prompt<\/button>\n <div id=\"promptContent\">You are a comparison chart design expert specializing in data visualization, decision-support graphics, and creating scannable tables that guide purchase decisions through clear visual hierarchy.\n\nYour task is to design a comparison chart that makes complex product\/service differences immediately clear, helping audiences quickly identify the best option for their needs.\n\n<strong>COMPARISON PURPOSE:<\/strong>\n- What's being compared: <span class=\"placeholder\">[Products \/ Services \/ Pricing plans \/ Software features \/ Competitors]<\/span>\n- Number of options: <span class=\"placeholder\">[2-5 columns recommended for clarity]<\/span>\n- Audience: <span class=\"placeholder\">[Potential customers \/ Internal team \/ Investors \/ General public]<\/span>\n- Decision goal: <span class=\"placeholder\">[Help choose best plan \/ Show competitive advantage \/ Feature education]<\/span>\n- Use case: <span class=\"placeholder\">[Website pricing page \/ Sales presentation \/ Product brochure \/ Email campaign]<\/span>\n\n<strong>COMPARISON ITEMS (COLUMNS):<\/strong>\n\n<strong>Option 1:<\/strong>\n- Name: <span class=\"placeholder\">[Plan\/product name]<\/span>\n- Positioning: <span class=\"placeholder\">[Basic \/ Standard \/ Premium \/ Enterprise]<\/span>\n- Price: <span class=\"placeholder\">[$\/month or one-time cost]<\/span>\n- Primary audience: <span class=\"placeholder\">[Who is this for?]<\/span>\n- Highlight as recommended: <span class=\"placeholder\">[Yes - \"Most Popular\" \/ No]<\/span>\n\n<strong>Option 2:<\/strong>\n- Name: <span class=\"placeholder\">[Plan name]<\/span>\n- Positioning: <span class=\"placeholder\">[Tier level]<\/span>\n- Price: <span class=\"placeholder\">[Cost]<\/span>\n- Primary audience: <span class=\"placeholder\">[Target user]<\/span>\n- Highlight: <span class=\"placeholder\">[Yes\/No]<\/span>\n\n(Repeat for all options being compared)\n\n<strong>FEATURE COMPARISON (ROWS):<\/strong>\n\nList all features\/attributes to compare. Group by category for clarity:\n\n<strong>Category 1: Core Features<\/strong>\n- Feature A: <span class=\"placeholder\">[e.g., \"Storage space\"]<\/span>\n Option 1 value: <span class=\"placeholder\">[10 GB \/ Yes \/ No \/ Checkmark]<\/span>\n Option 2 value: <span class=\"placeholder\">[50 GB \/ Yes \/ No \/ Checkmark]<\/span>\n Option 3 value: <span class=\"placeholder\">[Unlimited \/ Yes \/ No \/ Checkmark]<\/span>\n\n- Feature B: <span class=\"placeholder\">[e.g., \"User accounts\"]<\/span>\n Option 1: <span class=\"placeholder\">[Value]<\/span>\n Option 2: <span class=\"placeholder\">[Value]<\/span>\n Option 3: <span class=\"placeholder\">[Value]<\/span>\n\n<strong>Category 2: Advanced Features<\/strong>\n(Continue with grouped features)\n\n<strong>Category 3: Support & Services<\/strong>\n(Continue)\n\nTotal features to compare: <span class=\"placeholder\">[8-15 recommended for scannability]<\/span>\n\n<strong>VISUAL DESIGN STRATEGY:<\/strong>\n\n1. <strong>Recommended Column Highlight:<\/strong>\n - Which option to emphasize: <span class=\"placeholder\">[Usually mid-tier \"Most Popular\" plan]<\/span>\n - Visual treatment: <span class=\"placeholder\">[Colored background \/ Larger size \/ Border \/ Badge \"Best Value\"]<\/span>\n - Reasoning: <span class=\"placeholder\">[Highest margin \/ Most customers choose this \/ Upsell target]<\/span>\n\n2. <strong>Value Indicators:<\/strong>\n - Checkmarks (included): <span class=\"placeholder\">[Green \u2713 \/ Blue \u2713 \/ Custom icon]<\/span>\n - X-marks (not included): <span class=\"placeholder\">[Red \u2717 \/ Gray \u2014 \/ Leave blank]<\/span>\n - Partial\/limited features: <span class=\"placeholder\">[Yellow \u26a0\ufe0f \/ \"Limited\" text \/ Asterisk*]<\/span>\n - Numerical values: <span class=\"placeholder\">[Bold numbers \/ With units (GB, users, etc.)]<\/span>\n\n3. <strong>Color Palette:<\/strong>\n - Primary brand color: <span class=\"placeholder\">[#HEX - for headers, recommended column]<\/span>\n - Secondary color: <span class=\"placeholder\">[#HEX - for accents]<\/span>\n - Success green: <span class=\"placeholder\">[#10b981 - for checkmarks]<\/span>\n - Error red: <span class=\"placeholder\">[#ef4444 - for X-marks]<\/span>\n - Background colors:\n * Standard columns: <span class=\"placeholder\">[White #ffffff \/ Light gray #f8fafc]<\/span>\n * Highlighted column: <span class=\"placeholder\">[Subtle brand tint #f0f9ff]<\/span>\n * Alternating rows: <span class=\"placeholder\">[Yes - zebra striping \/ No - all white]<\/span>\n\n4. <strong>Typography:<\/strong>\n - Column headers (plan names): <span class=\"placeholder\">[Font family, 20-24pt, bold]<\/span>\n - Pricing: <span class=\"placeholder\">[Large 32-36pt, bold, primary color]<\/span>\n - Feature category headers: <span class=\"placeholder\">[14-16pt, bold, uppercase\/caps]<\/span>\n - Feature names: <span class=\"placeholder\">[12-14pt, regular weight]<\/span>\n - Feature values: <span class=\"placeholder\">[12-14pt, values bold, labels regular]<\/span>\n\n5. <strong>Layout Structure:<\/strong>\n - Table width: <span class=\"placeholder\">[Full-width responsive \/ Fixed 1200px \/ Fit content]<\/span>\n - Column width: <span class=\"placeholder\">[Equal widths \/ Wider for recommended column]<\/span>\n - Row height: <span class=\"placeholder\">[Fixed 60px \/ Variable auto-height \/ Minimum 50px]<\/span>\n - Padding\/spacing: <span class=\"placeholder\">[Generous 20px \/ Standard 15px \/ Compact 10px]<\/span>\n - Borders: <span class=\"placeholder\">[Full grid lines \/ Column separators only \/ No borders (white space)]<\/span>\n\n<strong>CONTENT STRATEGY:<\/strong>\n\n1. <strong>Feature Prioritization:<\/strong>\n - Top rows (most visible): <span class=\"placeholder\">[Most important differentiators]<\/span>\n - Middle rows: <span class=\"placeholder\">[Standard features with variation]<\/span>\n - Bottom rows: <span class=\"placeholder\">[Advanced\/niche features]<\/span>\n\n2. <strong>Grouping Strategy:<\/strong>\n - Category 1: <span class=\"placeholder\">[Core Features - basics everyone cares about]<\/span>\n - Category 2: <span class=\"placeholder\">[Advanced Features - power user needs]<\/span>\n - Category 3: <span class=\"placeholder\">[Support & Service - post-purchase value]<\/span>\n - Visual separation: <span class=\"placeholder\">[Background color change \/ Bold divider line \/ Extra spacing]<\/span>\n\n3. <strong>Call-to-Action Buttons:<\/strong>\n - Button text: <span class=\"placeholder\">[\"Get Started\" \/ \"Buy Now\" \/ \"Try Free\" \/ \"Contact Sales\"]<\/span>\n - Button placement: <span class=\"placeholder\">[Top of column \/ Bottom of column \/ Both]<\/span>\n - Recommended column CTA: <span class=\"placeholder\">[Larger, primary color, bold]<\/span>\n - Other columns CTA: <span class=\"placeholder\">[Standard size, outline\/ghost button style]<\/span>\n\n<strong>RESPONSIVE DESIGN (Mobile):<\/strong>\n- Mobile strategy: <span class=\"placeholder\">[Horizontal scroll \/ Stack columns vertically \/ Accordion expandable]<\/span>\n- Mobile priority: <span class=\"placeholder\">[Show recommended plan first \/ Allow column selection]<\/span>\n- Touch targets: <span class=\"placeholder\">[CTA buttons minimum 44\u00d744px]<\/span>\n\n<strong>ADDITIONAL ELEMENTS:<\/strong>\n- Header\/title: <span class=\"placeholder\">[e.g., \"Choose Your Plan\" - 28pt bold]<\/span>\n- Subtitle: <span class=\"placeholder\">[Brief explanation or value prop, 16pt]<\/span>\n- Footer notes: <span class=\"placeholder\">[Disclaimers, billing terms, refund policy - small 10pt text]<\/span>\n- Tooltip\/info icons: <span class=\"placeholder\">[? icon next to complex features with hover explanations]<\/span>\n- Annual billing toggle: <span class=\"placeholder\">[If applicable - switch monthly\/yearly pricing]<\/span>\n\n<strong>OUTPUT DELIVERABLES:<\/strong>\n1. Complete comparison chart with all columns and features\n2. Visual design specifications (colors, fonts, spacing)\n3. Icon\/checkmark style guide\n4. Responsive design notes for mobile adaptation\n5. HTML\/CSS code structure OR design file (Figma\/Canva)\n\n---<\/div>\n <\/div>\n <p style=\"color: #64748b; font-size: 0.9rem;\">\ud83d\udca1 <strong>Tip:<\/strong> Fill in the <span class=\"placeholder\">[orange placeholders]<\/span> with your specific details before using this prompt.<\/p>\n <\/div>\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>Recommended Column Emphasis<\/h4>\n <p>Highlighting one \"Most Popular\" or \"Best Value\" option guides decision-making and reduces choice paralysis. Studies show emphasized options see 30-40% higher selection rates by providing a default recommendation for uncertain buyers.<\/p>\n <\/div>\n <div class=\"logic-item\">\n <h4>Feature Prioritization Order<\/h4>\n <p>Placing most important differentiators in top rows ensures visibility even if users don't scroll. The primacy effect means top features are remembered 3\u00d7 better than bottom features, influencing final decisions.<\/p>\n <\/div>\n <div class=\"logic-item\">\n <h4>Checkmark Visual Clarity<\/h4>\n <p>Using green checkmarks (\u2713) for \"Yes\" and red X (\u2717) or blank for \"No\" creates instant scannability. Color + symbol redundancy ensures accessibility and allows 2-second feature comparison vs 20 seconds for text-only tables.<\/p>\n <\/div>\n <div class=\"logic-item\">\n <h4>Grouped Category Headers<\/h4>\n <p>Grouping features into \"Core,\" \"Advanced,\" \"Support\" categories reduces cognitive load by chunking information. Grouped comparisons improve comprehension by 45% and help users focus on relevant feature sets for their needs.<\/p>\n <\/div>\n <div class=\"logic-item\">\n <h4>Zebra Striping for Readability<\/h4>\n <p>Alternating row background colors (white, light gray) guides eye horizontally across columns, preventing row confusion in wide tables. Zebra striping increases reading accuracy by 25% for tables with 5+ rows.<\/p>\n <\/div>\n <div class=\"logic-item\">\n <h4>Immediate CTA Placement<\/h4>\n <p>Placing \"Get Started\" buttons at top of columns (before features) captures high-intent users who don't need full comparison. Bottom CTAs catch detail-oriented users. Dual placement increases conversions by 18% vs single-position buttons.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"section\">\n <h3 class=\"section-title\">\ud83c\udfa8 Output Preview<\/h3>\n <div class=\"output-preview\">\n <h4>\ud83d\udcf8 Example Result: SaaS Pricing Comparison<\/h4>\n <p><strong>COMPARISON: CloudSync Storage Plans<\/strong><\/p>\n <p style=\"margin-top: 0.5rem;\"><strong>3 COLUMNS:<\/strong> Basic | Pro (Most Popular) | Enterprise<\/p>\n <p style=\"margin-top: 1rem; margin-left: 1rem; color: #475569; font-family: monospace; line-height: 2;\">\n<strong>HEADER ROW:<\/strong><br>\n[BASIC] [PRO - MOST POPULAR \u2b50] [ENTERPRISE]<br>\n$9\/month $29\/month Custom Pricing<br>\nFor individuals For small teams For large organizations<br>\n[Start Free Trial] [Start Free Trial - PRIMARY] [Contact Sales]<br><br>\n\n<strong>FEATURES COMPARISON:<\/strong><br>\n<em>Core Features<\/em><br>\nStorage Space: 10 GB | 500 GB | Unlimited<br>\nUsers: 1 | 10 | Unlimited<br>\nFile Upload Size: 100 MB | 5 GB | 50 GB<br>\nMobile App: \u2713 | \u2713 | \u2713<br><br>\n\n<em>Advanced Features<\/em><br>\nVersion History: 7 days | 90 days | Unlimited<br>\nAdvanced Sharing: \u2717 | \u2713 | \u2713<br>\nTeam Collaboration: \u2717 | \u2713 | \u2713<br>\nAPI Access: \u2717 | \u2717 | \u2713<br><br>\n\n<em>Support & Security<\/em><br>\nSupport: Email | Priority | Dedicated Manager<br>\nEncryption: Standard | 256-bit | Enterprise-grade<br>\nCompliance: \u2717 | GDPR | GDPR + HIPAA + SOC2<br>\nUptime SLA: 99% | 99.9% | 99.99%\n <\/p>\n <p style=\"margin-top: 1rem;\"><strong>DESIGN SPECS:<\/strong><\/p>\n <ul style=\"margin-left: 1.5rem; color: #475569;\">\n <li>Pro column: Light blue background (#f0f9ff), wider (35% vs 32.5% for others), \"Most Popular\" badge<\/li>\n <li>Checkmarks: Green \u2713 (#10b981), X-marks: Red \u2717 (#ef4444)<\/li>\n <li>Typography: Plan names (Poppins Bold 22pt), Pricing (Poppins Black 36pt), Features (Inter 13pt)<\/li>\n <li>Zebra striping: Alternating white\/gray (#f8fafc) rows for readability<\/li>\n <li>CTAs: Pro column primary button (blue #3b82f6), others outline buttons<\/li>\n <\/ul>\n <\/div>\n <\/div>\n <div class=\"section\">\n <h3 class=\"section-title\">\ud83d\udd17 Chain Strategy (Advanced Workflow)<\/h3>\n <div class=\"chain-strategy\">\n <p style=\"color: #6b21a8; font-weight: 600; margin-bottom: 1rem;\">For best results, use this 3-step sequential prompting strategy:<\/p>\n <div class=\"chain-steps\">\n <div class=\"chain-step\">\n <div class=\"chain-step-header\"><div class=\"step-number\">1<\/div><h4>Feature Selection & Prioritization<\/h4><\/div>\n <p><strong>Goal:<\/strong> From comprehensive feature list, identify 8-12 most important differentiators that influence decisions<\/p>\n <p><strong>Prompt:<\/strong> I have 40+ features across my plans. Help select 10-12 for comparison chart. Features: [paste full list]. Criteria: 1) Differentiation (features that vary across plans), 2) Customer priority (what buyers care about most), 3) Purchase influence (features that drive upgrades). Group into 3 categories: Core, Advanced, Support. Recommend which features to include and optimal order (most important first).<\/p>\n <div class=\"example\"><strong>Expected Output:<\/strong> INCLUDE (10 features): Core (Storage 10GB\/500GB\/Unlimited, Users 1\/10\/Unlimited, Upload Size), Advanced (Version History, Collaboration, API), Support (Support level, Encryption, SLA). EXCLUDE: Rarely-used features, identical across plans. Order: Storage first (top differentiator), Users second, Upload size third. Category grouping provided with visual separator recommendations.<\/div>\n <\/div>\n <div class=\"chain-step\">\n <div class=\"chain-step-header\"><div class=\"step-number\">2<\/div><h4>Recommended Plan Strategy<\/h4><\/div>\n <p><strong>Goal:<\/strong> Determine which plan to emphasize and design visual hierarchy to guide selections<\/p>\n <p><strong>Prompt:<\/strong> For these 3 plans [Basic $9, Pro $29, Enterprise Custom], recommend which to highlight as \"Most Popular\" or \"Best Value.\" Consider: 1) Profit margin, 2) Current customer distribution, 3) Upsell strategy (move Basic\u2192Pro vs Pro\u2192Enterprise), 4) Price anchoring (is Enterprise priced to make Pro seem reasonable?). Design emphasis strategy: column width, background color, badge text, CTA prominence.<\/p>\n <div class=\"example\"><strong>Expected Output:<\/strong> Recommend highlighting PRO: Highest margin (65%), most customers (60% choose Pro), best upsell path from free trial. Design: Pro column 35% width (wider), light blue background #f0f9ff, \"Most Popular\" badge top-right, primary CTA button (blue #3b82f6 vs outline for others). Basic\/Enterprise remain neutral to guide toward Pro.<\/div>\n <\/div>\n <div class=\"chain-step\">\n <div class=\"chain-step-header\"><div class=\"step-number\">3<\/div><h4>Complete Comparison Chart Design<\/h4><\/div>\n <p><strong>Goal:<\/strong> Generate full visual comparison chart with all elements, styling, and responsive specifications<\/p>\n <p><strong>Prompt:<\/strong> Create complete comparison chart using: 1) 10 prioritized features from Step 1, 2) Pro plan emphasis from Step 2, 3) These specs [3 columns: Basic\/Pro\/Enterprise, pricing, target users]. Design: Header with plan names+prices, CTA buttons top+bottom, checkmarks \u2713 (green) \/ X-marks \u2717 (red), zebra striping, category headers (Core\/Advanced\/Support), responsive mobile strategy. Output: Visual layout description, HTML\/CSS structure, typography specs, color palette, mobile breakpoints.<\/p>\n <div class=\"example\"><strong>Expected Output:<\/strong> Complete chart: Header row (plans, pricing, CTAs), 10 feature rows grouped by category (3+4+3), footer notes. Pro column emphasized per Step 2. Checkmarks: green \u2713 #10b981, X-marks: red \u2717 #ef4444. Typography: Poppins Bold 22pt (plans), 36pt (pricing), Inter 13pt (features). Zebra: alternating #ffffff \/ #f8fafc. Mobile: horizontal scroll with sticky first column (feature names). Full HTML\/CSS code provided.<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\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;\">Enhance your results with these follow-up prompts:<\/p>\n <div class=\"tips-grid\">\n <div class=\"tip-item\">\n <h4>A\/B Test Emphasis Variations<\/h4>\n <p>Test different highlighted columns to optimize conversion rates for different audience segments.<\/p>\n <div class=\"follow-up\"><strong>Follow-up Prompt:<\/strong> \"Create 2 alternative versions: Version A highlights Basic plan (emphasize affordability for price-sensitive users), Version B highlights Enterprise (target high-value customers). For each, adjust: Column emphasis design, CTA text (A: 'Start Free' \/ B: 'Schedule Demo'), Feature order (A: price-focused \/ B: power-focused). Suggest A\/B testing strategy with audience targeting.\"<\/div>\n <\/div>\n <div class=\"tip-item\">\n <h4>Competitive Comparison Chart<\/h4>\n <p>Adapt chart to compare your product against competitors, highlighting your advantages.<\/p>\n <div class=\"follow-up\"><strong>Follow-up Prompt:<\/strong> \"Transform this into competitive comparison: Column 1: Our Product, Columns 2-4: Competitors A\/B\/C. Show where we win: 1) Highlight our superior features (green background), 2) Show competitor limitations (red \u2717 or 'Limited'), 3) Add 'Winner' badges for categories we dominate, 4) Include pricing comparison if advantageous. Ensure design doesn't appear biased\u2014use factual data.\"<\/div>\n <\/div>\n <div class=\"tip-item\">\n <h4>Interactive Filtering Features<\/h4>\n <p>Add web interactivity: let users filter features by category or toggle annual\/monthly pricing.<\/p>\n <div class=\"follow-up\"><strong>Follow-up Prompt:<\/strong> \"Add interactive elements: 1) Filter buttons (Show Core \/ Advanced \/ Support features only), 2) Monthly\/Annual pricing toggle (show savings: 'Save 20% with annual billing'), 3) Feature explanations (? icon with tooltip on hover), 4) Highlight matching features based on user selection ('I need API access' \u2192 highlight Enterprise). Provide JavaScript functionality specifications.\"<\/div>\n <\/div>\n <div class=\"tip-item\">\n <h4>Multi-Device Optimization<\/h4>\n <p>Ensure chart works perfectly on desktop, tablet, and mobile with appropriate adaptations.<\/p>\n <div class=\"follow-up\"><strong>Follow-up Prompt:<\/strong> \"Optimize for all devices: Desktop (1920px): Full 3-column table, hover effects. Tablet (768px): Maintain 3 columns, reduce padding, smaller fonts. Mobile (375px): [Choose one] A) Horizontal scroll with sticky feature column, B) Accordion (expand one plan at a time), C) Vertical stack (show one plan, 'Compare' button to see others). Recommend best mobile approach for [B2B SaaS \/ E-commerce \/ Consumer app].\"<\/div>\n <\/div>\n <div class=\"tip-item\">\n <h4>Value Prop Storytelling<\/h4>\n <p>Add context rows that explain benefits, not just features, to increase emotional connection.<\/p>\n <div class=\"follow-up\"><strong>Follow-up Prompt:<\/strong> \"Transform dry feature names into benefit-driven copy: Instead of 'Storage: 10GB', write 'Store 2,000+ photos and documents.' Instead of 'Users: 10', write 'Collaborate with your entire team.' For each feature, suggest benefit-focused language that resonates with [target audience]. Add icon + benefit headline format to rows.\"<\/div>\n <\/div>\n <div class=\"tip-item\">\n <h4>FAQ Expansion Section<\/h4>\n <p>Add common questions below chart to address objections and clarify confusing features.<\/p>\n <div class=\"follow-up\"><strong>Follow-up Prompt:<\/strong> \"Below comparison chart, add FAQ section addressing: 1) 'Can I upgrade\/downgrade later?' (Yes, anytime), 2) 'What happens if I exceed my storage?' (Auto-upgrade prompt vs overage fees), 3) 'Is there a free trial?' (14 days, no credit card), 4) 'Annual vs monthly billing?' (Save 20% annual), 5) 'Refund policy?' (30-day money-back). Format as expandable accordion or simple Q&A list.\"<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"card-footer\">\n <div class=\"stat\">\u2b50 <strong>4.8<\/strong> (521 ratings)<\/div>\n <div class=\"stat\">\ud83d\udcdd <strong>8,943<\/strong> copies<\/div>\n <div class=\"stat\">\ud83d\udcac <strong>412<\/strong> reviews<\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"toast\" id=\"toast\">\u2705 Prompt copied to clipboard!<\/div>\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 button.textContent = '\u2705 Copied!';\n button.classList.add('copied');\n toast.classList.add('show');\n setTimeout(() => {\n button.textContent = '\ud83d\udcdd Copy Prompt';\n button.classList.remove('copied');\n toast.classList.remove('show');\n }, 3000);\n });\n }\n <\/script>\n<\/body>\n<\/html>\n\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>Comparison Chart Design – AiPro Institute\u2122 Prompt Library AiPro Institute\u2122 Comparison Chart Design Create clear, scannable comparison charts that help audiences make informed decisions by visualizing feature differences, pricing tiers, and product options side-by-side \ud83c\udfaf Beginner \u23f1\ufe0f 7-10 minutes \ud83d\udcb0 ~350 tokens \ud83c\udfa8 Data Visualization \ud83d\udee0\ufe0f Tool Compatibility \u2728 Model Agnostic GPT-4o Claude 3.5 Canva…<\/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":[129],"tags":[],"class_list":["post-4589","post","type-post","status-publish","format-standard","hentry","category-graphic-print-design"],"acf":[],"_links":{"self":[{"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/posts\/4589","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=4589"}],"version-history":[{"count":4,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/posts\/4589\/revisions"}],"predecessor-version":[{"id":4756,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/posts\/4589\/revisions\/4756"}],"wp:attachment":[{"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/media?parent=4589"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/categories?post=4589"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/tags?post=4589"}],"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 Comparison Chart Design - AiPro Institute\u2122 Prompt Library<\/title>\n <style>\n * {margin: 0; padding: 0; box-sizing: border-box;}\n body {font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; background: #ffffff; padding: 2rem; line-height: 1.6;}\n .container {max-width: 900px; margin: 0 auto;}\n .header {text-align: center; margin-bottom: 2rem;}\n .header h1 {font-size: 2.5rem; background: linear-gradient(135deg, #7c3aed 0%, #3b82f6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: 800; margin-bottom: 0.5rem;}\n .card {background: white; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); overflow: hidden;}\n .card-header {background: linear-gradient(135deg, #7c3aed 0%, #3b82f6 100%); color: white; padding: 2rem;}\n .card-header h2 {font-size: 2rem; margin-bottom: 0.5rem;}\n .card-header p {opacity: 0.95; font-size: 1.1rem;}\n .meta-badges {display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1rem;}\n .badge {display: inline-block; padding: 0.4rem 0.9rem; border-radius: 20px; font-size: 0.85rem; font-weight: 600;}\n .badge-skill-beginner {background: #10b981; color: white;}\n .badge-time {background: #10b981; color: white;}\n .badge-cost {background: #f59e0b; color: white;}\n .badge-format {background: #8b5cf6; color: white;}\n .tool-compatibility {margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.2);}\n .tool-compatibility h3 {font-size: 0.9rem; margin-bottom: 0.5rem; opacity: 0.9;}\n .tool-badges {display: flex; gap: 0.5rem; flex-wrap: wrap;}\n .tool-badge {padding: 0.35rem 0.75rem; background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.3); border-radius: 15px; font-size: 0.8rem;}\n .tool-badge.model-agnostic {background: rgba(255,255,255,0.3); font-weight: 600;}\n .card-body {padding: 2rem;}\n .section {margin-bottom: 2.5rem;}\n .section-title {font-size: 1.5rem; color: #7c3aed; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem;}\n .section-title::before {content: ''; width: 4px; height: 24px; background: linear-gradient(135deg, #7c3aed 0%, #3b82f6 100%); border-radius: 2px;}\n .prompt-box {background: #f8fafc; border: 2px solid #e2e8f0; border-radius: 12px; padding: 1.5rem; font-family: 'Courier New', monospace; font-size: 0.95rem; line-height: 1.8; position: relative; margin-bottom: 1rem;}\n .copy-button {position: absolute; top: 1rem; right: 1rem; background: linear-gradient(135deg, #7c3aed 0%, #3b82f6 100%); color: white; border: none; padding: 0.6rem 1.2rem; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 0.9rem; transition: all 0.3s ease;}\n .copy-button:hover {transform: translateY(-2px); box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4);}\n .copy-button.copied {background: #10b981;}\n .placeholder {color: #f97316; font-weight: 600;}\n .logic-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem;}\n .logic-item {background: #f0f9ff; padding: 1.25rem; border-radius: 10px; border-left: 4px solid #3b82f6;}\n .logic-item h4 {color: #1e40af; margin-bottom: 0.5rem; font-size: 1.05rem;}\n .logic-item p {color: #475569; font-size: 0.95rem;}\n .output-preview {background: #fefce8; border: 2px solid #fde047; border-radius: 12px; padding: 1.5rem;}\n .output-preview h4 {color: #854d0e; margin-bottom: 1rem;}\n .chain-strategy {background: linear-gradient(135deg, #fdf2f8 0%, #fae8ff 100%); border-radius: 12px; padding: 1.5rem;}\n .chain-steps {display: grid; gap: 1.5rem; margin-top: 1rem;}\n .chain-step {background: white; padding: 1.25rem; border-radius: 10px; border-left: 4px solid #a855f7;}\n .chain-step-header {display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem;}\n .step-number {background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%); color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.9rem;}\n .chain-step h4 {color: #7c3aed; font-size: 1.1rem;}\n .chain-step p {color: #475569; margin-bottom: 0.5rem;}\n .chain-step .example {background: #f8fafc; padding: 0.75rem; border-radius: 6px; font-size: 0.9rem; color: #64748b; margin-top: 0.5rem;}\n .hitl-tips {background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); border-radius: 12px; padding: 1.5rem;}\n .tips-grid {display: grid; gap: 1rem; margin-top: 1rem;}\n .tip-item {background: white; padding: 1rem; border-radius: 8px; border-left: 3px solid #10b981;}\n .tip-item h4 {color: #047857; font-size: 1rem; margin-bottom: 0.5rem;}\n .tip-item p {color: #475569; font-size: 0.9rem;}\n .tip-item .follow-up {background: #f0fdf4; padding: 0.6rem; border-radius: 6px; margin-top: 0.5rem; font-size: 0.85rem; color: #166534; font-style: italic;}\n .card-footer {background: #f8fafc; padding: 1.5rem 2rem; display: flex; justify-content: center; align-items: center; gap: 2rem; flex-wrap: wrap; border-top: 1px solid #e2e8f0;}\n .stat {display: flex; align-items: center; gap: 0.5rem; color: #475569; font-size: 0.95rem;}\n .stat strong {color: #1e293b;}\n .toast {position: fixed; bottom: 2rem; right: 2rem; background: #10b981; color: white; padding: 1rem 1.5rem; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.3); display: none; align-items: center; gap: 0.5rem; animation: slideIn 0.3s ease; z-index: 1000;}\n .toast.show {display: flex;}\n @keyframes slideIn {from {transform: translateX(400px); opacity: 0;} to {transform: translateX(0); opacity: 1;}}\n @media (max-width: 768px) {body {padding: 1rem;} .header h1 {font-size: 2rem;} .card-header h2 {font-size: 1.5rem;} .logic-grid {grid-template-columns: 1fr;} .card-footer {flex-direction: column; gap: 1rem;} .copy-button {position: static; width: 100%; margin-top: 1rem;} .prompt-box {padding-top: 1.5rem;}}\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <div class=\"header\">\n <h1>AiPro Institute\u2122<\/h1>\n <\/div>\n <div class=\"card\">\n <div class=\"card-header\">\n <h2>Comparison Chart Design<\/h2>\n <p>Create clear, scannable comparison charts that help audiences make informed decisions by visualizing feature differences, pricing tiers, and product options side-by-side<\/p>\n <div class=\"meta-badges\">\n <span class=\"badge badge-skill-beginner\">\ud83c\udfaf Beginner<\/span>\n <span class=\"badge badge-time\">\u23f1\ufe0f 7-10 minutes<\/span>\n <span class=\"badge badge-cost\">\ud83d\udcb0 ~350 tokens<\/span>\n <span class=\"badge badge-format\">\ud83c\udfa8 Data Visualization<\/span>\n <\/div>\n <div class=\"tool-compatibility\">\n <h3>\ud83d\udee0\ufe0f Tool Compatibility<\/h3>\n <div class=\"tool-badges\">\n <span class=\"tool-badge model-agnostic\">\u2728 Model Agnostic<\/span>\n <span class=\"tool-badge\">GPT-4o<\/span>\n <span class=\"tool-badge\">Claude 3.5<\/span>\n <span class=\"tool-badge\">Canva<\/span>\n <span class=\"tool-badge\">Google Sheets<\/span>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"card-body\">\n <div class=\"section\">\n <h3 class=\"section-title\">\ud83d\udcdd The Prompt<\/h3>\n <div class=\"prompt-box\">\n <button class=\"copy-button\" onclick=\"copyPrompt()\">\ud83d\udcdd Copy Prompt<\/button>\n <div id=\"promptContent\">You are a comparison chart design expert specializing in data visualization, decision-support graphics, and creating scannable tables that guide purchase decisions through clear visual hierarchy.\n\nYour task is to design a comparison chart that makes complex product\/service differences immediately clear, helping audiences quickly identify the best option for their needs.\n\n<strong>COMPARISON PURPOSE:<\/strong>\n- What's being compared: <span class=\"placeholder\">[Products \/ Services \/ Pricing plans \/ Software features \/ Competitors]<\/span>\n- Number of options: <span class=\"placeholder\">[2-5 columns recommended for clarity]<\/span>\n- Audience: <span class=\"placeholder\">[Potential customers \/ Internal team \/ Investors \/ General public]<\/span>\n- Decision goal: <span class=\"placeholder\">[Help choose best plan \/ Show competitive advantage \/ Feature education]<\/span>\n- Use case: <span class=\"placeholder\">[Website pricing page \/ Sales presentation \/ Product brochure \/ Email campaign]<\/span>\n\n<strong>COMPARISON ITEMS (COLUMNS):<\/strong>\n\n<strong>Option 1:<\/strong>\n- Name: <span class=\"placeholder\">[Plan\/product name]<\/span>\n- Positioning: <span class=\"placeholder\">[Basic \/ Standard \/ Premium \/ Enterprise]<\/span>\n- Price: <span class=\"placeholder\">[$\/month or one-time cost]<\/span>\n- Primary audience: <span class=\"placeholder\">[Who is this for?]<\/span>\n- Highlight as recommended: <span class=\"placeholder\">[Yes - \"Most Popular\" \/ No]<\/span>\n\n<strong>Option 2:<\/strong>\n- Name: <span class=\"placeholder\">[Plan name]<\/span>\n- Positioning: <span class=\"placeholder\">[Tier level]<\/span>\n- Price: <span class=\"placeholder\">[Cost]<\/span>\n- Primary audience: <span class=\"placeholder\">[Target user]<\/span>\n- Highlight: <span class=\"placeholder\">[Yes\/No]<\/span>\n\n(Repeat for all options being compared)\n\n<strong>FEATURE COMPARISON (ROWS):<\/strong>\n\nList all features\/attributes to compare. Group by category for clarity:\n\n<strong>Category 1: Core Features<\/strong>\n- Feature A: <span class=\"placeholder\">[e.g., \"Storage space\"]<\/span>\n Option 1 value: <span class=\"placeholder\">[10 GB \/ Yes \/ No \/ Checkmark]<\/span>\n Option 2 value: <span class=\"placeholder\">[50 GB \/ Yes \/ No \/ Checkmark]<\/span>\n Option 3 value: <span class=\"placeholder\">[Unlimited \/ Yes \/ No \/ Checkmark]<\/span>\n\n- Feature B: <span class=\"placeholder\">[e.g., \"User accounts\"]<\/span>\n Option 1: <span class=\"placeholder\">[Value]<\/span>\n Option 2: <span class=\"placeholder\">[Value]<\/span>\n Option 3: <span class=\"placeholder\">[Value]<\/span>\n\n<strong>Category 2: Advanced Features<\/strong>\n(Continue with grouped features)\n\n<strong>Category 3: Support & Services<\/strong>\n(Continue)\n\nTotal features to compare: <span class=\"placeholder\">[8-15 recommended for scannability]<\/span>\n\n<strong>VISUAL DESIGN STRATEGY:<\/strong>\n\n1. <strong>Recommended Column Highlight:<\/strong>\n - Which option to emphasize: <span class=\"placeholder\">[Usually mid-tier \"Most Popular\" plan]<\/span>\n - Visual treatment: <span class=\"placeholder\">[Colored background \/ Larger size \/ Border \/ Badge \"Best Value\"]<\/span>\n - Reasoning: <span class=\"placeholder\">[Highest margin \/ Most customers choose this \/ Upsell target]<\/span>\n\n2. <strong>Value Indicators:<\/strong>\n - Checkmarks (included): <span class=\"placeholder\">[Green \u2713 \/ Blue \u2713 \/ Custom icon]<\/span>\n - X-marks (not included): <span class=\"placeholder\">[Red \u2717 \/ Gray \u2014 \/ Leave blank]<\/span>\n - Partial\/limited features: <span class=\"placeholder\">[Yellow \u26a0\ufe0f \/ \"Limited\" text \/ Asterisk*]<\/span>\n - Numerical values: <span class=\"placeholder\">[Bold numbers \/ With units (GB, users, etc.)]<\/span>\n\n3. <strong>Color Palette:<\/strong>\n - Primary brand color: <span class=\"placeholder\">[#HEX - for headers, recommended column]<\/span>\n - Secondary color: <span class=\"placeholder\">[#HEX - for accents]<\/span>\n - Success green: <span class=\"placeholder\">[#10b981 - for checkmarks]<\/span>\n - Error red: <span class=\"placeholder\">[#ef4444 - for X-marks]<\/span>\n - Background colors:\n * Standard columns: <span class=\"placeholder\">[White #ffffff \/ Light gray #f8fafc]<\/span>\n * Highlighted column: <span class=\"placeholder\">[Subtle brand tint #f0f9ff]<\/span>\n * Alternating rows: <span class=\"placeholder\">[Yes - zebra striping \/ No - all white]<\/span>\n\n4. <strong>Typography:<\/strong>\n - Column headers (plan names): <span class=\"placeholder\">[Font family, 20-24pt, bold]<\/span>\n - Pricing: <span class=\"placeholder\">[Large 32-36pt, bold, primary color]<\/span>\n - Feature category headers: <span class=\"placeholder\">[14-16pt, bold, uppercase\/caps]<\/span>\n - Feature names: <span class=\"placeholder\">[12-14pt, regular weight]<\/span>\n - Feature values: <span class=\"placeholder\">[12-14pt, values bold, labels regular]<\/span>\n\n5. <strong>Layout Structure:<\/strong>\n - Table width: <span class=\"placeholder\">[Full-width responsive \/ Fixed 1200px \/ Fit content]<\/span>\n - Column width: <span class=\"placeholder\">[Equal widths \/ Wider for recommended column]<\/span>\n - Row height: <span class=\"placeholder\">[Fixed 60px \/ Variable auto-height \/ Minimum 50px]<\/span>\n - Padding\/spacing: <span class=\"placeholder\">[Generous 20px \/ Standard 15px \/ Compact 10px]<\/span>\n - Borders: <span class=\"placeholder\">[Full grid lines \/ Column separators only \/ No borders (white space)]<\/span>\n\n<strong>CONTENT STRATEGY:<\/strong>\n\n1. <strong>Feature Prioritization:<\/strong>\n - Top rows (most visible): <span class=\"placeholder\">[Most important differentiators]<\/span>\n - Middle rows: <span class=\"placeholder\">[Standard features with variation]<\/span>\n - Bottom rows: <span class=\"placeholder\">[Advanced\/niche features]<\/span>\n\n2. <strong>Grouping Strategy:<\/strong>\n - Category 1: <span class=\"placeholder\">[Core Features - basics everyone cares about]<\/span>\n - Category 2: <span class=\"placeholder\">[Advanced Features - power user needs]<\/span>\n - Category 3: <span class=\"placeholder\">[Support & Service - post-purchase value]<\/span>\n - Visual separation: <span class=\"placeholder\">[Background color change \/ Bold divider line \/ Extra spacing]<\/span>\n\n3. <strong>Call-to-Action Buttons:<\/strong>\n - Button text: <span class=\"placeholder\">[\"Get Started\" \/ \"Buy Now\" \/ \"Try Free\" \/ \"Contact Sales\"]<\/span>\n - Button placement: <span class=\"placeholder\">[Top of column \/ Bottom of column \/ Both]<\/span>\n - Recommended column CTA: <span class=\"placeholder\">[Larger, primary color, bold]<\/span>\n - Other columns CTA: <span class=\"placeholder\">[Standard size, outline\/ghost button style]<\/span>\n\n<strong>RESPONSIVE DESIGN (Mobile):<\/strong>\n- Mobile strategy: <span class=\"placeholder\">[Horizontal scroll \/ Stack columns vertically \/ Accordion expandable]<\/span>\n- Mobile priority: <span class=\"placeholder\">[Show recommended plan first \/ Allow column selection]<\/span>\n- Touch targets: <span class=\"placeholder\">[CTA buttons minimum 44\u00d744px]<\/span>\n\n<strong>ADDITIONAL ELEMENTS:<\/strong>\n- Header\/title: <span class=\"placeholder\">[e.g., \"Choose Your Plan\" - 28pt bold]<\/span>\n- Subtitle: <span class=\"placeholder\">[Brief explanation or value prop, 16pt]<\/span>\n- Footer notes: <span class=\"placeholder\">[Disclaimers, billing terms, refund policy - small 10pt text]<\/span>\n- Tooltip\/info icons: <span class=\"placeholder\">[? icon next to complex features with hover explanations]<\/span>\n- Annual billing toggle: <span class=\"placeholder\">[If applicable - switch monthly\/yearly pricing]<\/span>\n\n<strong>OUTPUT DELIVERABLES:<\/strong>\n1. Complete comparison chart with all columns and features\n2. Visual design specifications (colors, fonts, spacing)\n3. Icon\/checkmark style guide\n4. Responsive design notes for mobile adaptation\n5. HTML\/CSS code structure OR design file (Figma\/Canva)\n\n---<\/div>\n <\/div>\n <p style=\"color: #64748b; font-size: 0.9rem;\">\ud83d\udca1 <strong>Tip:<\/strong> Fill in the <span class=\"placeholder\">[orange placeholders]<\/span> with your specific details before using this prompt.<\/p>\n <\/div>\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>Recommended Column Emphasis<\/h4>\n <p>Highlighting one \"Most Popular\" or \"Best Value\" option guides decision-making and reduces choice paralysis. Studies show emphasized options see 30-40% higher selection rates by providing a default recommendation for uncertain buyers.<\/p>\n <\/div>\n <div class=\"logic-item\">\n <h4>Feature Prioritization Order<\/h4>\n <p>Placing most important differentiators in top rows ensures visibility even if users don't scroll. The primacy effect means top features are remembered 3\u00d7 better than bottom features, influencing final decisions.<\/p>\n <\/div>\n <div class=\"logic-item\">\n <h4>Checkmark Visual Clarity<\/h4>\n <p>Using green checkmarks (\u2713) for \"Yes\" and red X (\u2717) or blank for \"No\" creates instant scannability. Color + symbol redundancy ensures accessibility and allows 2-second feature comparison vs 20 seconds for text-only tables.<\/p>\n <\/div>\n <div class=\"logic-item\">\n <h4>Grouped Category Headers<\/h4>\n <p>Grouping features into \"Core,\" \"Advanced,\" \"Support\" categories reduces cognitive load by chunking information. Grouped comparisons improve comprehension by 45% and help users focus on relevant feature sets for their needs.<\/p>\n <\/div>\n <div class=\"logic-item\">\n <h4>Zebra Striping for Readability<\/h4>\n <p>Alternating row background colors (white, light gray) guides eye horizontally across columns, preventing row confusion in wide tables. Zebra striping increases reading accuracy by 25% for tables with 5+ rows.<\/p>\n <\/div>\n <div class=\"logic-item\">\n <h4>Immediate CTA Placement<\/h4>\n <p>Placing \"Get Started\" buttons at top of columns (before features) captures high-intent users who don't need full comparison. Bottom CTAs catch detail-oriented users. Dual placement increases conversions by 18% vs single-position buttons.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"section\">\n <h3 class=\"section-title\">\ud83c\udfa8 Output Preview<\/h3>\n <div class=\"output-preview\">\n <h4>\ud83d\udcf8 Example Result: SaaS Pricing Comparison<\/h4>\n <p><strong>COMPARISON: CloudSync Storage Plans<\/strong><\/p>\n <p style=\"margin-top: 0.5rem;\"><strong>3 COLUMNS:<\/strong> Basic | Pro (Most Popular) | Enterprise<\/p>\n <p style=\"margin-top: 1rem; margin-left: 1rem; color: #475569; font-family: monospace; line-height: 2;\">\n<strong>HEADER ROW:<\/strong><br>\n[BASIC] [PRO - MOST POPULAR \u2b50] [ENTERPRISE]<br>\n$9\/month $29\/month Custom Pricing<br>\nFor individuals For small teams For large organizations<br>\n[Start Free Trial] [Start Free Trial - PRIMARY] [Contact Sales]<br><br>\n\n<strong>FEATURES COMPARISON:<\/strong><br>\n<em>Core Features<\/em><br>\nStorage Space: 10 GB | 500 GB | Unlimited<br>\nUsers: 1 | 10 | Unlimited<br>\nFile Upload Size: 100 MB | 5 GB | 50 GB<br>\nMobile App: \u2713 | \u2713 | \u2713<br><br>\n\n<em>Advanced Features<\/em><br>\nVersion History: 7 days | 90 days | Unlimited<br>\nAdvanced Sharing: \u2717 | \u2713 | \u2713<br>\nTeam Collaboration: \u2717 | \u2713 | \u2713<br>\nAPI Access: \u2717 | \u2717 | \u2713<br><br>\n\n<em>Support & Security<\/em><br>\nSupport: Email | Priority | Dedicated Manager<br>\nEncryption: Standard | 256-bit | Enterprise-grade<br>\nCompliance: \u2717 | GDPR | GDPR + HIPAA + SOC2<br>\nUptime SLA: 99% | 99.9% | 99.99%\n <\/p>\n <p style=\"margin-top: 1rem;\"><strong>DESIGN SPECS:<\/strong><\/p>\n <ul style=\"margin-left: 1.5rem; color: #475569;\">\n <li>Pro column: Light blue background (#f0f9ff), wider (35% vs 32.5% for others), \"Most Popular\" badge<\/li>\n <li>Checkmarks: Green \u2713 (#10b981), X-marks: Red \u2717 (#ef4444)<\/li>\n <li>Typography: Plan names (Poppins Bold 22pt), Pricing (Poppins Black 36pt), Features (Inter 13pt)<\/li>\n <li>Zebra striping: Alternating white\/gray (#f8fafc) rows for readability<\/li>\n <li>CTAs: Pro column primary button (blue #3b82f6), others outline buttons<\/li>\n <\/ul>\n <\/div>\n <\/div>\n <div class=\"section\">\n <h3 class=\"section-title\">\ud83d\udd17 Chain Strategy (Advanced Workflow)<\/h3>\n <div class=\"chain-strategy\">\n <p style=\"color: #6b21a8; font-weight: 600; margin-bottom: 1rem;\">For best results, use this 3-step sequential prompting strategy:<\/p>\n <div class=\"chain-steps\">\n <div class=\"chain-step\">\n <div class=\"chain-step-header\"><div class=\"step-number\">1<\/div><h4>Feature Selection & Prioritization<\/h4><\/div>\n <p><strong>Goal:<\/strong> From comprehensive feature list, identify 8-12 most important differentiators that influence decisions<\/p>\n <p><strong>Prompt:<\/strong> I have 40+ features across my plans. Help select 10-12 for comparison chart. Features: [paste full list]. Criteria: 1) Differentiation (features that vary across plans), 2) Customer priority (what buyers care about most), 3) Purchase influence (features that drive upgrades). Group into 3 categories: Core, Advanced, Support. Recommend which features to include and optimal order (most important first).<\/p>\n <div class=\"example\"><strong>Expected Output:<\/strong> INCLUDE (10 features): Core (Storage 10GB\/500GB\/Unlimited, Users 1\/10\/Unlimited, Upload Size), Advanced (Version History, Collaboration, API), Support (Support level, Encryption, SLA). EXCLUDE: Rarely-used features, identical across plans. Order: Storage first (top differentiator), Users second, Upload size third. Category grouping provided with visual separator recommendations.<\/div>\n <\/div>\n <div class=\"chain-step\">\n <div class=\"chain-step-header\"><div class=\"step-number\">2<\/div><h4>Recommended Plan Strategy<\/h4><\/div>\n <p><strong>Goal:<\/strong> Determine which plan to emphasize and design visual hierarchy to guide selections<\/p>\n <p><strong>Prompt:<\/strong> For these 3 plans [Basic $9, Pro $29, Enterprise Custom], recommend which to highlight as \"Most Popular\" or \"Best Value.\" Consider: 1) Profit margin, 2) Current customer distribution, 3) Upsell strategy (move Basic\u2192Pro vs Pro\u2192Enterprise), 4) Price anchoring (is Enterprise priced to make Pro seem reasonable?). Design emphasis strategy: column width, background color, badge text, CTA prominence.<\/p>\n <div class=\"example\"><strong>Expected Output:<\/strong> Recommend highlighting PRO: Highest margin (65%), most customers (60% choose Pro), best upsell path from free trial. Design: Pro column 35% width (wider), light blue background #f0f9ff, \"Most Popular\" badge top-right, primary CTA button (blue #3b82f6 vs outline for others). Basic\/Enterprise remain neutral to guide toward Pro.<\/div>\n <\/div>\n <div class=\"chain-step\">\n <div class=\"chain-step-header\"><div class=\"step-number\">3<\/div><h4>Complete Comparison Chart Design<\/h4><\/div>\n <p><strong>Goal:<\/strong> Generate full visual comparison chart with all elements, styling, and responsive specifications<\/p>\n <p><strong>Prompt:<\/strong> Create complete comparison chart using: 1) 10 prioritized features from Step 1, 2) Pro plan emphasis from Step 2, 3) These specs [3 columns: Basic\/Pro\/Enterprise, pricing, target users]. Design: Header with plan names+prices, CTA buttons top+bottom, checkmarks \u2713 (green) \/ X-marks \u2717 (red), zebra striping, category headers (Core\/Advanced\/Support), responsive mobile strategy. Output: Visual layout description, HTML\/CSS structure, typography specs, color palette, mobile breakpoints.<\/p>\n <div class=\"example\"><strong>Expected Output:<\/strong> Complete chart: Header row (plans, pricing, CTAs), 10 feature rows grouped by category (3+4+3), footer notes. Pro column emphasized per Step 2. Checkmarks: green \u2713 #10b981, X-marks: red \u2717 #ef4444. Typography: Poppins Bold 22pt (plans), 36pt (pricing), Inter 13pt (features). Zebra: alternating #ffffff \/ #f8fafc. Mobile: horizontal scroll with sticky first column (feature names). Full HTML\/CSS code provided.<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\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;\">Enhance your results with these follow-up prompts:<\/p>\n <div class=\"tips-grid\">\n <div class=\"tip-item\">\n <h4>A\/B Test Emphasis Variations<\/h4>\n <p>Test different highlighted columns to optimize conversion rates for different audience segments.<\/p>\n <div class=\"follow-up\"><strong>Follow-up Prompt:<\/strong> \"Create 2 alternative versions: Version A highlights Basic plan (emphasize affordability for price-sensitive users), Version B highlights Enterprise (target high-value customers). For each, adjust: Column emphasis design, CTA text (A: 'Start Free' \/ B: 'Schedule Demo'), Feature order (A: price-focused \/ B: power-focused). Suggest A\/B testing strategy with audience targeting.\"<\/div>\n <\/div>\n <div class=\"tip-item\">\n <h4>Competitive Comparison Chart<\/h4>\n <p>Adapt chart to compare your product against competitors, highlighting your advantages.<\/p>\n <div class=\"follow-up\"><strong>Follow-up Prompt:<\/strong> \"Transform this into competitive comparison: Column 1: Our Product, Columns 2-4: Competitors A\/B\/C. Show where we win: 1) Highlight our superior features (green background), 2) Show competitor limitations (red \u2717 or 'Limited'), 3) Add 'Winner' badges for categories we dominate, 4) Include pricing comparison if advantageous. Ensure design doesn't appear biased\u2014use factual data.\"<\/div>\n <\/div>\n <div class=\"tip-item\">\n <h4>Interactive Filtering Features<\/h4>\n <p>Add web interactivity: let users filter features by category or toggle annual\/monthly pricing.<\/p>\n <div class=\"follow-up\"><strong>Follow-up Prompt:<\/strong> \"Add interactive elements: 1) Filter buttons (Show Core \/ Advanced \/ Support features only), 2) Monthly\/Annual pricing toggle (show savings: 'Save 20% with annual billing'), 3) Feature explanations (? icon with tooltip on hover), 4) Highlight matching features based on user selection ('I need API access' \u2192 highlight Enterprise). Provide JavaScript functionality specifications.\"<\/div>\n <\/div>\n <div class=\"tip-item\">\n <h4>Multi-Device Optimization<\/h4>\n <p>Ensure chart works perfectly on desktop, tablet, and mobile with appropriate adaptations.<\/p>\n <div class=\"follow-up\"><strong>Follow-up Prompt:<\/strong> \"Optimize for all devices: Desktop (1920px): Full 3-column table, hover effects. Tablet (768px): Maintain 3 columns, reduce padding, smaller fonts. Mobile (375px): [Choose one] A) Horizontal scroll with sticky feature column, B) Accordion (expand one plan at a time), C) Vertical stack (show one plan, 'Compare' button to see others). Recommend best mobile approach for [B2B SaaS \/ E-commerce \/ Consumer app].\"<\/div>\n <\/div>\n <div class=\"tip-item\">\n <h4>Value Prop Storytelling<\/h4>\n <p>Add context rows that explain benefits, not just features, to increase emotional connection.<\/p>\n <div class=\"follow-up\"><strong>Follow-up Prompt:<\/strong> \"Transform dry feature names into benefit-driven copy: Instead of 'Storage: 10GB', write 'Store 2,000+ photos and documents.' Instead of 'Users: 10', write 'Collaborate with your entire team.' For each feature, suggest benefit-focused language that resonates with [target audience]. Add icon + benefit headline format to rows.\"<\/div>\n <\/div>\n <div class=\"tip-item\">\n <h4>FAQ Expansion Section<\/h4>\n <p>Add common questions below chart to address objections and clarify confusing features.<\/p>\n <div class=\"follow-up\"><strong>Follow-up Prompt:<\/strong> \"Below comparison chart, add FAQ section addressing: 1) 'Can I upgrade\/downgrade later?' (Yes, anytime), 2) 'What happens if I exceed my storage?' (Auto-upgrade prompt vs overage fees), 3) 'Is there a free trial?' (14 days, no credit card), 4) 'Annual vs monthly billing?' (Save 20% annual), 5) 'Refund policy?' (30-day money-back). Format as expandable accordion or simple Q&A list.\"<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"card-footer\">\n <div class=\"stat\">\u2b50 <strong>4.8<\/strong> (521 ratings)<\/div>\n <div class=\"stat\">\ud83d\udcdd <strong>8,943<\/strong> copies<\/div>\n <div class=\"stat\">\ud83d\udcac <strong>412<\/strong> reviews<\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"toast\" id=\"toast\">\u2705 Prompt copied to clipboard!<\/div>\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 button.textContent = '\u2705 Copied!';\n button.classList.add('copied');\n toast.classList.add('show');\n setTimeout(() => {\n button.textContent = '\ud83d\udcdd Copy Prompt';\n button.classList.remove('copied');\n toast.classList.remove('show');\n }, 3000);\n });\n }\n <\/script>\n<\/body>\n<\/html>\n\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>Comparison Chart Design – AiPro Institute\u2122 Prompt Library AiPro Institute\u2122 Comparison Chart Design Create clear, scannable comparison charts that help audiences make informed decisions by visualizing feature differences, pricing tiers, and product options side-by-side \ud83c\udfaf Beginner \u23f1\ufe0f 7-10 minutes \ud83d\udcb0 ~350 tokens \ud83c\udfa8 Data Visualization \ud83d\udee0\ufe0f Tool Compatibility \u2728 Model Agnostic GPT-4o Claude 3.5 Canva…<\/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":[129],"tags":[],"class_list":["post-4589","post","type-post","status-publish","format-standard","hentry","category-graphic-print-design"],"acf":[],"_links":{"self":[{"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/posts\/4589","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=4589"}],"version-history":[{"count":4,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/posts\/4589\/revisions"}],"predecessor-version":[{"id":4756,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/posts\/4589\/revisions\/4756"}],"wp:attachment":[{"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/media?parent=4589"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/categories?post=4589"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/tags?post=4589"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}