暗色极简Hero区：渐变标题与双CTA搭配3D玻璃仪表板展示增长曲线

By admin, 5 May, 2026

角色

assistant

content

```json{"summary":"暗色极简Hero区，左侧渐变标题+双CTA，右侧3D玻璃拟态仪表板展示增长曲线","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 生产力平台 - 让 AI 跑流程，让人做决策</title>\n <script src=\"https://cdn.tailwindcss.com\"></script>\n <link href=\"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600…\" rel=\"stylesheet\">\n <script src=\"https://unpkg.com/lucide@latest\"></script>\n <style>\n :root {\n --color-primary: #4F46E5;\n --color-secondary: #1E1B4B;\n --color-accent: #818CF8;\n --color-success: #10B981;\n --color-warning: #F59E0B;\n --color-danger: #EF4444;\n --color-info: #3B82F6;\n --color-background: #09090B;\n --color-foreground: #F1F1F3;\n --color-card: #18181B;\n --color-border: #27272A;\n --color-muted: #71717A;\n --state-hover: #4338CA;\n --state-active: #3730A3;\n --state-focus: #6366F1;\n --state-disabled: #3F3F46;\n --radius-sm: 4px;\n --radius-md: 8px;\n --radius-lg: 16px;\n --radius-xl: 24px;\n --radius-full: 9999px;\n --shadow-sm: 0 1px 2px rgba(0,0,0,0.25);\n --shadow-md: 0 4px 16px rgba(0,0,0,0.35);\n --shadow-lg: 0 12px 40px rgba(0,0,0,0.50);\n --shadow-xl: 0 24px 64px rgba(0,0,0,0.60);\n --transition-fast: 150ms ease-out;\n --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);\n --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n * {\n box-sizing: border-box;\n }\n\n body {\n font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n background-color: var(--color-background);\n color: var(--color-foreground);\n margin: 0;\n padding: 0;\n overflow-x: hidden;\n }\n\n h1, h2, h3, h4 {\n font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;\n }\n\n .font-mono {\n font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace;\n }\n\n /* === 字阶 === */\n .text-display {\n font-size: clamp(2.75rem, 5vw, 4.25rem);\n font-weight: 700;\n line-height: 1.05;\n letter-spacing: -0.025em;\n }\n .text-h1 {\n font-size: clamp(2rem, 3.5vw, 3.25rem);\n font-weight: 600;\n line-height: 1.1;\n letter-spacing: -0.02em;\n }\n .text-h2 {\n font-size: clamp(1.5rem, 2.5vw, 2.25rem);\n font-weight: 600;\n line-height: 1.2;\n }\n .text-h3 {\n font-size: 1.5rem;\n font-weight: 600;\n line-height: 1.3;\n }\n .text-h4 {\n font-size: 1.25rem;\n font-weight: 500;\n line-height: 1.4;\n }\n .text-body {\n font-size: 1rem;\n font-weight: 400;\n line-height: 1.6;\n }\n .text-small {\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.5;\n }\n .text-caption {\n font-size: 0.75rem;\n font-weight: 400;\n line-height: 1.4;\n letter-spacing: 0.02em;\n }\n .text-button {\n font-size: 0.95rem;\n font-weight: 600;\n line-height: 1;\n letter-spacing: 0.01em;\n }\n .text-overline {\n font-size: 0.75rem;\n font-weight: 600;\n line-height: 1.2;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n }\n\n /* === 渐变 === */\n .brand-glow {\n background: linear-gradient(135deg, #6366F1 0%, #818CF8 45%, #06B6D4 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n\n .widget-rim {\n border: 1px solid transparent;\n background-image: linear-gradient(rgba(24,24,27,0.55), rgba(24,24,27,0.55)), linear-gradient(135deg, rgba(99,102,241,0.25) 0%, rgba(6,182,212,0.15) 100%);\n background-origin: border-box;\n background-clip: padding-box, border-box;\n }\n\n /* === 按钮变体 === */\n .btn-primary {\n background-color: var(--color-primary);\n color: var(--color-foreground);\n padding: 0.75rem 1.75rem;\n border-radius: var(--radius-md);\n font-weight: 600;\n font-size: 0.95rem;\n letter-spacing: 0.01em;\n border: none;\n cursor: pointer;\n transition: background-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);\n min-height: 44px;\n min-width: 44px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n }\n .btn-primary:hover {\n background-color: var(--state-hover);\n transform: translateY(-2px);\n box-shadow: var(--shadow-lg);\n }\n .btn-primary:active {\n transform: translateY(0);\n box-shadow: var(--shadow-sm);\n }\n .btn-primary:focus-visible {\n outline: 2px solid var(--color-accent);\n outline-offset: 3px;\n }\n .btn-primary:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n transform: none;\n }\n\n .btn-secondary {\n background-color: transparent;\n color: var(--color-foreground);\n border: 1px solid var(--color-border);\n padding: 0.75rem 1.75rem;\n border-radius: var(--radius-md);\n font-weight: 600;\n font-size: 0.95rem;\n letter-spacing: 0.01em;\n cursor: pointer;\n transition: background-color var(--transition-base), border-color var(--transition-base);\n min-height: 44px;\n min-width: 44px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n }\n .btn-secondary:hover {\n background-color: var(--color-card);\n border-color: var(--state-disabled);\n }\n .btn-secondary:focus-visible {\n outline: 2px solid var(--color-accent);\n outline-offset: 3px;\n }\n\n .btn-ghost {\n background-color: transparent;\n color: #A1A1AA;\n padding: 0.5rem 1rem;\n border-radius: var(--radius-md);\n font-weight: 500;\n font-size: 0.875rem;\n border: none;\n cursor: pointer;\n transition: background-color var(--transition-base), color var(--transition-base);\n min-height: 44px;\n min-width: 44px;\n }\n .btn-ghost:hover {\n background-color: var(--color-card);\n color: var(--color-foreground);\n }\n .btn-ghost:focus-visible {\n outline: 2px solid var(--color-accent);\n outline-offset: 2px;\n }\n\n /* === 卡片 hover === */\n .glass-card {\n background: rgba(24, 24, 27, 0.55);\n backdrop-filter: blur(24px);\n -webkit-backdrop-filter: blur(24px);\n box-shadow: var(--shadow-lg);\n border-radius: var(--radius-xl);\n transition: box-shadow var(--transition-base), border-color var(--transition-base);\n }\n .glass-card:hover {\n box-shadow: var(--shadow-xl);\n border-color: rgba(99, 102, 241, 0.15);\n }\n\n /* === 柔光球 === */\n .glow-orb {\n position: absolute;\n width: 320px;\n height: 320px;\n background: radial-gradient(circle, rgba(99,102,241,0.18) 0%, transparent 70%);\n filter: blur(64px);\n border-radius: 50%;\n pointer-events: none;\n }\n\n /* === 计数器动画 === */\n @keyframes fadeInUp {\n from {\n opacity: 0;\n transform: translateY(24px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n .animate-fade-in-up {\n animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;\n }\n\n @keyframes shimmer {\n 0% { background-position: -200% 0; }\n 100% { background-position: 200% 0; }\n }\n </style>\n</head>\n<body class=\"min-h-screen flex items-center justify-center px-[1.5rem] py-[6rem]\">\n <div class=\"w-full max-w-[1200px] mx-auto\">\n <div class=\"grid grid-cols-1 lg:grid-cols-12 gap-[2rem] items-center\">\n \n \n <div class=\"lg:col-span-6 flex flex-col\" style=\"gap: 32px;\">\n \n \n <div class=\"inline-flex items-center\" style=\"animation-delay: 0.1s;\">\n <span class=\"text-overline px-[16px] py-[8px] rounded-full\" style=\"background-color: rgba(79,70,229,0.12); color: var(--color-accent);\">\n AI 生产力平台\n </span>\n </div>\n\n \n <h1 class=\"text-h1\" style=\"animation-delay: 0.2s;\">\n <span style=\"color: var(--color-foreground);\">让 AI 跑流程，</span><br>\n <span class=\"brand-glow\">让人做决策</span>\n </h1>\n\n \n <p class=\"text-body\" style=\"color: var(--color-muted); max-width: 520px; animation-delay: 0.3s;\">\n 智能自动化引擎接管数据整理、报告生成与跨系统同步，团队每天节省 3 小时事务性工作，聚焦真正创造价值的判断与协作。\n </p>\n\n \n <div class=\"flex flex-wrap items-center\" style=\"gap: 16px; animation-delay: 0.4s;\">\n <button class=\"btn-primary\" onclick=\"document.getElementById('pricing').scrollIntoView({behavior:'smooth'})\">\n 免费开始使用\n <i data-lucide=\"arrow-right\" class=\"w-[18px] h-[18px]\"></i>\n </button>\n <button class=\"btn-secondary\" onclick=\"openDemoModal()\">\n <i data-lucide=\"play\" class=\"w-[18px] h-[18px]\"></i>\n 观看演示\n </button>\n </div>\n </div>\n\n \n <div class=\"lg:col-span-6 relative flex justify-center lg:justify-end\" style=\"animation-delay: 0.5s;\">\n \n \n <div class=\"glow-orb\" style=\"bottom: -40px; right: -40px;\"></div>\n \n \n <div class=\"glass-card widget-rim relative z-10 w-full max-w-[520px]\" style=\"padding: 32px; display: flex; flex-direction: column; gap: 24px;\">\n \n \n <div class=\"flex items-center justify-between\">\n <div>\n <h3 class=\"text-h4\" style=\"color: var(--color-foreground); margin: 0;\">效率仪表板</h3>\n <span class=\"text-caption\" style=\"color: var(--color-muted);\">实时指标 · 过去 30 天</span>\n </div>\n <i data-lucide=\"trending-up\" class=\"w-[20px] h-[20px]\" style=\"color: var(--color-success);\"></i>\n </div>\n\n \n <div class=\"grid grid-cols-2\" style=\"gap: 16px;\">\n <div style=\"background: rgba(24,24,27,0.45); border-radius: var(--radius-lg); padding: 16px; display: flex; flex-direction: column; gap: 4px;\">\n <span class=\"text-caption\" style=\"color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.06em;\">自动化任务</span>\n <div class=\"flex items-baseline justify-between\">\n <span class=\"font-mono\" style=\"font-size: 1.75rem; font-weight: 600; color: var(--color-foreground);\" id=\"counter-tasks\">0</span>\n <span class=\"text-small\" style=\"color: var(--color-success); font-weight: 500;\">+12.4%</span>\n </div>\n </div>\n <div style=\"background: rgba(24,24,27,0.45); border-radius: var(--radius-lg); padding: 16px; display: flex; flex-direction: column; gap: 4px;\">\n <span class=\"text-caption\" style=\"color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.06em;\">节省工时</span>\n <div class=\"flex items-baseline justify-between\">\n <span class=\"font-mono\" style=\"font-size: 1.75rem; font-weight: 600; color: var(--color-foreground);\" id=\"counter-hours\">0</span>\n <span class=\"text-small\" style=\"color: var(--color-success); font-weight: 500;\">+8.7%</span>\n </div>\n </div>\n </div>\n\n \n <div style=\"display: flex; flex-direction: column; gap: 8px;\">\n <span class=\"text-caption\" style=\"color: var(--color-muted);\">周效率指数</span>\n <svg width=\"100%\" height=\"120\" viewBox=\"0 0 400 120\" preserveAspectRatio=\"none\">\n <defs>\n <linearGradient id=\"lineGradient\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\n <stop offset=\"0%\" stop-color=\"#6366F1\" />\n <stop offset=\"100%\" stop-color=\"#06B6D4\" />\n </linearGradient>\n <linearGradient id=\"areaGradient\" x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n <stop offset=\"0%\" stop-color=\"#6366F1\" stop-opacity=\"0.18\" />\n <stop offset=\"100%\" stop-color=\"#06B6D4\" stop-opacity=\"0.02\" />\n </linearGradient>\n </defs>\n \n <line x1=\"0\" y1=\"100\" x2=\"400\" y2=\"100\" stroke=\"#27272A\" stroke-width=\"1\" />\n <line x1=\"0\" y1=\"75\" x2=\"400\" y2=\"75\" stroke=\"#27272A\" stroke-width=\"0.5\" stroke-dasharray=\"4 4\" />\n <line x1=\"0\" y1=\"50\" x2=\"400\" y2=\"50\" stroke=\"#27272A\" stroke-width=\"0.5\" stroke-dasharray=\"4 4\" />\n <line x1=\"0\" y1=\"25\" x2=\"400\" y2=\"25\" stroke=\"#27272A\" stroke-width=\"0.5\" stroke-dasharray=\"4 4\" />\n \n <polygon points=\"0,95 50,75 100,60 150,85 200,55 250,45 300,35 350,25 400,30 400,120 0,120\" fill=\"url(#areaGradient)\" />\n \n <polyline points=\"0,95 50,75 100,60 150,85 200,55 250,45 300,35 350,25 400,30\" fill=\"none\" stroke=\"url(#lineGradient)\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n \n <circle cx=\"0\" cy=\"95\" r=\"3\" fill=\"#6366F1\" />\n <circle cx=\"50\" cy=\"75\" r=\"3\" fill=\"#6366F1\" />\n <circle cx=\"100\" cy=\"60\" r=\"3\" fill=\"#6366F1\" />\n <circle cx=\"150\" cy=\"85\" r=\"3\" fill=\"#6366F1\" />\n <circle cx=\"200\" cy=\"55\" r=\"3\" fill=\"#6366F1\" />\n <circle cx=\"250\" cy=\"45\" r=\"3\" fill=\"#06B6D4\" />\n <circle cx=\"300\" cy=\"35\" r=\"3\" fill=\"#06B6D4\" />\n <circle cx=\"350\" cy=\"25\" r=\"3\" fill=\"#06B6D4\" />\n <circle cx=\"400\" cy=\"30\" r=\"3\" fill=\"#06B6D4\" />\n </svg>\n \n <div class=\"flex justify-between text-caption\" style=\"color: var(--color-muted); padding: 0 2px;\">\n <span>W1</span><span>W2</span><span>W3</span><span>W4</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n \n <div id=\"demo-modal\" style=\"display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(9,9,11,0.85); backdrop-filter: blur(12px); align-items: center; justify-content: center;\" onclick=\"closeDemoModal(event)\">\n <div style=\"background: var(--color-card); border-radius: var(--radius-xl); padding: 48px; max-width: 640px; width: 90%; position: relative; box-shadow: var(--shadow-xl);\" onclick=\"event.stopPropagation()\">\n <button onclick=\"closeDemoModal()\" class=\"btn-ghost\" style=\"position: absolute; top: 16px; right: 16px;\">\n <i data-lucide=\"x\" class=\"w-[20px] h-[20px]\"></i>\n </button>\n <h3 class=\"text-h3\" style=\"margin-bottom: 16px;\">产品演示</h3>\n <p class=\"text-body\" style=\"color: var(--color-muted);\">演示视频将在此处播放。</p>\n <div style=\"margin-top: 24px; background: var(--color-background); border-radius: var(--radius-md); height: 320px; display: flex; align-items: center; justify-content: center;\">\n <i data-lucide=\"play-circle\" class=\"w-[64px] h-[64px]\" style=\"color: var(--color-accent);\"></i>\n </div>\n </div>\n </div>\n\n <section id=\"pricing\" style=\"height: 1px;\"></section>\n\n <script>\n lucide.createIcons();\n\n // Counter animation\n function animateCounter(elementId, target, suffix = '') {\n const el = document.getElementById(elementId);\n if (!el) return;\n const duration = 1800;\n const steps = 60;\n const stepTime = duration / steps;\n const increment = target / steps;\n let current = 0;\n let step = 0;\n \n const timer = setInterval(() => {\n step++;\n current = Math.min(Math.round(increment * step), target);\n el.textContent = current.toLocaleString() + suffix;\n if (step >= steps) {\n clearInterval(timer);\n el.textContent = target.toLocaleString() + suffix;\n }\n }, stepTime);\n }\n\n // Scroll reveal\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n animateCounter('counter-tasks', 2847);\n animateCounter('counter-hours', 1240, 'h');\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.3 });\n\n const widgetCard = document.querySelector('.glass-card');\n if (widgetCard) {\n observer.observe(widgetCard);\n }\n\n // Modal\n function openDemoModal() {\n document.getElementById('demo-modal').style.display = 'flex';\n lucide.createIcons();\n }\n\n function closeDemoModal(event) {\n if (event && event.target !== document.getElementById('demo-modal')) return;\n document.getElementById('demo-modal').style.display = 'none';\n }\n\n // Add animation classes on load\n window.addEventListener('DOMContentLoaded', () => {\n const elements = document.querySelectorAll('.lg\\\\:col-span-6 > *');\n elements.forEach((el, index) => {\n el.classList.add('animate-fade-in-up');\n el.style.animationDelay = `${index * 0.15}s`;\n });\n \n const widget = document.querySelector('.lg\\\\:col-span-6.relative');\n if (widget) {\n widget.classList.add('animate-fade-in-up');\n widget.style.animationDelay = '0.5s';\n }\n });\n </script>\n</body>\n</html>"},"next":["加入 pricing 三卡对比","添加 Feature Bento 网格","制作 testimonial 轮播","创建底部导航菜单","增加滚动动画衔接"],"breakpoint":"none","plan":{"planId":"8a5c3f7e-2d4b-4a9e-b1f6-7c8d3e0a9b12","goal":"B2B AI 生产力工具 Hero 区,用暗色极简+玻璃拟态 3 秒传递核心价值并驱动 CTA 点击","audience":"正在评估 AI 自动化方案的企业中层管理者与技术决策者","tone":"minimal-dark-tech","type":"fullHTML","designTokens":{"style":{"name":"indigo-glass-dark","mood":"serious","keywords":["dark-mode","glassmorphism","indigo-accent","8pt-grid","near-black"],"density":"airy","philosophy":"极暗画布上仅用 Indigo→Cyan 渐变与玻璃态纵深传递「精密工具」感,零装饰、全功能"},"colors":{"primary":"#4F46E5","secondary":"#1E1B4B","accent":"#818CF8","success":"#10B981","warning":"#F59E0B","danger":"#EF4444","info":"#3B82F6","background":"#09090B","foreground":"#F1F1F3","card":"#18181B","border":"#27272A","muted":"#71717A"},"cssVarPrefix":"--color-","colorRoles":{"primary":{"name":"Indigo Core","role":"Primary CTA 按钮背景 & 键盘 focus ring"},"accent":{"name":"Indigo Glow","role":"标题渐变高亮 & 装饰性光晕"}},"gradients":[{"name":"brand-glow","stops":"linear-gradient(135deg, #6366F1 0%, #818CF8 45%, #06B6D4 100%)","role":"H1 关键词渐变文字"},{"name":"widget-rim","stops":"linear-gradient(135deg, rgba(99,102,241,0.25) 0%, rgba(6,182,212,0.15) 100%)","role":"玻璃态卡片边框光晕"}],"states":{"hover":"#4338CA","active":"#3730A3","focus":"#6366F1","disabled":"#3F3F46"},"fonts":{"heading":"Space Grotesk","body":"DM Sans","mono":"JetBrains Mono","display":"Space Grotesk","googleFontsUrl":"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600…;:{"heading":"'Space Grotesk', 'Inter', system-ui, sans-serif","body":"'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif","mono":"'JetBrains Mono', 'SF Mono', Consolas, monospace"},"scale":{"display":{"size":"clamp(2.75rem, 5vw, 4.25rem)","weight":700,"lineHeight":"1.05","letterSpacing":"-0.025em"},"h1":{"size":"clamp(2rem, 3.5vw, 3.25rem)","weight":600,"lineHeight":"1.1","letterSpacing":"-0.02em"},"h2":{"size":"clamp(1.5rem, 2.5vw, 2.25rem)","weight":600,"lineHeight":"1.2"},"h3":{"size":"1.5rem","weight":600,"lineHeight":"1.3"},"h4":{"size":"1.25rem","weight":500,"lineHeight":"1.4"},"body":{"size":"1rem","weight":400,"lineHeight":"1.6"},"small":{"size":"0.875rem","weight":400,"lineHeight":"1.5"},"caption":{"size":"0.75rem","weight":400,"lineHeight":"1.4","letterSpacing":"0.02em"},"button":{"size":"0.95rem","weight":600,"lineHeight":"1","letterSpacing":"0.01em"},"overline":{"size":"0.75rem","weight":600,"lineHeight":"1.2","letterSpacing":"0.08em"}},"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=#4338CA translateY=-2px shadow=md","active":"translateY=0 shadow=sm","disabled":"opacity=0.4 cursor=not-allowed","focus":"ring=2px solid #818CF8 offset=3px","variants":{"primary":{"default":"bg=primary fg=#F1F1F3 padding=0.75rem 1.75rem radius=md weight=600","hover":"bg=#4338CA translateY=-2px shadow=lg","active":"translateY=0 shadow=sm","focus":"ring=2px solid #818CF8 offset=3px","disabled":"opacity=0.4 cursor=not-allowed"},"secondary":{"default":"bg=transparent fg=#F1F1F3 border=1px solid #27272A padding=0.75rem 1.75rem radius=md weight=600","hover":"bg=#18181B border=#3F3F46","focus":"ring=2px solid #818CF8 offset=3px"},"ghost":{"default":"bg=transparent fg=#A1A1AA padding=0.5rem 1rem radius=md weight=500","hover":"bg=#18181B fg=#F1F1F3","focus":"ring=2px solid #818CF8 offset=2px"}}},"card":{"default":"bg=rgba(24,24,27,0.60) backdrop-blur=24px shadow=lg radius=xl padding=1.5rem border=1px solid rgba(255,255,255,0.06)","hover":"shadow=xl border=1px solid rgba(99,102,241,0.15)"},"nav":{"default":"bg=#09090B/80 backdrop-blur=12px height=4rem","scrolled":"bg=#09090B shadow=sm","mobile":"drawer-from-right width=85vw"},"input":{"default":"bg=#09090B fg=#F1F1F3 border=1px solid #27272A radius=md padding=0.625rem 0.875rem","hover":"border=1px solid #3F3F46","focus":"border=1px solid #4F46E5 ring=3px rgba(79,70,229,0.25)","error":"border=1px solid #EF4444 ring=3px rgba(239,68,68,0.2)","disabled":"opacity=0.5 cursor=not-allowed"}},"layout":{"container":{"maxWidth":"1200px","paddingX":"1.5rem"},"grid":{"columns":12,"gap":"2rem"}},"spacing":{"gutter":"2rem","sectionY":"6rem","scale":["0","0.25rem","0.5rem","0.75rem","1rem","1.5rem","2rem","3rem","4rem","6rem"],"tokens":[0,4,8,12,16,24,32,48,64,96]},"shadow":{"sm":"0 1px 2px rgba(0,0,0,0.25)","md":"0 4px 16px rgba(0,0,0,0.35)","lg":"0 12px 40px rgba(0,0,0,0.50)","xl":"0 24px 64px rgba(0,0,0,0.60)"},"surfaces":{"base":"bg=#09090B shadow=none","raised":"bg=#18181B shadow=sm radius=lg","overlay":"bg=rgba(24,24,27,0.70) backdrop-blur=20px shadow=md radius=lg","modal":"bg=#18181B shadow=lg radius=xl"},"elevation":{"base":"none","raised":"sm","overlay":"md","modal":"lg"},"breakpoints":{"sm":"640px","md":"768px","lg":"1024px","xl":"1280px","2xl":"1536px"},"touchTarget":{"min":"44px"},"responsive":{"collapseStrategy":"hero-split→stacked-column, left-copy-above, right-widget-below, widget-shrinks-to-fit-viewport","hidePriority":["decorative-glow-orb","secondary-metric","widget-border-glow"]},"radius":{"sm":"4px","md":"8px","lg":"16px","xl":"24px","full":"9999px"},"transition":{"fast":"150ms ease-out","base":"300ms cubic-bezier(0.4, 0, 0.2, 1)","slow":"500ms cubic-bezier(0.4, 0, 0.2, 1)"}},"sections":[{"id":"hero-copy","type":"hero-split-left","purpose":"左侧文案区:H1 含 Indigo→Cyan 渐变关键词 + 副标题 + 双 CTA 按钮组","elements":{"badge":true,"title":true,"title_gradient_accent":true,"subtitle":true,"cta_primary":true,"cta_secondary":true,"icon_arrow_right":true,"icon_play":true},"copy":{"badge":"AI 生产力平台","title_prefix":"让 AI 跑流程，","title_accent":"让人做决策","subtitle":"智能自动化引擎接管数据整理、报告生成与跨系统同步，团队每天节省 3 小时事务性工作，聚焦真正创造价值的判断与协作。","cta_primary":"免费开始使用","cta_secondary":"观看演示"},"interactions":["smooth-scroll-to-#pricing","modal-open:#demo-video"],"notes":"title_accent 使用 brand-glow 渐变渲染;badge 用 overline 字阶 + primary/10 背景圆角 pill"},{"id":"hero-widget","type":"hero-visual-widget","purpose":"右侧 3D 玻璃拟态仪表板卡片:展示增长折线图 + 关键指标,传递产品可信度","elements":{"visual_hint":"3D glassmorphism dashboard card floating above subtle indigo glow orb, containing a growth line chart (indigo→cyan strokes) and two metric cards","widget_title":true,"widget_subtitle":true,"metric_cards":2,"chart_line":true,"decorative_glow_orb":true,"icon_trending_up":true},"copy":{"widget_title":"效率仪表板","widget_subtitle":"实时指标 · 过去 30 天","metric_1_label":"自动化任务","metric_1_value":"2,847","metric_1_trend":"+12.4%","metric_2_label":"节省工时","metric_2_value":"1,240h","metric_2_trend":"+8.7%","chart_label":"周效率指数"},"interactions":["counter-animate","scroll-reveal"],"notes":"卡片使用 surfaces.overlay 层级;背景半透明 rgba(24,24,27,0.55) + backdrop-blur-2xl;边框使用 widget-rim 渐变;右下角放置柔光 orb(blur-3xl, opacity 0.15 indigo)"}],"rules":{"dos":["H1 关键词使用 brand-glow 渐变(bg-clip-text),其余文字保持 foreground 纯色","右侧仪表板卡片使用玻璃拟态:半透明背景+backdrop-blur-2xl+微边框,悬浮于柔光 orb 之上","主 CTA 按钮使用 Indigo Core(#4F46E5)实色填充,hover 仅加深至 #4338CA 并上浮 2px,不改变饱和度","所有可点击元素最小触控区域 44px,按钮 padding 不低于 0.75rem 1.5rem","间距严格遵循 8pt 网格:gutter=2rem(32px),section 内元素间距为 8/16/24/32/48 之一"],"donts":["不要使用白底+紫色渐变 hero 背景——全页面保持 near-black(#09090B)底色","不要在 hero 区使用居中三列 feature 卡片布局","不要用 Emoji 或 Font Awesome 图标,统一使用 Lucide Icons 线性图标","不要使用纯黑(#000000)作为背景色,始终使用 #09090B","不要在 CTA 按钮上叠加超过一层渐变,主按钮纯色、次按钮描边即可"]},"promptGuide":{"quickRef":"near-black canvas + Indigo→Cyan gradient accents + Space Grotesk tight tracking + glassmorphism overlay cards + 8pt spatial grid + Lucide linear icons","examples":["用 Indigo-Glass 风格生成 Pricing 三卡对比","生成 Feature Bento 拼图区块,保持暗色玻璃态","用这套 tokens 做 SaaS 登录页的 testimonial 轮播"]}},"planReviews":[{"round":1,"ok":true,"score":93,"rubric":{"atmosphere":8,"color":18,"typography":10,"components":12,"layout":10,"depth":5,"rules":5,"responsive":7,"sections":18},"issues":["[lint:warn] components.button-primary textColor (#09090b) on backgro…","[lint:warn] colors.primary 'primary' is defined but never…","[lint:warn] colors.secondary 'secondary' is defined but nev…","[lint:warn] colors.accent 'accent' is defined but never …","[lint:warn] colors.success 'success' is defined but never…","[lint:warn] colors.warning 'warning' is defined but never…","[lint:warn] colors.danger 'danger' is defined but never …","[lint:warn] colors.info 'info' is defined but never re…","[lint:warn] colors.background 'background' is defined but ne…","[lint:warn] colors.foreground 'foreground' is defined but ne…","[lint:warn] colors.card 'card' is defined but never re…","[lint:warn] colors.border 'border' is defined but never …","[lint:warn] colors.muted 'muted' is defined but never r…"]}],"planId":"8a5c3f7e-2d4b-4a9e-b1f6-7c8d3e0a9b12"}```

total_tokens

13791

summary

暗色极简Hero区，左侧渐变标题+双CTA，右侧3D玻璃拟态仪表板展示增长曲线

uiParsing

关闭