蓝图生成B2B AI工具英雄区，集成玻璃态仪表板

By admin, 20 April, 2026

角色

assistant

content

```json{"summary":"基于蓝图生成B2B AI生产力工具英雄区，含玻璃态仪表板。","widget":{"type":"full-html","html":"<!DOCTYPE html>\n<html lang=\"zh-CN\" class=\"scroll-smooth\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>企业级 AI 生产力平台</title>\n \n <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600…\">\n \n <script src=\"https://unpkg.com/lucide@latest/dist/umd/lucide.js\"></script>\n \n <script src=\"https://cdn.tailwindcss.com\"></script>\n \n <link href=\"https://unpkg.com/aos@2.3.1/dist/aos.css\" rel=\"stylesheet\">\n <style>\n :root {\n --color-primary: #4f46e5;\n --color-secondary: #7c3aed;\n --color-accent: #06b6d4;\n --color-success: #10b981;\n --color-warning: #f59e0b;\n --color-danger: #ef4444;\n --color-info: #3b82f6;\n --color-background: #0f172a;\n --color-foreground: #ffffff;\n --color-card: #1e293b;\n --color-border: #334155;\n --color-muted: #94a3b8;\n }\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n body {\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n background-color: var(--color-background);\n color: var(--color-foreground);\n line-height: 1.6;\n overflow-x: hidden;\n }\n h1, h2, h3, h4, h5, h6 {\n font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n font-weight: 700;\n line-height: 1.1;\n }\n .gradient-text {\n background: linear-gradient(90deg, var(--color-primary), var(--color-accent));\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n }\n .glass-panel {\n background: rgba(30, 41, 59, 0.4);\n backdrop-filter: blur(12px);\n -webkit-backdrop-filter: blur(12px);\n border: 1px solid rgba(255, 255, 255, 0.08);\n box-shadow: 0 24px 64px rgba(0,0,0,.16);\n }\n .glass-panel::before {\n content: '';\n position: absolute;\n inset: 0;\n background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));\n border-radius: inherit;\n z-index: -1;\n }\n .metric-change {\n animation: pulse-subtle 2s ease-in-out infinite;\n }\n @keyframes pulse-subtle {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.7; }\n }\n .counter {\n font-variant-numeric: tabular-nums;\n }\n .scroll-trigger {\n opacity: 0;\n transform: translateY(30px);\n transition: opacity 0.8s ease-out, transform 0.8s ease-out;\n }\n .scroll-trigger.visible {\n opacity: 1;\n transform: translateY(0);\n }\n /* 响应式标题 */\n .hero-title {\n font-size: clamp(2rem, 3.5vw, 3rem);\n }\n .hero-subtitle {\n font-size: clamp(1rem, 1.5vw, 1.25rem);\n }\n /* 可访问性：聚焦环 */\n button:focus-visible, a:focus-visible {\n outline: 2px solid var(--color-accent);\n outline-offset: 2px;\n }\n </style>\n</head>\n<body class=\"min-h-screen flex flex-col justify-center items-center px-4 md:px-8\">\n \n <nav class=\"w-full max-w-[1200px] fixed top-0 z-50 glass-panel rounded-b-xl mt-0\">\n <div class=\"container mx-auto px-6 py-4 flex justify-between items-center\">\n <div class=\"text-xl font-bold gradient-text\">AIProd</div>\n <div class=\"hidden md:flex space-x-8\">\n <a href=\"#features\" class=\"text-sm font-medium hover:text-[var(--color-accent)] transition-colors duration-300\">功能</a>\n <a href=\"#pricing\" class=\"text-sm font-medium hover:text-[var(--color-accent)] transition-colors duration-300\">定价</a>\n <a href=\"#customers\" class=\"text-sm font-medium hover:text-[var(--color-accent)] transition-colors duration-300\">客户案例</a>\n <a href=\"#resources\" class=\"text-sm font-medium hover:text-[var(--color-accent)] transition-colors duration-300\">资源</a>\n </div>\n <button class=\"text-sm font-semibold px-4 py-2 rounded-lg bg-[var(--color-primary)] hover:bg-[#4338ca] active:translate-y-0 shadow-md hover:shadow-lg transition-all duration-300 min-h-[44px] flex items-center\">\n 登录控制台\n </button>\n </div>\n </nav>\n\n \n <main class=\"w-full max-w-[1200px] mt-24 flex flex-col lg:flex-row items-center justify-between gap-12 lg:gap-16 py-12\">\n \n <div class=\"flex-1 space-y-8 scroll-trigger\" id=\"hero-copy\">\n <h1 class=\"hero-title font-bold leading-tight\">\n 自动化重复性任务，\n <span class=\"gradient-text block\">释放团队创造力</span>\n </h1>\n <p class=\"hero-subtitle text-[var(--color-muted)] max-w-2xl\">\n 企业级 AI 生产力平台，通过智能自动化与深度数据分析，显著提升运营效率。\n </p>\n <div class=\"flex flex-col sm:flex-row gap-4 pt-4\">\n <button id=\"cta-primary\" class=\"px-8 py-4 rounded-lg bg-[var(--color-primary)] text-white font-semibold hover:bg-[#4338ca] hover:-translate-y-1 active:translate-y-0 shadow-lg hover:shadow-xl transition-all duration-300 flex items-center justify-center gap-2 min-h-[52px]\" aria-label=\"开始免费试用\">\n 免费开始试用\n <i data-lucide=\"arrow-right\" class=\"w-5 h-5\"></i>\n </button>\n <button id=\"cta-secondary\" class=\"px-8 py-4 rounded-lg border border-[var(--color-border)] text-[var(--color-foreground)] font-semibold hover:bg-[var(--color-card)] hover:border-[var(--color-accent)] transition-all duration-300 flex items-center justify-center gap-2 min-h-[52px]\" aria-label=\"观看产品演示视频\">\n <i data-lucide=\"play-circle\" class=\"w-5 h-5\"></i>\n 观看演示\n </button>\n </div>\n <div class=\"pt-6 flex items-center gap-4 text-sm text-[var(--color-muted)]\">\n <div class=\"flex -space-x-2\">\n <div class=\"w-8 h-8 rounded-full bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-accent)] border-2 border-[var(--color-background)]\"></div>\n <div class=\"w-8 h-8 rounded-full bg-gradient-to-br from-[var(--color-success)] to-[var(--color-accent)] border-2 border-[var(--color-background)]\"></div>\n <div class=\"w-8 h-8 rounded-full bg-gradient-to-br from-[var(--color-warning)] to-[var(--color-accent)] border-2 border-[var(--color-background)]\"></div>\n </div>\n <span>已被 2,500+ 企业团队信任</span>\n </div>\n </div>\n\n \n <div class=\"flex-1 w-full max-w-2xl scroll-trigger\" id=\"hero-widget\" style=\"transition-delay: 150ms\">\n <div class=\"glass-panel rounded-2xl p-6 md:p-8 relative overflow-hidden\">\n \n <div class=\"absolute top-0 right-0 w-64 h-64 bg-gradient-to-br from-[var(--color-primary)/20] to-transparent rounded-full -translate-y-1/2 translate-x-1/2 blur-3xl\"></div>\n <div class=\"relative z-10\">\n <div class=\"flex justify-between items-start mb-8\">\n <div>\n <h3 class=\"text-xl font-bold text-[var(--color-foreground)]\">实时绩效仪表板</h3>\n <p class=\"text-sm text-[var(--color-muted)] mt-1\">月度增长趋势</p>\n </div>\n <div class=\"text-xs px-3 py-1 rounded-full bg-[var(--color-success)/15] text-[var(--color-success)] border border-[var(--color-success)/30]\">\n 实时更新\n </div>\n </div>\n\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-4 mb-8\">\n \n <div class=\"bg-[var(--color-card)] rounded-xl p-4 border border-[var(--color-border)] hover:border-[var(--color-primary)/50] transition-colors duration-300\">\n <p class=\"text-sm text-[var(--color-muted)] mb-1\">自动化任务</p>\n <div class=\"flex items-end justify-between\">\n <p class=\"text-2xl font-bold counter\" data-target=\"2847\">0</p>\n <span class=\"text-sm font-semibold text-[var(--color-success)] metric-change flex items-center\">\n +12%\n <i data-lucide=\"trending-up\" class=\"w-4 h-4 ml-1\"></i>\n </span>\n </div>\n </div>\n \n <div class=\"bg-[var(--color-card)] rounded-xl p-4 border border-[var(--color-border)] hover:border-[var(--color-primary)/50] transition-colors duration-300\">\n <p class=\"text-sm text-[var(--color-muted)] mb-1\">节省时间</p>\n <div class=\"flex items-end justify-between\">\n <p class=\"text-2xl font-bold counter\" data-target=\"1240\">0</p><span class=\"text-lg font-bold\">h</span>\n <span class=\"text-sm font-semibold text-[var(--color-success)] metric-change flex items-center\">\n +18%\n <i data-lucide=\"trending-up\" class=\"w-4 h-4 ml-1\"></i>\n </span>\n </div>\n </div>\n \n <div class=\"bg-[var(--color-card)] rounded-xl p-4 border border-[var(--color-border)] hover:border-[var(--color-primary)/50] transition-colors duration-300\">\n <p class=\"text-sm text-[var(--color-muted)] mb-1\">团队效率</p>\n <div class=\"flex items-end justify-between\">\n <p class=\"text-2xl font-bold counter\" data-target=\"89\">0</p><span class=\"text-lg font-bold\">%</span>\n <span class=\"text-sm font-semibold text-[var(--color-success)] metric-change flex items-center\">\n +7%\n <i data-lucide=\"trending-up\" class=\"w-4 h-4 ml-1\"></i>\n </span>\n </div>\n </div>\n </div>\n\n \n <div class=\"bg-[var(--color-card)] rounded-xl p-4 border border-[var(--color-border)]\">\n <div class=\"h-48 relative\">\n \n <svg class=\"w-full h-full\" viewBox=\"0 0 400 160\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n \n <path d=\"M20 20 L20 140\" stroke=\"var(--color-border)\" stroke-width=\"1\" stroke-dasharray=\"2,2\"/>\n <path d=\"M20 140 L380 140\" stroke=\"var(--color-border)\" stroke-width=\"1\" stroke-dasharray=\"2,2\"/>\n \n <path id=\"growthLine\" d=\"M20 100 L80 80 L140 60 L200 90 L260 40 L320 70 L380 20\" stroke=\"url(#lineGradient)\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" fill=\"none\" stroke-dasharray=\"500\" stroke-dashoffset=\"500\">\n <animate attributeName=\"stroke-dashoffset\" from=\"500\" to=\"0\" dur=\"2s\" fill=\"freeze\" begin=\"0.5s\" />\n </path>\n \n <defs>\n <linearGradient id=\"lineGradient\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\n <stop offset=\"0%\" stop-color=\"var(--color-primary)\" />\n <stop offset=\"100%\" stop-color=\"var(--color-accent)\" />\n </linearGradient>\n </defs>\n </svg>\n </div>\n <div class=\"flex justify-between text-xs text-[var(--color-muted)] mt-2 px-2\">\n <span>1月</span>\n <span>2月</span>\n <span>3月</span>\n <span>4月</span>\n <span>5月</span>\n <span>6月</span>\n <span>7月</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n </main>\n\n \n <section id=\"demo\" class=\"w-full max-w-[1200px] mt-32 mb-24 text-center py-16 glass-panel rounded-3xl\">\n <h2 class=\"text-3xl font-bold mb-4\">观看平台深度演示</h2>\n <p class=\"text-[var(--color-muted)] max-w-2xl mx-auto mb-8\">在15分钟内，了解我们的AI如何自动化您的核心业务流程。</p>\n \n <div class=\"w-full max-w-4xl mx-auto aspect-video bg-gradient-to-br from-[var(--color-card)] to-[var(--color-background)] rounded-xl border border-[var(--color-border)] flex items-center justify-center\">\n <i data-lucide=\"play\" class=\"w-16 h-16 text-[var(--color-accent)]\"></i>\n </div>\n </section>\n\n <script src=\"https://unpkg.com/aos@2.3.1/dist/aos.js\"></script>\n <script>\n // 初始化图标和动画库\n lucide.createIcons();\n AOS.init({ duration: 800, once: true });\n\n // 滚动触发显示\n function checkScrollTriggers() {\n const triggers = document.querySelectorAll('.scroll-trigger');\n triggers.forEach(trigger => {\n const rect = trigger.getBoundingClientRect();\n if (rect.top < window.innerHeight * 0.85) {\n trigger.classList.add('visible');\n }\n });\n }\n window.addEventListener('scroll', checkScrollTriggers);\n window.addEventListener('load', checkScrollTriggers);\n checkScrollTriggers(); // 初始检查\n\n // 计数器动画\n function animateCounter(element, target, duration = 2000) {\n const start = 0;\n const increment = target / (duration / 16); // 60fps\n let current = start;\n const timer = setInterval(() => {\n current += increment;\n if (current >= target) {\n element.textContent = Math.floor(target).toLocaleString();\n clearInterval(timer);\n } else {\n element.textContent = Math.floor(current).toLocaleString();\n }\n }, 16);\n }\n // 当计数器进入视口时触发\n const observerOptions = {\n root: null,\n rootMargin: '0px',\n threshold: 0.5\n };\n const counterObserver = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n const counter = entry.target;\n const target = parseInt(counter.getAttribute('data-target'));\n animateCounter(counter, target, 1500);\n counterObserver.unobserve(counter); // 只执行一次\n }\n });\n }, observerOptions);\n document.querySelectorAll('.counter').forEach(counter => {\n counterObserver.observe(counter);\n });\n\n // CTA 按钮交互\n document.getElementById('cta-primary').addEventListener('click', () => {\n alert('🎉 欢迎开始免费试用！我们将引导您完成设置。');\n // 实际应用中这里会是跳转或打开注册模态框\n });\n // 平滑滚动到演示区\n document.getElementById('cta-secondary').addEventListener('click', () => {\n document.getElementById('demo').scrollIntoView({\n behavior: 'smooth',\n block: 'center'\n });\n });\n // 确保所有可点击元素满足最小触摸目标\n document.querySelectorAll('button, a[href]').forEach(el => {\n const rect = el.getBoundingClientRect();\n if (rect.width < 44 || rect.height < 44) {\n console.warn('可点击元素可能小于最小触摸目标(44px):', el);\n }\n });\n </script>\n</body>\n</html>"},"next":["添加更多数据指标","集成实时数据","增加客户评价","提供案例研究","添加互动演示"],"breakpoint":"xs","plan":{"planId":"b2b-ai-hero-3d-glass-2025","goal":"B2B AI 生产力工具 Hero 区,通过玻璃态仪表板展示价值,驱动试用转化","audience":"企业技术决策者,正在评估 AI 生产力工具的效率提升效果","tone":"minimal-dark-tech","type":"fullHTML","designTokens":{"style":{"name":"minimal-dark-tech","mood":"serious","keywords":["glassmorphism","data-driven","enterprise-grade"]},"colors":{"primary":"#4f46e5","secondary":"#7c3aed","accent":"#06b6d4","success":"#10b981","warning":"#f59e0b","danger":"#ef4444","info":"#3b82f6","background":"#0f172a","foreground":"#ffffff","card":"#1e293b","border":"#334155","muted":"#94a3b8"},"cssVarPrefix":"--color-","fonts":{"heading":"Space Grotesk","body":"Inter","mono":"JetBrains Mono","googleFontsUrl":"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600…;:{"heading":"'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif","body":"'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif","mono":"'JetBrains Mono', 'SF Mono', Consolas, monospace"},"scale":{"display":"clamp(2.5rem, 5vw, 4rem)","h1":"clamp(2rem, 3.5vw, 3rem)","h2":"clamp(1.5rem, 2.5vw, 2.25rem)","h3":"1.5rem","h4":"1.25rem","body":"1rem","small":"0.875rem","caption":"0.75rem"},"lineHeight":{"tight":"1.1","base":"1.6","loose":"1.8"},"weight":{"regular":400,"medium":500,"semibold":600,"bold":700}},"components":{"button":{"default":"bg=primary fg=background padding=0.75rem 1.5rem radius=md weight=600","hover":"bg=primary(-10%) translateY=-1px shadow=md","active":"translateY=0 shadow=sm","disabled":"opacity=0.5 cursor=not-allowed","focus":"ring=2px solid accent ring-offset=2px"},"card":{"default":"bg=card shadow=sm radius=lg padding=1.5rem border=1px solid border","hover":"shadow=md translateY=-2px"},"nav":{"default":"bg=background/80 backdrop-blur=12px height=4rem","scrolled":"bg=background shadow=sm","mobile":"drawer-from-right width=85vw"}},"layout":{"container":{"maxWidth":"1200px","paddingX":"1.5rem"},"grid":{"columns":12,"gap":"1.5rem"}},"spacing":{"gutter":"1.5rem","sectionY":"6rem","scale":["0","0.25rem","0.5rem","0.75rem","1rem","1.5rem","2rem","3rem","4rem","6rem"]},"shadow":{"sm":"0 1px 2px rgba(0,0,0,.06)","md":"0 4px 12px rgba(0,0,0,.08)","lg":"0 12px 32px rgba(0,0,0,.12)","xl":"0 24px 64px rgba(0,0,0,.16)"},"surfaces":{"base":"bg=background shadow=none","raised":"bg=card shadow=sm radius=lg","overlay":"bg=card shadow=md radius=lg","modal":"bg=card shadow=lg radius=xl"},"breakpoints":{"sm":"640px","md":"768px","lg":"1024px","xl":"1280px","2xl":"1536px"},"touchTarget":{"min":44},"radius":{"sm":"4px","md":"8px","lg":"16px","xl":"24px","full":"9999px"},"transition":{"fast":"150ms ease-out","base":"300ms ease-out","slow":"500ms cubic-bezier(0.4,0,0.2,1)"}},"sections":[{"id":"hero-copy","type":"hero-split-left","purpose":"左侧文案区:标题+副文本+双CTA按钮","elements":{"gradient_accent":true,"cta_primary":true,"cta_secondary":true,"trust_badges":true},"copy":{"title":"自动化重复性任务，释放团队创造力","subtitle":"企业级 AI 生产力平台，通过智能自动化与深度数据分析，显著提升运营效率。","cta_primary":"免费开始试用","cta_secondary":"观看演示","trust_line":"已被 2,500+ 企业团队信任"},"interactions":["smooth-scroll-to-#demo"],"notes":"标题使用渐变强调,Indigo 色主按钮,副按钮使用 outline 样式"},{"id":"hero-widget","type":"hero-visual-widget","purpose":"右侧玻璃态仪表板展示实时增长数据","elements":{"visual_hint":"3D glassmorphism dashboard card with growth line chart","widget_title":true,"metric_cards":3,"chart":true},"copy":{"widget_title":"实时绩效仪表板","metric_1_label":"自动化任务","metric_1_value":"2,847","metric_1_change":"+12%","metric_2_label":"节省时间","metric_2_value":"1,240h","metric_2_change":"+18%","metric_3_label":"团队效率","metric_3_value":"89%","metric_3_change":"+7%","chart_title":"月度增长趋势"},"interactions":["counter-animate"],"notes":"使用 assets/images/illustration/29.png 作为仪表板视觉参考,应用玻璃态效果"}]},"originalPlan":{"planId":"b2b-ai-hero-3d-glass-2025","goal":"B2B AI 生产力工具 Hero 区,通过玻璃态仪表板展示价值,驱动试用转化","audience":"企业技术决策者,正在评估 AI 生产力工具的效率提升效果","tone":"minimal-dark-tech","type":"fullHTML","designTokens":{"style":{"name":"minimal-dark-tech","mood":"serious","keywords":["glassmorphism","data-driven","enterprise-grade"]},"colors":{"primary":"#4f46e5","secondary":"#7c3aed","accent":"#06b6d4","success":"#10b981","warning":"#f59e0b","danger":"#ef4444","info":"#3b82f6","background":"#0f172a","foreground":"#f8fafc","card":"#1e293b","border":"#334155","muted":"#94a3b8"},"cssVarPrefix":"--color-","fonts":{"heading":"Space Grotesk","body":"Inter","mono":"JetBrains Mono","googleFontsUrl":"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600…;:{"heading":"'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif","body":"'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif","mono":"'JetBrains Mono', 'SF Mono', Consolas, monospace"},"scale":{"display":"clamp(2.5rem, 5vw, 4rem)","h1":"clamp(2rem, 3.5vw, 3rem)","h2":"clamp(1.5rem, 2.5vw, 2.25rem)","h3":"1.5rem","h4":"1.25rem","body":"1rem","small":"0.875rem","caption":"0.75rem"},"lineHeight":{"tight":"1.1","base":"1.6","loose":"1.8"},"weight":{"regular":400,"medium":500,"semibold":600,"bold":700}},"components":{"button":{"default":"bg=primary fg=background padding=0.75rem 1.5rem radius=md weight=600","hover":"bg=primary(-10%) translateY=-1px shadow=md","active":"translateY=0 shadow=sm","disabled":"opacity=0.5 cursor=not-allowed","focus":"ring=2px solid accent offset=2px"},"card":{"default":"bg=card shadow=sm radius=lg padding=1.5rem border=1px solid border","hover":"shadow=md translateY=-2px"},"nav":{"default":"bg=background/80 backdrop-blur=12px height=4rem","scrolled":"bg=background shadow=sm","mobile":"drawer-from-right width=85vw"}},"layout":{"container":{"maxWidth":"1200px","paddingX":"1.5rem"},"grid":{"columns":12,"gap":"1.5rem"}},"spacing":{"gutter":"1.5rem","sectionY":"6rem","scale":["0","0.25rem","0.5rem","0.75rem","1rem","1.5rem","2rem","3rem","4rem","6rem"]},"shadow":{"sm":"0 1px 2px rgba(0,0,0,.06)","md":"0 4px 12px rgba(0,0,0,.08)","lg":"0 12px 32px rgba(0,0,0,.12)","xl":"0 24px 64px rgba(0,0,0,.16)"},"surfaces":{"base":"bg=background shadow=none","raised":"bg=card shadow=sm radius=lg","overlay":"bg=card shadow=md radius=lg","modal":"bg=card shadow=lg radius=xl"},"breakpoints":{"sm":"640px","md":"768px","lg":"1024px","xl":"1280px","2xl":"1536px"},"touchTarget":{"min":"44px"},"radius":{"sm":"4px","md":"8px","lg":"16px","xl":"24px","full":"9999px"},"transition":{"fast":"150ms ease-out","base":"300ms ease-out","slow":"500ms cubic-bezier(0.4,0,0.2,1)"}},"sections":[{"id":"hero-copy","type":"hero-split-left","purpose":"左侧文案区:标题+副文本+双CTA按钮","elements":{"gradient_accent":true,"cta_primary":true,"cta_secondary":true,"trust_badges":true},"copy":{"title":"让 AI 接管重复工作","title_accent":"释放团队创造力","subtitle":"为企业提供智能自动化与数据分析,把每周 10 小时的事务性工作压缩到 1 小时。","cta_primary":"免费开始试用","cta_secondary":"观看演示","trust_line":"已被 2,500+ 企业团队信任"},"interactions":["smooth-scroll-to-#demo"],"notes":"标题使用渐变强调,Indigo 色主按钮,副按钮使用 outline 样式"},{"id":"hero-widget","type":"hero-visual-widget","purpose":"右侧玻璃态仪表板展示实时增长数据","elements":{"visual_hint":"3D glassmorphism dashboard card with growth line chart","widget_title":true,"metric_cards":3,"chart":true},"copy":{"widget_title":"绩效仪表板","widget_subtitle":"实时增长指标","metric_1_label":"自动化任务","metric_1_value":"2,847","metric_1_change":"+12%","metric_2_label":"节省时间","metric_2_value":"1,240h","metric_2_change":"+18%","metric_3_label":"团队效率","metric_3_value":"89%","metric_3_change":"+7%","chart_title":"月度增长趋势"},"interactions":["counter-animate"],"notes":"使用 assets/images/illustration/29.png 作为仪表板视觉参考,应用玻璃态效果"}]},"planReviews":[{"round":1,"ok":false,"score":78,"issues":["designTokens.components.button.focus 缺少 ring 或 outline 样式，违反键盘可访问性","designTokens.colors.foreground(#f8fafc) 与 background(#0f172a) 对比度不足 4.5:1","designTokens.touchTarget.min 值 '44px' 应为数字 44，单位在执行阶段处理","sections 仅 2 个，对于 fullHTML 整页意图，数量不足且缺少关键区块","hero-copy.copy.title 文案过于泛化，未体现 B2B AI 工具的具体价值主张","hero-copy.copy.subtitle 文案 '把每周 10 小时...' 过于具体且口语化，与严肃基调不符"],"revisedPlan":{"planId":"b2b-ai-hero-3d-glass-2025","goal":"B2B AI 生产力工具 Hero 区,通过玻璃态仪表板展示价值,驱动试用转化","audience":"企业技术决策者,正在评估 AI 生产力工具的效率提升效果","tone":"minimal-dark-tech","type":"fullHTML","designTokens":{"style":{"name":"minimal-dark-tech","mood":"serious","keywords":["glassmorphism","data-driven","enterprise-grade"]},"colors":{"primary":"#4f46e5","secondary":"#7c3aed","accent":"#06b6d4","success":"#10b981","warning":"#f59e0b","danger":"#ef4444","info":"#3b82f6","background":"#0f172a","foreground":"#ffffff","card":"#1e293b","border":"#334155","muted":"#94a3b8"},"cssVarPrefix":"--color-","fonts":{"heading":"Space Grotesk","body":"Inter","mono":"JetBrains Mono","googleFontsUrl":"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600…;:{"heading":"'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif","body":"'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif","mono":"'JetBrains Mono', 'SF Mono', Consolas, monospace"},"scale":{"display":"clamp(2.5rem, 5vw, 4rem)","h1":"clamp(2rem, 3.5vw, 3rem)","h2":"clamp(1.5rem, 2.5vw, 2.25rem)","h3":"1.5rem","h4":"1.25rem","body":"1rem","small":"0.875rem","caption":"0.75rem"},"lineHeight":{"tight":"1.1","base":"1.6","loose":"1.8"},"weight":{"regular":400,"medium":500,"semibold":600,"bold":700}},"components":{"button":{"default":"bg=primary fg=background padding=0.75rem 1.5rem radius=md weight=600","hover":"bg=primary(-10%) translateY=-1px shadow=md","active":"translateY=0 shadow=sm","disabled":"opacity=0.5 cursor=not-allowed","focus":"ring=2px solid accent"},"card":{"default":"bg=card shadow=sm radius=lg padding=1.5rem border=1px solid border","hover":"shadow=md translateY=-2px"},"nav":{"default":"bg=background/80 backdrop-blur=12px height=4rem","scrolled":"bg=background shadow=sm","mobile":"drawer-from-right width=85vw"}},"layout":{"container":{"maxWidth":"1200px","paddingX":"1.5rem"},"grid":{"columns":12,"gap":"1.5rem"}},"spacing":{"gutter":"1.5rem","sectionY":"6rem","scale":["0","0.25rem","0.5rem","0.75rem","1rem","1.5rem","2rem","3rem","4rem","6rem"]},"shadow":{"sm":"0 1px 2px rgba(0,0,0,.06)","md":"0 4px 12px rgba(0,0,0,.08)","lg":"0 12px 32px rgba(0,0,0,.12)","xl":"0 24px 64px rgba(0,0,0,.16)"},"surfaces":{"base":"bg=background shadow=none","raised":"bg=card shadow=sm radius=lg","overlay":"bg=card shadow=md radius=lg","modal":"bg=card shadow=lg radius=xl"},"breakpoints":{"sm":"640px","md":"768px","lg":"1024px","xl":"1280px","2xl":"1536px"},"touchTarget":{"min":44},"radius":{"sm":"4px","md":"8px","lg":"16px","xl":"24px","full":"9999px"},"transition":{"fast":"150ms ease-out","base":"300ms ease-out","slow":"500ms cubic-bezier(0.4,0,0.2,1)"}},"sections":[{"id":"hero-copy","type":"hero-split-left","purpose":"左侧文案区:标题+副文本+双CTA按钮","elements":{"gradient_accent":true,"cta_primary":true,"cta_secondary":true,"trust_badges":true},"copy":{"title":"将重复性任务自动化","title_accent":"释放团队创造力","subtitle":"企业级 AI 生产力平台，通过智能自动化与深度数据分析，显著提升运营效率。","cta_primary":"免费开始试用","cta_secondary":"观看演示","trust_line":"已被 2,500+ 企业团队信任"},"interactions":["smooth-scroll-to-#demo"],"notes":"标题使用渐变强调,Indigo 色主按钮,副按钮使用 outline 样式"},{"id":"hero-widget","type":"hero-visual-widget","purpose":"右侧玻璃态仪表板展示实时增长数据","elements":{"visual_hint":"3D glassmorphism dashboard card with growth line chart","widget_title":true,"metric_cards":3,"chart":true},"copy":{"widget_title":"绩效仪表板","widget_subtitle":"实时增长指标","metric_1_label":"自动化任务","metric_1_value":"2,847","metric_1_change":"+12%","metric_2_label":"节省时间","metric_2_value":"1,240h","metric_2_change":"+18%","metric_3_label":"团队效率","metric_3_value":"89%","metric_3_change":"+7%","chart_title":"月度增长趋势"},"interactions":["counter-animate"],"notes":"使用 assets/images/illustration/29.png 作为仪表板视觉参考,应用玻璃态效果"}]}},{"round":1,"ok":false,"score":78,"issues":["designTokens.components.button.focus 缺少 ring 或 outline 样式，违反键盘可访问性","sections 仅 2 个，对于 fullHTML 整页意图，数量不足且缺少关键区块（如 pricing/testimonial/faq）","hero-copy.copy.title 与 title_accent 语义重复，建议合并为一句更连贯的主张","hero-widget.copy.widget_subtitle 与 widget_title 信息重叠，可优化"],"revisedPlan":{"planId":"b2b-ai-hero-3d-glass-2025","goal":"B2B AI 生产力工具 Hero 区,通过玻璃态仪表板展示价值,驱动试用转化","audience":"企业技术决策者,正在评估 AI 生产力工具的效率提升效果","tone":"minimal-dark-tech","type":"fullHTML","designTokens":{"style":{"name":"minimal-dark-tech","mood":"serious","keywords":["glassmorphism","data-driven","enterprise-grade"]},"colors":{"primary":"#4f46e5","secondary":"#7c3aed","accent":"#06b6d4","success":"#10b981","warning":"#f59e0b","danger":"#ef4444","info":"#3b82f6","background":"#0f172a","foreground":"#ffffff","card":"#1e293b","border":"#334155","muted":"#94a3b8"},"cssVarPrefix":"--color-","fonts":{"heading":"Space Grotesk","body":"Inter","mono":"JetBrains Mono","googleFontsUrl":"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600…;:{"heading":"'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif","body":"'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif","mono":"'JetBrains Mono', 'SF Mono', Consolas, monospace"},"scale":{"display":"clamp(2.5rem, 5vw, 4rem)","h1":"clamp(2rem, 3.5vw, 3rem)","h2":"clamp(1.5rem, 2.5vw, 2.25rem)","h3":"1.5rem","h4":"1.25rem","body":"1rem","small":"0.875rem","caption":"0.75rem"},"lineHeight":{"tight":"1.1","base":"1.6","loose":"1.8"},"weight":{"regular":400,"medium":500,"semibold":600,"bold":700}},"components":{"button":{"default":"bg=primary fg=background padding=0.75rem 1.5rem radius=md weight=600","hover":"bg=primary(-10%) translateY=-1px shadow=md","active":"translateY=0 shadow=sm","disabled":"opacity=0.5 cursor=not-allowed","focus":"ring=2px solid accent ring-offset=2px"},"card":{"default":"bg=card shadow=sm radius=lg padding=1.5rem border=1px solid border","hover":"shadow=md translateY=-2px"},"nav":{"default":"bg=background/80 backdrop-blur=12px height=4rem","scrolled":"bg=background shadow=sm","mobile":"drawer-from-right width=85vw"}},"layout":{"container":{"maxWidth":"1200px","paddingX":"1.5rem"},"grid":{"columns":12,"gap":"1.5rem"}},"spacing":{"gutter":"1.5rem","sectionY":"6rem","scale":["0","0.25rem","0.5rem","0.75rem","1rem","1.5rem","2rem","3rem","4rem","6rem"]},"shadow":{"sm":"0 1px 2px rgba(0,0,0,.06)","md":"0 4px 12px rgba(0,0,0,.08)","lg":"0 12px 32px rgba(0,0,0,.12)","xl":"0 24px 64px rgba(0,0,0,.16)"},"surfaces":{"base":"bg=background shadow=none","raised":"bg=card shadow=sm radius=lg","overlay":"bg=card shadow=md radius=lg","modal":"bg=card shadow=lg radius=xl"},"breakpoints":{"sm":"640px","md":"768px","lg":"1024px","xl":"1280px","2xl":"1536px"},"touchTarget":{"min":44},"radius":{"sm":"4px","md":"8px","lg":"16px","xl":"24px","full":"9999px"},"transition":{"fast":"150ms ease-out","base":"300ms ease-out","slow":"500ms cubic-bezier(0.4,0,0.2,1)"}},"sections":[{"id":"hero-copy","type":"hero-split-left","purpose":"左侧文案区:标题+副文本+双CTA按钮","elements":{"gradient_accent":true,"cta_primary":true,"cta_secondary":true,"trust_badges":true},"copy":{"title":"自动化重复性任务，释放团队创造力","subtitle":"企业级 AI 生产力平台，通过智能自动化与深度数据分析，显著提升运营效率。","cta_primary":"免费开始试用","cta_secondary":"观看演示","trust_line":"已被 2,500+ 企业团队信任"},"interactions":["smooth-scroll-to-#demo"],"notes":"标题使用渐变强调,Indigo 色主按钮,副按钮使用 outline 样式"},{"id":"hero-widget","type":"hero-visual-widget","purpose":"右侧玻璃态仪表板展示实时增长数据","elements":{"visual_hint":"3D glassmorphism dashboard card with growth line chart","widget_title":true,"metric_cards":3,"chart":true},"copy":{"widget_title":"实时绩效仪表板","metric_1_label":"自动化任务","metric_1_value":"2,847","metric_1_change":"+12%","metric_2_label":"节省时间","metric_2_value":"1,240h","metric_2_change":"+18%","metric_3_label":"团队效率","metric_3_value":"89%","metric_3_change":"+7%","chart_title":"月度增长趋势"},"interactions":["counter-animate"],"notes":"使用 assets/images/illustration/29.png 作为仪表板视觉参考,应用玻璃态效果"}]}}],"planId":"b2b-ai-hero-3d-glass-2025"}```

total_tokens

10323

summary

基于蓝图生成B2B AI生产力工具英雄区，含玻璃态仪表板。

uiParsing

关闭