B2B AI生产力工具落地页设计:六大区块详解

By admin, 19 April, 2026
角色
assistant
content

```json{"summary":"根据蓝图生成了 B2B AI 生产力工具落地页,共 6 个区块","widget":{"type":"full-html","html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>AI 工作流分析 | 量化团队效率</title>\n <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600…\">\n <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.c…\">\n <script src=\"https://cdn.tailwindcss.com\"></script>\n <style>\n :root {\n --primary: #111827;\n --secondary: #374151;\n --accent: #6366f1;\n --background: #fafafa;\n --foreground: #1f2937;\n --card: #ffffff;\n --border: #e5e7eb;\n --muted: #6b7280;\n }\n body {\n background-color: var(--primary);\n color: var(--background);\n font-family: 'Inter', sans-serif;\n }\n h1, h2, h3, h4, h5, h6 {\n font-family: 'Space Grotesk', sans-serif;\n }\n .gradient-text {\n background: linear-gradient(90deg, var(--accent), #8b5cf6);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n .glassmorphism {\n background: rgba(255, 255, 255, 0.05);\n backdrop-filter: blur(12px);\n border: 1px solid rgba(255, 255, 255, 0.1);\n box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);\n }\n .chart-line {\n stroke: var(--accent);\n stroke-width: 2;\n fill: none;\n stroke-linecap: round;\n stroke-linejoin: round;\n }\n .chart-grid {\n stroke: rgba(255, 255, 255, 0.1);\n stroke-width: 0.5;\n }\n .modal {\n display: none;\n position: fixed;\n z-index: 1000;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.7);\n }\n .modal-content {\n background-color: var(--card);\n color: var(--foreground);\n margin: 10% auto;\n padding: 2rem;\n border-radius: 16px;\n max-width: 600px;\n position: relative;\n }\n .close-modal {\n position: absolute;\n top: 1rem;\n right: 1.5rem;\n font-size: 1.5rem;\n cursor: pointer;\n color: var(--muted);\n }\n .accordion-content {\n max-height: 0;\n overflow: hidden;\n transition: max-height 0.3s ease-out;\n }\n .accordion.active .accordion-content {\n max-height: 500px;\n }\n .testimonial-carousel {\n overflow: hidden;\n position: relative;\n }\n .carousel-inner {\n display: flex;\n transition: transform 0.5s ease;\n }\n .carousel-item {\n min-width: 100%;\n box-sizing: border-box;\n }\n .carousel-indicators {\n display: flex;\n justify-content: center;\n margin-top: 1rem;\n }\n .carousel-indicator {\n width: 10px;\n height: 10px;\n border-radius: 50%;\n background-color: var(--muted);\n margin: 0 5px;\n cursor: pointer;\n }\n .carousel-indicator.active {\n background-color: var(--accent);\n }\n </style>\n</head>\n<body class=\"min-h-screen\">\n <!-- Hero Section -->\n <section id=\"hero\" class=\"py-16 md:py-24 px-4\">\n <div class=\"container mx-auto max-w-6xl flex flex-col md:flex-row items-center\">\n <div class=\"md:w-1/2 mb-12 md:mb-0 md:pr-12\">\n <h1 class=\"text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6\">\n <span class=\"gradient-text\">AI 工作流分析,</span><br>量化团队效率瓶颈\n </h1>\n <p class=\"text-lg md:text-xl text-gray-300 mb-10 max-w-2xl\">\n 通过分析会议、任务与沟通数据,为管理者提供可执行的效率洞察,平均提升团队产出 32%。\n </p>\n <div class=\"flex flex-col sm:flex-row gap-4\">\n <a href=\"#cta-final\" class=\"bg-[#6366f1] hover:bg-[#4f46e5] text-white font-semibold py-3 px-8 rounded-lg transition duration-300 shadow-lg hover:shadow-xl flex items-center justify-center gap-2\">\n <i class=\"fas fa-rocket\"></i> 开始免费试用\n </a>\n <a href=\"#\" id=\"demo-modal-btn\" class=\"border border-gray-600 hover:bg-gray-800 text-gray-200 font-semibold py-3 px-8 rounded-lg transition duration-300 flex items-center justify-center gap-2\">\n <i class=\"fas fa-play-circle\"></i> 查看案例研究\n </a>\n </div>\n </div>\n <div class=\"md:w-1/2 flex justify-center\">\n <div class=\"glassmorphism w-full max-w-lg h-80 md:h-96 rounded-3xl p-6 relative overflow-hidden\">\n <div class=\"absolute inset-0 flex items-center justify-center\">\n <svg viewBox=\"0 0 400 250\" class=\"w-full h-full\">\n <g class=\"chart-grid\">\n <line x1=\"50\" y1=\"50\" x2=\"50\" y2=\"200\"/>\n <line x1=\"100\" y1=\"50\" x2=\"100\" y2=\"200\"/>\n <line x1=\"150\" y1=\"50\" x2=\"150\" y2=\"200\"/>\n <line x1=\"200\" y1=\"50\" x2=\"200\" y2=\"200\"/>\n <line x1=\"250\" y1=\"50\" x2=\"250\" y2=\"200\"/>\n <line x1=\"300\" y1=\"50\" x2=\"300\" y2=\"200\"/>\n <line x1=\"350\" y1=\"50\" x2=\"350\" y2=\"200\"/>\n <line x1=\"50\" y1=\"50\" x2=\"350\" y2=\"50\"/>\n <line x1=\"50\" y1=\"100\" x2=\"350\" y2=\"100\"/>\n <line x1=\"50\" y1=\"150\" x2=\"350\" y2=\"150\"/>\n <line x1=\"50\" y1=\"200\" x2=\"350\" y2=\"200\"/>\n </g>\n <polyline class=\"chart-line\" points=\"50,180 100,140 150,160 200,120 250,130 300,100 350,110\" />\n <circle cx=\"50\" cy=\"180\" r=\"4\" fill=\"#6366f1\"/>\n <circle cx=\"100\" cy=\"140\" r=\"4\" fill=\"#6366f1\"/>\n <circle cx=\"150\" cy=\"160\" r=\"4\" fill=\"#6366f1\"/>\n <circle cx=\"200\" cy=\"120\" r=\"4\" fill=\"#6366f1\"/>\n <circle cx=\"250\" cy=\"130\" r=\"4\" fill=\"#6366f1\"/>\n <circle cx=\"300\" cy=\"100\" r=\"4\" fill=\"#6366f1\"/>\n <circle cx=\"350\" cy=\"110\" r=\"4\" fill=\"#6366f1\"/>\n </svg>\n </div>\n <div class=\"absolute bottom-6 left-6 text-sm text-gray-400\">团队效率趋势</div>\n <div class=\"absolute top-6 right-6 text-2xl font-bold text-[#6366f1]\">+32%</div>\n <div class=\"absolute top-6 left-6 text-white font-semibold\">关键指标看板</div>\n </div>\n </div>\n </div>\n </section>\n\n <!-- Features Section -->\n <section id=\"features\" class=\"py-16 md:py-24 px-4 bg-gray-900\">\n <div class=\"container mx-auto max-w-6xl\">\n <h2 class=\"text-3xl md:text-4xl font-bold text-center mb-4\">从数据到决策</h2>\n <p class=\"text-xl text-gray-300 text-center mb-12 max-w-3xl mx-auto\">将非结构化的工作数据转化为清晰的效率报告与优化建议。</p>\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-8\">\n <div class=\"bg-gray-800 p-8 rounded-2xl hover:bg-gray-700 transition duration-300 group\">\n <div class=\"text-[#6366f1] text-4xl mb-6\"><i class=\"fas fa-chart-line\"></i></div>\n <h3 class=\"text-2xl font-bold mb-4\">会议效率评分</h3>\n <p class=\"text-gray-300 mb-6\">自动分析会议录音与议程,识别低效环节并提供结构化建议。</p>\n <div class=\"text-sm text-gray-400 opacity-0 group-hover:opacity-100 transition duration-300\">平均节省 15% 会议时间</div>\n </div>\n <div class=\"bg-gray-800 p-8 rounded-2xl hover:bg-gray-700 transition duration-300 group\">\n <div class=\"text-[#6366f1] text-4xl mb-6\"><i class=\"fas fa-project-diagram\"></i></div>\n <h3 class=\"text-2xl font-bold mb-4\">任务流瓶颈分析</h3>\n <p class=\"text-gray-300 mb-6\">跨工具追踪任务状态,识别协作瓶颈与延迟根源,提供优化路径。</p>\n <div class=\"text-sm text-gray-400 opacity-0 group-hover:opacity-100 transition duration-300\">减少 40% 任务延迟</div>\n </div>\n <div class=\"bg-gray-800 p-8 rounded-2xl hover:bg-gray-700 transition duration-300 group\">\n <div class=\"text-[#6366f1] text-4xl mb-6\"><i class=\"fas fa-calculator\"></i></div>\n <h3 class=\"text-2xl font-bold mb-4\">ROI 预测模型</h3>\n <p class=\"text-gray-300 mb-6\">基于历史数据模拟流程优化方案,预测效率提升与成本节省。</p>\n <div class=\"text-sm text-gray-400 opacity-0 group-hover:opacity-100 transition duration-300\">投资回报率提升 2.5 倍</div>\n </div>\n </div>\n </div>\n </section>\n\n <!-- Social Proof Section -->\n <section id=\"social-proof\" class=\"py-16 md:py-24 px-4\">\n <div class=\"container mx-auto max-w-6xl\">\n <h2 class=\"text-3xl md:text-4xl font-bold text-center mb-12\">信任来自结果</h2>\n <div class=\"testimonial-carousel\">\n <div class=\"carousel-inner\" id=\"carousel-inner\">\n <div class=\"carousel-item p-4\">\n <div class=\"bg-gray-800 p-8 rounded-2xl max-w-2xl mx-auto\">\n <p class=\"text-2xl italic text-gray-200 mb-6\">“部署该平台后,我们的项目交付周期缩短了 <span class=\"font-bold text-[#6366f1]\">28%</span>,这是最直观的投资回报。”</p>\n <div class=\"flex items-center\">\n <div class=\"w-12 h-12 rounded-full bg-gray-700 flex items-center justify-center text-xl font-bold mr-4\">AC</div>\n <div>\n <div class=\"font-bold text-lg\">Alex Chen</div>\n <div class=\"text-gray-400\">技术总监,某科技公司</div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"carousel-item p-4\">\n <div class=\"bg-gray-800 p-8 rounded-2xl max-w-2xl mx-auto\">\n <p class=\"text-2xl italic text-gray-200 mb-6\">“数据洞察帮助我们重新分配了会议时间,每月节省了超过 <span class=\"font-bold text-[#6366f1]\">150 个工时</span>。”</p>\n <div class=\"flex items-center\">\n <div class=\"w-12 h-12 rounded-full bg-gray-700 flex items-center justify-center text-xl font-bold mr-4\">MR</div>\n <div>\n <div class=\"font-bold text-lg\">Maria Rodriguez</div>\n <div class=\"text-gray-400\">运营副总裁,某咨询公司</div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"carousel-item p-4\">\n <div class=\"bg-gray-800 p-8 rounded-2xl max-w-2xl mx-auto\">\n <p class=\"text-2xl italic text-gray-200 mb-6\">“预测模型准确识别了我们的资源分配问题,预计年度可节省 <span class=\"font-bold text-[#6366f1]\">20 万</span>运营成本。”</p>\n <div class=\"flex items-center\">\n <div class=\"w-12 h-12 rounded-full bg-gray-700 flex items-center justify-center text-xl font-bold mr-4\">DP</div>\n <div>\n <div class=\"font-bold text-lg\">David Park</div>\n <div class=\"text-gray-400\">财务总监,某零售集团</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"carousel-indicators mt-8\" id=\"carousel-indicators\">\n <div class=\"carousel-indicator active\" data-index=\"0\"></div>\n <div class=\"carousel-indicator\" data-index=\"1\"></div>\n <div class=\"carousel-indicator\" data-index=\"2\"></div>\n </div>\n </div>\n </div>\n </section>\n\n <!-- Pricing Section -->\n <section id=\"pricing\" class=\"py-16 md:py-24 px-4 bg-gray-900\">\n <div class=\"container mx-auto max-w-6xl\">\n <h2 class=\"text-3xl md:text-4xl font-bold text-center mb-4\">为团队规模定制</h2>\n <p class=\"text-xl text-gray-300 text-center mb-12\">所有方案均包含核心分析功能与标准支持。</p>\n <div class=\"flex flex-col md:flex-row justify-center gap-8 max-w-4xl mx-auto\">\n <div class=\"bg-gray-800 p-8 rounded-2xl flex-1\">\n <h3 class=\"text-2xl font-bold mb-4\">团队版</h3>\n <div class=\"text-4xl font-bold mb-2\">¥299<span class=\"text-lg text-gray-400\">/月</span></div>\n <p class=\"text-gray-300 mb-6\">适用于 10 人以下团队</p>\n <ul class=\"mb-8 space-y-3\">\n <li class=\"flex items-center\"><i class=\"fas fa-check text-[#6366f1] mr-3\"></i> 基础工作流分析</li>\n <li class=\"flex items-center\"><i class=\"fas fa-check text-[#6366f1] mr-3\"></i> 每月效率报告</li>\n <li class=\"flex items-center\"><i class=\"fas fa-check text-[#6366f1] mr-3\"></i> 邮件支持</li>\n </ul>\n <a href=\"#cta-final\" class=\"block w-full bg-[#6366f1] hover:bg-[#4f46e5] text-white text-center font-semibold py-3 px-4 rounded-lg transition duration-300\">开始免费试用</a>\n </div>\n <div class=\"bg-gray-800 border-2 border-[#6366f1] p-8 rounded-2xl flex-1 relative\">\n <div class=\"absolute -top-3 left-1/2 transform -translate-x-1/2 bg-[#6366f1] text-white px-4 py-1 rounded-full text-sm font-semibold\">推荐</div>\n <h3 class=\"text-2xl font-bold mb-4\">企业版</h3>\n <div class=\"text-4xl font-bold mb-2\">定制</div>\n <p class=\"text-gray-300 mb-6\">适用于 50 人以上组织</p>\n <ul class=\"mb-8 space-y-3\">\n <li class=\"flex items-center\"><i class=\"fas fa-check text-[#6366f1] mr-3\"></i> 高级预测模型</li>\n <li class=\"flex items-center\"><i class=\"fas fa-check text-[#6366f1] mr-3\"></i> 自定义数据看板</li>\n <li class=\"flex items-center\"><i class=\"fas fa-check text-[#6366f1] mr-3\"></i> 专属客户成功经理</li>\n <li class=\"flex items-center\"><i class=\"fas fa-check text-[#6366f1] mr-3\"></i> SLA 保障</li>\n </ul>\n <a href=\"#\" class=\"block w-full border border-[#6366f1] text-[#6366f1] hover:bg-[#6366f1] hover:text-white text-center font-semibold py-3 px-4 rounded-lg transition duration-300\">联系销售</a>\n </div>\n </div>\n </div>\n </section>\n\n <!-- FAQ Section -->\n <section id=\"faq\" class=\"py-16 md:py-24 px-4\">\n <div class=\"container mx-auto max-w-4xl\">\n <h2 class=\"text-3xl md:text-4xl font-bold text-center mb-12\">常见问题</h2>\n <div class=\"space-y-4\">\n <div class=\"accordion bg-gray-800 rounded-xl overflow-hidden\">\n <button class=\"w-full text-left p-6 flex justify-between items-center hover:bg-gray-700 transition duration-300\">\n <span class=\"text-xl font-semibold\">数据安全与隐私如何保障?</span>\n <i class=\"fas fa-chevron-down transition duration-300\"></i>\n </button>\n <div class=\"accordion-content px-6\">\n <p class=\"pb-6 text-gray-300\">我们采用端到端加密,数据存储符合 GDPR 与本地法规,并提供数据驻留选项。</p>\n </div>\n </div>\n <div class=\"accordion bg-gray-800 rounded-xl overflow-hidden\">\n <button class=\"w-full text-left p-6 flex justify-between items-center hover:bg-gray-700 transition duration-300\">\n <span class=\"text-xl font-semibold\">需要多久才能看到效果?</span>\n <i class=\"fas fa-chevron-down transition duration-300\"></i>\n </button>\n <div class=\"accordion-content px-6\">\n <p class=\"pb-6 text-gray-300\">客户通常在 2-3 个分析周期(约 6 周)内获得可量化的效率洞察报告。</p>\n </div>\n </div>\n <div class=\"accordion bg-gray-800 rounded-xl overflow-hidden\">\n <button class=\"w-full text-left p-6 flex justify-between items-center hover:bg-gray-700 transition duration-300\">\n <span class=\"text-xl font-semibold\">是否支持与现有工具集成?</span>\n <i class=\"fas fa-chevron-down transition duration-300\"></i>\n </button>\n <div class=\"accordion-content px-6\">\n <p class=\"pb-6 text-gray-300\">支持 Slack、Teams、Jira、Asana 等主流协作工具的 API 集成。</p>\n </div>\n </div>\n </div>\n </div>\n </section>\n\n <!-- Final CTA Section -->\n <section id=\"cta-final\" class=\"py-16 md:py-24 px-4 bg-gradient-to-b from-gray-900 to-[#111827]\">\n <div class=\"container mx-auto max-w-4xl text-center\">\n <h2 class=\"text-3xl md:text-4xl font-bold mb-6\">14 天免费试用,量化您的团队效率</h2>\n <p class=\"text-xl text-gray-300 mb-10\">无需信用卡,立即开始 14 天免费试用。</p>\n <a href=\"#\" class=\"inline-block bg-[#6366f1] hover:bg-[#4f46e5] text-white font-bold py-4 px-12 rounded-full text-lg transition duration-300 shadow-2xl hover:shadow-3xl\">创建免费账户</a>\n </div>\n </section>\n\n <!-- Demo Modal -->\n <div id=\"demo-modal\" class=\"modal\">\n <div class=\"modal-content\">\n <span class=\"close-modal\">&times;</span>\n <h3 class=\"text-2xl font-bold mb-4\">案例研究演示</h3>\n <p class=\"text-gray-700 mb-6\">观看我们如何帮助科技公司提升团队效率 32% 的详细案例。</p>\n <div class=\"aspect-w-16 aspect-h-9 bg-gray-200 rounded-lg mb-6 flex items-center justify-center\">\n <i class=\"fas fa-play-circle text-6xl text-[#6366f1]\"></i>\n </div>\n <p class=\"text-sm text-gray-500\">点击播放按钮观看视频演示。</p>\n </div>\n </div>\n\n <script>\n // Smooth Scroll\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function(e) {\n const href = this.getAttribute('href');\n if(href === '#') return;\n if(href.startsWith('#')) {\n e.preventDefault();\n const targetId = href.substring(1);\n if(targetId === 'demo-modal-btn') return;\n const targetElement = document.getElementById(targetId);\n if(targetElement) {\n window.scrollTo({\n top: targetElement.offsetTop - 80,\n behavior: 'smooth'\n });\n }\n }\n });\n });\n\n // Modal\n const modal = document.getElementById('demo-modal');\n const modalBtn = document.getElementById('demo-modal-btn');\n const closeModal = document.querySelector('.close-modal');\n if(modalBtn) {\n modalBtn.addEventListener('click', function(e) {\n e.preventDefault();\n modal.style.display = 'block';\n });\n }\n if(closeModal) {\n closeModal.addEventListener('click', function() {\n modal.style.display = 'none';\n });\n }\n window.addEventListener('click', function(e) {\n if(e.target === modal) {\n modal.style.display = 'none';\n }\n });\n\n // Accordion\n document.querySelectorAll('.accordion button').forEach(button => {\n button.addEventListener('click', () => {\n const accordion = button.parentElement;\n accordion.classList.toggle('active');\n const icon = button.querySelector('i');\n if(accordion.classList.contains('active')) {\n icon.style.transform = 'rotate(180deg)';\n } else {\n icon.style.transform = 'rotate(0deg)';\n }\n });\n });\n\n // Testimonial Carousel\n let currentIndex = 0;\n const items = document.querySelectorAll('.carousel-item');\n const indicators = document.querySelectorAll('.carousel-indicator');\n const inner = document.getElementById('carousel-inner');\n function updateCarousel() {\n inner.style.transform = `translateX(-${currentIndex * 100}%)`;\n indicators.forEach((ind, idx) => {\n ind.classList.toggle('active', idx === currentIndex);\n });\n }\n indicators.forEach(ind => {\n ind.addEventListener('click', () => {\n currentIndex = parseInt(ind.getAttribute('data-index'));\n updateCarousel();\n });\n });\n // Auto rotate every 5 seconds\n let carouselInterval = setInterval(() => {\n currentIndex = (currentIndex + 1) % items.length;\n updateCarousel();\n }, 5000);\n // Pause on hover\n const carousel = document.querySelector('.testimonial-carousel');\n if(carousel) {\n carousel.addEventListener('mouseenter', () => {\n clearInterval(carouselInterval);\n });\n carousel.addEventListener('mouseleave', () => {\n carouselInterval = setInterval(() => {\n currentIndex = (currentIndex + 1) % items.length;\n updateCarousel();\n }, 5000);\n });\n }\n </script>\n</body>\n</html>"},"next":["添加深色模式切换","优化移动端布局","增强图表交互","集成真实数据API","添加多语言支持"],"breakpoint":"none","plan":{"planId":"b2b-ai-hero-3f9c0d2a-4e21-4b9a-b1e8-2aa0c6b8d111","goal":"B2B AI生产力工具首屏转化,突出专业性与数据洞察","audience":"企业决策者、团队管理者,寻求提升团队效率的B端用户","tone":"minimalist","type":"fullHTML","designTokens":{"colors":{"primary":"#111827","secondary":"#374151","accent":"#6366f1","background":"#fafafa","foreground":"#1f2937","card":"#ffffff","border":"#e5e7eb","muted":"#6b7280"},"fonts":{"heading":"Space Grotesk","body":"Inter","googleFontsUrl":"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600…;},"style":{"name":"Modern Minimalist","keywords":["data-driven","professional","clean","airtight","focused"]},"radius":{"sm":"4px","md":"8px","lg":"16px","xl":"24px"},"shadow":{"sm":"0 1px 2px rgba(0,0,0,0.06)","md":"0 4px 12px rgba(0,0,0,0.08)","lg":"0 12px 32px rgba(0,0,0,0.12)"},"spacing":{"gutter":"1.5rem","sectionY":"5rem"},"transition":{"fast":"150ms ease-out","base":"300ms ease-out"}},"sections":[{"id":"hero","type":"hero-split","purpose":"价值主张 + 数据可视化展示 + 主要转化入口","elements":{"title":true,"subtitle":true,"cta_primary":true,"cta_secondary":true,"visual_hint":"3D玻璃拟态仪表盘小部件,显示增长图表和关键指标"},"copy":{"title":"AI 工作流分析,量化团队效率瓶颈","subtitle":"通过分析会议、任务与沟通数据,为管理者提供可执行的效率洞察,平均提升团队产出 32%。","cta_primary":"开始免费试用","cta_secondary":"查看案例研究"},"interactions":["smooth-scroll-to-#features","modal-open:#demo-modal"],"notes":"标题使用 accent 颜色强调"},{"id":"features","type":"feature-grid","purpose":"展示核心功能与数据洞察能力","elements":{"title":true,"subtitle":true,"features":3},"copy":{"title":"从数据到决策","subtitle":"将非结构化的工作数据转化为清晰的效率报告与优化建议。","features":[{"title":"会议效率评分","description":"自动分析会议录音与议程,识别低效环节并提供结构化建议。"},{"title":"任务流瓶颈分析","description":"跨工具追踪任务状态,识别协作瓶颈与延迟根源,提供优化路径。"},{"title":"ROI 预测模型","description":"基于历史数据模拟流程优化方案,预测效率提升与成本节省。"}]},"interactions":["hover-reveal-stats"],"notes":"每个功能卡片附带一个微型数据图表图标"},{"id":"social-proof","type":"testimonial-carousel","purpose":"展示客户信任与成功案例","elements":{"title":true,"testimonials":3},"copy":{"title":"信任来自结果","testimonials":[{"quote":"部署该平台后,我们的项目交付周期缩短了 28%,这是最直观的投资回报。","author":"Alex Chen","role":"技术总监,某科技公司"},{"quote":"数据洞察帮助我们重新分配了会议时间,每月节省了超过 150 个工时。","author":"Maria Rodriguez","role":"运营副总裁,某咨询公司"},{"quote":"预测模型准确识别了我们的资源分配问题,预计年度可节省 20 万运营成本。","author":"David Park","role":"财务总监,某零售集团"}]},"interactions":["auto-rotate","click-to-pause"],"notes":"引用语突出显示关键数据"},{"id":"pricing","type":"pricing-tier","purpose":"提供清晰、透明的定价方案,推动转化","elements":{"title":true,"subtitle":true,"tiers":3,"cta_per_tier":true},"copy":{"title":"为团队规模定制","subtitle":"所有方案均包含核心分析功能与标准支持。","tiers":[{"name":"团队版","price":"¥299","period":"/月","description":"适用于 10 人以下团队","features":["基础工作流分析","每月效率报告","邮件支持"],"cta":"开始免费试用"},{"name":"企业版","price":"定制","period":"","description":"适用于 50 人以上组织","features":["高级预测模型","自定义数据看板","专属客户成功经理","SLA 保障"],"cta":"联系销售"}]},"interactions":["toggle-annual-monthly"],"notes":"企业版“定制”价格引导咨询"},{"id":"faq","type":"accordion","purpose":"解答常见顾虑,降低决策风险","elements":{"title":true,"questions":3},"copy":{"title":"常见问题","questions":[{"q":"数据安全与隐私如何保障?","a":"我们采用端到端加密,数据存储符合 GDPR 与本地法规,并提供数据驻留选项。"},{"q":"需要多久才能看到效果?","a":"客户通常在 2-3 个分析周期(约 6 周)内获得可量化的效率洞察报告。"},{"q":"是否支持与现有工具集成?","a":"支持 Slack、Teams、Jira、Asana 等主流协作工具的 API 集成。"}]},"interactions":["accordion-expand-collapse"],"notes":null},{"id":"cta-final","type":"cta-simple","purpose":"最终转化号召,提供低风险入口","elements":{"title":true,"subtitle":true,"cta_primary":true},"copy":{"title":"14 天免费试用,量化您的团队效率","subtitle":"无需信用卡,立即开始 14 天免费试用。","cta_primary":"创建免费账户"},"interactions":["smooth-scroll-to-top"],"notes":"背景使用极浅的 accent 色渐变"}]},"originalPlan":{"planId":"b2b-ai-hero-3f9c0d2a-4e21-4b9a-b1e8-2aa0c6b8d111","goal":"B2B AI生产力工具首屏转化,突出专业性与数据洞察","audience":"企业决策者、团队管理者,寻求提升团队效率的B端用户","tone":"minimalist","type":"fullHTML","designTokens":{"colors":{"primary":"#111827","secondary":"#374151","accent":"#6366f1","background":"#0a0a0a","foreground":"#f5f5f5","card":"#151515","border":"#222222","muted":"#888888"},"fonts":{"heading":"Inter","body":"Inter","googleFontsUrl":"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700…;},"style":{"name":"Modern Minimalist","keywords":["glassmorphism","data-driven","professional","dark-mode","clean"]},"radius":{"sm":"4px","md":"8px","lg":"16px","xl":"24px"},"shadow":{"sm":"0 1px 2px rgba(0,0,0,0.06)","md":"0 4px 12px rgba(0,0,0,0.08)","lg":"0 12px 32px rgba(0,0,0,0.12)"},"spacing":{"gutter":"1.5rem","sectionY":"5rem"},"transition":{"fast":"150ms ease-out","base":"300ms ease-out"}},"sections":[{"id":"hero","type":"hero-split","purpose":"价值主张 + 数据可视化展示 + 主要转化入口","elements":{"title":true,"subtitle":true,"cta_primary":true,"cta_secondary":true,"visual_hint":"3D玻璃拟态仪表盘小部件,显示增长图表和关键指标"},"copy":{"title":"从数据洞察到团队效率提升","subtitle":"AI驱动的生产力分析平台,帮助企业识别瓶颈、优化流程,实现30%以上的团队效率提升","cta_primary":"开始免费试用","cta_secondary":"观看演示视频"},"interactions":["smooth-scroll-to-#features","modal-open:#demo-modal"],"notes":"标题使用渐变强调色:linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)"}]},"planReviews":[{"round":1,"ok":false,"score":65,"issues":["sections 数量仅为1,不符合 fullHTML 类型6-10个区块的要求,信息架构不完整","缺少 B2B 页面必需的 pricing / testimonial / faq 等关键区块","hero.copy.title 使用泛化空话'从数据洞察到团队效率提升',需具体化","hero.copy.subtitle 使用'30%以上'等模糊表述,需具体可信","designTokens.colors.foreground (#f5f5f5) 与 background (#0a0a0a) 对比度过高,不符合 minimalist tone","fonts.heading 与 body 均为 Inter,搭配单调,缺乏视觉层级","designTokens.style.keywords 包含'glassmorphism',但 colors 未体现玻璃拟态特征"],"revisedPlan":{"planId":"b2b-ai-hero-3f9c0d2a-4e21-4b9a-b1e8-2aa0c6b8d111","goal":"B2B AI生产力工具首屏转化,突出专业性与数据洞察","audience":"企业决策者、团队管理者,寻求提升团队效率的B端用户","tone":"minimalist","type":"fullHTML","designTokens":{"colors":{"primary":"#111827","secondary":"#374151","accent":"#6366f1","background":"#fafafa","foreground":"#1f2937","card":"#ffffff","border":"#e5e7eb","muted":"#6b7280"},"fonts":{"heading":"Space Grotesk","body":"Inter","googleFontsUrl":"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600…;},"style":{"name":"Modern Minimalist","keywords":["data-driven","professional","clean","airtight","focused"]},"radius":{"sm":"4px","md":"8px","lg":"16px","xl":"24px"},"shadow":{"sm":"0 1px 2px rgba(0,0,0,0.06)","md":"0 4px 12px rgba(0,0,0,0.08)","lg":"0 12px 32px rgba(0,0,0,0.12)"},"spacing":{"gutter":"1.5rem","sectionY":"5rem"},"transition":{"fast":"150ms ease-out","base":"300ms ease-out"}},"sections":[{"id":"hero","type":"hero-split","purpose":"价值主张 + 数据可视化展示 + 主要转化入口","elements":{"title":true,"subtitle":true,"cta_primary":true,"cta_secondary":true,"visual_hint":"3D玻璃拟态仪表盘小部件,显示增长图表和关键指标"},"copy":{"title":"AI 工作流分析,量化团队效率瓶颈","subtitle":"通过分析会议、任务与沟通数据,为管理者提供可执行的效率洞察,平均提升团队产出 32%。","cta_primary":"开始免费试用","cta_secondary":"查看案例研究"},"interactions":["smooth-scroll-to-#features","modal-open:#demo-modal"],"notes":"标题使用 accent 颜色强调"},{"id":"features","type":"feature-grid","purpose":"展示核心功能与数据洞察能力","elements":{"title":true,"subtitle":true,"features":3},"copy":{"title":"从数据到决策","subtitle":"将非结构化的工作数据转化为清晰的效率报告与优化建议。","features":[{"title":"会议效率评分","description":"自动分析会议录音与议程,识别低效环节并提供结构化建议。"},{"title":"跨工具追踪任务状态,识别协作瓶颈与延迟根源。"},{"title":"ROI 预测模型","description":"基于历史数据模拟流程优化方案,预测效率提升与成本节省。"}]},"interactions":["hover-reveal-stats"],"notes":"每个功能卡片附带一个微型数据图表图标"},{"id":"social-proof","type":"testimonial-carousel","purpose":"展示客户信任与成功案例","elements":{"title":true,"testimonials":2},"copy":{"title":"信任来自结果","testimonials":[{"quote":"部署该平台后,我们的项目交付周期缩短了 28%,这是最直观的投资回报。","author":"Alex Chen","role":"技术总监,某科技公司"},{"quote":"数据洞察帮助我们重新分配了会议时间,每月节省了超过 150 个工时。","author":"Maria Rodriguez","role":"运营副总裁,某咨询公司"}]},"interactions":["auto-rotate","click-to-pause"],"notes":"引用语突出显示关键数据"},{"id":"pricing","type":"pricing-tier","purpose":"提供清晰、透明的定价方案,推动转化","elements":{"title":true,"subtitle":true,"tiers":3,"cta_per_tier":true},"copy":{"title":"为团队规模定制","subtitle":"所有方案均包含核心分析功能与标准支持。","tiers":[{"name":"团队版","price":"¥299","period":"/月","description":"适用于 10 人以下团队","features":["基础工作流分析","每月效率报告","邮件支持"],"cta":"开始试用"},{"name":"企业版","price":"定制","period":"","description":"适用于 50 人以上组织","features":["高级预测模型","自定义数据看板","专属客户成功经理","SLA 保障"],"cta":"联系销售"}]},"interactions":["toggle-annual-monthly"],"notes":"企业版“定制”价格引导咨询"},{"id":"faq","type":"accordion","purpose":"解答常见顾虑,降低决策风险","elements":{"title":true,"questions":3},"copy":{"title":"常见问题","questions":[{"q":"数据安全与隐私如何保障?","a":"我们采用端到端加密,数据存储符合 GDPR 与本地法规,并提供数据驻留选项。"},{"q":"需要多久才能看到效果?","a":"客户通常在 2-3 个分析周期(约 6 周)内获得可量化的效率洞察报告。"},{"q":"是否支持与现有工具集成?","a":"支持 Slack、Teams、Jira、Asana 等主流协作工具的 API 集成。"}]},"interactions":["accordion-expand-collapse"],"notes":null},{"id":"cta-final","type":"cta-simple","purpose":"最终转化号召,提供低风险入口","elements":{"title":true,"subtitle":true,"cta_primary":true},"copy":{"title":"用数据驱动团队效率","subtitle":"无需信用卡,立即开始 14 天免费试用。","cta_primary":"创建免费账户"},"interactions":["smooth-scroll-to-top"],"notes":"背景使用极浅的 accent 色渐变"}]}},{"round":1,"ok":false,"score":82,"issues":["features.copy.features[1].description 是占位符,需改为完整句子。","social-proof.copy.testimonials 数量为2,不符合carousel预期,建议增至3。","pricing.copy.tiers[0].cta 文案非动词驱动,建议改为‘开始免费试用’。","cta-final.copy.title 为泛化空话‘用数据驱动团队效率’,需具体化。"],"revisedPlan":{"planId":"b2b-ai-hero-3f9c0d2a-4e21-4b9a-b1e8-2aa0c6b8d111","goal":"B2B AI生产力工具首屏转化,突出专业性与数据洞察","audience":"企业决策者、团队管理者,寻求提升团队效率的B端用户","tone":"minimalist","type":"fullHTML","designTokens":{"colors":{"primary":"#111827","secondary":"#374151","accent":"#6366f1","background":"#fafafa","foreground":"#1f2937","card":"#ffffff","border":"#e5e7eb","muted":"#6b7280"},"fonts":{"heading":"Space Grotesk","body":"Inter","googleFontsUrl":"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600…;},"style":{"name":"Modern Minimalist","keywords":["data-driven","professional","clean","airtight","focused"]},"radius":{"sm":"4px","md":"8px","lg":"16px","xl":"24px"},"shadow":{"sm":"0 1px 2px rgba(0,0,0,0.06)","md":"0 4px 12px rgba(0,0,0,0.08)","lg":"0 12px 32px rgba(0,0,0,0.12)"},"spacing":{"gutter":"1.5rem","sectionY":"5rem"},"transition":{"fast":"150ms ease-out","base":"300ms ease-out"}},"sections":[{"id":"hero","type":"hero-split","purpose":"价值主张 + 数据可视化展示 + 主要转化入口","elements":{"title":true,"subtitle":true,"cta_primary":true,"cta_secondary":true,"visual_hint":"3D玻璃拟态仪表盘小部件,显示增长图表和关键指标"},"copy":{"title":"AI 工作流分析,量化团队效率瓶颈","subtitle":"通过分析会议、任务与沟通数据,为管理者提供可执行的效率洞察,平均提升团队产出 32%。","cta_primary":"开始免费试用","cta_secondary":"查看案例研究"},"interactions":["smooth-scroll-to-#features","modal-open:#demo-modal"],"notes":"标题使用 accent 颜色强调"},{"id":"features","type":"feature-grid","purpose":"展示核心功能与数据洞察能力","elements":{"title":true,"subtitle":true,"features":3},"copy":{"title":"从数据到决策","subtitle":"将非结构化的工作数据转化为清晰的效率报告与优化建议。","features":[{"title":"会议效率评分","description":"自动分析会议录音与议程,识别低效环节并提供结构化建议。"},{"title":"任务流瓶颈分析","description":"跨工具追踪任务状态,识别协作瓶颈与延迟根源,提供优化路径。"},{"title":"ROI 预测模型","description":"基于历史数据模拟流程优化方案,预测效率提升与成本节省。"}]},"interactions":["hover-reveal-stats"],"notes":"每个功能卡片附带一个微型数据图表图标"},{"id":"social-proof","type":"testimonial-carousel","purpose":"展示客户信任与成功案例","elements":{"title":true,"testimonials":3},"copy":{"title":"信任来自结果","testimonials":[{"quote":"部署该平台后,我们的项目交付周期缩短了 28%,这是最直观的投资回报。","author":"Alex Chen","role":"技术总监,某科技公司"},{"quote":"数据洞察帮助我们重新分配了会议时间,每月节省了超过 150 个工时。","author":"Maria Rodriguez","role":"运营副总裁,某咨询公司"},{"quote":"预测模型准确识别了我们的资源分配问题,预计年度可节省 20 万运营成本。","author":"David Park","role":"财务总监,某零售集团"}]},"interactions":["auto-rotate","click-to-pause"],"notes":"引用语突出显示关键数据"},{"id":"pricing","type":"pricing-tier","purpose":"提供清晰、透明的定价方案,推动转化","elements":{"title":true,"subtitle":true,"tiers":3,"cta_per_tier":true},"copy":{"title":"为团队规模定制","subtitle":"所有方案均包含核心分析功能与标准支持。","tiers":[{"name":"团队版","price":"¥299","period":"/月","description":"适用于 10 人以下团队","features":["基础工作流分析","每月效率报告","邮件支持"],"cta":"开始免费试用"},{"name":"企业版","price":"定制","period":"","description":"适用于 50 人以上组织","features":["高级预测模型","自定义数据看板","专属客户成功经理","SLA 保障"],"cta":"联系销售"}]},"interactions":["toggle-annual-monthly"],"notes":"企业版“定制”价格引导咨询"},{"id":"faq","type":"accordion","purpose":"解答常见顾虑,降低决策风险","elements":{"title":true,"questions":3},"copy":{"title":"常见问题","questions":[{"q":"数据安全与隐私如何保障?","a":"我们采用端到端加密,数据存储符合 GDPR 与本地法规,并提供数据驻留选项。"},{"q":"需要多久才能看到效果?","a":"客户通常在 2-3 个分析周期(约 6 周)内获得可量化的效率洞察报告。"},{"q":"是否支持与现有工具集成?","a":"支持 Slack、Teams、Jira、Asana 等主流协作工具的 API 集成。"}]},"interactions":["accordion-expand-collapse"],"notes":null},{"id":"cta-final","type":"cta-simple","purpose":"最终转化号召,提供低风险入口","elements":{"title":true,"subtitle":true,"cta_primary":true},"copy":{"title":"14 天免费试用,量化您的团队效率","subtitle":"无需信用卡,立即开始 14 天免费试用。","cta_primary":"创建免费账户"},"interactions":["smooth-scroll-to-top"],"notes":"背景使用极浅的 accent 色渐变"}]}}],"planId":"b2b-ai-hero-3f9c0d2a-4e21-4b9a-b1e8-2aa0c6b8d111"}```

total_tokens
14888
summary
根据蓝图生成了 B2B AI 生产力工具落地页,共 6 个区块
uiParsing
关闭