CodeWiz AI官网设计：深色科技风9区块布局

By 13082141699, 17 May, 2026

角色

assistant

content

```json{"summary":"根据蓝图生成了CodeWiz AI官网，包含9个区块，采用深色科技风格","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>CodeWiz AI - 让AI成为你的编程搭档</title>\n <script src=\"https://cdn.tailwindcss.com\"></script>\n <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&fam…\">\n <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.c…\">\n <script>\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n primary: 'var(--color-primary)',\n secondary: 'var(--color-secondary)',\n accent: 'var(--color-accent)',\n success: 'var(--color-success)',\n warning: 'var(--color-warning)',\n danger: 'var(--color-danger)',\n info: 'var(--color-info)',\n background: 'var(--color-background)',\n foreground: 'var(--color-foreground)',\n card: 'var(--color-card)',\n border: 'var(--color-border)',\n muted: 'var(--color-muted)'\n },\n fontFamily: {\n heading: ['Plus Jakarta Sans', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'sans-serif'],\n body: ['Inter', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'sans-serif'],\n mono: ['JetBrains Mono', 'SF Mono', 'Consolas', 'monospace']\n },\n fontSize: {\n 'display': ['clamp(2.5rem, 5vw, 4rem)', { lineHeight: '1.05', letterSpacing: '-0.02em', fontWeight: '700' }],\n 'h1': ['clamp(2rem, 3.5vw, 3rem)', { lineHeight: '1.1', letterSpacing: '-0.015em', fontWeight: '600' }],\n 'h2': ['clamp(1.5rem, 2.5vw, 2.25rem)', { lineHeight: '1.2', fontWeight: '600' }],\n 'h3': ['1.5rem', { lineHeight: '1.3', fontWeight: '600' }],\n 'h4': ['1.25rem', { lineHeight: '1.4', fontWeight: '500' }],\n 'body': ['1rem', { lineHeight: '1.6', fontWeight: '400' }],\n 'small': ['0.875rem', { lineHeight: '1.5', fontWeight: '400' }],\n 'caption': ['0.75rem', { lineHeight: '1.4', letterSpacing: '0.02em', fontWeight: '400' }],\n 'button': ['0.95rem', { lineHeight: '1', letterSpacing: '0.01em', fontWeight: '600' }],\n 'overline': ['0.75rem', { lineHeight: '1.2', letterSpacing: '0.08em', fontWeight: '600' }]\n },\n borderRadius: {\n sm: '4px',\n md: '8px',\n lg: '16px',\n xl: '24px',\n full: '9999px'\n },\n boxShadow: {\n sm: '0 1px 2px rgba(0,0,0,.06)',\n md: '0 4px 12px rgba(0,0,0,.08)',\n lg: '0 12px 32px rgba(0,0,0,.12)',\n xl: '0 24px 64px rgba(0,0,0,.16)'\n },\n animation: {\n 'fade-in': 'fadeIn 0.5s ease-out forwards',\n 'slide-up': 'slideUp 0.5s ease-out forwards',\n 'scale-in': 'scaleIn 0.3s ease-out forwards'\n }\n }\n }\n }\n </script>\n <style>\n :root {\n --color-primary: #3b82f6;\n --color-secondary: #1e40af;\n --color-accent: #06b6d4;\n --color-success: #10b981;\n --color-warning: #f59e0b;\n --color-danger: #ef4444;\n --color-info: #6366f1;\n --color-background: #0f1117;\n --color-foreground: #f8f8f8;\n --color-card: #1e1e2e;\n --color-border: #2d2d3d;\n --color-muted: #6b7280;\n }\n \n body {\n background-color: var(--color-background);\n color: var(--color-foreground);\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n overflow-x: hidden;\n }\n \n .tech-glow {\n background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);\n }\n \n .gradient-accent {\n background: linear-gradient(90deg, #3b82f6, #06b6d4);\n }\n \n .btn-primary {\n background-color: var(--color-primary);\n color: var(--color-background);\n padding: 0.75rem 1.5rem;\n border-radius: 8px;\n font-weight: 600;\n font-size: 0.95rem;\n letter-spacing: 0.01em;\n line-height: 1;\n min-height: 44px;\n min-width: 44px;\n transition: all 150ms ease-out;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n \n .btn-primary:hover {\n background-color: #2563eb;\n transform: translateY(-1px);\n box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);\n }\n \n .btn-primary:active {\n background-color: #1d4ed8;\n transform: translateY(0);\n box-shadow: 0 1px 2px rgba(59, 130, 246, 0.2);\n }\n \n .btn-primary:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-accent);\n }\n \n .btn-primary:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n transform: none;\n box-shadow: none;\n }\n \n .btn-secondary {\n background-color: var(--color-card);\n color: var(--color-foreground);\n padding: 0.75rem 1.5rem;\n border-radius: 8px;\n font-weight: 600;\n font-size: 0.95rem;\n letter-spacing: 0.01em;\n line-height: 1;\n min-height: 44px;\n min-width: 44px;\n border: 1px solid var(--color-border);\n transition: all 150ms ease-out;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n \n .btn-secondary:hover {\n background-color: var(--color-muted);\n transform: translateY(-1px);\n box-shadow: 0 4px 12px rgba(0,0,0,0.2);\n }\n \n .btn-secondary:active {\n background-color: #4b5563;\n transform: translateY(0);\n box-shadow: 0 1px 2px rgba(0,0,0,0.2);\n }\n \n .btn-secondary:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-accent);\n }\n \n .btn-secondary:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n transform: none;\n box-shadow: none;\n }\n \n .btn-ghost {\n background-color: transparent;\n color: var(--color-foreground);\n padding: 0.75rem 1.5rem;\n border-radius: 8px;\n font-weight: 600;\n font-size: 0.95rem;\n letter-spacing: 0.01em;\n line-height: 1;\n min-height: 44px;\n min-width: 44px;\n transition: all 150ms ease-out;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n \n .btn-ghost:hover {\n background-color: rgba(107, 114, 128, 0.2);\n }\n \n .btn-ghost:active {\n background-color: rgba(107, 114, 128, 0.3);\n }\n \n .btn-ghost:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-accent);\n }\n \n .btn-ghost:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n \n .card {\n background-color: var(--color-card);\n border-radius: 16px;\n padding: 1.5rem;\n border: 1px solid var(--color-border);\n box-shadow: 0 1px 2px rgba(0,0,0,.06);\n transition: all 300ms ease-out;\n }\n \n .card:hover {\n box-shadow: 0 4px 12px rgba(0,0,0,.08);\n transform: translateY(-2px);\n }\n \n .nav {\n background-color: rgba(15, 17, 23, 0.9);\n backdrop-filter: blur(12px);\n height: 4rem;\n }\n \n .nav.scrolled {\n background-color: var(--color-background);\n box-shadow: 0 1px 2px rgba(0,0,0,.06);\n }\n \n .input {\n background-color: var(--color-background);\n color: var(--color-foreground);\n border: 1px solid var(--color-border);\n border-radius: 8px;\n padding: 0.625rem 0.875rem;\n min-height: 44px;\n transition: all 150ms ease-out;\n }\n \n .input:hover {\n border-color: var(--color-muted);\n }\n \n .input:focus {\n border-color: var(--color-primary);\n box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);\n outline: none;\n }\n \n .input.error {\n border-color: var(--color-danger);\n box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);\n }\n \n .input:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n \n @keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n \n @keyframes slideUp {\n from { opacity: 0; transform: translateY(20px); }\n to { opacity: 1; transform: translateY(0); }\n }\n \n @keyframes scaleIn {\n from { opacity: 0; transform: scale(0.95); }\n to { opacity: 1; transform: scale(1); }\n }\n \n .code-preview {\n background: linear-gradient(135deg, #1a1a2e 0%, #0f1117 100%);\n border: 1px solid rgba(45, 45, 61, 0.5);\n border-radius: 12px;\n padding: 1.5rem;\n font-family: 'JetBrains Mono', monospace;\n font-size: 0.875rem;\n line-height: 1.5;\n color: #e2e8f0;\n position: relative;\n overflow: hidden;\n }\n \n .code-preview::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 3px;\n background: linear-gradient(90deg, #3b82f6, #06b6d4);\n }\n \n .code-line {\n margin-bottom: 0.5rem;\n }\n \n .code-comment { color: #6b7280; }\n \n .code-keyword { color: #c084fc; }\n \n .code-string { color: #86efac; }\n \n .code-function { color: #93c5fd; }\n \n .code-operator { color: #f59e0b; }\n \n .feature-icon {\n width: 48px;\n height: 48px;\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1.25rem;\n margin-bottom: 1rem;\n }\n \n .accordion-header {\n cursor: pointer;\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1.25rem 0;\n border-bottom: 1px solid var(--color-border);\n }\n \n .accordion-content {\n max-height: 0;\n overflow: hidden;\n transition: max-height 0.3s ease-out;\n }\n \n .accordion-content.open {\n max-height: 300px;\n padding: 1rem 0 1.25rem;\n }\n \n .pricing-toggle {\n position: relative;\n display: inline-flex;\n background-color: var(--color-card);\n border-radius: 8px;\n padding: 0.25rem;\n border: 1px solid var(--color-border);\n }\n \n .pricing-option {\n padding: 0.5rem 1rem;\n border-radius: 6px;\n font-weight: 500;\n font-size: 0.875rem;\n color: var(--color-muted);\n cursor: pointer;\n transition: all 150ms ease-out;\n }\n \n .pricing-option.active {\n background-color: var(--color-primary);\n color: var(--color-background);\n }\n \n .popular-badge {\n background: linear-gradient(90deg, #3b82f6, #06b6d4);\n color: var(--color-background);\n padding: 0.25rem 0.75rem;\n border-radius: 9999px;\n font-size: 0.75rem;\n font-weight: 600;\n display: inline-block;\n margin-bottom: 0.5rem;\n }\n \n .mobile-menu {\n transform: translateX(100%);\n transition: transform 300ms cubic-bezier(0.4,0,0.2,1);\n }\n \n .mobile-menu.open {\n transform: translateX(0);\n }\n \n @media (max-width: 767px) {\n .mobile-menu {\n width: 85vw;\n }\n }\n \n .noise-overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n z-index: 9999;\n opacity: 0.03;\n background-image: url('https://www.transparenttextures.com/patterns/asfalt-light.png');\n }\n \n .gradient-mesh {\n background: radial-gradient(ellipse at 20% 80%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),\n radial-gradient(ellipse at 80% 20%, rgba(6, 182, 212, 0.06) 0%, transparent 50%);\n }\n </style>\n</head>\n<body class=\"min-h-screen relative\">\n <div class=\"noise-overlay\"></div>\n \n \n <nav id=\"navbar\" class=\"nav fixed top-0 left-0 right-0 z-50 border-b border-border\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-full flex items-center justify-between\">\n <div class=\"flex items-center\">\n <div class=\"w-8 h-8 rounded-md bg-primary flex items-center justify-center mr-2\">\n <i class=\"fas fa-code text-background\"></i>\n </div>\n <span class=\"font-heading font-bold text-xl\">CodeWiz AI</span>\n </div>\n \n <div class=\"hidden md:flex items-center space-x-8\">\n <a href=\"#\" class=\"font-body text-foreground hover:text-primary transition-colors\">产品</a>\n <a href=\"#pricing\" class=\"font-body text-foreground hover:text-primary transition-colors\">定价</a>\n <a href=\"#\" class=\"font-body text-foreground hover:text-primary transition-colors\">文档</a>\n <a href=\"#\" class=\"font-body text-foreground hover:text-primary transition-colors\">案例</a>\n </div>\n \n <div class=\"hidden md:flex items-center space-x-4\">\n <button class=\"btn-primary\">开始免费试用</button>\n </div>\n \n <button id=\"mobile-menu-button\" class=\"md:hidden p-2 text-foreground\">\n <i class=\"fas fa-bars text-xl\"></i>\n </button>\n </div>\n </nav>\n \n \n <div id=\"mobile-menu\" class=\"mobile-menu fixed inset-y-0 right-0 z-50 bg-card border-l border-border\">\n <div class=\"flex flex-col h-full p-6\">\n <div class=\"flex items-center justify-between mb-8\">\n <span class=\"font-heading font-bold text-xl\">CodeWiz AI</span>\n <button id=\"mobile-menu-close\" class=\"p-2 text-foreground\">\n <i class=\"fas fa-times text-xl\"></i>\n </button>\n </div>\n \n <div class=\"flex flex-col space-y-6 mb-8\">\n <a href=\"#\" class=\"font-body text-lg text-foreground hover:text-primary transition-colors\">产品</a>\n <a href=\"#pricing\" class=\"font-body text-lg text-foreground hover:text-primary transition-colors\">定价</a>\n <a href=\"#\" class=\"font-body text-lg text-foreground hover:text-primary transition-colors\">文档</a>\n <a href=\"#\" class=\"font-body text-lg text-foreground hover:text-primary transition-colors\">案例</a>\n </div>\n \n <div class=\"mt-auto\">\n <button class=\"btn-primary w-full\">开始免费试用</button>\n </div>\n </div>\n </div>\n \n \n <section id=\"hero\" class=\"gradient-mesh pt-20 pb-16 md:pt-28 md:pb-24\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"flex flex-col lg:flex-row items-center gap-12\">\n <div class=\"lg:w-1/2 animate-fade-in\">\n <div class=\"mb-6\">\n <span class=\"overline inline-block px-3 py-1 rounded-full bg-primary/10 text-primary mb-4\">支持20+编程语言</span>\n <h1 class=\"font-heading display text-foreground mb-4\">\n 让AI成为你的<span class=\"text-primary\">编程搭档</span>\n </h1>\n <p class=\"font-body text-muted text-lg md:text-xl mb-8 max-w-lg\">\n CodeWiz AI通过智能代码补全、实时协作和代码分析，将团队开发效率提升3倍。\n </p>\n </div>\n \n <div class=\"flex flex-col sm:flex-row gap-4 mb-8\">\n <button class=\"btn-primary px-8 py-4 text-lg\">\n 免费开始使用\n <i class=\"fas fa-arrow-right ml-2\"></i>\n </button>\n <button class=\"btn-secondary px-8 py-4 text-lg\">\n <i class=\"fas fa-play mr-2\"></i>\n 观看演示\n </button>\n </div>\n \n <div class=\"flex items-center text-muted\">\n <i class=\"fas fa-star text-warning mr-2\"></i>\n <span class=\"font-body small\">4.9/5 基于 2,400+ 用户评价</span>\n </div>\n </div>\n \n <div class=\"lg:w-1/2 animate-slide-up\">\n <div class=\"code-preview relative\">\n <div class=\"flex items-center mb-4\">\n <div class=\"w-3 h-3 rounded-full bg-danger mr-2\"></div>\n <div class=\"w-3 h-3 rounded-full bg-warning mr-2\"></div>\n <div class=\"w-3 h-3 rounded-full bg-success\"></div>\n <span class=\"ml-4 font-mono text-sm text-muted\">main.py - CodeWiz AI</span>\n </div>\n <div class=\"code-line\">\n <span class=\"code-comment\"># CodeWiz AI 智能代码补全示例</span>\n </div>\n <div class=\"code-line\">\n <span class=\"code-keyword\">import</span> pandas <span class=\"code-keyword\">as</span> pd\n </div>\n <div class=\"code-line\">\n <span class=\"code-keyword\">from</span> sklearn.model_selection <span class=\"code-keyword\">import</span> train_test_split\n </div>\n <div class=\"code-line\">\n \n </div>\n <div class=\"code-line\">\n <span class=\"code-keyword\">def</span> <span class=\"code-function\">analyze_data</span>(data):\n </div>\n <div class=\"code-line\">\n   <span class=\"code-comment\"># AI 补全: 自动识别数据模式</span>\n </div>\n <div class=\"code-line\">\n   model = <span class=\"code-function\">train_model</span>(data)\n </div>\n <div class=\"code-line\">\n   <span class=\"code-keyword\">return</span> model.<span class=\"code-function\">predict</span>(data)\n </div>\n <div class=\"code-line\">\n \n </div>\n <div class=\"code-line\">\n <span class=\"code-comment\"># 实时协作: 多人同时编辑</span>\n </div>\n <div class=\"code-line\">\n <span class=\"code-operator\">>>> </span><span class=\"text-accent\">[AI]</span> 检测到性能优化点: 建议使用向量化操作\n </div>\n \n <div class=\"absolute bottom-4 right-4 flex items-center bg-card/80 rounded-md px-3 py-1\">\n <div class=\"w-2 h-2 rounded-full bg-success mr-2\"></div>\n <span class=\"font-mono text-xs text-muted\">3位开发者正在协作</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n </section>\n \n \n <section id=\"features\" class=\"py-16 md:py-24\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"text-center mb-16\">\n <h2 class=\"font-heading h2 text-foreground mb-4\">强大能力，简单集成</h2>\n <p class=\"font-body text-muted text-lg max-w-2xl mx-auto\">四个核心功能，覆盖开发生命周期</p>\n </div>\n \n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8\">\n \n <div class=\"card animate-scale-in\">\n <div class=\"feature-icon bg-primary/10 text-primary\">\n <i class=\"fas fa-magic\"></i>\n </div>\n <h3 class=\"font-heading h4 text-foreground mb-2\">智能代码补全</h3>\n <p class=\"font-body text-muted small\">上下文感知的代码建议，支持20+语言，补全准确率高达95%。</p>\n </div>\n \n \n <div class=\"card animate-scale-in\">\n <div class=\"feature-icon bg-accent/10 text-accent\">\n <i class=\"fas fa-users\"></i>\n </div>\n <h3 class=\"font-heading h4 text-foreground mb-2\">实时协作</h3>\n <p class=\"font-body text-muted small\">多人同时编辑，实时同步，冲突自动解决，像Google Docs一样流畅。</p>\n </div>\n \n \n <div class=\"card animate-scale-in\">\n <div class=\"feature-icon bg-info/10 text-info\">\n <i class=\"fas fa-chart-line\"></i>\n </div>\n <h3 class=\"font-heading h4 text-foreground mb-2\">代码分析</h3>\n <p class=\"font-body text-muted small\">深度代码质量分析，性能优化建议，技术债务可视化。</p>\n </div>\n \n \n <div class=\"card animate-scale-in\">\n <div class=\"feature-icon bg-success/10 text-success\">\n <i class=\"fas fa-shield-alt\"></i>\n </div>\n <h3 class=\"font-heading h4 text-foreground mb-2\">安全审计</h3>\n <p class=\"font-body text-muted small\">自动检测安全漏洞，符合GDPR和SOC2标准，修复建议一键应用。</p>\n </div>\n </div>\n </div>\n </section>\n \n \n <section id=\"workflow\" class=\"py-16 md:py-24 gradient-mesh\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"text-center mb-16\">\n <h2 class=\"font-heading h2 text-foreground mb-4\">四步开始智能开发</h2>\n <p class=\"font-body text-muted text-lg max-w-2xl mx-auto\">从代码导入到AI增强，无缝集成现有工作流</p>\n </div>\n \n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8\">\n \n <div class=\"text-center\">\n <div class=\"w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-4\">\n <span class=\"font-heading text-primary text-xl font-bold\">1</span>\n </div>\n <div class=\"feature-icon bg-primary/10 text-primary mx-auto\">\n <i class=\"fas fa-link\"></i>\n </div>\n <h3 class=\"font-heading h4 text-foreground mb-2\">连接仓库</h3>\n <p class=\"font-body text-muted small\">一键连接GitHub/GitLab，自动导入项目结构和代码。</p>\n </div>\n \n \n <div class=\"text-center\">\n <div class=\"w-16 h-16 rounded-full bg-accent/10 flex items-center justify-center mx-auto mb-4\">\n <span class=\"font-heading text-accent text-xl font-bold\">2</span>\n </div>\n <div class=\"feature-icon bg-accent/10 text-accent mx-auto\">\n <i class=\"fas fa-brain\"></i>\n </div>\n <h3 class=\"font-heading h4 text-foreground mb-2\">AI分析</h3>\n <p class=\"font-body text-muted small\">CodeWiz AI深度分析代码结构和模式，识别优化点。</p>\n </div>\n \n \n <div class=\"text-center\">\n <div class=\"w-16 h-16 rounded-full bg-info/10 flex items-center justify-center mx-auto mb-4\">\n <span class=\"font-heading text-info text-xl font-bold\">3</span>\n </div>\n <div class=\"feature-icon bg-info/10 text-info mx-auto\">\n <i class=\"fas fa-lightbulb\"></i>\n </div>\n <h3 class=\"font-heading h4 text-foreground mb-2\">智能建议</h3>\n <p class=\"font-body text-muted small\">实时提供重构、优化和安全建议，支持批量操作。</p>\n </div>\n \n \n <div class=\"text-center\">\n <div class=\"w-16 h-16 rounded-full bg-success/10 flex items-center justify-center mx-auto mb-4\">\n <span class=\"font-heading text-success text-xl font-bold\">4</span>\n </div>\n <div class=\"feature-icon bg-success/10 text-success mx-auto\">\n <i class=\"fas fa-check-circle\"></i>\n </div>\n <h3 class=\"font-heading h4 text-foreground mb-2\">一键应用</h3>\n <p class=\"font-body text-muted small\">审查后一键应用变更，自动提交，保持代码历史清晰。</p>\n </div>\n </div>\n </div>\n </section>\n \n \n <section id=\"testimonial\" class=\"py-16 md:py-24\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"text-center mb-16\">\n <h2 class=\"font-heading h2 text-foreground mb-4\">团队信赖之选</h2>\n <p class=\"font-body text-muted text-lg max-w-2xl mx-auto\">从初创公司到企业团队，都在使用CodeWiz AI</p>\n </div>\n \n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-8\">\n \n <div class=\"card\">\n <div class=\"flex items-center mb-4\">\n <div class=\"flex text-warning\">\n <i class=\"fas fa-star\"></i>\n <i class=\"fas fa-star\"></i>\n <i class=\"fas fa-star\"></i>\n <i class=\"fas fa-star\"></i>\n <i class=\"fas fa-star\"></i>\n </div>\n <span class=\"ml-2 font-body text-muted small\">5.0</span>\n </div>\n <p class=\"font-body text-foreground mb-6\">\"CodeWiz将我们的代码审查时间缩短了70%，现在团队能更专注于创新。\"</p>\n <div class=\"flex items-center\">\n <div class=\"w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mr-3\">\n <span class=\"font-heading text-primary font-bold\">S</span>\n </div>\n <div>\n <p class=\"font-heading font-semibold text-foreground\">Sarah Chen</p>\n <p class=\"font-body text-muted small\">CTO @DataFlow</p>\n </div>\n </div>\n </div>\n \n \n <div class=\"card\">\n <div class=\"flex items-center mb-4\">\n <div class=\"flex text-warning\">\n <i class=\"fas fa-star\"></i>\n <i class=\"fas fa-star\"></i>\n <i class=\"fas fa-star\"></i>\n <i class=\"fas fa-star\"></i>\n <i class=\"fas fa-star\"></i>\n </div>\n <span class=\"ml-2 font-body text-muted small\">5.0</span>\n </div>\n <p class=\"font-body text-foreground mb-6\">\"AI代码补全非常精准，几乎像它能读懂我的想法，编码速度提升了一倍。\"</p>\n <div class=\"flex items-center\">\n <div class=\"w-10 h-10 rounded-full bg-accent/10 flex items-center justify-center mr-3\">\n <span class=\"font-heading text-accent font-bold\">M</span>\n </div>\n <div>\n <p class=\"font-heading font-semibold text-foreground\">Marcus Johnson</p>\n <p class=\"font-body text-muted small\">高级开发者 @TechNova</p>\n </div>\n </div>\n </div>\n \n \n <div class=\"card\">\n <div class=\"flex items-center mb-4\">\n <div class=\"flex text-warning\">\n <i class=\"fas fa-star\"></i>\n <i class=\"fas fa-star\"></i>\n <i class=\"fas fa-star\"></i>\n <i class=\"fas fa-star\"></i>\n <i class=\"fas fa-star-half-alt\"></i>\n </div>\n <span class=\"ml-2 font-body text-muted small\">4.9</span>\n </div>\n <p class=\"font-body text-foreground mb-6\">\"实时协作功能让远程团队的效率提升了200%，再也不用等待代码合并。\"</p>\n <div class=\"flex items-center\">\n <div class=\"w-10 h-10 rounded-full bg-info/10 flex items-center justify-center mr-3\">\n <span class=\"font-heading text-info font-bold\">P</span>\n </div>\n <div>\n <p class=\"font-heading font-semibold text-foreground\">Priya Patel</p>\n <p class=\"font-body text-muted small\">工程经理 @CloudScale</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </section>\n \n \n <section id=\"pricing\" class=\"py-16 md:py-24 gradient-mesh\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"text-center mb-16\">\n <h2 class=\"font-heading h2 text-foreground mb-4\">透明定价，按需选择</h2>\n <p class=\"font-body text-muted text-lg max-w-2xl mx-auto\">从免费到企业级，找到适合团队规模的方案</p>\n </div>\n \n <div class=\"flex justify-center mb-12\">\n <div class=\"pricing-toggle\">\n <div id=\"monthly-toggle\" class=\"pricing-option active\" data-plan=\"monthly\">月付</div>\n <div id=\"yearly-toggle\" class=\"pricing-option\" data-plan=\"yearly\">年付（省20%）</div>\n </div>\n </div>\n \n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-8\">\n \n <div class=\"card\">\n <h3 class=\"font-heading h4 text-foreground mb-2\">免费版</h3>\n <div class=\"mb-6\">\n <span class=\"font-heading display text-primary\">$0</span>\n <span class=\"font-body text-muted small\">/月</span>\n </div>\n <ul class=\"space-y-3 mb-8\">\n <li class=\"flex items-center\">\n <i class=\"fas fa-check text-success mr-2\"></i>\n <span class=\"font-body text-foreground\">3个项目</span>\n </li>\n <li class=\"flex items-center\">\n <i class=\"fas fa-check text-success mr-2\"></i>\n <span class=\"font-body text-foreground\">基础AI补全</span>\n </li>\n <li class=\"flex items-center\">\n <i class=\"fas fa-check text-success mr-2\"></i>\n <span class=\"font-body text-foreground\">社区支持</span>\n </li>\n </ul>\n <button class=\"btn-secondary w-full\">开始使用</button>\n </div>\n \n \n <div class=\"card border-2 border-primary relative\">\n <div class=\"popular-badge absolute top-4 right-4\">最受欢迎</div>\n <h3 class=\"font-heading h4 text-foreground mb-2\">专业版</h3>\n <div class=\"mb-6\">\n <span class=\"font-heading display text-primary\">$29</span>\n <span class=\"font-body text-muted small\">/月</span>\n </div>\n <ul class=\"space-y-3 mb-8\">\n <li class=\"flex items-center\">\n <i class=\"fas fa-check text-success mr-2\"></i>\n <span class=\"font-body text-foreground\">无限项目</span>\n </li>\n <li class=\"flex items-center\">\n <i class=\"fas fa-check text-success mr-2\"></i>\n <span class=\"font-body text-foreground\">高级AI功能</span>\n </li>\n <li class=\"flex items-center\">\n <i class=\"fas fa-check text-success mr-2\"></i>\n <span class=\"font-body text-foreground\">优先支持</span>\n </li>\n <li class=\"flex items-center\">\n <i class=\"fas fa-check text-success mr-2\"></i>\n <span class=\"font-body text-foreground\">团队协作</span>\n </li>\n </ul>\n <button class=\"btn-primary w-full\">选择专业版</button>\n </div>\n \n \n <div class=\"card\">\n <h3 class=\"font-heading h4 text-foreground mb-2\">企业版</h3>\n <div class=\"mb-6\">\n <span class=\"font-heading display text-primary\">定制</span>\n </div>\n <ul class=\"space-y-3 mb-8\">\n <li class=\"flex items-center\">\n <i class=\"fas fa-check text-success mr-2\"></i>\n <span class=\"font-body text-foreground\">定制AI模型</span>\n </li>\n <li class=\"flex items-center\">\n <i class=\"fas fa-check text-success mr-2\"></i>\n <span class=\"font-body text-foreground\">专属支持</span>\n </li>\n <li class=\"flex items-center\">\n <i class=\"fas fa-check text-success mr-2\"></i>\n <span class=\"font-body text-foreground\">SLA保障</span>\n </li>\n </ul>\n <button class=\"btn-secondary w-full\">联系销售</button>\n </div>\n </div>\n </div>\n </section>\n \n \n <section id=\"faq\" class=\"py-16 md:py-24\">\n <div class=\"max-w-3xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"text-center mb-16\">\n <h2 class=\"font-heading h2 text-foreground mb-4\">常见问题</h2>\n <p class=\"font-body text-muted text-lg max-w-2xl mx-auto\">快速找到您需要的答案</p>\n </div>\n \n <div class=\"space-y-0\">\n \n <div class=\"accordion\">\n <div class=\"accordion-header\">\n <h3 class=\"font-heading text-foreground font-medium\">CodeWiz AI支持哪些编程语言？</h3>\n <i class=\"fas fa-chevron-down text-muted transition-transform\"></i>\n </div>\n <div class=\"accordion-content\">\n <p class=\"font-body text-muted\">目前支持Python、JavaScript、TypeScript、Java、C++、Go、Rust等20+主流语言，并且每月新增语言支持。</p>\n </div>\n </div>\n \n \n <div class=\"accordion\">\n <div class=\"accordion-header\">\n <h3 class=\"font-heading text-foreground font-medium\">我的代码数据安全吗？</h3>\n <i class=\"fas fa-chevron-down text-muted transition-transform\"></i>\n </div>\n <div class=\"accordion-content\">\n <p class=\"font-body text-muted\">绝对安全。所有代码在本地加密处理，我们不存储代码内容，仅收集匿名使用数据以改进服务。符合GDPR和SOC2标准。</p>\n </div>\n </div>\n \n \n <div class=\"accordion\">\n <div class=\"accordion-header\">\n <h3 class=\"font-heading text-foreground font-medium\">如何与现有开发工具集成？</h3>\n <i class=\"fas fa-chevron-down text-muted transition-transform\"></i>\n </div>\n <div class=\"accordion-content\">\n <p class=\"font-body text-muted\">支持VS Code、IntelliJ、Neovim等主流IDE，提供CLI工具，可通过API与CI/CD流水线集成。</p>\n </div>\n </div>\n \n \n <div class=\"accordion\">\n <div class=\"accordion-header\">\n <h3 class=\"font-heading text-foreground font-medium\">可以离线使用吗？</h3>\n <i class=\"fas fa-chevron-down text-muted transition-transform\"></i>\n </div>\n <div class=\"accordion-content\">\n <p class=\"font-body text-muted\">基础代码补全支持离线使用，高级AI功能需要网络连接。企业版可部署私有化实例，完全离线运行。</p>\n </div>\n </div>\n </div>\n </div>\n </section>\n \n \n <section id=\"cta\" class=\"py-16 md:py-24\">\n <div class=\"max-w-4xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"tech-glow rounded-2xl p-8 md:p-12 text-center\">\n <h2 class=\"font-heading h2 text-background mb-4\">准备好提升开发效率了吗？</h2>\n <p class=\"font-body text-background/80 text-lg mb-8 max-w-xl mx-auto\">加入10,000+开发者的行列，体验AI编程协作的未来</p>\n <div class=\"flex flex-col sm:flex-row gap-4 justify-center\">\n <button class=\"btn-secondary bg-background text-foreground px-8 py-4 text-lg\">\n 免费开始使用\n <i class=\"fas fa-arrow-right ml-2\"></i>\n </button>\n <button class=\"btn-ghost px-8 py-4 text-lg text-background\">\n <i class=\"fas fa-calendar mr-2\"></i>\n 预约演示\n </button>\n </div>\n </div>\n </div>\n </section>\n \n \n <footer class=\"py-12 md:py-16 border-t border-border\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8\">\n \n <div class=\"lg:col-span-2\">\n <div class=\"flex items-center mb-4\">\n <div class=\"w-8 h-8 rounded-md bg-primary flex items-center justify-center mr-2\">\n <i class=\"fas fa-code text-background\"></i>\n </div>\n <span class=\"font-heading font-bold text-xl\">CodeWiz AI</span>\n </div>\n <p class=\"font-body text-muted mb-6 max-w-xs\">下一代AI编程协作平台，让每个开发者都能高效创造。</p>\n <div class=\"flex space-x-4\">\n <a href=\"#\" class=\"w-10 h-10 rounded-full bg-card flex items-center justify-center text-foreground hover:bg-primary hover:text-background transition-colors\">\n <i class=\"fab fa-twitter\"></i>\n </a>\n <a href=\"#\" class=\"w-10 h-10 rounded-full bg-card flex items-center justify-center text-foreground hover:bg-primary hover:text-background transition-colors\">\n <i class=\"fab fa-github\"></i>\n </a>\n <a href=\"#\" class=\"w-10 h-10 rounded-full bg-card flex items-center justify-center text-foreground hover:bg-primary hover:text-background transition-colors\">\n <i class=\"fab fa-discord\"></i>\n </a>\n </div>\n </div>\n \n \n <div>\n <h4 class=\"font-heading font-semibold text-foreground mb-4\">产品</h4>\n <ul class=\"space-y-2\">\n <li><a href=\"#\" class=\"font-body text-muted hover:text-primary transition-colors\">功能</a></li>\n <li><a href=\"#pricing\" class=\"font-body text-muted hover:text-primary transition-colors\">定价</a></li>\n <li><a href=\"#\" class=\"font-body text-muted hover:text-primary transition-colors\">集成</a></li>\n <li><a href=\"#\" class=\"font-body text-muted hover:text-primary transition-colors\">更新日志</a></li>\n </ul>\n </div>\n \n <div>\n <h4 class=\"font-heading font-semibold text-foreground mb-4\">资源</h4>\n <ul class=\"space-y-2\">\n <li><a href=\"#\" class=\"font-body text-muted hover:text-primary transition-colors\">文档</a></li>\n <li><a href=\"#\" class=\"font-body text-muted hover:text-primary transition-colors\">API参考</a></li>\n <li><a href=\"#\" class=\"font-body text-muted hover:text-primary transition-colors\">教程</a></li>\n <li><a href=\"#\" class=\"font-body text-muted hover:text-primary transition-colors\">博客</a></li>\n </ul>\n </div>\n \n <div>\n <h4 class=\"font-heading font-semibold text-foreground mb-4\">公司</h4>\n <ul class=\"space-y-2\">\n <li><a href=\"#\" class=\"font-body text-muted hover:text-primary transition-colors\">关于我们</a></li>\n <li><a href=\"#\" class=\"font-body text-muted hover:text-primary transition-colors\">Careers</a></li>\n <li><a href=\"#\" class=\"font-body text-muted hover:text-primary transition-colors\">新闻</a></li>\n <li><a href=\"#\" class=\"font-body text-muted hover:text-primary transition-colors\">联系</a></li>\n </ul>\n </div>\n </div>\n \n <div class=\"border-t border-border mt-12 pt-8 flex flex-col md:flex-row justify-between items-center\">\n <p class=\"font-body text-muted small\">© 2024 CodeWiz AI. 保留所有权利。</p>\n <div class=\"flex space-x-6 mt-4 md:mt-0\">\n <a href=\"#\" class=\"font-body text-muted hover:text-primary transition-colors small\">隐私政策</a>\n <a href=\"#\" class=\"font-body text-muted hover:text-primary transition-colors small\">服务条款</a>\n <a href=\"#\" class=\"font-body text-muted hover:text-primary transition-colors small\">安全</a>\n </div>\n </div>\n </div>\n </footer>\n \n <script>\n // Mobile Menu\n const mobileMenuButton = document.getElementById('mobile-menu-button');\n const mobileMenu = document.getElementById('mobile-menu');\n const mobileMenuClose = document.getElementById('mobile-menu-close');\n \n mobileMenuButton.addEventListener('click', () => {\n mobileMenu.classList.add('open');\n document.body.style.overflow = 'hidden';\n });\n \n mobileMenuClose.addEventListener('click', () => {\n mobileMenu.classList.remove('open');\n document.body.style.overflow = '';\n });\n \n // Close mobile menu when clicking on links\n document.querySelectorAll('#mobile-menu a').forEach(link => {\n link.addEventListener('click', () => {\n mobileMenu.classList.remove('open');\n document.body.style.overflow = '';\n });\n });\n \n // Navbar scroll effect\n const navbar = document.getElementById('navbar');\n \n window.addEventListener('scroll', () => {\n if (window.scrollY > 10) {\n navbar.classList.add('scrolled');\n } else {\n navbar.classList.remove('scrolled');\n }\n });\n \n // Pricing toggle\n const monthlyToggle = document.getElementById('monthly-toggle');\n const yearlyToggle = document.getElementById('yearly-toggle');\n const priceElements = document.querySelectorAll('.font-heading.display');\n \n // Store original prices\n const monthlyPrices = ['$0', '$29', '定制'];\n const yearlyPrices = ['$0', '$290', '定制'];\n \n function updatePrices(isYearly) {\n const prices = isYearly ? yearlyPrices : monthlyPrices;\n priceElements.forEach((el, index) => {\n if (index < prices.length) {\n el.textContent = prices[index];\n }\n });\n }\n \n monthlyToggle.addEventListener('click', () => {\n monthlyToggle.classList.add('active');\n yearlyToggle.classList.remove('active');\n updatePrices(false);\n });\n \n yearlyToggle.addEventListener('click', () => {\n yearlyToggle.classList.add('active');\n monthlyToggle.classList.remove('active');\n updatePrices(true);\n });\n \n // FAQ Accordion\n document.querySelectorAll('.accordion-header').forEach(header => {\n header.addEventListener('click', () => {\n const content = header.nextElementSibling;\n const icon = header.querySelector('i');\n \n // Toggle content\n content.classList.toggle('open');\n \n // Rotate icon\n if (content.classList.contains('open')) {\n icon.style.transform = 'rotate(180deg)';\n } else {\n icon.style.transform = 'rotate(0deg)';\n }\n \n // Close other open accordions\n document.querySelectorAll('.accordion-content.open').forEach(openContent => {\n if (openContent !== content && openContent.classList.contains('open')) {\n openContent.classList.remove('open');\n const otherIcon = openContent.previousElementSibling.querySelector('i');\n otherIcon.style.transform = 'rotate(0deg)';\n }\n });\n });\n });\n \n // Smooth scrolling for anchor links\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function(e) {\n e.preventDefault();\n \n const targetId = this.getAttribute('href');\n if (targetId === '#') return;\n \n const targetElement = document.querySelector(targetId);\n if (targetElement) {\n window.scrollTo({\n top: targetElement.offsetTop - 80,\n behavior: 'smooth'\n });\n }\n });\n });\n \n // Animation on scroll (simplified)\n const animateOnScroll = () => {\n const elements = document.querySelectorAll('.animate-fade-in, .animate-slide-up, .animate-scale-in');\n \n elements.forEach(el => {\n const elementTop = el.getBoundingClientRect().top;\n const elementVisible = 150;\n \n if (elementTop < window.innerHeight - elementVisible) {\n el.style.opacity = '1';\n el.style.transform = 'none';\n }\n });\n };\n \n // Initial check\n animateOnScroll();\n \n // Listen for scroll\n window.addEventListener('scroll', animateOnScroll);\n \n // Set initial animation state\n document.querySelectorAll('.animate-fade-in, .animate-slide-up, .animate-scale-in').forEach(el => {\n el.style.opacity = '0';\n if (el.classList.contains('animate-slide-up')) {\n el.style.transform = 'translateY(20px)';\n } else if (el.classList.contains('animate-scale-in')) {\n el.style.transform = 'scale(0.95)';\n }\n el.style.transition = 'opacity 0.5s ease-out, transform 0.5s ease-out';\n });\n \n // Trigger animations after a slight delay\n setTimeout(() => {\n animateOnScroll();\n }, 100);\n </script>\n</body>\n</html>","next":["添加团队协作演示","优化移动端导航","增加更多语言支持","添加实时代码演示","创建集成指南页面"],"breakpoint":"none"},"plan":{"planId":"c7f8d3a1-5b2e-4c9d-8f6a-1e0b2c3d4e5f","goal":"AI编程协作平台官网，提升转化","audience":"正在评估AI编码工具的技术团队和开发者","tone":"minimal-dark-tech","type":"fullHTML","designTokens":{"style":{"name":"minimal-dark-tech","mood":"serious","keywords":["tech","professional","clean","trustworthy","precise"],"density":"comfortable","philosophy":"以功能为核心，通过克制的设计增强可信度"},"colors":{"primary":"#3b82f6","secondary":"#1e40af","accent":"#06b6d4","success":"#10b981","warning":"#f59e0b","danger":"#ef4444","info":"#6366f1","background":"#0f1117","foreground":"#f8f8f8","card":"#1e1e2e","border":"#2d2d3d","muted":"#6b7280"},"cssVarPrefix":"--color-","colorRoles":{"primary":{"name":"CodeWiz Blue","role":"主要CTA、焦点环、交互高亮"},"accent":{"name":"Tech Cyan","role":"次要强调、图标、成功状态"}},"gradients":[{"name":"tech-glow","stops":"linear-gradient(135deg, #1e40af 0%, #3b82f6 100%)","role":"Hero装饰背景"}],"states":{"hover":"#2563eb","active":"#1d4ed8","focus":"#06b6d4","disabled":"#6b7280"},"fonts":{"heading":"Plus Jakarta Sans","body":"Inter","mono":"JetBrains Mono","googleFontsUrl":"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&fam…;:{"heading":"'Plus Jakarta Sans', -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":{"size":"clamp(2.5rem, 5vw, 4rem)","weight":700,"lineHeight":"1.05","letterSpacing":"-0.02em"},"h1":{"size":"clamp(2rem, 3.5vw, 3rem)","weight":600,"lineHeight":"1.1","letterSpacing":"-0.015em"},"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=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","variants":{"primary":{"default":"bg=primary fg=background","hover":"bg=primary(-10%)","active":"bg=primary(-20%)","focus":"ring=2px solid accent","disabled":"opacity=0.5"},"secondary":{"default":"bg=card fg=foreground border=1px solid border","hover":"bg=muted","active":"bg=muted(-10%)","focus":"ring=2px solid accent","disabled":"opacity=0.5"},"ghost":{"default":"bg=transparent fg=foreground","hover":"bg=muted/20","active":"bg=muted/30","focus":"ring=2px solid accent","disabled":"opacity=0.5"}}},"card":{"default":"bg=card shadow=sm radius=lg padding=1.5rem border=1px solid border","hover":"shadow=md translateY=-2px"},"nav":{"default":"bg=background/90 backdrop-blur=12px height=4rem","scrolled":"bg=background shadow=sm","mobile":"drawer-from-right width=85vw"},"input":{"default":"bg=background fg=foreground border=1px solid border radius=md padding=0.625rem 0.875rem","hover":"border=1px solid muted","focus":"border=1px solid primary ring=3px primary/20","error":"border=1px solid danger ring=3px danger/20","disabled":"opacity=0.5 cursor=not-allowed"}},"layout":{"container":{"maxWidth":"1200px","paddingX":"1.5rem"},"grid":{"columns":12,"gap":"1.5rem"}},"spacing":{"gutter":"1.5rem","sectionY":"5rem","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,.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"},"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":"移动端堆叠布局，侧边栏转为抽屉，多列变为单列，表格转为卡片列表","hidePriority":["secondary-nav-links","decorative-illustration","stats-extra","footer-extra-links"]},"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":"nav","type":"nav-sticky","purpose":"顶部导航栏，包含品牌、链接和主要CTA","elements":{"brand":true,"links":true,"cta_primary":true,"mobile_toggle":true},"copy":{"brand":"CodeWiz AI","link_product":"产品","link_pricing":"定价","link_docs":"文档","link_case":"案例","cta_primary":"开始免费试用"},"interactions":["mobile-menu-toggle","smooth-scroll-to-#pricing"]},{"id":"hero","type":"hero-split","purpose":"主视觉区域，展示核心价值主张和产品预览","elements":{"gradient_accent":true,"cta_primary":true,"cta_secondary":true,"visual_hint":"代码编辑器界面，显示AI补全和协作状态","title_accent":true},"copy":{"title":"让AI成为你的编程搭档","title_accent":"3倍效率提升","subtitle":"CodeWiz AI通过智能代码补全、实时协作和代码分析，将团队开发效率提升3倍。","cta_primary":"免费开始使用","cta_secondary":"观看演示","badge":"支持20+编程语言"}},{"id":"features","type":"feature-bento","purpose":"展示产品核心能力，四个主要功能","elements":{"feature_icon":true,"feature_title":true,"feature_desc":true},"copy":{"section_title":"强大能力，简单集成","section_subtitle":"四个核心功能，覆盖开发生命周期","feature_1_title":"智能代码补全","feature_1_desc":"上下文感知的代码建议，支持20+语言，补全准确率高达95%。","feature_2_title":"实时协作","feature_2_desc":"多人同时编辑，实时同步，冲突自动解决，像Google Docs一样流畅。","feature_3_title":"代码分析","feature_3_desc":"深度代码质量分析，性能优化建议，技术债务可视化。","feature_4_title":"安全审计","feature_4_desc":"自动检测安全漏洞，符合GDPR和SOC2标准，修复建议一键应用。"}},{"id":"workflow","type":"feature-alternating","purpose":"展示工作流程，四个步骤","elements":{"step_number":true,"step_icon":true,"step_title":true,"step_desc":true},"copy":{"section_title":"四步开始智能开发","section_subtitle":"从代码导入到AI增强，无缝集成现有工作流","step_1_title":"连接仓库","step_1_desc":"一键连接GitHub/GitLab，自动导入项目结构和代码。","step_2_title":"AI分析","step_2_desc":"CodeWiz AI深度分析代码结构和模式，识别优化点。","step_3_title":"智能建议","step_3_desc":"实时提供重构、优化和安全建议，支持批量操作。","step_4_title":"一键应用","step_4_desc":"审查后一键应用变更，自动提交，保持代码历史清晰。"}},{"id":"testimonial","type":"testimonial-featured","purpose":"客户评价，增强可信度","elements":{"quote":true,"author":true,"company":true,"rating":true},"copy":{"section_title":"团队信赖之选","section_subtitle":"从初创公司到企业团队，都在使用CodeWiz AI","quote_1":"CodeWiz将我们的代码审查时间缩短了70%，现在团队能更专注于创新。","author_1":"Sarah Chen","company_1":"CTO @DataFlow","rating_1":"5.0","quote_2":"AI代码补全非常精准，几乎像它能读懂我的想法，编码速度提升了一倍。","author_2":"Marcus Johnson","company_2":"高级开发者 @TechNova","rating_2":"5.0","quote_3":"实时协作功能让远程团队的效率提升了200%，再也不用等待代码合并。","author_3":"Priya Patel","company_3":"工程经理 @CloudScale","rating_3":"4.9"}},{"id":"pricing","type":"pricing-cards","purpose":"定价方案，支持月付/年付切换","elements":{"toggle":true,"plan_cards":true,"cta_primary":true},"copy":{"section_title":"透明定价，按需选择","section_subtitle":"从免费到企业级，找到适合团队规模的方案","toggle_monthly":"月付","toggle_yearly":"年付（省20%）","plan_1_name":"免费版","plan_1_price_monthly":"$0","plan_1_price_yearly":"$0","plan_1_feature_1":"3个项目","plan_1_feature_2":"基础AI补全","plan_1_feature_3":"社区支持","plan_1_cta":"开始使用","plan_2_name":"专业版","plan_2_price_monthly":"$29","plan_2_price_yearly":"$290","plan_2_feature_1":"无限项目","plan_2_feature_2":"高级AI功能","plan_2_feature_3":"优先支持","plan_2_feature_4":"团队协作","plan_2_cta":"选择专业版","plan_3_name":"企业版","plan_3_price_monthly":"定制","plan_3_price_yearly":"定制","plan_3_feature_1":"定制AI模型","plan_3_feature_2":"专属支持","plan_3_feature_3":"SLA保障","plan_3_cta":"联系销售","popular_badge":"最受欢迎"},"interactions":["toggle-monthly-yearly"]},{"id":"faq","type":"faq-accordion","purpose":"常见问题解答，打消用户疑虑","elements":{"accordion":true,"question":true,"answer":true},"copy":{"section_title":"常见问题","section_subtitle":"快速找到您需要的答案","q_1":"CodeWiz AI支持哪些编程语言？","a_1":"目前支持Python、JavaScript、TypeScript、Java、C++、Go、Rust等20+主流语言，并且每月新增语言支持。","q_2":"我的代码数据安全吗？","a_2":"绝对安全。所有代码在本地加密处理，我们不存储代码内容，仅收集匿名使用数据以改进服务。符合GDPR和SOC2标准。","q_3":"如何与现有开发工具集成？","a_3":"支持VS Code、IntelliJ、Neovim等主流IDE，提供CLI工具，可通过API与CI/CD流水线集成。","q_4":"可以离线使用吗？","a_4":"基础代码补全支持离线使用，高级AI功能需要网络连接。企业版可部署私有化实例，完全离线运行。"},"interactions":["accordion"]},{"id":"cta","type":"cta-banner","purpose":"最终转化呼吁","elements":{"gradient_bg":true,"cta_primary":true,"cta_secondary":true},"copy":{"title":"准备好提升开发效率了吗？","subtitle":"加入10,000+开发者的行列，体验AI编程协作的未来","cta_primary":"免费开始使用","cta_secondary":"预约演示"}},{"id":"footer","type":"footer-columns","purpose":"页脚，包含导航和法律信息","elements":{"brand":true,"columns":true,"copyright":true,"social_links":true},"copy":{"brand":"CodeWiz AI","brand_desc":"下一代AI编程协作平台，让每个开发者都能高效创造。","col_1_title":"产品","col_1_link_1":"功能","col_1_link_2":"定价","col_1_link_3":"集成","col_1_link_4":"更新日志","col_2_title":"资源","col_2_link_1":"文档","col_2_link_2":"API参考","col_2_link_3":"教程","col_2_link_4":"博客","col_3_title":"公司","col_3_link_1":"关于我们","col_3_link_2":"Careers","col_3_link_3":"新闻","col_3_link_4":"联系","col_4_title":"法律","col_4_link_1":"隐私政策","col_4_link_2":"服务条款","col_4_link_3":"安全","copyright":"© 2024 CodeWiz AI. 保留所有权利。","social_twitter":"Twitter","social_github":"GitHub","social_discord":"Discord"}}],"rules":{"dos":["使用深色背景搭配科技蓝主色，增强专业可信度","按钮和卡片使用subtle的阴影和边框，保持克制","保持足够留白，让内容呼吸","使用Monospace字体显示代码相关内容","交互状态使用accent色作为焦点环"],"donts":["不要使用紫色渐变hero背景（AI俗套）","不要居中三列feature布局（过于模板化）","不要使用过多动画效果，保持功能优先","不要使用过于鲜艳的霓虹色作为大面积背景，保持专业","不要使用圆角过大的卡片（保持现代感）"]},"promptGuide":{"quickRef":"深灰背景 + 科技蓝主色 + Inter字体 + 克制阴影 + 功能优先布局","examples":["用minimal-dark-tech风格设计一个代码编辑器界面","创建深色主题的SaaS产品定价页面","设计科技公司的团队介绍页，保持专业可信","构建开发者工具的产品功能展示区"]}},"originalPlan":{"planId":"c7f8d3a1-5b2e-4c9d-8f6a-1e0b2c3d4e5f","goal":"AI编程协作平台官网，提升转化","audience":"正在评估AI编码工具的技术团队和开发者","tone":"minimal-dark-tech","type":"fullHTML","designTokens":{"style":{"name":"minimal-dark-tech","mood":"serious","keywords":["tech","professional","clean","trustworthy","functional"],"density":"comfortable","philosophy":"以功能为核心，通过克制的设计增强可信度"},"colors":{"primary":"#3b82f6","secondary":"#1e40af","accent":"#06b6d4","success":"#10b981","warning":"#f59e0b","danger":"#ef4444","info":"#3b82f6","background":"#0f1117","foreground":"#f8f8f8","card":"#1e1e2e","border":"#2d2d3d","muted":"#6b7280"},"cssVarPrefix":"--color-","colorRoles":{"primary":{"name":"CodeWiz Blue","role":"主要CTA、焦点环、交互高亮"},"accent":{"name":"Tech Cyan","role":"次要强调、图标、成功状态"}},"gradients":[{"name":"tech-glow","stops":"linear-gradient(135deg, #1e40af 0%, #3b82f6 100%)","role":"Hero装饰背景"}],"states":{"hover":"#2563eb","active":"#1d4ed8","focus":"#06b6d4","disabled":"#4b5563"},"fonts":{"heading":"Inter","body":"Inter","mono":"JetBrains Mono","googleFontsUrl":"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&fam…;:{"heading":"'Inter', -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":{"size":"clamp(2.5rem, 5vw, 4rem)","weight":700,"lineHeight":"1.05","letterSpacing":"-0.02em"},"h1":{"size":"clamp(2rem, 3.5vw, 3rem)","weight":600,"lineHeight":"1.1","letterSpacing":"-0.015em"},"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=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","variants":{"primary":{"default":"bg=primary fg=background","hover":"bg=primary(-10%)","active":"bg=primary(-20%)","focus":"ring=2px solid accent","disabled":"opacity=0.5"},"secondary":{"default":"bg=card fg=foreground border=1px solid border","hover":"bg=muted","active":"bg=muted(-10%)","focus":"ring=2px solid accent","disabled":"opacity=0.5"},"ghost":{"default":"bg=transparent fg=foreground","hover":"bg=muted/20","active":"bg=muted/30","focus":"ring=2px solid accent","disabled":"opacity=0.5"}}},"card":{"default":"bg=card shadow=sm radius=lg padding=1.5rem border=1px solid border","hover":"shadow=md translateY=-2px"},"nav":{"default":"bg=background/90 backdrop-blur=12px height=4rem","scrolled":"bg=background shadow=sm","mobile":"drawer-from-right width=85vw"},"input":{"default":"bg=background fg=foreground border=1px solid border radius=md padding=0.625rem 0.875rem","hover":"border=1px solid muted","focus":"border=1px solid primary ring=3px primary/20","error":"border=1px solid danger ring=3px danger/20","disabled":"opacity=0.5 cursor=not-allowed"}},"layout":{"container":{"maxWidth":"1200px","paddingX":"1.5rem"},"grid":{"columns":12,"gap":"1.5rem"}},"spacing":{"gutter":"1.5rem","sectionY":"5rem","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,.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"},"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":"移动端堆叠布局，侧边栏转为抽屉，多列变为单列，表格转为卡片列表","hidePriority":["secondary-nav-links","decorative-illustration","stats-extra"]},"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":"nav","type":"nav-sticky","purpose":"顶部导航栏，包含品牌、链接和主要CTA","elements":{"brand":true,"links":true,"cta_primary":true,"mobile_toggle":true},"copy":{"brand":"CodeWiz AI","link_product":"产品","link_pricing":"定价","link_docs":"文档","link_case":"案例","cta_primary":"开始免费试用"},"interactions":["mobile-menu-toggle","smooth-scroll-to-#pricing"]},{"id":"hero","type":"hero-split","purpose":"主视觉区域，展示核心价值主张和产品预览","elements":{"gradient_accent":true,"cta_primary":true,"cta_secondary":true,"visual_hint":"代码编辑器界面，显示AI补全和协作状态"},"copy":{"title":"让AI成为你的编程搭档","title_accent":"300%效率提升","subtitle":"CodeWiz AI通过智能代码补全、实时协作和代码分析，将团队开发效率提升300%。","cta_primary":"免费开始使用","cta_secondary":"观看演示","badge":"支持20+编程语言"}},{"id":"features","type":"feature-bento","purpose":"展示产品核心能力，四个主要功能","elements":{"feature_icon":true,"feature_title":true,"feature_desc":true},"copy":{"section_title":"强大能力，简单集成","section_subtitle":"四个核心功能，覆盖开发生命周期","feature_1_title":"智能代码补全","feature_1_desc":"上下文感知的代码建议，支持20+语言，补全准确率高达95%。","feature_2_title":"实时协作","feature_2_desc":"多人同时编辑，实时同步，冲突自动解决，像Google Docs一样流畅。","feature_3_title":"代码分析","feature_3_desc":"深度代码质量分析，性能优化建议，技术债务可视化。","feature_4_title":"安全审计","feature_4_desc":"自动检测安全漏洞，符合GDPR和SOC2标准，修复建议一键应用。"}},{"id":"workflow","type":"feature-alternating","purpose":"展示工作流程，四个步骤","elements":{"step_number":true,"step_icon":true,"step_title":true,"step_desc":true},"copy":{"section_title":"四步开始智能开发","section_subtitle":"从代码导入到AI增强，无缝集成现有工作流","step_1_title":"连接仓库","step_1_desc":"一键连接GitHub/GitLab，自动导入项目结构和代码。","step_2_title":"AI分析","step_2_desc":"CodeWiz AI深度分析代码结构和模式，识别优化点。","step_3_title":"智能建议","step_3_desc":"实时提供重构、优化和安全建议，支持批量操作。","step_4_title":"一键应用","step_4_desc":"审查后一键应用变更，自动提交，保持代码历史清晰。"}},{"id":"testimonial","type":"testimonial-featured","purpose":"客户评价，增强可信度","elements":{"quote":true,"author":true,"company":true,"rating":true},"copy":{"section_title":"团队信赖之选","section_subtitle":"从初创公司到企业团队，都在使用CodeWiz AI","quote_1":"CodeWiz将我们的代码审查时间缩短了70%，现在团队能更专注于创新。","author_1":"Sarah Chen","company_1":"CTO @DataFlow","rating_1":"5.0","quote_2":"AI代码补全非常精准，几乎像它能读懂我的想法，编码速度提升了一倍。","author_2":"Marcus Johnson","company_2":"高级开发者 @TechNova","rating_2":"5.0","quote_3":"实时协作功能让远程团队的效率提升了200%，再也不用等待代码合并。","author_3":"Priya Patel","company_3":"工程经理 @CloudScale","rating_3":"4.9"}},{"id":"pricing","type":"pricing-cards","purpose":"定价方案，支持月付/年付切换","elements":{"toggle":true,"plan_cards":true,"cta_primary":true},"copy":{"section_title":"透明定价，按需选择","section_subtitle":"从免费到企业级，找到适合团队规模的方案","toggle_monthly":"月付","toggle_yearly":"年付（省20%）","plan_1_name":"免费版","plan_1_price_monthly":"$0","plan_1_price_yearly":"$0","plan_1_feature_1":"3个项目","plan_1_feature_2":"基础AI补全","plan_1_feature_3":"社区支持","plan_1_cta":"开始使用","plan_2_name":"专业版","plan_2_price_monthly":"$29","plan_2_price_yearly":"$290","plan_2_feature_1":"无限项目","plan_2_feature_2":"高级AI功能","plan_2_feature_3":"优先支持","plan_2_cta":"选择专业版","plan_3_name":"企业版","plan_3_price_monthly":"定制","plan_3_price_yearly":"定制","plan_3_feature_1":"定制AI模型","plan_3_feature_2":"专属支持","plan_3_feature_3":"SLA保障","plan_3_cta":"联系销售","popular_badge":"最受欢迎"},"interactions":["toggle-monthly-yearly"]},{"id":"faq","type":"faq-accordion","purpose":"常见问题解答，打消用户疑虑","elements":{"accordion":true,"question":true,"answer":true},"copy":{"section_title":"常见问题","section_subtitle":"快速找到您需要的答案","q_1":"CodeWiz AI支持哪些编程语言？","a_1":"目前支持Python、JavaScript、TypeScript、Java、C++、Go、Rust等20+主流语言，并且每月新增语言支持。","q_2":"我的代码数据安全吗？","a_2":"绝对安全。所有代码在本地加密处理，我们不存储代码内容，仅收集匿名使用数据以改进服务。符合GDPR和SOC2标准。","q_3":"如何与现有开发工具集成？","a_3":"支持VS Code、IntelliJ、Neovim等主流IDE，提供CLI工具，可通过API与CI/CD流水线集成。","q_4":"可以离线使用吗？","a_4":"基础代码补全支持离线使用，高级AI功能需要网络连接。企业版可部署私有化实例，完全离线运行。"},"interactions":["accordion"]},{"id":"cta","type":"cta-banner","purpose":"最终转化呼吁","elements":{"gradient_bg":true,"cta_primary":true,"cta_secondary":true},"copy":{"title":"准备好提升开发效率了吗？","subtitle":"加入10,000+开发者的行列，体验AI编程协作的未来","cta_primary":"免费开始使用","cta_secondary":"预约演示"}},{"id":"footer","type":"footer-columns","purpose":"页脚，包含导航和法律信息","elements":{"brand":true,"columns":true,"copyright":true,"social_links":true},"copy":{"brand":"CodeWiz AI","brand_desc":"下一代AI编程协作平台，让每个开发者都能高效创造。","col_1_title":"产品","col_1_link_1":"功能","col_1_link_2":"定价","col_1_link_3":"集成","col_1_link_4":"更新日志","col_2_title":"资源","col_2_link_1":"文档","col_2_link_2":"API参考","col_2_link_3":"教程","col_2_link_4":"博客","col_3_title":"公司","col_3_link_1":"关于我们","col_3_link_2":" careers","col_3_link_3":"新闻","col_3_link_4":"联系","col_4_title":"法律","col_4_link_1":"隐私政策","col_4_link_2":"服务条款","col_4_link_3":"安全","copyright":"© 2024 CodeWiz AI. 保留所有权利。","social_twitter":"Twitter","social_github":"GitHub","social_discord":"Discord"}}],"rules":{"dos":["使用深色背景搭配科技蓝主色，增强专业可信度","按钮和卡片使用subtle的阴影和边框，保持克制","保持足够留白，让内容呼吸","使用Monospace字体显示代码相关内容","交互状态使用accent色作为焦点环"],"donts":["不要使用紫色渐变hero背景（AI俗套）","不要居中三列feature布局（过于模板化）","不要使用过多动画效果，保持功能优先","不要使用过于鲜艳的霓虹色，保持专业","不要使用圆角过大的卡片（保持现代感）"]},"promptGuide":{"quickRef":"深灰背景 + 科技蓝主色 + Inter字体 + 克制阴影 + 功能优先布局","examples":["用minimal-dark-tech风格设计一个代码编辑器界面","创建深色主题的SaaS产品定价页面","设计科技公司的团队介绍页，保持专业可信","构建开发者工具的产品功能展示区"]}},"planReviews":[{"round":1,"ok":false,"score":78,"rubric":{"atmosphere":6,"color":15,"typography":8,"components":10,"layout":9,"depth":4,"rules":4,"responsive":6,"sections":16},"issues":["§1 style.keywords 中 'functional' 过于泛化，建议替换为更具体词","§2 info色值 #3b82f6 与 primary 完全相同，应改为不同蓝色","§2 states 缺少 disabled 对比度说明，且 disabled 色值 #4b5563 与背景对比度不足3:1","§3 fonts.heading 和 body 均为 Inter，违反避免俗套且两者相同","§4 components.button.focus 缺少 ring 具体样式描述（如 ring=2px solid accent）","§4 components.input 缺少 hover 状态定义","§7 donts 第4条 '不要使用过于鲜艳的霓虹色' 与 accent 色 #06b6d4 偏亮冲突","§9 hero.copy.title 中 '300%效率提升' 作为 title_accent 未在 elements 中声明","§9 sections 数量9个，在整页6~10范围内，但 hero 缺少 visual_hint 具体文案","§9 copy 中多处使用 '高效'、'专业' 等泛化词（如 brand_desc）"],"revisedPlan":{"planId":"c7f8d3a1-5b2e-4c9d-8f6a-1e0b2c3d4e5f","goal":"AI编程协作平台官网，提升转化","audience":"正在评估AI编码工具的技术团队和开发者","tone":"minimal-dark-tech","type":"fullHTML","designTokens":{"style":{"name":"minimal-dark-tech","mood":"serious","keywords":["tech","professional","clean","trustworthy","precise"],"density":"comfortable","philosophy":"以功能为核心，通过克制的设计增强可信度"},"colors":{"primary":"#3b82f6","secondary":"#1e40af","accent":"#06b6d4","success":"#10b981","warning":"#f59e0b","danger":"#ef4444","info":"#6366f1","background":"#0f1117","foreground":"#f8f8f8","card":"#1e1e2e","border":"#2d2d3d","muted":"#6b7280"},"cssVarPrefix":"--color-","colorRoles":{"primary":{"name":"CodeWiz Blue","role":"主要CTA、焦点环、交互高亮"},"accent":{"name":"Tech Cyan","role":"次要强调、图标、成功状态"}},"gradients":[{"name":"tech-glow","stops":"linear-gradient(135deg, #1e40af 0%, #3b82f6 100%)","role":"Hero装饰背景"}],"states":{"hover":"#2563eb","active":"#1d4ed8","focus":"#06b6d4","disabled":"#4b5563"},"fonts":{"heading":"Plus Jakarta Sans","body":"Inter","mono":"JetBrains Mono","googleFontsUrl":"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&fam…;:{"heading":"'Plus Jakarta Sans', -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":{"size":"clamp(2.5rem, 5vw, 4rem)","weight":700,"lineHeight":"1.05","letterSpacing":"-0.02em"},"h1":{"size":"clamp(2rem, 3.5vw, 3rem)","weight":600,"lineHeight":"1.1","letterSpacing":"-0.015em"},"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=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","variants":{"primary":{"default":"bg=primary fg=background","hover":"bg=primary(-10%)","active":"bg=primary(-20%)","focus":"ring=2px solid accent","disabled":"opacity=0.5"},"secondary":{"default":"bg=card fg=foreground border=1px solid border","hover":"bg=muted","active":"bg=muted(-10%)","focus":"ring=2px solid accent","disabled":"opacity=0.5"},"ghost":{"default":"bg=transparent fg=foreground","hover":"bg=muted/20","active":"bg=muted/30","focus":"ring=2px solid accent","disabled":"opacity=0.5"}}},"card":{"default":"bg=card shadow=sm radius=lg padding=1.5rem border=1px solid border","hover":"shadow=md translateY=-2px"},"nav":{"default":"bg=background/90 backdrop-blur=12px height=4rem","scrolled":"bg=background shadow=sm","mobile":"drawer-from-right width=85vw"},"input":{"default":"bg=background fg=foreground border=1px solid border radius=md padding=0.625rem 0.875rem","hover":"border=1px solid muted","focus":"border=1px solid primary ring=3px primary/20","error":"border=1px solid danger ring=3px danger/20","disabled":"opacity=0.5 cursor=not-allowed"}},"layout":{"container":{"maxWidth":"1200px","paddingX":"1.5rem"},"grid":{"columns":12,"gap":"1.5rem"}},"spacing":{"gutter":"1.5rem","sectionY":"5rem","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,.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"},"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":"移动端堆叠布局，侧边栏转为抽屉，多列变为单列，表格转为卡片列表","hidePriority":["secondary-nav-links","decorative-illustration","stats-extra"]},"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":"nav","type":"nav-sticky","purpose":"顶部导航栏，包含品牌、链接和主要CTA","elements":{"brand":true,"links":true,"cta_primary":true,"mobile_toggle":true},"copy":{"brand":"CodeWiz AI","link_product":"产品","link_pricing":"定价","link_docs":"文档","link_case":"案例","cta_primary":"开始免费试用"},"interactions":["mobile-menu-toggle","smooth-scroll-to-#pricing"]},{"id":"hero","type":"hero-split","purpose":"主视觉区域，展示核心价值主张和产品预览","elements":{"gradient_accent":true,"cta_primary":true,"cta_secondary":true,"visual_hint":"代码编辑器界面，显示AI补全和协作状态","title_accent":true},"copy":{"title":"让AI成为你的编程搭档","title_accent":"300%效率提升","subtitle":"CodeWiz AI通过智能代码补全、实时协作和代码分析，将团队开发效率提升300%。","cta_primary":"免费开始使用","cta_secondary":"观看演示","badge":"支持20+编程语言"}},{"id":"features","type":"feature-bento","purpose":"展示产品核心能力，四个主要功能","elements":{"feature_icon":true,"feature_title":true,"feature_desc":true},"copy":{"section_title":"强大能力，简单集成","section_subtitle":"四个核心功能，覆盖开发生命周期","feature_1_title":"智能代码补全","feature_1_desc":"上下文感知的代码建议，支持20+语言，补全准确率高达95%。","feature_2_title":"实时协作","feature_2_desc":"多人同时编辑，实时同步，冲突自动解决，像Google Docs一样流畅。","feature_3_title":"代码分析","feature_3_desc":"深度代码质量分析，性能优化建议，技术债务可视化。","feature_4_title":"安全审计","feature_4_desc":"自动检测安全漏洞，符合GDPR和SOC2标准，修复建议一键应用。"}},{"id":"workflow","type":"feature-alternating","purpose":"展示工作流程，四个步骤","elements":{"step_number":true,"step_icon":true,"step_title":true,"step_desc":true},"copy":{"section_title":"四步开始智能开发","section_subtitle":"从代码导入到AI增强，无缝集成现有工作流","step_1_title":"连接仓库","step_1_desc":"一键连接GitHub/GitLab，自动导入项目结构和代码。","step_2_title":"AI分析","step_2_desc":"CodeWiz AI深度分析代码结构和模式，识别优化点。","step_3_title":"智能建议","step_3_desc":"实时提供重构、优化和安全建议，支持批量操作。","step_4_title":"一键应用","step_4_desc":"审查后一键应用变更，自动提交，保持代码历史清晰。"}},{"id":"testimonial","type":"testimonial-featured","purpose":"客户评价，增强可信度","elements":{"quote":true,"author":true,"company":true,"rating":true},"copy":{"section_title":"团队信赖之选","section_subtitle":"从初创公司到企业团队，都在使用CodeWiz AI","quote_1":"CodeWiz将我们的代码审查时间缩短了70%，现在团队能更专注于创新。","author_1":"Sarah Chen","company_1":"CTO @DataFlow","rating_1":"5.0","quote_2":"AI代码补全非常精准，几乎像它能读懂我的想法，编码速度提升了一倍。","author_2":"Marcus Johnson","company_2":"高级开发者 @TechNova","rating_2":"5.0","quote_3":"实时协作功能让远程团队的效率提升了200%，再也不用等待代码合并。","author_3":"Priya Patel","company_3":"工程经理 @CloudScale","rating_3":"4.9"}},{"id":"pricing","type":"pricing-cards","purpose":"定价方案，支持月付/年付切换","elements":{"toggle":true,"plan_cards":true,"cta_primary":true},"copy":{"section_title":"透明定价，按需选择","section_subtitle":"从免费到企业级，找到适合团队规模的方案","toggle_monthly":"月付","toggle_yearly":"年付（省20%）","plan_1_name":"免费版","plan_1_price_monthly":"$0","plan_1_price_yearly":"$0","plan_1_feature_1":"3个项目","plan_1_feature_2":"基础AI补全","plan_1_feature_3":"社区支持","plan_1_cta":"开始使用","plan_2_name":"专业版","plan_2_price_monthly":"$29","plan_2_price_yearly":"$290","plan_2_feature_1":"无限项目","plan_2_feature_2":"高级AI功能","plan_2_feature_3":"优先支持","plan_2_cta":"选择专业版","plan_3_name":"企业版","plan_3_price_monthly":"定制","plan_3_price_yearly":"定制","plan_3_feature_1":"定制AI模型","plan_3_feature_2":"专属支持","plan_3_feature_3":"SLA保障","plan_3_cta":"联系销售","popular_badge":"最受欢迎"},"interactions":["toggle-monthly-yearly"]},{"id":"faq","type":"faq-accordion","purpose":"常见问题解答，打消用户疑虑","elements":{"accordion":true,"question":true,"answer":true},"copy":{"section_title":"常见问题","section_subtitle":"快速找到您需要的答案","q_1":"CodeWiz AI支持哪些编程语言？","a_1":"目前支持Python、JavaScript、TypeScript、Java、C++、Go、Rust等20+主流语言，并且每月新增语言支持。","q_2":"我的代码数据安全吗？","a_2":"绝对安全。所有代码在本地加密处理，我们不存储代码内容，仅收集匿名使用数据以改进服务。符合GDPR和SOC2标准。","q_3":"如何与现有开发工具集成？","a_3":"支持VS Code、IntelliJ、Neovim等主流IDE，提供CLI工具，可通过API与CI/CD流水线集成。","q_4":"可以离线使用吗？","a_4":"基础代码补全支持离线使用，高级AI功能需要网络连接。企业版可部署私有化实例，完全离线运行。"},"interactions":["accordion"]},{"id":"cta","type":"cta-banner","purpose":"最终转化呼吁","elements":{"gradient_bg":true,"cta_primary":true,"cta_secondary":true},"copy":{"title":"准备好提升开发效率了吗？","subtitle":"加入10,000+开发者的行列，体验AI编程协作的未来","cta_primary":"免费开始使用","cta_secondary":"预约演示"}},{"id":"footer","type":"footer-columns","purpose":"页脚，包含导航和法律信息","elements":{"brand":true,"columns":true,"copyright":true,"social_links":true},"copy":{"brand":"CodeWiz AI","brand_desc":"下一代AI编程协作平台，让每个开发者都能高效创造。","col_1_title":"产品","col_1_link_1":"功能","col_1_link_2":"定价","col_1_link_3":"集成","col_1_link_4":"更新日志","col_2_title":"资源","col_2_link_1":"文档","col_2_link_2":"API参考","col_2_link_3":"教程","col_2_link_4":"博客","col_3_title":"公司","col_3_link_1":"关于我们","col_3_link_2":" careers","col_3_link_3":"新闻","col_3_link_4":"联系","col_4_title":"法律","col_4_link_1":"隐私政策","col_4_link_2":"服务条款","col_4_link_3":"安全","copyright":"© 2024 CodeWiz AI. 保留所有权利。","social_twitter":"Twitter","social_github":"GitHub","social_discord":"Discord"}}],"rules":{"dos":["使用深色背景搭配科技蓝主色，增强专业可信度","按钮和卡片使用subtle的阴影和边框，保持克制","保持足够留白，让内容呼吸","使用Monospace字体显示代码相关内容","交互状态使用accent色作为焦点环"],"donts":["不要使用紫色渐变hero背景（AI俗套）","不要居中三列feature布局（过于模板化）","不要使用过多动画效果，保持功能优先","不要使用过于鲜艳的霓虹色作为大面积背景，保持专业","不要使用圆角过大的卡片（保持现代感）"]},"promptGuide":{"quickRef":"深灰背景 + 科技蓝主色 + Inter字体 + 克制阴影 + 功能优先布局","examples":["用minimal-dark-tech风格设计一个代码编辑器界面","创建深色主题的SaaS产品定价页面","设计科技公司的团队介绍页，保持专业可信","构建开发者工具的产品功能展示区"]}}},{"round":1,"ok":false,"score":82,"rubric":{"atmosphere":7,"color":16,"typography":9,"components":11,"layout":9,"depth":5,"rules":4,"responsive":6,"sections":15},"issues":["hero.copy.title_accent '300%效率提升' 与 subtitle 数字重复，需差异化","pricing 缺少 plan_2_feature_4 等更多特性，与专业版定位不符","footer.col_3_link_2 'careers' 首字母小写，应统一大写","sections 数量9个，整页意图合理，但 copy 部分字段可更具体","color 中 foreground #f8f8f8 与 background #0f1117 对比度约15:1，达标","states.disabled #4b5563 与 background 对比度约3.5:1，略低于3:1要求","responsive.hidePriority 仅3项，建议补充1-2项"],"revisedPlan":{"planId":"c7f8d3a1-5b2e-4c9d-8f6a-1e0b2c3d4e5f","goal":"AI编程协作平台官网，提升转化","audience":"正在评估AI编码工具的技术团队和开发者","tone":"minimal-dark-tech","type":"fullHTML","designTokens":{"style":{"name":"minimal-dark-tech","mood":"serious","keywords":["tech","professional","clean","trustworthy","precise"],"density":"comfortable","philosophy":"以功能为核心，通过克制的设计增强可信度"},"colors":{"primary":"#3b82f6","secondary":"#1e40af","accent":"#06b6d4","success":"#10b981","warning":"#f59e0b","danger":"#ef4444","info":"#6366f1","background":"#0f1117","foreground":"#f8f8f8","card":"#1e1e2e","border":"#2d2d3d","muted":"#6b7280"},"cssVarPrefix":"--color-","colorRoles":{"primary":{"name":"CodeWiz Blue","role":"主要CTA、焦点环、交互高亮"},"accent":{"name":"Tech Cyan","role":"次要强调、图标、成功状态"}},"gradients":[{"name":"tech-glow","stops":"linear-gradient(135deg, #1e40af 0%, #3b82f6 100%)","role":"Hero装饰背景"}],"states":{"hover":"#2563eb","active":"#1d4ed8","focus":"#06b6d4","disabled":"#6b7280"},"fonts":{"heading":"Plus Jakarta Sans","body":"Inter","mono":"JetBrains Mono","googleFontsUrl":"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&fam…;:{"heading":"'Plus Jakarta Sans', -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":{"size":"clamp(2.5rem, 5vw, 4rem)","weight":700,"lineHeight":"1.05","letterSpacing":"-0.02em"},"h1":{"size":"clamp(2rem, 3.5vw, 3rem)","weight":600,"lineHeight":"1.1","letterSpacing":"-0.015em"},"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=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","variants":{"primary":{"default":"bg=primary fg=background","hover":"bg=primary(-10%)","active":"bg=primary(-20%)","focus":"ring=2px solid accent","disabled":"opacity=0.5"},"secondary":{"default":"bg=card fg=foreground border=1px solid border","hover":"bg=muted","active":"bg=muted(-10%)","focus":"ring=2px solid accent","disabled":"opacity=0.5"},"ghost":{"default":"bg=transparent fg=foreground","hover":"bg=muted/20","active":"bg=muted/30","focus":"ring=2px solid accent","disabled":"opacity=0.5"}}},"card":{"default":"bg=card shadow=sm radius=lg padding=1.5rem border=1px solid border","hover":"shadow=md translateY=-2px"},"nav":{"default":"bg=background/90 backdrop-blur=12px height=4rem","scrolled":"bg=background shadow=sm","mobile":"drawer-from-right width=85vw"},"input":{"default":"bg=background fg=foreground border=1px solid border radius=md padding=0.625rem 0.875rem","hover":"border=1px solid muted","focus":"border=1px solid primary ring=3px primary/20","error":"border=1px solid danger ring=3px danger/20","disabled":"opacity=0.5 cursor=not-allowed"}},"layout":{"container":{"maxWidth":"1200px","paddingX":"1.5rem"},"grid":{"columns":12,"gap":"1.5rem"}},"spacing":{"gutter":"1.5rem","sectionY":"5rem","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,.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"},"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":"移动端堆叠布局，侧边栏转为抽屉，多列变为单列，表格转为卡片列表","hidePriority":["secondary-nav-links","decorative-illustration","stats-extra","footer-extra-links"]},"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":"nav","type":"nav-sticky","purpose":"顶部导航栏，包含品牌、链接和主要CTA","elements":{"brand":true,"links":true,"cta_primary":true,"mobile_toggle":true},"copy":{"brand":"CodeWiz AI","link_product":"产品","link_pricing":"定价","link_docs":"文档","link_case":"案例","cta_primary":"开始免费试用"},"interactions":["mobile-menu-toggle","smooth-scroll-to-#pricing"]},{"id":"hero","type":"hero-split","purpose":"主视觉区域，展示核心价值主张和产品预览","elements":{"gradient_accent":true,"cta_primary":true,"cta_secondary":true,"visual_hint":"代码编辑器界面，显示AI补全和协作状态","title_accent":true},"copy":{"title":"让AI成为你的编程搭档","title_accent":"3倍效率提升","subtitle":"CodeWiz AI通过智能代码补全、实时协作和代码分析，将团队开发效率提升3倍。","cta_primary":"免费开始使用","cta_secondary":"观看演示","badge":"支持20+编程语言"}},{"id":"features","type":"feature-bento","purpose":"展示产品核心能力，四个主要功能","elements":{"feature_icon":true,"feature_title":true,"feature_desc":true},"copy":{"section_title":"强大能力，简单集成","section_subtitle":"四个核心功能，覆盖开发生命周期","feature_1_title":"智能代码补全","feature_1_desc":"上下文感知的代码建议，支持20+语言，补全准确率高达95%。","feature_2_title":"实时协作","feature_2_desc":"多人同时编辑，实时同步，冲突自动解决，像Google Docs一样流畅。","feature_3_title":"代码分析","feature_3_desc":"深度代码质量分析，性能优化建议，技术债务可视化。","feature_4_title":"安全审计","feature_4_desc":"自动检测安全漏洞，符合GDPR和SOC2标准，修复建议一键应用。"}},{"id":"workflow","type":"feature-alternating","purpose":"展示工作流程，四个步骤","elements":{"step_number":true,"step_icon":true,"step_title":true,"step_desc":true},"copy":{"section_title":"四步开始智能开发","section_subtitle":"从代码导入到AI增强，无缝集成现有工作流","step_1_title":"连接仓库","step_1_desc":"一键连接GitHub/GitLab，自动导入项目结构和代码。","step_2_title":"AI分析","step_2_desc":"CodeWiz AI深度分析代码结构和模式，识别优化点。","step_3_title":"智能建议","step_3_desc":"实时提供重构、优化和安全建议，支持批量操作。","step_4_title":"一键应用","step_4_desc":"审查后一键应用变更，自动提交，保持代码历史清晰。"}},{"id":"testimonial","type":"testimonial-featured","purpose":"客户评价，增强可信度","elements":{"quote":true,"author":true,"company":true,"rating":true},"copy":{"section_title":"团队信赖之选","section_subtitle":"从初创公司到企业团队，都在使用CodeWiz AI","quote_1":"CodeWiz将我们的代码审查时间缩短了70%，现在团队能更专注于创新。","author_1":"Sarah Chen","company_1":"CTO @DataFlow","rating_1":"5.0","quote_2":"AI代码补全非常精准，几乎像它能读懂我的想法，编码速度提升了一倍。","author_2":"Marcus Johnson","company_2":"高级开发者 @TechNova","rating_2":"5.0","quote_3":"实时协作功能让远程团队的效率提升了200%，再也不用等待代码合并。","author_3":"Priya Patel","company_3":"工程经理 @CloudScale","rating_3":"4.9"}},{"id":"pricing","type":"pricing-cards","purpose":"定价方案，支持月付/年付切换","elements":{"toggle":true,"plan_cards":true,"cta_primary":true},"copy":{"section_title":"透明定价，按需选择","section_subtitle":"从免费到企业级，找到适合团队规模的方案","toggle_monthly":"月付","toggle_yearly":"年付（省20%）","plan_1_name":"免费版","plan_1_price_monthly":"$0","plan_1_price_yearly":"$0","plan_1_feature_1":"3个项目","plan_1_feature_2":"基础AI补全","plan_1_feature_3":"社区支持","plan_1_cta":"开始使用","plan_2_name":"专业版","plan_2_price_monthly":"$29","plan_2_price_yearly":"$290","plan_2_feature_1":"无限项目","plan_2_feature_2":"高级AI功能","plan_2_feature_3":"优先支持","plan_2_feature_4":"团队协作","plan_2_cta":"选择专业版","plan_3_name":"企业版","plan_3_price_monthly":"定制","plan_3_price_yearly":"定制","plan_3_feature_1":"定制AI模型","plan_3_feature_2":"专属支持","plan_3_feature_3":"SLA保障","plan_3_cta":"联系销售","popular_badge":"最受欢迎"},"interactions":["toggle-monthly-yearly"]},{"id":"faq","type":"faq-accordion","purpose":"常见问题解答，打消用户疑虑","elements":{"accordion":true,"question":true,"answer":true},"copy":{"section_title":"常见问题","section_subtitle":"快速找到您需要的答案","q_1":"CodeWiz AI支持哪些编程语言？","a_1":"目前支持Python、JavaScript、TypeScript、Java、C++、Go、Rust等20+主流语言，并且每月新增语言支持。","q_2":"我的代码数据安全吗？","a_2":"绝对安全。所有代码在本地加密处理，我们不存储代码内容，仅收集匿名使用数据以改进服务。符合GDPR和SOC2标准。","q_3":"如何与现有开发工具集成？","a_3":"支持VS Code、IntelliJ、Neovim等主流IDE，提供CLI工具，可通过API与CI/CD流水线集成。","q_4":"可以离线使用吗？","a_4":"基础代码补全支持离线使用，高级AI功能需要网络连接。企业版可部署私有化实例，完全离线运行。"},"interactions":["accordion"]},{"id":"cta","type":"cta-banner","purpose":"最终转化呼吁","elements":{"gradient_bg":true,"cta_primary":true,"cta_secondary":true},"copy":{"title":"准备好提升开发效率了吗？","subtitle":"加入10,000+开发者的行列，体验AI编程协作的未来","cta_primary":"免费开始使用","cta_secondary":"预约演示"}},{"id":"footer","type":"footer-columns","purpose":"页脚，包含导航和法律信息","elements":{"brand":true,"columns":true,"copyright":true,"social_links":true},"copy":{"brand":"CodeWiz AI","brand_desc":"下一代AI编程协作平台，让每个开发者都能高效创造。","col_1_title":"产品","col_1_link_1":"功能","col_1_link_2":"定价","col_1_link_3":"集成","col_1_link_4":"更新日志","col_2_title":"资源","col_2_link_1":"文档","col_2_link_2":"API参考","col_2_link_3":"教程","col_2_link_4":"博客","col_3_title":"公司","col_3_link_1":"关于我们","col_3_link_2":"Careers","col_3_link_3":"新闻","col_3_link_4":"联系","col_4_title":"法律","col_4_link_1":"隐私政策","col_4_link_2":"服务条款","col_4_link_3":"安全","copyright":"© 2024 CodeWiz AI. 保留所有权利。","social_twitter":"Twitter","social_github":"GitHub","social_discord":"Discord"}}],"rules":{"dos":["使用深色背景搭配科技蓝主色，增强专业可信度","按钮和卡片使用subtle的阴影和边框，保持克制","保持足够留白，让内容呼吸","使用Monospace字体显示代码相关内容","交互状态使用accent色作为焦点环"],"donts":["不要使用紫色渐变hero背景（AI俗套）","不要居中三列feature布局（过于模板化）","不要使用过多动画效果，保持功能优先","不要使用过于鲜艳的霓虹色作为大面积背景，保持专业","不要使用圆角过大的卡片（保持现代感）"]},"promptGuide":{"quickRef":"深灰背景 + 科技蓝主色 + Inter字体 + 克制阴影 + 功能优先布局","examples":["用minimal-dark-tech风格设计一个代码编辑器界面","创建深色主题的SaaS产品定价页面","设计科技公司的团队介绍页，保持专业可信","构建开发者工具的产品功能展示区"]}}}],"planId":"c7f8d3a1-5b2e-4c9d-8f6a-1e0b2c3d4e5f"}```

total_tokens

22065

summary

根据蓝图生成了CodeWiz AI官网，包含9个区块，采用深色科技风格

uiParsing

关闭