Claude品牌落地页蓝图生成与10区块设计

By 13121089289, 29 May, 2026

角色

assistant

content

```json{"summary":"根据蓝图生成了Claude品牌落地页，共10个区块","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>Claude — 遇见你的思考伙伴</title>\n <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n <link href=\"https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0…\" rel=\"stylesheet\">\n <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.c…\">\n <script src=\"https://cdn.tailwindcss.com\"></script>\n <style>\n /* ===== CSS Variables from Design Tokens ===== */\n :root {\n --color-primary: #cc785c;\n --color-secondary: #5db8a6;\n --color-accent: #e8a55a;\n --color-success: #5db872;\n --color-warning: #d4a017;\n --color-danger: #c64545;\n --color-info: #5db8a6;\n --color-background: #faf9f5;\n --color-foreground: #141413;\n --color-card: #efe9de;\n --color-border: #e6dfd8;\n --color-muted: #6c6a64;\n --color-body: #3d3d3a;\n --color-body-strong: #252523;\n --color-muted-soft: #8e8b82;\n --color-hairline: #e6dfd8;\n --color-hairline-soft: #ebe6df;\n --color-surface-soft: #f5f0e8;\n --color-surface-cream-strong: #e8e0d2;\n --color-surface-dark: #181715;\n --color-surface-dark-elevated: #252320;\n --color-surface-dark-soft: #1f1e1b;\n --color-on-primary: #ffffff;\n --color-on-dark: #faf9f5;\n --color-on-dark-soft: #a09d96;\n --color-primary-active: #a9583e;\n --color-primary-disabled: #e6dfd8;\n --state-hover: #a9583e;\n --state-active: #8e4730;\n --state-focus: #cc785c;\n --state-disabled: #e6dfd8;\n --dur-micro: 100ms;\n --dur-base: 200ms;\n --dur-expressive: 320ms;\n --dur-exit: 140ms;\n --ease-standard: cubic-bezier(0.2, 0, 0, 1);\n --ease-emphasized: cubic-bezier(0.3, 0, 0, 1);\n --ease-entering: cubic-bezier(0, 0, 0, 1);\n --ease-exiting: cubic-bezier(0.4, 0, 1, 1);\n --ease-spring: linear(0, 0.36 8%, 1 50%, 0.99 65%, 1);\n --stagger-list: 40ms;\n --stagger-grid: 60ms;\n --scale-press: 0.97;\n --scale-hover: 1.02;\n --scale-popIn: 0.92;\n }\n\n /* ===== Font Family ===== */\n .font-heading { font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; }\n .font-body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }\n .font-mono { font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace; }\n\n /* ===== Typography Scale ===== */\n .display-xl { font-size: clamp(2.25rem, 4.5vw, 4rem); font-weight: 400; line-height: 1.05; letter-spacing: -0.03em; font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; }\n .display-lg { font-size: clamp(1.75rem, 3.5vw, 3rem); font-weight: 400; line-height: 1.1; letter-spacing: -0.02em; font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; }\n .display-md { font-size: clamp(1.5rem, 2.5vw, 2.25rem); font-weight: 400; line-height: 1.15; letter-spacing: -0.015em; font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; }\n .display-sm { font-size: clamp(1.25rem, 1.75vw, 1.75rem); font-weight: 400; line-height: 1.2; letter-spacing: -0.01em; font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; }\n .title-lg { font-size: 1.375rem; font-weight: 500; line-height: 1.3; letter-spacing: 0; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }\n .title-md { font-size: 1.125rem; font-weight: 500; line-height: 1.4; letter-spacing: 0; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }\n .title-sm { font-size: 1rem; font-weight: 500; line-height: 1.4; letter-spacing: 0; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }\n .body-md { font-size: 1rem; font-weight: 400; line-height: 1.55; letter-spacing: 0; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }\n .body-sm { font-size: 0.875rem; font-weight: 400; line-height: 1.55; letter-spacing: 0; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }\n .caption { font-size: 0.8125rem; font-weight: 500; line-height: 1.4; letter-spacing: 0; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }\n .caption-uppercase { font-size: 0.75rem; font-weight: 500; line-height: 1.4; letter-spacing: 0.1em; text-transform: uppercase; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }\n .code { font-size: 0.875rem; font-weight: 400; line-height: 1.6; letter-spacing: 0; font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace; }\n .button-label { font-size: 0.875rem; font-weight: 500; line-height: 1; letter-spacing: 0; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }\n .nav-link { font-size: 0.875rem; font-weight: 500; line-height: 1.4; letter-spacing: 0; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }\n\n /* ===== Button Variants ===== */\n .btn-primary {\n background-color: var(--color-primary);\n color: var(--color-on-primary);\n font-size: 0.875rem;\n font-weight: 500;\n line-height: 1;\n padding: 0.75rem 1.25rem;\n border-radius: 8px;\n height: 40px;\n min-width: 44px;\n min-height: 44px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n transition: background-color var(--dur-base) var(--ease-standard), transform var(--dur-micro) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);\n border: none;\n cursor: pointer;\n text-decoration: none;\n }\n .btn-primary:hover {\n background-color: var(--state-hover);\n transform: translateY(-1px);\n box-shadow: 0 1px 3px rgba(20,20,19,0.08);\n }\n .btn-primary:focus-visible {\n outline: 2px solid var(--state-focus);\n outline-offset: 2px;\n border-radius: 8px;\n }\n .btn-primary:active {\n transform: scale(var(--scale-press));\n background-color: var(--state-active);\n }\n .btn-primary:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n background-color: var(--color-primary-disabled);\n color: var(--color-muted);\n transform: none;\n box-shadow: none;\n }\n\n .btn-secondary {\n background-color: var(--color-background);\n color: var(--color-foreground);\n border: 1px solid var(--color-hairline);\n font-size: 0.875rem;\n font-weight: 500;\n line-height: 1;\n padding: 0.75rem 1.25rem;\n border-radius: 8px;\n height: 40px;\n min-width: 44px;\n min-height: 44px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n transition: background-color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), transform var(--dur-micro) var(--ease-standard);\n cursor: pointer;\n text-decoration: none;\n }\n .btn-secondary:hover {\n background-color: var(--color-surface-soft);\n border-color: var(--color-primary);\n }\n .btn-secondary:focus-visible {\n outline: 2px solid var(--state-focus);\n outline-offset: 2px;\n border-radius: 8px;\n }\n .btn-secondary:active {\n transform: scale(var(--scale-press));\n }\n .btn-secondary:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n background-color: var(--color-surface-soft);\n color: var(--color-muted);\n transform: none;\n }\n\n .btn-ghost {\n background-color: transparent;\n color: var(--color-foreground);\n font-size: 0.875rem;\n font-weight: 500;\n line-height: 1;\n padding: 0.5rem 0.75rem;\n border-radius: 8px;\n min-width: 44px;\n min-height: 44px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n transition: background-color var(--dur-base) var(--ease-standard);\n border: none;\n cursor: pointer;\n text-decoration: none;\n }\n .btn-ghost:hover {\n background-color: var(--color-surface-soft);\n }\n .btn-ghost:focus-visible {\n outline: 2px solid var(--state-focus);\n outline-offset: 2px;\n border-radius: 8px;\n }\n .btn-ghost:active {\n transform: scale(var(--scale-press));\n }\n .btn-ghost:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n color: var(--color-muted);\n transform: none;\n }\n\n /* ===== Card Hover ===== */\n .card-hover {\n transition: box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);\n }\n .card-hover:hover {\n box-shadow: 0 1px 3px rgba(20,20,19,0.08);\n transform: translateY(-2px);\n }\n\n /* ===== Nav Scrolled ===== */\n .nav-scrolled {\n box-shadow: 0 1px 3px rgba(20,20,19,0.06);\n }\n\n /* ===== Input Focus ===== */\n .input-focus:focus {\n border-color: var(--color-primary);\n box-shadow: 0 0 0 3px rgba(204,120,92,0.15);\n outline: none;\n }\n .input-error {\n border-color: var(--color-danger);\n box-shadow: 0 0 0 3px rgba(198,69,69,0.15);\n }\n\n /* ===== Global Focus Visible ===== */\n *:focus-visible {\n outline: 2px solid var(--state-focus);\n outline-offset: 2px;\n border-radius: inherit;\n }\n\n /* ===== Skip Link ===== */\n .skip-link {\n position: absolute;\n top: -100%;\n left: 0;\n z-index: 100;\n padding: 0.5rem 1rem;\n background: var(--color-primary);\n color: var(--color-on-primary);\n font-size: 0.875rem;\n font-weight: 500;\n border-radius: 0 0 8px 0;\n transition: top var(--dur-base) var(--ease-standard);\n }\n .skip-link:focus {\n top: 0;\n }\n\n /* ===== Tabular Nums ===== */\n .tabular-nums {\n font-variant-numeric: tabular-nums;\n font-feature-settings: 'tnum' 1;\n }\n\n /* ===== Stagger Animation ===== */\n .stagger-item {\n opacity: 0;\n transform: translateY(20px);\n animation: fadeInUp var(--dur-expressive) var(--ease-standard) forwards;\n animation-delay: calc(var(--i, 0) * var(--stagger-list));\n }\n @keyframes fadeInUp {\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n /* ===== Scroll Reveal ===== */\n .scroll-reveal {\n opacity: 0;\n transform: translateY(30px);\n transition: opacity 0.6s var(--ease-standard), transform 0.6s var(--ease-standard);\n }\n .scroll-reveal.revealed {\n opacity: 1;\n transform: translateY(0);\n }\n\n /* ===== Counter Animation ===== */\n .counter-value {\n display: inline-block;\n }\n\n /* ===== Skeleton Shimmer ===== */\n .skeleton {\n background: linear-gradient(90deg, var(--color-surface-soft) 25%, var(--color-card) 50%, var(--color-surface-soft) 75%);\n background-size: 200% 100%;\n animation: shimmer 1200ms var(--ease-standard) infinite;\n border-radius: 8px;\n }\n @keyframes shimmer {\n 0% { background-position: 200% 0; }\n 100% { background-position: -200% 0; }\n }\n\n /* ===== Reduced Motion ===== */\n @media (prefers-reduced-motion: reduce) {\n *, *::before, *::after {\n animation-duration: 1ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 1ms !important;\n scroll-behavior: auto !important;\n }\n }\n\n /* ===== Scroll Behavior ===== */\n html {\n scroll-behavior: smooth;\n }\n @media (prefers-reduced-motion: reduce) {\n html {\n scroll-behavior: auto;\n }\n }\n\n /* ===== Code Window ===== */\n .code-window {\n background: var(--color-surface-dark);\n border-radius: 12px;\n overflow: hidden;\n }\n .code-window-header {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px 16px;\n background: var(--color-surface-dark-elevated);\n }\n .code-window-dot {\n width: 10px;\n height: 10px;\n border-radius: 50%;\n }\n .code-window-body {\n padding: 16px;\n overflow-x: auto;\n }\n .code-line {\n display: flex;\n gap: 16px;\n }\n .code-line-number {\n color: var(--color-on-dark-soft);\n user-select: none;\n text-align: right;\n min-width: 24px;\n }\n .code-line-content {\n color: var(--color-on-dark);\n white-space: pre;\n }\n .syntax-keyword { color: #c792ea; }\n .syntax-string { color: #c3e88d; }\n .syntax-function { color: #82aaff; }\n .syntax-comment { color: #546e7a; font-style: italic; }\n .syntax-number { color: #f78c6c; }\n\n /* ===== Mobile Menu ===== */\n .mobile-menu-open {\n transform: translateX(0);\n }\n .mobile-menu-closed {\n transform: translateX(100%);\n }\n\n /* ===== Responsive ===== */\n @media (max-width: 768px) {\n .hide-mobile { display: none !important; }\n .show-mobile { display: flex !important; }\n .hero-split { flex-direction: column; }\n .feature-grid { grid-template-columns: 1fr; }\n .pricing-grid { grid-template-columns: 1fr; }\n .footer-grid { grid-template-columns: 1fr; }\n .stats-grid { grid-template-columns: 1fr; gap: 24px; }\n .model-grid { grid-template-columns: 1fr; }\n }\n @media (min-width: 769px) and (max-width: 1024px) {\n .feature-grid { grid-template-columns: repeat(2, 1fr); }\n .pricing-grid { grid-template-columns: repeat(2, 1fr); }\n .model-grid { grid-template-columns: repeat(2, 1fr); }\n .footer-grid { grid-template-columns: repeat(2, 1fr); }\n }\n @media (min-width: 1025px) {\n .hide-desktop { display: none !important; }\n .show-desktop { display: flex !important; }\n }\n\n /* ===== Dark Mode ===== */\n @media (prefers-color-scheme: dark) {\n :root {\n --color-primary: #d4896e;\n --color-secondary: #6dc4b2;\n --color-accent: #e8b56a;\n --color-background: #181715;\n --color-foreground: #faf9f5;\n --color-card: #252320;\n --color-border: #3d3d3a;\n --color-muted: #a09d96;\n --color-body: #a09d96;\n --color-body-strong: #faf9f5;\n --color-muted-soft: #6c6a64;\n --color-hairline: #3d3d3a;\n --color-hairline-soft: #3d3d3a;\n --color-surface-soft: #252320;\n --color-surface-cream-strong: #3d3d3a;\n --color-surface-dark: #0f0f0d;\n --color-surface-dark-elevated: #1a1917;\n --color-surface-dark-soft: #141312;\n --color-on-primary: #ffffff;\n --color-on-dark: #faf9f5;\n --color-on-dark-soft: #a09d96;\n --color-primary-active: #c47a5e;\n --color-primary-disabled: #3d3d3a;\n --state-hover: #c47a5e;\n --state-active: #b06a50;\n --state-focus: #d4896e;\n --state-disabled: #3d3d3a;\n }\n }\n :root[data-theme=\"dark\"] {\n --color-primary: #d4896e;\n --color-secondary: #6dc4b2;\n --color-accent: #e8b56a;\n --color-background: #181715;\n --color-foreground: #faf9f5;\n --color-card: #252320;\n --color-border: #3d3d3a;\n --color-muted: #a09d96;\n --color-body: #a09d96;\n --color-body-strong: #faf9f5;\n --color-muted-soft: #6c6a64;\n --color-hairline: #3d3d3a;\n --color-hairline-soft: #3d3d3a;\n --color-surface-soft: #252320;\n --color-surface-cream-strong: #3d3d3a;\n --color-surface-dark: #0f0f0d;\n --color-surface-dark-elevated: #1a1917;\n --color-surface-dark-soft: #141312;\n --color-on-primary: #ffffff;\n --color-on-dark: #faf9f5;\n --color-on-dark-soft: #a09d96;\n --color-primary-active: #c47a5e;\n --color-primary-disabled: #3d3d3a;\n --state-hover: #c47a5e;\n --state-active: #b06a50;\n --state-focus: #d4896e;\n --state-disabled: #3d3d3a;\n }\n\n /* ===== Oklch Color Space ===== */\n @supports (color: oklch(0 0 0)) {\n :root {\n --color-primary: oklch(0.62 0.12 35);\n --color-secondary: oklch(0.68 0.09 175);\n --color-accent: oklch(0.72 0.11 75);\n }\n }\n\n /* ===== Color Mix for States ===== */\n @supports (background: color-mix(in oklch, red, blue)) {\n .btn-primary {\n --state-hover: color-mix(in oklch, var(--color-primary) 88%, black 12%);\n --state-active: color-mix(in oklch, var(--color-primary) 76%, black 24%);\n }\n }\n\n /* ===== Gradient ===== */\n .coral-glow {\n background: linear-gradient(135deg, #cc785c 0%, #e8a55a 100%);\n }\n @supports (background: linear-gradient(in oklch, red, blue)) {\n .coral-glow {\n background: linear-gradient(in oklch, 135deg, oklch(0.62 0.12 35) 0%, oklch(0.72 0.11 75) 100%);\n }\n }\n\n /* ===== Variable Fonts ===== */\n .font-variable-body {\n font-variation-settings: 'wght' 400;\n }\n .font-variable-body-medium {\n font-variation-settings: 'wght' 500;\n }\n .font-variable-body-semibold {\n font-variation-settings: 'wght' 600;\n }\n\n /* ===== Three States ===== */\n .state-container[data-state=\"loading\"] .state-content { display: none; }\n .state-container[data-state=\"loading\"] .state-loading { display: block; }\n .state-container[data-state=\"empty\"] .state-content { display: none; }\n .state-container[data-state=\"empty\"] .state-empty { display: block; }\n .state-container[data-state=\"error\"] .state-content { display: none; }\n .state-container[data-state=\"error\"] .state-error { display: block; }\n .state-loading, .state-empty, .state-error { display: none; }\n\n /* ===== Touch Target Spacing ===== */\n .touch-spacing > * + * {\n margin-top: 8px;\n }\n\n /* ===== Custom Scrollbar ===== */\n .custom-scrollbar::-webkit-scrollbar {\n width: 6px;\n height: 6px;\n }\n .custom-scrollbar::-webkit-scrollbar-track {\n background: transparent;\n }\n .custom-scrollbar::-webkit-scrollbar-thumb {\n background: var(--color-muted-soft);\n border-radius: 3px;\n }\n </style>\n</head>\n<body style=\"background-color: var(--color-background); color: var(--color-foreground);\" class=\"font-body\">\n \n <a href=\"#main\" class=\"skip-link\">跳到主内容</a>\n\n \n <nav id=\"nav\" class=\"fixed top-0 left-0 right-0 z-50\" style=\"background-color: var(--color-background); height: 64px; border-bottom: 1px solid var(--color-hairline); transition: box-shadow var(--dur-base) var(--ease-standard);\" x-data=\"{ scrolled: false, mobileOpen: false }\" @scroll.window=\"scrolled = window.scrollY > 10\" :class=\"{ 'nav-scrolled': scrolled }\">\n <div class=\"max-w-[1200px] mx-auto px-6 h-full flex items-center justify-between\">\n \n <a href=\"#\" class=\"flex items-center gap-2 text-lg font-heading\" style=\"color: var(--color-foreground);\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"12\" cy=\"12\" r=\"2\" fill=\"var(--color-foreground)\"/>\n <line x1=\"12\" y1=\"2\" x2=\"12\" y2=\"6\" stroke=\"var(--color-foreground)\" stroke-width=\"1.5\"/>\n <line x1=\"12\" y1=\"18\" x2=\"12\" y2=\"22\" stroke=\"var(--color-foreground)\" stroke-width=\"1.5\"/>\n <line x1=\"2\" y1=\"12\" x2=\"6\" y2=\"12\" stroke=\"var(--color-foreground)\" stroke-width=\"1.5\"/>\n <line x1=\"18\" y1=\"12\" x2=\"22\" y2=\"12\" stroke=\"var(--color-foreground)\" stroke-width=\"1.5\"/>\n </svg>\n <span class=\"font-heading text-xl\" style=\"letter-spacing: -0.02em;\">Claude</span>\n </a>\n\n \n <div class=\"hide-mobile flex items-center gap-6 nav-link\">\n <a href=\"#features\" class=\"nav-link\" style=\"color: var(--color-foreground); transition: color var(--dur-base) var(--ease-standard);\">产品</a>\n <a href=\"#features\" class=\"nav-link\" style=\"color: var(--color-foreground); transition: color var(--dur-base) var(--ease-standard);\">解决方案</a>\n <a href=\"#pricing\" class=\"nav-link\" style=\"color: var(--color-foreground); transition: color var(--dur-base) var(--ease-standard);\">价格</a>\n <a href=\"#\" class=\"nav-link\" style=\"color: var(--color-foreground); transition: color var(--dur-base) var(--ease-standard);\">研究</a>\n <a href=\"#\" class=\"nav-link\" style=\"color: var(--color-foreground); transition: color var(--dur-base) var(--ease-standard);\">公司</a>\n </div>\n\n \n <div class=\"hide-mobile flex items-center gap-3\">\n <a href=\"#\" class=\"btn-ghost nav-link\">登录</a>\n <a href=\"#cta\" class=\"btn-primary nav-link\">免费试用 Claude</a>\n </div>\n\n \n <button class=\"hide-desktop btn-ghost\" aria-label=\"打开菜单\" @click=\"mobileOpen = !mobileOpen\">\n <i class=\"fa-solid fa-bars\" style=\"font-size: 1.25rem;\"></i>\n </button>\n </div>\n\n \n <div x-show=\"mobileOpen\" x-cloak class=\"fixed top-0 right-0 h-full w-[85vw] z-50\" style=\"background-color: var(--color-background); border-left: 1px solid var(--color-hairline); transition: transform var(--dur-expressive) var(--ease-standard);\" :class=\"mobileOpen ? 'mobile-menu-open' : 'mobile-menu-closed'\" @click.away=\"mobileOpen = false\">\n <div class=\"p-6 pt-20 flex flex-col gap-6\">\n <a href=\"#features\" class=\"nav-link text-lg\" style=\"color: var(--color-foreground);\">产品</a>\n <a href=\"#features\" class=\"nav-link text-lg\" style=\"color: var(--color-foreground);\">解决方案</a>\n <a href=\"#pricing\" class=\"nav-link text-lg\" style=\"color: var(--color-foreground);\">价格</a>\n <a href=\"#\" class=\"nav-link text-lg\" style=\"color: var(--color-foreground);\">研究</a>\n <a href=\"#\" class=\"nav-link text-lg\" style=\"color: var(--color-foreground);\">公司</a>\n <hr style=\"border-color: var(--color-hairline);\">\n <a href=\"#\" class=\"btn-ghost nav-link text-lg\">登录</a>\n <a href=\"#cta\" class=\"btn-primary nav-link text-lg text-center\">免费试用 Claude</a>\n </div>\n </div>\n </nav>\n\n <main id=\"main\" style=\"padding-top: 64px;\">\n \n <section class=\"hero-split max-w-[1200px] mx-auto px-6 flex items-center gap-12\" style=\"padding-top: 96px; padding-bottom: 96px; min-height: 100dvh;\">\n <div class=\"flex-1 space-y-6\">\n <span class=\"badge-coral inline-flex items-center gap-1.5\" style=\"background-color: var(--color-primary); color: var(--color-on-primary); border-radius: 9999px; padding: 4px 12px; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;\">\n <i class=\"fa-solid fa-sparkle\" style=\"font-size: 0.625rem;\"></i>\n 全新 Claude 3.5\n </span>\n <h1 class=\"display-xl\" style=\"color: var(--color-foreground);\">\n 遇见你的<br>\n <span style=\"color: var(--color-primary);\">思考伙伴</span>\n </h1>\n <p class=\"body-md\" style=\"color: var(--color-body); max-width: 480px;\">\n Claude 是 Anthropic 构建的下一代 AI 助手——它能理解复杂上下文、生成高质量代码、分析文档,并以对话的方式与你协作。\n </p>\n <div class=\"flex flex-wrap gap-3 pt-2\">\n <a href=\"#cta\" class=\"btn-primary\">免费开始使用</a>\n <a href=\"#\" class=\"btn-secondary\">查看 API 文档</a>\n </div>\n </div>\n <div class=\"flex-1\">\n \n <div class=\"code-window\" style=\"box-shadow: 0 12px 32px rgba(20,20,19,0.1);\">\n <div class=\"code-window-header\">\n <span class=\"code-window-dot\" style=\"background: #ff5f56;\"></span>\n <span class=\"code-window-dot\" style=\"background: #ffbd2e;\"></span>\n <span class=\"code-window-dot\" style=\"background: #27c93f;\"></span>\n <span class=\"code text-xs\" style=\"color: var(--color-on-dark-soft); margin-left: 8px;\">claude_terminal — python</span>\n </div>\n <div class=\"code-window-body custom-scrollbar\">\n <div class=\"code-line\">\n <span class=\"code-line-number code\">1</span>\n <span class=\"code-line-content code\"><span class=\"syntax-keyword\">import</span> claude</span>\n </div>\n <div class=\"code-line\">\n <span class=\"code-line-number code\">2</span>\n <span class=\"code-line-content code\"></span>\n </div>\n <div class=\"code-line\">\n <span class=\"code-line-number code\">3</span>\n <span class=\"code-line-content code\"><span class=\"syntax-comment\"># 分析文本情感倾向</span></span>\n </div>\n <div class=\"code-line\">\n <span class=\"code-line-number code\">4</span>\n <span class=\"code-line-content code\"><span class=\"syntax-keyword\">def</span> <span class=\"syntax-function\">analyze_sentiment</span>(text):</span>\n </div>\n <div class=\"code-line\">\n <span class=\"code-line-number code\">5</span>\n <span class=\"code-line-content code\"> response = claude.messages.create(</span>\n </div>\n <div class=\"code-line\">\n <span class=\"code-line-number code\">6</span>\n <span class=\"code-line-content code\"> model=<span class=\"syntax-string\">\"claude-3-5-sonnet-20241022\"</span>,</span>\n </div>\n <div class=\"code-line\">\n <span class=\"code-line-number code\">7</span>\n <span class=\"code-line-content code\"> max_tokens=<span class=\"syntax-number\">1024</span>,</span>\n </div>\n <div class=\"code-line\">\n <span class=\"code-line-number code\">8</span>\n <span class=\"code-line-content code\"> messages=[{<span class=\"syntax-string\">\"role\"</span>: <span class=\"syntax-string\">\"user\"</span>, <span class=\"syntax-string\">\"content\"</span>: f<span class=\"syntax-string\">\"分析这段文本的情感: {text}\"</span>}]</span>\n </div>\n <div class=\"code-line\">\n <span class=\"code-line-number code\">9</span>\n <span class=\"code-line-content code\"> )</span>\n </div>\n <div class=\"code-line\">\n <span class=\"code-line-number code\">10</span>\n <span class=\"code-line-content code\"> <span class=\"syntax-keyword\">return</span> response.content</span>\n </div>\n <div class=\"code-line\" style=\"margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--color-surface-dark-elevated);\">\n <span class=\"code-line-number code\" style=\"color: var(--color-success);\">$</span>\n <span class=\"code-line-content code\" style=\"color: var(--color-success);\">> 情感分析结果: 正面 (置信度 0.94)</span>\n </div>\n </div>\n </div>\n </div>\n </section>\n\n \n <section id=\"features\" style=\"padding-top: 96px; padding-bottom: 96px;\">\n <div class=\"max-w-[1200px] mx-auto px-6\">\n <div class=\"text-center mb-12 scroll-reveal\">\n <h2 class=\"display-lg\" style=\"color: var(--color-foreground);\">核心能力</h2>\n <p class=\"body-md mt-4\" style=\"color: var(--color-body); max-width: 600px; margin-left: auto; margin-right: auto;\">\n Claude 在多个维度上重新定义了 AI 助手的可能性\n </p>\n </div>\n <div class=\"feature-grid grid gap-6\" style=\"grid-template-columns: repeat(3, 1fr);\">\n \n <div class=\"card-hover stagger-item\" style=\"--i: 0; background-color: var(--color-card); border-radius: 12px; padding: 32px;\" role=\"article\">\n <div class=\"w-10 h-10 flex items-center justify-center rounded-lg mb-4\" style=\"background-color: var(--color-primary); color: var(--color-on-primary);\">\n <i class=\"fa-solid fa-brain\" style=\"font-size: 1.125rem;\"></i>\n </div>\n <h3 class=\"title-md mb-2\" style=\"color: var(--color-foreground);\">深度理解上下文</h3>\n <p class=\"body-sm\" style=\"color: var(--color-body);\">一次处理 20 万 token——相当于整本《三体》三部曲。Claude 能记住并推理超长对话中的每一个细节。</p>\n </div>\n \n <div class=\"card-hover stagger-item\" style=\"--i: 1; background-color: var(--color-card); border-radius: 12px; padding: 32px;\" role=\"article\">\n <div class=\"w-10 h-10 flex items-center justify-center rounded-lg mb-4\" style=\"background-color: var(--color-primary); color: var(--color-on-primary);\">\n <i class=\"fa-solid fa-code\" style=\"font-size: 1.125rem;\"></i>\n </div>\n <h3 class=\"title-md mb-2\" style=\"color: var(--color-foreground);\">代码生成与调试</h3>\n <p class=\"body-sm\" style=\"color: var(--color-body);\">从 Python 到 Rust,从 React 到 SQL——Claude 能编写、审查、优化和解释代码,支持 30+ 编程语言。</p>\n </div>\n \n <div class=\"card-hover stagger-item\" style=\"--i: 2; background-color: var(--color-card); border-radius: 12px; padding: 32px;\" role=\"article\">\n <div class=\"w-10 h-10 flex items-center justify-center rounded-lg mb-4\" style=\"background-color: var(--color-primary); color: var(--color-on-primary);\">\n <i class=\"fa-solid fa-file-lines\" style=\"font-size: 1.125rem;\"></i>\n </div>\n <h3 class=\"title-md mb-2\" style=\"color: var(--color-foreground);\">文档分析与摘要</h3>\n <p class=\"body-sm\" style=\"color: var(--color-body);\">上传 PDF、Word、Excel 或代码仓库,Claude 能在数秒内提取关键信息、生成摘要并回答具体问题。</p>\n </div>\n </div>\n </div>\n </section>\n\n \n <section style=\"padding-top: 96px; padding-bottom: 96px; background-color: var(--color-surface-dark);\">\n <div class=\"max-w-[1200px] mx-auto px-6\">\n <div class=\"flex flex-col lg:flex-row items-center gap-12 scroll-reveal\">\n <div class=\"flex-1 space-y-6\">\n <h2 class=\"display-md\" style=\"color: var(--color-on-dark);\">Claude Code</h2>\n <p class=\"title-md\" style=\"color: var(--color-on-dark-soft);\">终端里的 AI 编程搭档</p>\n <p class=\"body-md\" style=\"color: var(--color-on-dark-soft);\">直接在终端中与 Claude 对话——它能理解你的整个代码库,执行命令,创建文件,并自动修复 bug。</p>\n <div class=\"flex flex-wrap gap-3 pt-2\">\n <a href=\"#\" class=\"btn-primary\">在终端中尝试</a>\n <a href=\"#\" class=\"btn-secondary\" style=\"background-color: var(--color-surface-dark-elevated); color: var(--color-on-dark); border-color: var(--color-surface-dark-elevated);\">阅读文档</a>\n </div>\n </div>\n <div class=\"flex-1\">\n <div class=\"code-window\" style=\"border: 1px solid var(--color-surface-dark-elevated);\">\n <div class=\"code-window-header\">\n <span class=\"code-window-dot\" style=\"background: #ff5f56;\"></span>\n <span class=\"code-window-dot\" style=\"background: #ffbd2e;\"></span>\n <span class=\"code-window-dot\" style=\"background: #27c93f;\"></span>\n <span class=\"code text-xs\" style=\"color: var(--color-on-dark-soft); margin-left: 8px;\">claude_code — ~/project</span>\n </div>\n <div class=\"code-window-body custom-scrollbar\">\n <div class=\"code-line\">\n <span class=\"code-line-number code\">1</span>\n <span class=\"code-line-content code\"><span class=\"syntax-keyword\">def</span> <span class=\"syntax-function\">analyze_sentiment</span>(text):</span>\n </div>\n <div class=\"code-line\">\n <span class=\"code-line-number code\">2</span>\n <span class=\"code-line-content code\"> <span class=\"syntax-string\">\"\"\"分析文本情感倾向\"\"\"</span></span>\n </div>\n <div class=\"code-line\">\n <span class=\"code-line-number code\">3</span>\n <span class=\"code-line-content code\"> response = claude.messages.create(</span>\n </div>\n <div class=\"code-line\">\n <span class=\"code-line-number code\">4</span>\n <span class=\"code-line-content code\"> model=<span class=\"syntax-string\">\"claude-3-5-sonnet-20241022\"</span>,</span>\n </div>\n <div class=\"code-line\">\n <span class=\"code-line-number code\">5</span>\n <span class=\"code-line-content code\"> max_tokens=<span class=\"syntax-number\">1024</span>,</span>\n </div>\n <div class=\"code-line\">\n <span class=\"code-line-number code\">6</span>\n <span class=\"code-line-content code\"> messages=[{<span class=\"syntax-string\">\"role\"</span>: <span class=\"syntax-string\">\"user\"</span>, <span class=\"syntax-string\">\"content\"</span>: f<span class=\"syntax-string\">\"分析这段文本的情感: {text}\"</span>}]</span>\n </div>\n <div class=\"code-line\">\n <span class=\"code-line-number code\">7</span>\n <span class=\"code-line-content code\"> )</span>\n </div>\n <div class=\"code-line\">\n <span class=\"code-line-number code\">8</span>\n <span class=\"code-line-content code\"> <span class=\"syntax-keyword\">return</span> response.content</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </section>\n\n \n <section style=\"padding-top: 96px; padding-bottom: 96px;\">\n <div class=\"max-w-[1200px] mx-auto px-6\">\n <div class=\"text-center mb-12 scroll-reveal\">\n <h2 class=\"display-lg\" style=\"color: var(--color-foreground);\">为每个任务选择合适的模型</h2>\n <p class=\"body-md mt-4\" style=\"color: var(--color-body); max-width: 600px; margin-left: auto; margin-right: auto;\">从复杂推理到快速响应,Claude 系列覆盖所有使用场景</p>\n </div>\n <div class=\"model-grid grid gap-6\" style=\"grid-template-columns: repeat(3, 1fr);\">\n \n <div class=\"card-hover stagger-item\" style=\"--i: 0; background-color: var(--color-background); border: 1px solid var(--color-hairline); border-radius: 12px; padding: 32px;\" role=\"article\">\n <div class=\"flex items-center gap-3 mb-4\">\n <span class=\"display-sm\" style=\"color: var(--color-foreground);\">Claude Opus</span>\n <span class=\"badge-pill\" style=\"background-color: var(--color-card); color: var(--color-foreground); border-radius: 9999px; padding: 4px 12px; font-size: 0.8125rem; font-weight: 500;\">最强推理</span>\n </div>\n <p class=\"body-sm\" style=\"color: var(--color-body);\">Anthropic 最强大的模型,在复杂数学、编程竞赛和深度研究任务上表现卓越。适合需要最高准确度的场景。</p>\n <a href=\"#\" class=\"inline-flex items-center gap-1 mt-4 text-link\" style=\"color: var(--color-primary); font-size: 0.875rem; font-weight: 500;\">了解更多 <i class=\"fa-solid fa-arrow-right\" style=\"font-size: 0.75rem;\"></i></a>\n </div>\n \n <div class=\"card-hover stagger-item\" style=\"--i: 1; background-color: var(--color-background); border: 1px solid var(--color-hairline); border-radius: 12px; padding: 32px;\" role=\"article\">\n <div class=\"flex items-center gap-3 mb-4\">\n <span class=\"display-sm\" style=\"color: var(--color-foreground);\">Claude Sonnet</span>\n <span class=\"badge-pill\" style=\"background-color: var(--color-card); color: var(--color-foreground); border-radius: 9999px; padding: 4px 12px; font-size: 0.8125rem; font-weight: 500;\">平衡之选</span>\n </div>\n <p class=\"body-sm\" style=\"color: var(--color-body);\">在速度与智能之间取得最佳平衡。适合日常编程、文档分析和大多数企业工作流。</p>\n <a href=\"#\" class=\"inline-flex items-center gap-1 mt-4 text-link\" style=\"color: var(--color-primary); font-size: 0.875rem; font-weight: 500;\">了解更多 <i class=\"fa-solid fa-arrow-right\" style=\"font-size: 0.75rem;\"></i></a>\n </div>\n \n <div class=\"card-hover stagger-item\" style=\"--i: 2; background-color: var(--color-background); border: 1px solid var(--color-hairline); border-radius: 12px; padding: 32px;\" role=\"article\">\n <div class=\"flex items-center gap-3 mb-4\">\n <span class=\"display-sm\" style=\"color: var(--color-foreground);\">Claude Haiku</span>\n <span class=\"badge-pill\" style=\"background-color: var(--color-card); color: var(--color-foreground); border-radius: 9999px; padding: 4px 12px; font-size: 0.8125rem; font-weight: 500;\">闪电速度</span>\n </div>\n <p class=\"body-sm\" style=\"color: var(--color-body);\">最快的 Claude 模型,毫秒级响应。适合简单查询、内容分类和实时聊天应用。</p>\n <a href=\"#\" class=\"inline-flex items-center gap-1 mt-4 text-link\" style=\"color: var(--color-primary); font-size: 0.875rem; font-weight: 500;\">了解更多 <i class=\"fa-solid fa-arrow-right\" style=\"font-size: 0.75rem;\"></i></a>\n </div>\n </div>\n </div>\n </section>\n\n \n <section style=\"padding-top: 96px; padding-bottom: 96px; background-color: var(--color-card);\">\n <div class=\"max-w-[1200px] mx-auto px-6\">\n <div class=\"stats-grid grid gap-8\" style=\"grid-template-columns: repeat(3, 1fr);\">\n <div class=\"text-center scroll-reveal\">\n <p class=\"display-md tabular-nums counter-value\" style=\"color: var(--color-foreground);\" data-target=\"1000000\">100 万+</p>\n <p class=\"caption\" style=\"color: var(--color-muted); margin-top: 4px;\">活跃开发者</p>\n </div>\n <div class=\"text-center scroll-reveal\">\n <p class=\"display-md tabular-nums counter-value\" style=\"color: var(--color-foreground);\" data-target=\"200000\">20 万</p>\n <p class=\"caption\" style=\"color: var(--color-muted); margin-top: 4px;\">Token 上下文窗口</p>\n </div>\n <div class=\"text-center scroll-reveal\">\n <p class=\"display-md tabular-nums counter-value\" style=\"color: var(--color-foreground);\" data-target=\"95\">95+</p>\n <p class=\"caption\" style=\"color: var(--color-muted); margin-top: 4px;\">国家与地区覆盖</p>\n </div>\n </div>\n </div>\n </section>\n\n \n <section style=\"padding-top: 96px; padding-bottom: 96px;\">\n <div class=\"max-w-[800px] mx-auto px-6 text-center scroll-reveal\">\n <i class=\"fa-solid fa-quote-left display-md\" style=\"color: var(--color-primary); opacity: 0.3; margin-bottom: 16px;\"></i>\n <blockquote class=\"display-sm\" style=\"color: var(--color-foreground); font-style: italic;\">\n \"Claude 是我用过的最有思考能力的 AI。它不只是生成文本——它真正理解我在做什么,并给出有深度的建议。\"\n </blockquote>\n <div class=\"flex items-center justify-center gap-3 mt-8\">\n <div class=\"w-10 h-10 rounded-full flex items-center justify-center\" style=\"background-color: var(--color-primary); color: var(--color-on-primary); font-size: 0.875rem; font-weight: 500;\">李</div>\n <div class=\"text-left\">\n <p class=\"title-sm\" style=\"color: var(--color-foreground);\">李想</p>\n <p class=\"caption\" style=\"color: var(--color-muted);\">CTO, 某科技创业公司</p>\n </div>\n </div>\n </div>\n </section>\n\n \n <section id=\"pricing\" style=\"padding-top: 96px; padding-bottom: 96px;\">\n <div class=\"max-w-[1200px] mx-auto px-6\">\n <div class=\"text-center mb-12 scroll-reveal\">\n <h2 class=\"display-lg\" style=\"color: var(--color-foreground);\">选择适合你的方案</h2>\n </div>\n <div class=\"pricing-grid grid gap-6\" style=\"grid-template-columns: repeat(3, 1fr);\">\n \n <div class=\"card-hover stagger-item\" style=\"--i: 0; background-color: var(--color-background); border: 1px solid var(--color-hairline); border-radius: 12px; padding: 32px;\" role=\"article\">\n <h3 class=\"title-lg mb-2\" style=\"color: var(--color-foreground);\">Free</h3>\n <p class=\"display-sm mb-4\" style=\"color: var(--color-foreground);\">¥0</p>\n <p class=\"body-sm mb-6\" style=\"color: var(--color-body);\">适合个人体验与轻量使用</p>\n <ul class=\"space-y-3 mb-8\" style=\"color: var(--color-body);\">\n <li class=\"flex items-start gap-2 body-sm\"><i class=\"fa-solid fa-check mt-0.5\" style=\"color: var(--color-success); font-size: 0.75rem;\"></i> 有限对话次数</li>\n <li class=\"flex items-start gap-2 body-sm\"><i class=\"fa-solid fa-check mt-0.5\" style=\"color: var(--color-success); font-size: 0.75rem;\"></i> 基础模型访问</li>\n <li class=\"flex items-start gap-2 body-sm\"><i class=\"fa-solid fa-check mt-0.5\" style=\"color: var(--color-success); font-size: 0.75rem;\"></i> 社区支持</li>\n </ul>\n <a href=\"#\" class=\"btn-secondary w-full justify-center\">免费开始</a>\n </div>\n \n <div class=\"card-hover stagger-item\" style=\"--i: 1; background-color: var(--color-surface-dark); border-radius: 12px; padding: 32px; transform: scale(1.02);\" role=\"article\">\n <h3 class=\"title-lg mb-2\" style=\"color: var(--color-on-dark);\">Pro</h3>\n <p class=\"display-sm mb-4\" style=\"color: var(--color-on-dark);\">¥140/月</p>\n <p class=\"body-sm mb-6\" style=\"color: var(--color-on-dark-soft);\">适合专业开发者和重度用户</p>\n <ul class=\"space-y-3 mb-8\" style=\"color: var(--color-on-dark-soft);\">\n <li class=\"flex items-start gap-2 body-sm\"><i class=\"fa-solid fa-check mt-0.5\" style=\"color: var(--color-success); font-size: 0.75rem;\"></i> 5 倍对话额度</li>\n <li class=\"flex items-start gap-2 body-sm\"><i class=\"fa-solid fa-check mt-0.5\" style=\"color: var(--color-success); font-size: 0.75rem;\"></i> 优先访问新模型</li>\n <li class=\"flex items-start gap-2 body-sm\"><i class=\"fa-solid fa-check mt-0.5\" style=\"color: var(--color-success); font-size: 0.75rem;\"></i> 更长的上下文窗口</li>\n <li class=\"flex items-start gap-2 body-sm\"><i class=\"fa-solid fa-check mt-0.5\" style=\"color: var(--color-success); font-size: 0.75rem;\"></i> API 额度</li>\n </ul>\n <a href=\"#\" class=\"btn-primary w-full justify-center\">订阅 Pro</a>\n </div>\n \n <div class=\"card-hover stagger-item\" style=\"--i: 2; background-color: var(--color-background); border: 1px solid var(--color-hairline); border-radius: 12px; padding: 32px;\" role=\"article\">\n <h3 class=\"title-lg mb-2\" style=\"color: var(--color-foreground);\">Team</h3>\n <p class=\"display-sm mb-4\" style=\"color: var(--color-foreground);\">¥210/月</p>\n <p class=\"body-sm mb-6\" style=\"color: var(--color-body);\">适合团队协作与企业管理</p>\n <ul class=\"space-y-3 mb-8\" style=\"color: var(--color-body);\">\n <li class=\"flex items-start gap-2 body-sm\"><i class=\"fa-solid fa-check mt-0.5\" style=\"color: var(--color-success); font-size: 0.75rem;\"></i> 无限对话</li>\n <li class=\"flex items-start gap-2 body-sm\"><i class=\"fa-solid fa-check mt-0.5\" style=\"color: var(--color-success); font-size: 0.75rem;\"></i> 团队管理控制台</li>\n <li class=\"flex items-start gap-2 body-sm\"><i class=\"fa-solid fa-check mt-0.5\" style=\"color: var(--color-success); font-size: 0.75rem;\"></i> 企业级安全</li>\n <li class=\"flex items-start gap-2 body-sm\"><i class=\"fa-solid fa-check mt-0.5\" style=\"color: var(--color-success); font-size: 0.75rem;\"></i> 专属支持</li>\n </ul>\n <a href=\"#\" class=\"btn-secondary w-full justify-center\">联系销售</a>\n </div>\n </div>\n </div>\n </section>\n\n \n <section id=\"cta\" style=\"padding-top: 96px; padding-bottom: 96px;\">\n <div class=\"max-w-[1200px] mx-auto px-6\">\n <div class=\"scroll-reveal\" style=\"background-color: var(--color-primary); border-radius: 12px; padding: 64px; text-align: center;\">\n <h2 class=\"display-sm mb-4\" style=\"color: var(--color-on-primary);\">准备好与 Claude 一起工作了吗?</h2>\n <p class=\"body-md mb-8\" style=\"color: var(--color-on-primary); opacity: 0.9;\">加入 100 万开发者的行列,用 AI 加速你的创造。</p>\n <a href=\"#\" class=\"inline-flex items-center gap-2\" style=\"background-color: var(--color-background); color: var(--color-foreground); border-radius: 8px; padding: 0.75rem 1.25rem; font-size: 0.875rem; font-weight: 500; line-height: 1; min-height: 44px; min-width: 44px; transition: background-color var(--dur-base) var(--ease-standard), transform var(--dur-micro) var(--ease-standard);\" onmouseover=\"this.style.backgroundColor='var(--color-surface-soft)'\" onmouseout=\"this.style.backgroundColor='var(--color-background)'\" onfocus=\"this.style.outline='2px solid var(--color-on-primary)'; this.style.outlineOffset='2px'\" onblur=\"this.style.outline='none'\">免费开始使用</a>\n </div>\n </div>\n </section>\n\n \n <footer style=\"background-color: var(--color-surface-dark); padding-top: 64px; padding-bottom: 64px;\">\n <div class=\"max-w-[1200px] mx-auto px-6\">\n <div class=\"footer-grid grid gap-8\" style=\"grid-template-columns: repeat(4, 1fr);\">\n \n <div>\n <div class=\"flex items-center gap-2 mb-4\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"12\" cy=\"12\" r=\"2\" fill=\"var(--color-on-dark)\"/>\n <line x1=\"12\" y1=\"2\" x2=\"12\" y2=\"6\" stroke=\"var(--color-on-dark)\" stroke-width=\"1.5\"/>\n <line x1=\"12\" y1=\"18\" x2=\"12\" y2=\"22\" stroke=\"var(--color-on-dark)\" stroke-width=\"1.5\"/>\n <line x1=\"2\" y1=\"12\" x2=\"6\" y2=\"12\" stroke=\"var(--color-on-dark)\" stroke-width=\"1.5\"/>\n <line x1=\"18\" y1=\"12\" x2=\"22\" y2=\"12\" stroke=\"var(--color-on-dark)\" stroke-width=\"1.5\"/>\n </svg>\n <span class=\"title-sm\" style=\"color: var(--color-on-dark);\">Anthropic</span>\n </div>\n <p class=\"body-sm\" style=\"color: var(--color-on-dark-soft);\">AI 研究与安全公司</p>\n </div>\n \n <div>\n <h4 class=\"caption-uppercase mb-4\" style=\"color: var(--color-on-dark-soft);\">产品</h4>\n <ul class=\"space-y-2 body-sm\" style=\"color: var(--color-on-dark-soft);\">\n <li><a href=\"#\" class=\"hover:underline\" style=\"color: inherit;\">Claude</a></li>\n <li><a href=\"#\" class=\"hover:underline\" style=\"color: inherit;\">Claude Code</a></li>\n <li><a href=\"#\" class=\"hover:underline\" style=\"color: inherit;\">API</a></li>\n <li><a href=\"#\" class=\"hover:underline\" style=\"color: inherit;\">定价</a></li>\n </ul>\n </div>\n \n <div>\n <h4 class=\"caption-uppercase mb-4\" style=\"color: var(--color-on-dark-soft);\">公司</h4>\n <ul class=\"space-y-2 body-sm\" style=\"color: var(--color-on-dark-soft);\">\n <li><a href=\"#\" class=\"hover:underline\" style=\"color: inherit;\">关于我们</a></li>\n <li><a href=\"#\" class=\"hover:underline\" style=\"color: inherit;\">博客</a></li>\n <li><a href=\"#\" class=\"hover:underline\" style=\"color: inherit;\">研究</a></li>\n <li><a href=\"#\" class=\"hover:underline\" style=\"color: inherit;\">新闻</a></li>\n </ul>\n </div>\n \n <div>\n <h4 class=\"caption-uppercase mb-4\" style=\"color: var(--color-on-dark-soft);\">资源</h4>\n <ul class=\"space-y-2 body-sm\" style=\"color: var(--color-on-dark-soft);\">\n <li><a href=\"#\" class=\"hover:underline\" style=\"color: inherit;\">文档</a></li>\n <li><a href=\"#\" class=\"hover:underline\" style=\"color: inherit;\">帮助中心</a></li>\n <li><a href=\"#\" class=\"hover:underline\" style=\"color: inherit;\">社区</a></li>\n <li><a href=\"#\" class=\"hover:underline\" style=\"color: inherit;\">状态</a></li>\n </ul>\n </div>\n </div>\n \n <div class=\"flex flex-col sm:flex-row justify-between items-center gap-4 mt-12 pt-8\" style=\"border-top: 1px solid var(--color-surface-dark-elevated);\">\n <div class=\"flex flex-wrap gap-4 body-sm\" style=\"color: var(--color-on-dark-soft);\">\n <a href=\"#\" class=\"hover:underline\" style=\"color: inherit;\">隐私政策</a>\n <a href=\"#\" class=\"hover:underline\" style=\"color: inherit;\">服务条款</a>\n <a href=\"#\" class=\"hover:underline\" style=\"color: inherit;\">Cookie 政策</a>\n <a href=\"#\" class=\"hover:underline\" style=\"color: inherit;\">安全</a>\n </div>\n <p class=\"body-sm\" style=\"color: var(--color-on-dark-soft);\">© 2026 Anthropic. All rights reserved.</p>\n </div>\n </div>\n </footer>\n </main>\n\n \n <div class=\"state-container fixed bottom-4 right-4 z-40\" data-state=\"default\" style=\"display: none;\">\n <div class=\"state-loading\">\n <div class=\"skeleton\" style=\"width: 200px; height: 60px; border-radius: 12px;"},"plan":{"planId":"7e1b4a3c-9d2f-4e8b-b6a1-5c0d8f2a7e3b","goal":"Claude 品牌落地页,展示 AI 产品力与编辑风调性","audience":"正在评估 AI 助手的开发者与知识工作者,对品质有要求","tone":"editorial-warm","type":"fullHTML","designTokens":{"style":{"name":"editorial-warm","mood":"calm","keywords":["warm cream","slab-serif display","coral accent","dark navy product chrome","literary"],"density":"comfortable","philosophy":"暖调奶油画布 + 衬线标题 + 珊瑚点缀 + 深海军蓝产品面,让 AI 品牌有温度与书卷气"},"colors":{"primary":"#cc785c","secondary":"#5db8a6","accent":"#e8a55a","success":"#5db872","warning":"#d4a017","danger":"#c64545","info":"#5db8a6","background":"#faf9f5","foreground":"#141413","card":"#efe9de","border":"#e6dfd8","muted":"#6c6a64"},"cssVarPrefix":"--color-","states":{"hover":"#a9583e","active":"#8e4730","focus":"#cc785c","disabled":"#e6dfd8"},"colorsOklch":{"primary":"oklch(0.62 0.12 35)","secondary":"oklch(0.68 0.09 175)","accent":"oklch(0.72 0.11 75)"},"colorSpaces":{"fallback":"hex","preferred":"oklch","stateMixing":"color-mix(in oklch, var(--color-primary), black 12%)"},"colorRoles":{"primary":{"name":"Claude Coral","role":"CTA & focus rings & brand wordmark accent"},"accent":{"name":"Warm Amber","role":"category badges & inline highlights"},"secondary":{"name":"Teal","role":"terminal status indicators & active connection dots"}},"gradients":[{"name":"coral-glow","stops":"linear-gradient(135deg, #cc785c 0%, #e8a55a 100%)","role":"hero decorative accent"}],"fonts":{"heading":"Copernicus, Tiempos Headline, Cormorant Garamond","body":"StyreneB, Inter","mono":"JetBrains Mono","display":"Copernicus, Tiempos Headline, Cormorant Garamond","googleFontsUrl":"https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0…;:{"heading":"'Cormorant Garamond', Georgia, 'Times New Roman', serif","body":"'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif","mono":"'JetBrains Mono', ui-monospace, 'SF Mono', monospace"},"variableAxes":{"body":{"wght":[400,600]}},"features":{"tabularNums":["price","metric","time","code"],"stylisticSet":{"heading":"ss01"},"ligatures":"common-only"},"loading":{"display":"swap","preload":["heading"],"selfHost":"recommended"},"scale":{"display":{"size":"clamp(2.25rem, 4.5vw, 4rem)","weight":400,"lineHeight":"1.05","letterSpacing":"-0.03em"},"h1":{"size":"clamp(1.75rem, 3.5vw, 3rem)","weight":400,"lineHeight":"1.1","letterSpacing":"-0.02em"},"h2":{"size":"clamp(1.5rem, 2.5vw, 2.25rem)","weight":400,"lineHeight":"1.15","letterSpacing":"-0.015em"},"h3":{"size":"clamp(1.25rem, 1.75vw, 1.75rem)","weight":400,"lineHeight":"1.2","letterSpacing":"-0.01em"},"h4":{"size":"1.125rem","weight":500,"lineHeight":"1.3","letterSpacing":"0"},"body":{"size":"1rem","weight":400,"lineHeight":"1.55","letterSpacing":"0"},"small":{"size":"0.875rem","weight":400,"lineHeight":"1.55","letterSpacing":"0"},"caption":{"size":"0.8125rem","weight":500,"lineHeight":"1.4","letterSpacing":"0"},"button":{"size":"0.875rem","weight":500,"lineHeight":"1","letterSpacing":"0"},"overline":{"size":"0.75rem","weight":500,"lineHeight":"1.4","letterSpacing":"0.1em"}},"lineHeight":{"tight":"1.1","base":"1.55","loose":"1.8"},"weight":{"regular":400,"medium":500,"semibold":600,"bold":700}},"components":{"button":{"default":"bg=#cc785c fg=#ffffff padding=0.75rem 1.25rem radius=8px weight=500 font-size=0.875rem height=40px","hover":"bg=#a9583e translateY=-1px","active":"translateY=0 bg=#8e4730","disabled":"opacity=0.5 cursor=not-allowed bg=#e6dfd8 fg=#6c6a64","focus":"ring=2px solid #cc785c offset=2px","variants":{"primary":{"default":"bg=#cc785c fg=#ffffff padding=0.75rem 1.25rem radius=8px weight=500 font-size=0.875rem height=40px","hover":"bg=#a9583e translateY=-1px shadow=0 1px 3px rgba(20,20,19,0.08)","focus":"ring=2px solid #cc785c offset=2px"},"secondary":{"default":"bg=#faf9f5 fg=#141413 border=1px solid #e6dfd8 padding=0.75rem 1.25rem radius=8px weight=500 font-size=0.875rem height=40px","hover":"bg=#f5f0e8 border=1px solid #cc785c","focus":"ring=2px solid #cc785c offset=2px"},"ghost":{"default":"bg=transparent fg=#141413 padding=0.5rem 0.75rem radius=8px weight=500 font-size=0.875rem","hover":"bg=#f5f0e8","focus":"ring=2px solid #cc785c offset=2px"}}},"card":{"default":"bg=#efe9de shadow=none radius=12px padding=2rem","hover":"shadow=0 1px 3px rgba(20,20,19,0.08) translateY=-2px"},"nav":{"default":"bg=#faf9f5/95 backdrop-blur=12px height=64px border-bottom=1px solid #e6dfd8","scrolled":"bg=#faf9f5 shadow=0 1px 3px rgba(20,20,19,0.06)","mobile":"drawer-from-right width=85vw bg=#faf9f5"},"input":{"default":"bg=#faf9f5 fg=#141413 border=1px solid #e6dfd8 radius=8px padding=0.625rem 0.875rem height=40px font-size=1rem","focus":"border=1px solid #cc785c ring=3px rgba(204,120,92,0.15)","error":"border=1px solid #c64545 ring=3px rgba(198,69,69,0.15)","disabled":"opacity=0.5 cursor=not-allowed bg=#f5f0e8"}},"layout":{"container":{"maxWidth":"1200px","paddingX":"1.5rem"},"grid":{"columns":12,"gap":"1.5rem"}},"spacing":{"gutter":"1.5rem","sectionY":"6rem","scale":["0","0.25rem","0.5rem","0.75rem","1rem","1.5rem","2rem","3rem","4rem","6rem"],"tokens":[0,4,8,12,16,24,32,48,64,96]},"shadow":{"sm":"0 1px 3px rgba(20,20,19,0.08)","md":"0 4px 12px rgba(20,20,19,0.08)","lg":"0 12px 32px rgba(20,20,19,0.1)","xl":"0 24px 64px rgba(20,20,19,0.12)"},"surfaces":{"base":"bg=#faf9f5 shadow=none","raised":"bg=#efe9de shadow=none radius=12px","overlay":"bg=#faf9f5 shadow=md radius=12px","modal":"bg=#faf9f5 shadow=lg radius=16px"},"elevation":{"base":"none","raised":"none","overlay":"md","modal":"lg"},"breakpoints":{"sm":"640px","md":"768px","lg":"1024px","xl":"1280px","2xl":"1536px"},"touchTarget":{"min":"44px"},"responsive":{"collapseStrategy":"nav→hamburger, hero-split→single-column, feature-grid→2-col→1-col, pricing→2-col→1-col, footer→1-col","hidePriority":["secondary-nav-links","decorative-illustration","stats-extra"]},"motion":{"duration":{"instant":"0ms","micro":"100ms","base":"200ms","expressive":"320ms","deliberate":"480ms","exit":"140ms"},"easing":{"standard":"cubic-bezier(0.2, 0, 0, 1)","emphasized":"cubic-bezier(0.3, 0, 0, 1)","entering":"cubic-bezier(0, 0, 0, 1)","exiting":"cubic-bezier(0.4, 0, 1, 1)","spring":"linear(0, 0.36 8%, 1 50%, 0.99 65%, 1)"},"stagger":{"list":"40ms","grid":"60ms"},"scale":{"press":0.97,"hover":1.02,"popIn":0.92},"scrollTimeline":{"enabled":true,"thresholdEntry":"30% 0%"},"reducedMotion":{"duration":"1ms","transform":"none","preserve":["opacity","color"]}},"theming":{"defaultMode":"light","modes":["light","dark"],"colorsByMode":{"dark":{"primary":"#d4896e","secondary":"#6dc4b2","accent":"#e8b56a","background":"#181715","foreground":"#faf9f5","card":"#252320","border":"#3d3d3a","muted":"#a09d96"}},"switchStrategy":"media-then-attribute"},"a11y":{"focusRing":{"width":"2px","style":"solid","color":"var(--color-primary)","offset":"2px","radius":"inherit"},"minContrast":{"text":"4.5:1","uiComponent":"3:1","premium":"7:1"},"supportedTextScale":[1,1.25,1.5,2],"minTouchTarget":"44px","minTouchSpacing":"8px","skipLinkRequired":true,"headingHierarchy":"strict"},"iconography":{"set":"lucide","style":"outline","stroke":"1.5px","size":{"sm":"16px","md":"20px","lg":"24px"},"alignment":"baseline","expandHit":"44px","noEmoji":true},"radius":{"sm":"4px","md":"8px","lg":"12px","xl":"16px","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":"顶部奶油色导航栏,承载品牌字标与主菜单","elements":{"brand_logo":true,"nav_links":true,"cta_primary":true,"cta_secondary":true},"copy":{"brand":"Claude","link_product":"产品","link_solutions":"解决方案","link_pricing":"价格","link_research":"研究","link_company":"公司","cta_secondary":"登录","cta_primary":"免费试用 Claude"},"interactions":["smooth-scroll-to-#pricing","mobile-menu-toggle"],"notes":"64px 高,奶油底色,右侧珊瑚色 CTA 按钮"},{"id":"hero","type":"hero-split","purpose":"首屏 6/6 分栏:左侧衬线标题 + 副标题 + 双 CTA,右侧深色代码编辑器模拟","elements":{"title":true,"subtitle":true,"cta_primary":true,"cta_secondary":true,"visual_hint":"dark code editor mockup with syntax-highlighted Python code, line numbers, terminal output","badge":"NEW"},"copy":{"badge":"全新 Claude 3.5","title":"遇见你的","title_accent":"思考伙伴","subtitle":"Claude 是 Anthropic 构建的下一代 AI 助手——它能理解复杂上下文、生成高质量代码、分析文档,并以对话的方式与你协作。","cta_primary":"免费开始使用","cta_secondary":"查看 API 文档"},"interactions":["smooth-scroll-to-#features"],"notes":"左侧 h1 用 Copernicus serif 400,负字距;右侧用 surface-dark 代码窗卡片"},{"id":"features","type":"feature-grid","purpose":"3 列奶油色特性卡片,展示 Claude 核心能力","elements":{"feature_cards":3,"icon":true,"title":true,"description":true},"copy":{"feature_1_title":"深度理解上下文","feature_1_desc":"一次处理 20 万 token——相当于整本《三体》三部曲。Claude 能记住并推理超长对话中的每一个细节。","feature_2_title":"代码生成与调试","feature_2_desc":"从 Python 到 Rust,从 React 到 SQL——Claude 能编写、审查、优化和解释代码,支持 30+ 编程语言。","feature_3_title":"文档分析与摘要","feature_3_desc":"上传 PDF、Word、Excel 或代码仓库,Claude 能在数秒内提取关键信息、生成摘要并回答具体问题。"},"interactions":["scroll-reveal"],"notes":"surface-card 底色,12px 圆角,32px 内边距,每张卡片顶部带小图标"},{"id":"code-showcase","type":"showcase-gallery","purpose":"深色代码编辑器展示区,展示 Claude Code 的实际产品界面","elements":{"code_window":true,"title":true,"description":true,"cta":true},"copy":{"title":"Claude Code","subtitle":"终端里的 AI 编程搭档","description":"直接在终端中与 Claude 对话——它能理解你的整个代码库,执行命令,创建文件,并自动修复 bug。","code_snippet":"def analyze_sentiment(text):\n \"\"\"分析文本情感倾向\"\"\"\n response = claude.messages.create(\n model=\"claude-3-5-sonnet-20241022\",\n max_tokens=1024,\n messages=[{\"role\": \"user\", \"content\": f\"分析这段文本的情感: {text}\"}]\n )\n return response.content","cta_primary":"在终端中尝试","cta_secondary":"阅读文档"},"interactions":["scroll-reveal"],"notes":"surface-dark 底色,代码用 JetBrains Mono,行号用 muted-soft,底部带状态栏"},{"id":"model-comparison","type":"feature-bento","purpose":"模型对比卡片区,展示 Opus / Sonnet / Haiku 三款模型的能力差异","elements":{"cards":3,"model_name":true,"capability":true,"link":true},"copy":{"section_title":"为每个任务选择合适的模型","section_subtitle":"从复杂推理到快速响应,Claude 系列覆盖所有使用场景","model_1_name":"Claude Opus","model_1_tag":"最强推理","model_1_desc":"Anthropic 最强大的模型,在复杂数学、编程竞赛和深度研究任务上表现卓越。适合需要最高准确度的场景。","model_2_name":"Claude Sonnet","model_2_tag":"平衡之选","model_2_desc":"在速度与智能之间取得最佳平衡。适合日常编程、文档分析和大多数企业工作流。","model_3_name":"Claude Haiku","model_3_tag":"闪电速度","model_3_desc":"最快的 Claude 模型,毫秒级响应。适合简单查询、内容分类和实时聊天应用。"},"interactions":["scroll-reveal"],"notes":"canvas 底色 + hairline 边框,12px 圆角,每张卡片包含模型名(display-sm Copernicus)、标签(badge-pill)、描述"},{"id":"stats","type":"stats-row","purpose":"数字背书行,用数据建立信任","elements":{"stats":3},"copy":{"stat_1_value":"100 万+","stat_1_label":"活跃开发者","stat_2_value":"20 万","stat_2_label":"Token 上下文窗口","stat_3_value":"95+","stat_3_label":"国家与地区覆盖"},"interactions":["counter-animate","scroll-reveal"],"notes":"奶油底色,数字用 Copernicus serif display-sm,标签用 StyreneB caption"},{"id":"testimonial","type":"testimonial-featured","purpose":"精选用户证言,增强社会证明","elements":{"quote":true,"author":true,"avatar":true,"role":true},"copy":{"quote":"Claude 是我用过的最有思考能力的 AI。它不只是生成文本——它真正理解我在做什么,并给出有深度的建议。","author":"李想","role":"CTO, 某科技创业公司","company":"—"},"interactions":["scroll-reveal"],"notes":"奶油底色,引号用 display-md Copernicus,作者信息用 body-sm"},{"id":"pricing","type":"pricing-cards","purpose":"三栏定价表,Free / Pro / Team 三层,Pro 为深色高亮卡片","elements":{"plans":3,"featured_plan":"pro","cta":true},"copy":{"section_title":"选择适合你的方案","plan_1_name":"Free","plan_1_price":"¥0","plan_1_desc":"适合个人体验与轻量使用","plan_1_features":"有限对话次数\n基础模型访问\n社区支持","plan_1_cta":"免费开始","plan_2_name":"Pro","plan_2_price":"¥140/月","plan_2_desc":"适合专业开发者和重度用户","plan_2_features":"5 倍对话额度\n优先访问新模型\n更长的上下文窗口\nAPI 额度","plan_2_cta":"订阅 Pro","plan_3_name":"Team","plan_3_price":"¥210/月","plan_3_desc":"适合团队协作与企业管理","plan_3_features":"无限对话\n团队管理控制台\n企业级安全\n专属支持","plan_3_cta":"联系销售"},"interactions":["smooth-scroll-to-#cta"],"notes":"Free 和 Team 用 canvas 底色 + hairline 边框;Pro 用 surface-dark 底色 + on-dark 文字,作为高亮卡片"},{"id":"cta","type":"cta-banner","purpose":"珊瑚色全幅 CTA 卡片,推动最终转化","elements":{"title":true,"subtitle":true,"cta_primary":true},"copy":{"title":"准备好与 Claude 一起工作了吗?","subtitle":"加入 100 万开发者的行列,用 AI 加速你的创造。","cta_primary":"免费开始使用"},"interactions":["scroll-reveal"],"notes":"primary 底色(#cc785c),白色文字,64px 内边距,12px 圆角,CTA 按钮用奶油色反白"},{"id":"footer","type":"footer-columns","purpose":"深色页脚,4 列链接 + 品牌字标 + 版权信息","elements":{"brand_logo":true,"columns":4,"copyright":true,"social_links":true},"copy":{"brand":"Anthropic","tagline":"AI 研究与安全公司","col_1_title":"产品","col_1_links":"Claude\nClaude Code\nAPI\n定价","col_2_title":"公司","col_2_links":"关于我们\n博客\n研究\n新闻","col_3_title":"资源","col_3_links":"文档\n帮助中心\n社区\n状态","col_4_title":"法律","col_4_links":"隐私政策\n服务条款\nCookie 政策\n安全","copyright":"© 2026 Anthropic. All rights reserved."},"interactions":[],"notes":"surface-dark 底色(#181715),on-dark-soft 文字,64px 垂直内边距,4 列网格"}],"rules":{"dos":["每页锚定奶油色画布(#faf9f5),纯白会读作'其他 AI 工具'","所有展示级标题用 Copernicus serif 400 字重 + 负字距,搭配 StyreneB 无衬线正文","珊瑚色(#cc785c)仅用于主 CTA 和全幅珊瑚卡片,不要在其他地方滥用","用深色产品模拟卡片(code-window-card)展示实际产品界面,而非抽象营销插图","在交替区块中配对奶油色特性卡片与深色产品模拟卡片,形成节奏"],"donts":["不要用冷灰色或纯白作为画布底色——奶油色是品牌标识","不要加粗衬线标题——Copernicus 700 读起来过于夸张,系统保持在 400","不要用冷蓝色或饱和青色作为品牌点缀——珊瑚色是品牌电压","不要用 Inter 做展示标题——衬线字符是品牌声音","不要连续两个区块使用相同表面模式——节奏应交替:奶油→奶油卡→深色模拟→奶油→珊瑚→深色页脚"]},"promptGuide":{"quickRef":"暖奶油画布 + Copernicus 衬线标题 + 珊瑚 CTA + 深海军蓝产品面 + 8pt 网格 + 96px 区块节奏","examples":["用 Claude 风格做个代码编辑器展示 hero","用 Claude 风格生成三列特性卡片网格","用 Claude 风格设计一个深色定价表高亮卡片","用 Claude 风格做珊瑚色全幅 CTA 横幅"]},"states":{"loading":{"type":"skeleton","shimmer":true,"duration":"1200ms"},"empty":{"illustration":"monoline","title":"暂无内容","body":"内容加载中,请稍后再来查看。","action":{"label":"刷新页面","intent":"primary"}},"error":{"icon":"alert-triangle","title":"加载失败","body":"网络连接异常,请检查网络后重试。","retry":true}},"personality":{"voice":"学术温暖","humorLevel":2,"formalityLevel":7,"exclamationAllowed":false,"brandVoiceKeywords":["thoughtful","precise","warm","scholarly","confident"]}},"planReviews":[{"round":1,"ok":true}],"planId":"7e1b4a3c-9d2f-4e8b-b6a1-5c0d8f2a7e3b"}```

total_tokens

39457

summary

根据蓝图生成了Claude品牌落地页，共10个区块

uiParsing

关闭