zhensolid
/
claude-code-source


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
							<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body { width: 1080px; height: 1440px; font-family: 'PingFang SC', 'Noto Sans SC', sans-serif; background: #0a0e17; overflow: hidden; position: relative; }
  .bg-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(56,189,248,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(56,189,248,0.03) 1px, transparent 1px); background-size: 40px 40px; }
  .glow { position: absolute; width: 500px; height: 500px; top: -80px; right: -80px; background: radial-gradient(circle, rgba(56,189,248,0.12), transparent 70%); border-radius: 50%; }
  .glow2 { position: absolute; width: 350px; height: 350px; bottom: 100px; left: -50px; background: radial-gradient(circle, rgba(6,182,212,0.08), transparent 70%); border-radius: 50%; }
  .content { position: relative; z-index: 10; padding: 70px 65px; height: 100%; display: flex; flex-direction: column; }
  .page-num { font-size: 20px; color: rgba(255,255,255,0.25); letter-spacing: 2px; margin-bottom: 20px; }
  .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(56,189,248,0.12); border: 1.5px solid rgba(56,189,248,0.4); color: #38bdf8; }
  .title { font-size: 64px; font-weight: 900; color: white; line-height: 1.2; margin-bottom: 12px; }
  .accent { background: linear-gradient(135deg, #38bdf8, #06b6d4); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
  .desc { font-size: 28px; color: rgba(255,255,255,0.45); margin-bottom: 40px; line-height: 1.5; }
  .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; }
  .card-title { font-size: 23px; font-weight: 700; color: #38bdf8; margin-bottom: 14px; letter-spacing: 1px; }
  .card-body { font-size: 25px; color: rgba(255,255,255,0.75); line-height: 1.7; }
  .card-body strong { color: white; }
  .hl { display: inline; padding: 2px 10px; border-radius: 6px; background: rgba(56,189,248,0.12); color: #38bdf8; font-family: 'SF Mono', monospace; font-size: 22px; }
  .flow-diagram { display: flex; flex-direction: column; gap: 14px; margin: 16px 0; }
  .flow-line { display: flex; align-items: center; gap: 14px; }
  .flow-box { padding: 14px 22px; border-radius: 14px; font-size: 22px; font-weight: 700; background: rgba(56,189,248,0.08); border: 1px solid rgba(56,189,248,0.2); color: #7dd3fc; white-space: nowrap; }
  .flow-box.active { background: rgba(56,189,248,0.15); border-color: rgba(56,189,248,0.5); color: #38bdf8; }
  .flow-desc { font-size: 22px; color: rgba(255,255,255,0.45); }
  .flow-connector { width: 2px; height: 16px; background: rgba(56,189,248,0.2); margin-left: 40px; }
  .two-path { display: flex; gap: 18px; margin-top: 14px; }
  .path-box { flex: 1; padding: 20px 24px; border-radius: 14px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); }
  .path-label { font-size: 21px; font-weight: 700; margin-bottom: 10px; }
  .path-desc { font-size: 22px; color: rgba(255,255,255,0.5); line-height: 1.6; }
  .footer-note { position: absolute; bottom: 50px; left: 65px; right: 65px; font-size: 20px; color: rgba(255,255,255,0.2); text-align: center; }
</style>
</head>
<body>
  <div class="bg-grid"></div><div class="glow"></div><div class="glow2"></div>
  <div class="content">
    <div class="page-num">03 / 07</div>
    <div class="badge">INTERNAL ONLY · feature('ULTRAPLAN')</div>
    <div class="title">ULTRAPLAN</div>
    <div class="title" style="margin-bottom:0"><span class="accent">30 分钟云端规划</span></div>
    <div class="desc">把复杂探索扔给远程 Opus 4.6，本地终端不阻塞</div>
    <div class="card">
      <div class="card-title">WORKFLOW</div>
      <div class="flow-diagram">
        <div class="flow-line"><div class="flow-box active">本地 CLI</div><div class="flow-desc">发送任务 + 上下文到 CCR（Claude Code Remote）</div></div>
        <div class="flow-connector"></div>
        <div class="flow-line"><div class="flow-box">远程 Opus 4.6</div><div class="flow-desc">独立探索、研究、生成方案</div></div>
        <div class="flow-connector"></div>
        <div class="flow-line"><div class="flow-box">每 3s 轮询</div><div class="flow-desc">最长 <strong style="color:white">30 分钟</strong>，5次 5xx 容错</div></div>
        <div class="flow-connector"></div>
        <div class="flow-line"><div class="flow-box active">浏览器审批</div><div class="flow-desc">用户在 claude.ai 查看/编辑/拒绝/批准</div></div>
      </div>
    </div>
    <div class="card">
      <div class="card-title">TWO EXECUTION PATHS</div>
      <div class="two-path">
        <div class="path-box"><div class="path-label" style="color:#38bdf8">Remote</div><div class="path-desc">批准后在云端继续执行<br>结果通过 PR 落地</div></div>
        <div class="path-box"><div class="path-label" style="color:#34d399">Teleport</div><div class="path-desc">"传送"回本地终端执行<br>暗号：<span class="hl" style="font-size:18px">__ULTRAPLAN_TELEPORT_LOCAL__</span></div></div>
      </div>
    </div>
    <div class="card">
      <div class="card-title">TRIGGER</div>
      <div class="card-body"><span class="hl">/ultraplan &lt;prompt&gt;</span> 或在消息中输入 "ultraplan"<br><span style="font-size:22px;color:rgba(255,255,255,0.4)">自动跳过引号、路径、标识符中的匹配</span></div>
    </div>
  </div>
  <div class="footer-note">source: restored-src/src/commands/ultraplan.tsx · src/utils/ultraplan/</div>
</body>
</html>