Accueil Explorer Aide
Connexion
zhensolid
/
claude-code-source
1
0
Fork 0
Fichiers Tickets 0 Pull Requests 0 Wiki
Aborescence: 988438af92
Branches Tags
claude-code-sou...
/
03-claude-code-runnable
/
xiaohongshu
/
p4-coordinator.html

p4-coordinator.html 6.8 KB
Historique Raw

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485 
  1. <!DOCTYPE html>
    2. 

  2. <html lang="zh">
    3. 

  3. <head>
    4. 

  4. <meta charset="UTF-8">
    5. 

  5. <style>
    6. 

  6.   * { margin: 0; padding: 0; box-sizing: border-box; }
    7. 

  7.   body { width: 1080px; height: 1440px; font-family: 'PingFang SC', 'Noto Sans SC', sans-serif; background: #0a0e17; overflow: hidden; position: relative; }
    8. 

  8.   .bg-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(52,211,153,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(52,211,153,0.03) 1px, transparent 1px); background-size: 40px 40px; }
    9. 

  9.   .glow { position: absolute; width: 500px; height: 500px; top: 100px; right: -100px; background: radial-gradient(circle, rgba(52,211,153,0.12), transparent 70%); border-radius: 50%; }
    10. 

  10.   .glow2 { position: absolute; width: 400px; height: 400px; bottom: -50px; left: -50px; background: radial-gradient(circle, rgba(16,185,129,0.08), transparent 70%); border-radius: 50%; }
    11. 

  11.   .content { position: relative; z-index: 10; padding: 70px 65px; height: 100%; display: flex; flex-direction: column; }
    12. 

  12.   .page-num { font-size: 20px; color: rgba(255,255,255,0.25); letter-spacing: 2px; margin-bottom: 20px; }
    13. 

  13.   .badge { display: inline-flex; align-items: center; gap: 10px; padding: 10px 24px; border-radius: 30px; font-size: 22px; font-weight: 700; margin-bottom: 30px; width: fit-content; background: rgba(52,211,153,0.12); border: 1.5px solid rgba(52,211,153,0.4); color: #34d399; }
    14. 

  14.   .title { font-size: 64px; font-weight: 900; color: white; line-height: 1.2; margin-bottom: 12px; }
    15. 

  15.   .accent { background: linear-gradient(135deg, #34d399, #10b981); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
    16. 

  16.   .desc { font-size: 28px; color: rgba(255,255,255,0.45); margin-bottom: 40px; line-height: 1.5; }
    17. 

  17.   .card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; padding: 28px 36px; margin-bottom: 18px; }
    18. 

  18.   .card-title { font-size: 23px; font-weight: 700; color: #34d399; margin-bottom: 14px; letter-spacing: 1px; }
    19. 

  19.   .card-body { font-size: 25px; color: rgba(255,255,255,0.75); line-height: 1.7; }
    20. 

  20.   .card-body strong { color: white; }
    21. 

  21.   .hl { display: inline; padding: 2px 10px; border-radius: 6px; background: rgba(52,211,153,0.12); color: #34d399; font-family: 'SF Mono', monospace; font-size: 22px; }
    22. 

  22.   .arch-diagram { display: flex; flex-direction: column; align-items: center; gap: 0; margin: 16px 0; }
    23. 

  23.   .arch-box { width: 100%; padding: 18px 28px; border-radius: 14px; text-align: center; }
    24. 

  24.   .arch-master { background: rgba(52,211,153,0.12); border: 2px solid rgba(52,211,153,0.4); color: #34d399; font-size: 26px; font-weight: 700; }
    25. 

  25.   .arch-connector { display: flex; justify-content: center; gap: 80px; padding: 10px 0; color: rgba(255,255,255,0.2); font-size: 24px; }
    26. 

  26.   .arch-workers { display: flex; gap: 14px; width: 100%; }
    27. 

  27.   .arch-worker { flex: 1; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; padding: 16px; text-align: center; }
    28. 

  28.   .arch-worker-label { font-size: 20px; font-weight: 700; color: rgba(255,255,255,0.6); margin-bottom: 6px; }
    29. 

  29.   .arch-worker-desc { font-size: 18px; color: rgba(255,255,255,0.35); }
    30. 

  30.   .phase-row { display: flex; gap: 12px; margin-top: 14px; }
    31. 

  31.   .phase { flex: 1; padding: 14px 10px; border-radius: 12px; text-align: center; font-size: 20px; font-weight: 700; }
    32. 

  32.   .phase-num { font-size: 16px; color: rgba(255,255,255,0.3); margin-bottom: 4px; }
    33. 

  33.   .code-block { background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 20px 24px; margin-top: 14px; font-family: 'SF Mono', monospace; font-size: 20px; line-height: 1.7; color: rgba(255,255,255,0.5); }
    34. 

  34.   .code-block .comment { color: rgba(255,255,255,0.25); }
    35. 

  35.   .code-block .str { color: #34d399; }
    36. 

  36.   .footer-note { position: absolute; bottom: 50px; left: 65px; right: 65px; font-size: 20px; color: rgba(255,255,255,0.2); text-align: center; }
    37. 

  37. </style>
    38. 

  38. </head>
    39. 

  39. <body>
    40. 

  40.   <div class="bg-grid"></div><div class="glow"></div><div class="glow2"></div>
    41. 

  41.   <div class="content">
    42. 

  42.     <div class="page-num">04 / 07</div>
    43. 

  43.     <div class="badge">ENV · CLAUDE_CODE_COORDINATOR_MODE=1</div>
    44. 

  44.     <div class="title">Coordinator</div>
    45. 

  45.     <div class="title" style="margin-bottom:0"><span class="accent">多 Agent 编排器</span></div>
    46. 

  46.     <div class="desc">主 Claude 变成纯编排者，所有实际工作交给 Worker</div>
    47. 

  47.     <div class="card">
    48. 

  48.       <div class="card-title">ARCHITECTURE</div>
    49. 

  49.       <div class="arch-diagram">
    50. 

  50.         <div class="arch-box arch-master">Coordinator（只有 3 个工具：Agent · SendMessage · TaskStop）</div>
    51. 

  51.         <div class="arch-connector">↓ &nbsp;&nbsp;&nbsp;&nbsp; ↓ &nbsp;&nbsp;&nbsp;&nbsp; ↓</div>
    52. 

  52.         <div class="arch-workers">
    53. 

  53.           <div class="arch-worker"><div class="arch-worker-label">Worker 1</div><div class="arch-worker-desc">Research</div></div>
    54. 

  54.           <div class="arch-worker"><div class="arch-worker-label">Worker 2</div><div class="arch-worker-desc">Implement</div></div>
    55. 

  55.           <div class="arch-worker"><div class="arch-worker-label">Worker 3</div><div class="arch-worker-desc">Verify</div></div>
    56. 

  56.         </div>
    57. 

  57.       </div>
    58. 

  58.     </div>
    59. 

  59.     <div class="card">
    60. 

  60.       <div class="card-title">FOUR-PHASE WORKFLOW</div>
    61. 

  61.       <div class="phase-row">
    62. 

  62.         <div class="phase" style="background:rgba(56,189,248,0.1);border:1px solid rgba(56,189,248,0.3);color:#38bdf8"><div class="phase-num">Phase 1</div>Research</div>
    63. 

  63.         <div class="phase" style="background:rgba(139,92,246,0.1);border:1px solid rgba(139,92,246,0.3);color:#a78bfa"><div class="phase-num">Phase 2</div>Synthesis</div>
    64. 

  64.         <div class="phase" style="background:rgba(52,211,153,0.1);border:1px solid rgba(52,211,153,0.3);color:#34d399"><div class="phase-num">Phase 3</div>Implement</div>
    65. 

  65.         <div class="phase" style="background:rgba(251,146,60,0.1);border:1px solid rgba(251,146,60,0.3);color:#fb923c"><div class="phase-num">Phase 4</div>Verify</div>
    66. 

  66.       </div>
    67. 

  67.     </div>
    68. 

  68.     <div class="card">
    69. 

  69.       <div class="card-title">CORE PRINCIPLE</div>
    70. 

  70.       <div class="card-body"><strong>"先理解再委派"</strong> — 禁止写 "based on your findings"</div>
    71. 

  71.       <div class="code-block">
    72. 

  72.         <span class="comment">// BAD - 把理解委派给 Worker</span><br>
    73. 

  73.         Agent({ prompt: <span class="str">"Based on your findings, fix it"</span> })<br><br>
    74. 

  74.         <span class="comment">// GOOD - Coordinator 先理解，再精确指派</span><br>
    75. 

  75.         Agent({ prompt: <span class="str">"Fix null pointer in<br>&nbsp;&nbsp;src/auth/validate.ts:42..."</span> })
    76. 

  76.       </div>
    77. 

  77.     </div>
    78. 

  78.     <div class="card">
    79. 

  79.       <div class="card-title">SCRATCHPAD</div>
    80. 

  80.       <div class="card-body">Workers 共享 <span class="hl">/tmp/claude-{uid}/scratchpad/</span><br><span style="font-size:22px;color:rgba(255,255,255,0.4)">无需权限提示，自由读写中间结果</span></div>
    81. 

  81.     </div>
    82. 

  82.   </div>
    83. 

  83.   <div class="footer-note">source: restored-src/src/coordinator/coordinatorMode.ts</div>
    84. 

  84. </body>
    85. 

  85. </html>
    86.