锘军svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 1200 600" font-family="'HYQiHei','Microsoft YaHei','PingFang SC','Noto Sans SC',sans-serif" style="max-width: 1200px;">
  <defs>
    <linearGradient id="frame-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#38bdf8"/>
      <stop offset="55%" stop-color="#3b82f6"/>
      <stop offset="100%" stop-color="#2563eb"/>
    </linearGradient>
    <linearGradient id="panel-glow" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#e0f2fe" stop-opacity="0.96"/>
      <stop offset="100%" stop-color="#ffffff" stop-opacity="0.88"/>
    </linearGradient>
    <linearGradient id="line-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#cfe9ff"/>
      <stop offset="100%" stop-color="#60a5fa"/>
    </linearGradient>
    <linearGradient id="cube-top" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#7dd3fc"/>
      <stop offset="100%" stop-color="#3b82f6"/>
    </linearGradient>
    <linearGradient id="cube-left" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#60a5fa"/>
      <stop offset="100%" stop-color="#2563eb"/>
    </linearGradient>
    <linearGradient id="cube-right" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#3b82f6"/>
      <stop offset="100%" stop-color="#1d4ed8"/>
    </linearGradient>
    <filter id="soft-glow" x="-20%" y="-20%" width="140%" height="140%">
      <feGaussianBlur stdDeviation="5" result="blur"/>
      <feColorMatrix in="blur" type="matrix" values="0 0 0 0 0.231 0 0 0 0 0.510 0 0 0 0 0.965 0 0 0 0.35 0" result="glow"/>
      <feMerge>
        <feMergeNode in="glow"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
    <filter id="panel-shadow" x="-20%" y="-20%" width="140%" height="140%">
      <feDropShadow dx="0" dy="10" stdDeviation="16" flood-color="#0f172a" flood-opacity="0.12"/>
    </filter>
    <style>
      .section-title {
        fill: #64748b;
        font-size: 32px;
        font-weight: 700;
        text-anchor: middle;
      }
      .frame-line {
        fill: none;
        stroke: url(#frame-gradient);
        stroke-width: 4;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .flow-line {
        fill: none;
        stroke: url(#line-gradient);
        stroke-width: 4;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .thin-flow {
        fill: none;
        stroke: #cfe6ff;
        stroke-width: 3;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .spec-label {
        fill: #475569;
        font-size: 20px;
        font-weight: 700;
        text-anchor: middle;
      }
      .output-title {
        fill: #64748b;
        font-size: 30px;
        font-weight: 700;
        text-anchor: middle;
      }
    </style>
  </defs>

  <rect width="1200" height="600" fill="transparent"/>

  <g opacity="0.35">
    <circle cx="315" cy="272" r="138" fill="#67e8f9" opacity="0.12"/>
    <circle cx="730" cy="270" r="150" fill="#60a5fa" opacity="0.1"/>
  </g>

  <text x="190" y="64" class="section-title">鑷劧璇█琛ㄨ揪鎰忓浘</text>
  <text x="610" y="64" class="section-title">Spec椹卞姩寮€鍙慄/text>
  <text x="1000" y="174" class="output-title">宸ョ▼鍖栦繚闅淈/text>
  <text x="1000" y="214" class="output-title">纭畾鎬т唬鐮佷氦浠楛/text>

  <g filter="url(#soft-glow)">
    <path class="thin-flow" d="M48 108 C72 150, 112 180, 154 176 C196 172, 210 112, 242 114 C274 116, 250 176, 300 170 C350 164, 366 126, 410 144"/>
    <path class="thin-flow" d="M76 142 C118 110, 154 128, 180 164 C206 200, 230 228, 274 212 C318 196, 318 142, 372 148 C426 154, 434 188, 474 172"/>
    <path class="thin-flow" d="M32 218 C78 172, 132 182, 174 220 C216 258, 256 298, 312 274 C368 250, 384 206, 434 224"/>
    <path class="thin-flow" d="M44 322 C82 268, 148 274, 186 318 C224 362, 270 400, 330 374 C390 348, 406 300, 456 310"/>
    <path class="thin-flow" d="M68 420 C116 376, 174 390, 220 430 C266 470, 316 506, 370 470 C424 434, 428 382, 478 388"/>
    <path class="thin-flow" d="M82 508 C98 462, 148 444, 186 466 C224 488, 224 554, 280 532 C336 510, 348 450, 404 456"/>
    <path class="thin-flow" d="M112 120 C130 172, 176 194, 214 188 C252 182, 266 132, 302 146 C338 160, 320 214, 360 224 C400 234, 434 212, 474 228"/>
    <path class="thin-flow" d="M138 560 C146 512, 176 504, 212 510 C248 516, 282 560, 324 548 C366 536, 392 480, 438 484"/>
    <path class="flow-line" d="M300 114 C332 132, 362 154, 390 184 C418 214, 444 242, 478 264"/>
    <path class="flow-line" d="M300 114 C344 172, 362 226, 380 278 C398 330, 416 382, 446 434"/>
    <path class="frame-line" d="M300 114 L474 264"/>
    <path class="frame-line" d="M300 114 L446 434"/>
    <path class="frame-line" d="M474 264 L446 434"/>
  </g>

  <g filter="url(#panel-shadow)">
    <path class="frame-line" d="M448 98 H720 L784 144 L784 456 L720 502 H448 Z"/>
    <path class="frame-line" d="M720 98 L784 144"/>
    <path class="frame-line" d="M720 502 L784 456"/>
    <path class="frame-line" d="M448 235 H784"/>
    <path class="frame-line" d="M448 365 H784"/>
    <path class="frame-line" d="M496 98 V502"/>
    <path class="frame-line" d="M594 98 V502"/>
    <path class="frame-line" d="M684 98 V502"/>

    <path class="frame-line" d="M732 122 H764"/>
    <path class="frame-line" d="M732 152 H764"/>
    <path class="frame-line" d="M732 182 H764"/>
    <path class="frame-line" d="M732 212 H764"/>
    <path class="frame-line" d="M732 302 H764"/>
    <path class="frame-line" d="M732 332 H764"/>
    <path class="frame-line" d="M732 362 H764"/>
    <path class="frame-line" d="M732 392 H764"/>
    <path class="frame-line" d="M732 462 H764"/>

    <rect x="458" y="118" width="86" height="104" rx="12" fill="url(#panel-glow)" stroke="#bfdbfe" stroke-width="2"/>
    <rect x="558" y="118" width="86" height="104" rx="12" fill="url(#panel-glow)" stroke="#bfdbfe" stroke-width="2"/>
    <rect x="658" y="118" width="86" height="104" rx="12" fill="url(#panel-glow)" stroke="#bfdbfe" stroke-width="2"/>
    <rect x="558" y="248" width="86" height="104" rx="12" fill="url(#panel-glow)" stroke="#bfdbfe" stroke-width="2"/>
    <rect x="458" y="378" width="86" height="104" rx="12" fill="url(#panel-glow)" stroke="#bfdbfe" stroke-width="2"/>
    <rect x="558" y="378" width="86" height="104" rx="12" fill="url(#panel-glow)" stroke="#bfdbfe" stroke-width="2"/>
    <rect x="658" y="378" width="86" height="104" rx="12" fill="url(#panel-glow)" stroke="#bfdbfe" stroke-width="2"/>

    <text x="501" y="161" class="spec-label">瀹夊叏</text>
    <text x="501" y="199" class="spec-label">鍚堣</text>

    <text x="601" y="161" class="spec-label">API</text>
    <text x="601" y="199" class="spec-label">濂戠害</text>

    <text x="701" y="161" class="spec-label">鏉冮檺</text>
    <text x="701" y="199" class="spec-label">鎺у埗</text>

    <text x="601" y="291" class="spec-label">鏁版嵁</text>
    <text x="601" y="329" class="spec-label">妯″瀷</text>

    <text x="501" y="421" class="spec-label">涓氬姟</text>
    <text x="501" y="459" class="spec-label">瑙勫垯</text>

    <text x="601" y="421" class="spec-label">涓氬姟</text>
    <text x="601" y="459" class="spec-label">娴佺▼</text>

    <text x="701" y="421" class="spec-label">妯℃澘</text>
    <text x="701" y="459" class="spec-label">缁勪欢</text>
  </g>

  <g filter="url(#soft-glow)">
    <path class="flow-line" d="M394 164 C430 176, 446 190, 448 190"/>
    <path class="flow-line" d="M406 194 C430 202, 446 208, 496 208"/>
    <path class="flow-line" d="M414 224 C448 230, 470 240, 558 240"/>
    <path class="flow-line" d="M426 256 C452 260, 488 272, 558 272"/>
    <path class="flow-line" d="M432 292 C456 292, 488 300, 558 302"/>
    <path class="flow-line" d="M434 328 C462 326, 496 330, 558 332"/>
    <path class="flow-line" d="M430 360 C454 356, 490 356, 558 362"/>
    <path class="flow-line" d="M424 392 C446 388, 476 390, 558 394"/>
    <path class="flow-line" d="M416 426 C442 422, 474 424, 558 426"/>

    <path class="frame-line" d="M784 252 H906"/>
    <path class="frame-line" d="M784 430 H906"/>
    <path class="frame-line" d="M906 252 L952 340 L906 430"/>
    <path class="frame-line" d="M784 286 C840 286, 876 288, 914 292"/>
    <path class="frame-line" d="M784 314 C840 314, 876 314, 924 316"/>
    <path class="frame-line" d="M784 342 C840 342, 876 340, 930 340"/>
    <path class="frame-line" d="M784 370 C840 370, 876 366, 924 364"/>
    <path class="frame-line" d="M784 398 C840 398, 876 392, 914 388"/>

    <path class="frame-line" d="M952 390 H1176"/>
    <path class="frame-line" d="M952 414 H1176"/>
    <circle cx="980" cy="402" r="5" fill="#60a5fa"/>
    <circle cx="1030" cy="402" r="5" fill="#60a5fa"/>
    <circle cx="1080" cy="402" r="5" fill="#60a5fa"/>
    <circle cx="1130" cy="402" r="5" fill="#60a5fa"/>

    <g stroke="#dbeafe" stroke-width="2" stroke-linejoin="round">
      <g transform="translate(918 308)">
        <path d="M0 16 L24 2 L48 16 L24 30 Z" fill="url(#cube-top)"/>
        <path d="M0 16 L0 48 L24 62 L24 30 Z" fill="url(#cube-left)"/>
        <path d="M24 30 L24 62 L48 48 L48 16 Z" fill="url(#cube-right)"/>
      </g>
      <g transform="translate(986 306)">
        <path d="M0 16 L24 2 L48 16 L24 30 Z" fill="url(#cube-top)"/>
        <path d="M0 16 L0 48 L24 62 L24 30 Z" fill="url(#cube-left)"/>
        <path d="M24 30 L24 62 L48 48 L48 16 Z" fill="url(#cube-right)"/>
      </g>
      <g transform="translate(1054 306)">
        <path d="M0 16 L24 2 L48 16 L24 30 Z" fill="url(#cube-top)"/>
        <path d="M0 16 L0 48 L24 62 L24 30 Z" fill="url(#cube-left)"/>
        <path d="M24 30 L24 62 L48 48 L48 16 Z" fill="url(#cube-right)"/>
      </g>
      <g transform="translate(1122 306)">
        <path d="M0 16 L24 2 L48 16 L24 30 Z" fill="url(#cube-top)"/>
        <path d="M0 16 L0 48 L24 62 L24 30 Z" fill="url(#cube-left)"/>
        <path d="M24 30 L24 62 L48 48 L48 16 Z" fill="url(#cube-right)"/>
      </g>
    </g>
  </g>
</svg>