haiany
/
huashu-design
镜像来自 https://github.com/alchaincyf/huashu-design.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=1200">
<title>Claude Code Agent - Takram Style</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&family=Noto+Serif+SC:wght@300;400;500;600&display=swap" rel="stylesheet">
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    width: 1200px;
    height: 510px;
    overflow: hidden;
    margin: 0;
    background: #F5F0EB;
    font-family: 'Inter', sans-serif;
    position: relative;
  }

  /* Subtle paper texture overlay */
  .texture {
    position: absolute;
    top: 0; left: 0;
    width: 1200px;
    height: 510px;
    background:
      radial-gradient(ellipse 500px 400px at 72% 50%, rgba(168, 181, 160, 0.06) 0%, transparent 70%),
      radial-gradient(ellipse 300px 250px at 15% 40%, rgba(232, 228, 220, 0.2) 0%, transparent 60%);
    z-index: 0;
  }

  /* Flow diagram — the art piece */
  .diagram {
    position: absolute;
    top: 0; left: 0;
    width: 1200px;
    height: 510px;
    z-index: 1;
  }

  /* Left text panel */
  .text-panel {
    position: absolute;
    left: 72px;
    top: 56px;
    z-index: 2;
    max-width: 360px;
  }

  .text-panel .label {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 9px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #6B8F71;
    margin-bottom: 20px;
    opacity: 0.8;
  }

  .text-panel .title-main {
    font-family: 'Noto Serif SC', serif;
    font-weight: 500;
    font-size: 52px;
    color: #2D3436;
    line-height: 1.15;
    letter-spacing: -0.5px;
    margin-bottom: 4px;
  }

  .text-panel .title-sub {
    font-family: 'Noto Serif SC', serif;
    font-weight: 300;
    font-size: 20px;
    color: #6D685F;
    line-height: 1.4;
    margin-bottom: 16px;
  }

  .text-panel .title-en {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 13px;
    color: #9A958D;
    letter-spacing: 0.3px;
    line-height: 1.8;
  }

  /* Bottom annotation */
  .annotation {
    position: absolute;
    left: 72px;
    bottom: 40px;
    z-index: 2;
  }

  .annotation .note {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 10px;
    color: #B0AAA0;
    letter-spacing: 0.3px;
  }

  .annotation .note-serif {
    font-family: 'Noto Serif SC', serif;
    font-weight: 300;
    font-size: 11px;
    color: #9A958D;
    margin-top: 4px;
  }

  /* Right side number */
  .spec-number {
    position: absolute;
    right: 72px;
    bottom: 40px;
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 10px;
    color: #B0AAA0;
    letter-spacing: 1px;
    z-index: 2;
  }

  /* Agent node styling */
  .node-label {
    font-family: 'Inter', sans-serif;
    font-size: 9px;
    font-weight: 400;
    fill: #8A857D;
    letter-spacing: 0.5px;
  }

  .node-label-serif {
    font-family: 'Noto Serif SC', serif;
    font-size: 11px;
    font-weight: 400;
    fill: #6D685F;
  }

  .node-index {
    font-family: 'Inter', sans-serif;
    font-size: 7px;
    font-weight: 400;
    fill: #B0AAA0;
    letter-spacing: 0.5px;
  }
</style>
</head>
<body>

  <div class="texture"></div>

  <!-- Text panel -->
  <div class="text-panel">
    <div class="label">Speculative Architecture</div>
    <div class="title-main">协作智能体</div>
    <div class="title-sub">Parallel Workflow</div>
    <div class="title-en">
      Eight agents, each autonomous,<br>
      converging toward a shared intent.
    </div>
  </div>

  <!-- The diagram as art -->
  <svg class="diagram" viewBox="0 0 1200 510" xmlns="http://www.w3.org/2000/svg">

    <!-- Subtle background grid hints (Takram spec-drawing aesthetic) -->
    <line x1="440" y1="0" x2="440" y2="510" stroke="#E8E4DC" stroke-width="0.3" opacity="0.4"/>
    <line x1="760" y1="0" x2="760" y2="510" stroke="#E8E4DC" stroke-width="0.3" opacity="0.3"/>

    <!-- Subtle outer orbital paths — layered ellipses for depth -->
    <ellipse cx="760" cy="255" rx="260" ry="195" fill="none" stroke="#E0DCD5" stroke-width="0.5" stroke-dasharray="1,8" opacity="0.5"/>
    <ellipse cx="760" cy="255" rx="180" ry="135" fill="none" stroke="#D8D3CB" stroke-width="0.4" stroke-dasharray="2,6" opacity="0.35"/>

    <!-- Central orchestrator node — refined with layered depth -->
    <circle cx="760" cy="255" r="48" fill="none" stroke="#6B8F71" stroke-width="0.5" opacity="0.12" stroke-dasharray="2,4"/>
    <circle cx="760" cy="255" r="36" fill="none" stroke="#6B8F71" stroke-width="0.8" opacity="0.18"/>
    <circle cx="760" cy="255" r="24" fill="none" stroke="#6B8F71" stroke-width="1.2" opacity="0.3"/>
    <circle cx="760" cy="255" r="14" fill="rgba(107,143,113,0.05)"/>
    <circle cx="760" cy="255" r="5.5" fill="#6B8F71" opacity="0.55"/>
    <circle cx="760" cy="255" r="2" fill="#6B8F71" opacity="0.9"/>
    <text x="760" y="312" text-anchor="middle" class="node-label-serif">Orchestrator</text>
    <!-- Subtle cross-hair on center -->
    <line x1="748" y1="255" x2="730" y2="255" stroke="#6B8F71" stroke-width="0.3" opacity="0.15"/>
    <line x1="772" y1="255" x2="790" y2="255" stroke="#6B8F71" stroke-width="0.3" opacity="0.15"/>
    <line x1="760" y1="243" x2="760" y2="225" stroke="#6B8F71" stroke-width="0.3" opacity="0.15"/>
    <line x1="760" y1="267" x2="760" y2="285" stroke="#6B8F71" stroke-width="0.3" opacity="0.15"/>

    <!-- Agent 1 — top-left (Research) -->
    <line x1="738" y1="232" x2="598" y2="118" stroke="#C8C2B8" stroke-width="0.7" stroke-dasharray="3,5"/>
    <rect x="560" y="92" width="76" height="38" rx="14" fill="rgba(245,240,235,0.7)" stroke="#B8B2A8" stroke-width="0.8"/>
    <circle cx="598" cy="111" r="3.5" fill="#6B8F71" opacity="0.5"/>
    <text x="598" y="144" text-anchor="middle" class="node-label">Research</text>
    <text x="560" y="88" class="node-index">01</text>

    <!-- Agent 2 — top (Analysis) -->
    <line x1="760" y1="217" x2="760" y2="145" stroke="#C8C2B8" stroke-width="0.7" stroke-dasharray="3,5"/>
    <rect x="722" y="100" width="76" height="38" rx="14" fill="rgba(245,240,235,0.7)" stroke="#B8B2A8" stroke-width="0.8"/>
    <circle cx="760" cy="119" r="3.5" fill="#6B8F71" opacity="0.5"/>
    <text x="760" y="152" text-anchor="middle" class="node-label">Analysis</text>
    <text x="722" y="96" class="node-index">02</text>

    <!-- Agent 3 — top-right (Code) -->
    <line x1="782" y1="232" x2="918" y2="118" stroke="#C8C2B8" stroke-width="0.7" stroke-dasharray="3,5"/>
    <rect x="884" y="92" width="76" height="38" rx="14" fill="rgba(245,240,235,0.7)" stroke="#B8B2A8" stroke-width="0.8"/>
    <circle cx="922" cy="111" r="3.5" fill="#6B8F71" opacity="0.5"/>
    <text x="922" y="144" text-anchor="middle" class="node-label">Code</text>
    <text x="884" y="88" class="node-index">03</text>

    <!-- Agent 4 — right (Test) -->
    <line x1="786" y1="252" x2="940" y2="215" stroke="#C8C2B8" stroke-width="0.7" stroke-dasharray="3,5"/>
    <rect x="940" y="196" width="76" height="38" rx="14" fill="rgba(245,240,235,0.7)" stroke="#B8B2A8" stroke-width="0.8"/>
    <circle cx="978" cy="215" r="3.5" fill="#6B8F71" opacity="0.5"/>
    <text x="978" y="248" text-anchor="middle" class="node-label">Test</text>
    <text x="940" y="192" class="node-index">04</text>

    <!-- Agent 5 — bottom-right (Review) -->
    <line x1="782" y1="278" x2="918" y2="385" stroke="#C8C2B8" stroke-width="0.7" stroke-dasharray="3,5"/>
    <rect x="884" y="368" width="76" height="38" rx="14" fill="rgba(245,240,235,0.7)" stroke="#B8B2A8" stroke-width="0.8"/>
    <circle cx="922" cy="387" r="3.5" fill="#6B8F71" opacity="0.5"/>
    <text x="922" y="420" text-anchor="middle" class="node-label">Review</text>
    <text x="884" y="364" class="node-index">05</text>

    <!-- Agent 6 — bottom (Deploy) -->
    <line x1="760" y1="293" x2="760" y2="365" stroke="#C8C2B8" stroke-width="0.7" stroke-dasharray="3,5"/>
    <rect x="722" y="370" width="76" height="38" rx="14" fill="rgba(245,240,235,0.7)" stroke="#B8B2A8" stroke-width="0.8"/>
    <circle cx="760" cy="389" r="3.5" fill="#6B8F71" opacity="0.5"/>
    <text x="760" y="422" text-anchor="middle" class="node-label">Deploy</text>
    <text x="722" y="366" class="node-index">06</text>

    <!-- Agent 7 — bottom-left (Monitor) -->
    <line x1="738" y1="278" x2="600" y2="375" stroke="#C8C2B8" stroke-width="0.7" stroke-dasharray="3,5"/>
    <rect x="562" y="358" width="76" height="38" rx="14" fill="rgba(245,240,235,0.7)" stroke="#B8B2A8" stroke-width="0.8"/>
    <circle cx="600" cy="377" r="3.5" fill="#6B8F71" opacity="0.5"/>
    <text x="600" y="410" text-anchor="middle" class="node-label">Monitor</text>
    <text x="562" y="354" class="node-index">07</text>

    <!-- Agent 8 — left (Design) -->
    <line x1="734" y1="252" x2="578" y2="245" stroke="#C8C2B8" stroke-width="0.7" stroke-dasharray="3,5"/>
    <rect x="502" y="226" width="76" height="38" rx="14" fill="rgba(245,240,235,0.7)" stroke="#B8B2A8" stroke-width="0.8"/>
    <circle cx="540" cy="245" r="3.5" fill="#6B8F71" opacity="0.5"/>
    <text x="540" y="278" text-anchor="middle" class="node-label">Design</text>
    <text x="502" y="222" class="node-index">08</text>

    <!-- Small annotation marks — Takram spec-drawing details -->
    <circle cx="490" cy="120" r="1.2" fill="#B0AAA0" opacity="0.35"/>
    <line x1="492" y1="120" x2="535" y2="120" stroke="#B0AAA0" stroke-width="0.4" opacity="0.25"/>

    <circle cx="1040" cy="390" r="1.2" fill="#B0AAA0" opacity="0.35"/>
    <line x1="1038" y1="390" x2="995" y2="390" stroke="#B0AAA0" stroke-width="0.4" opacity="0.25"/>

    <!-- Dimension annotation line (top) -->
    <line x1="540" y1="60" x2="980" y2="60" stroke="#D4CFC6" stroke-width="0.4" opacity="0.3"/>
    <line x1="540" y1="55" x2="540" y2="65" stroke="#D4CFC6" stroke-width="0.4" opacity="0.3"/>
    <line x1="980" y1="55" x2="980" y2="65" stroke="#D4CFC6" stroke-width="0.4" opacity="0.3"/>
    <text x="760" y="54" text-anchor="middle" font-family="Inter" font-size="7" font-weight="300" fill="#C8C2B8" letter-spacing="1.5">AGENT FIELD</text>

    <!-- Right-side vertical annotation -->
    <line x1="1060" y1="130" x2="1060" y2="380" stroke="#D4CFC6" stroke-width="0.3" opacity="0.25"/>
    <line x1="1056" y1="130" x2="1064" y2="130" stroke="#D4CFC6" stroke-width="0.3" opacity="0.25"/>
    <line x1="1056" y1="380" x2="1064" y2="380" stroke="#D4CFC6" stroke-width="0.3" opacity="0.25"/>
    <text x="1068" y="260" font-family="Inter" font-size="7" font-weight="300" fill="#D4CFC6" letter-spacing="0.5" transform="rotate(90, 1068, 260)">NETWORK DEPTH</text>

    <!-- Subtle data pulse lines emanating from center (organic feel) -->
    <path d="M 760 217 Q 755 200 758 185" fill="none" stroke="#6B8F71" stroke-width="0.3" opacity="0.12"/>
    <path d="M 786 248 Q 810 230 835 225" fill="none" stroke="#6B8F71" stroke-width="0.3" opacity="0.12"/>
    <path d="M 786 262 Q 815 275 840 290" fill="none" stroke="#6B8F71" stroke-width="0.3" opacity="0.12"/>

    <!-- Top-right spec box -->
    <rect x="1040" y="48" width="104" height="56" rx="3" fill="rgba(245,240,235,0.5)" stroke="#E0DCD5" stroke-width="0.6"/>
    <text x="1052" y="66" font-family="Inter" font-size="8" font-weight="500" fill="#B0AAA0" letter-spacing="1.5">AGENTS</text>
    <text x="1052" y="92" font-family="Inter" font-size="28" font-weight="300" fill="#6B8F71">8</text>
    <text x="1082" y="92" font-family="Inter" font-size="9" font-weight="300" fill="#B0AAA0"> parallel</text>
  </svg>

  <!-- Bottom annotation -->
  <div class="annotation">
    <div class="note">Fig. 01 — Parallel Agent Architecture</div>
    <div class="note-serif">Claude Code 协作编排模型</div>
  </div>

  <!-- Spec number -->
  <div class="spec-number">v1.0 / 2026</div>

</body>
</html>