darwin-skill/assets/banner.svg

<svg width="1200" height="400" viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <style>
      @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&amp;display=swap');
    </style>
    <linearGradient id="blockGrad1" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#444444"/>
      <stop offset="100%" stop-color="#333333"/>
    </linearGradient>
    <linearGradient id="blockGrad2" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#666666"/>
      <stop offset="100%" stop-color="#555555"/>
    </linearGradient>
    <linearGradient id="blockGrad3" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#8B5E3C"/>
      <stop offset="100%" stop-color="#7A4F30"/>
    </linearGradient>
    <linearGradient id="blockGrad4" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#C04020"/>
      <stop offset="100%" stop-color="#A83518"/>
    </linearGradient>
    <linearGradient id="blockGrad5" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#D4532B"/>
      <stop offset="100%" stop-color="#BF4422"/>
    </linearGradient>
  </defs>

  <!-- Background -->
  <rect width="1200" height="400" fill="#111111"/>

  <!-- Left accent line (Pentagram-style editorial vertical rule) -->
  <rect x="60" y="48" width="3" height="304" fill="#D4532B"/>

  <!-- Top / bottom horizontal rules -->
  <rect x="60" y="48" width="760" height="2" fill="#FFFFFF" opacity="0.15"/>
  <rect x="60" y="350" width="760" height="1" fill="#FFFFFF" opacity="0.15"/>

  <!-- CATEGORY -->
  <text x="80" y="88" font-family="'Inter', system-ui, sans-serif" font-size="11" font-weight="700" letter-spacing="3" fill="#D4532B">CLAUDE CODE SKILL · AUTO-OPTIMIZER</text>

  <!-- MAIN TITLE -->
  <text x="80" y="178" font-family="'Inter', system-ui, sans-serif" font-size="88" font-weight="900" fill="#FFFFFF" letter-spacing="-2">达尔文.skill</text>

  <!-- English caption under title -->
  <text x="80" y="212" font-family="'Inter', system-ui, sans-serif" font-size="14" font-weight="500" letter-spacing="4" fill="#888888">DARWIN · SKILL</text>

  <!-- Chinese subtitle -->
  <text x="80" y="258" font-family="'Inter', system-ui, sans-serif" font-size="24" font-weight="700" fill="#FFFFFF">让 skill 自主进化</text>

  <!-- Tagline -->
  <text x="80" y="288" font-family="'Inter', system-ui, sans-serif" font-size="15" font-weight="400" fill="#AAAAAA">像训练模型一样优化你的 Agent Skill</text>

  <!-- Data line -->
  <text x="80" y="322" font-family="'Inter', system-ui, sans-serif" font-size="14" font-weight="700" fill="#D4532B">9-dim<tspan font-weight="400" fill="#AAAAAA"> evaluation  ·  </tspan><tspan font-weight="700" fill="#D4532B">ratchet mechanism</tspan><tspan font-weight="400" fill="#AAAAAA">  ·  </tspan><tspan font-weight="700" fill="#D4532B">2,864</tspan><tspan font-weight="400" fill="#AAAAAA"> stars  ·  MIT open source</tspan></text>

  <!-- Footer -->
  <text x="80" y="370" font-family="'Inter', system-ui, sans-serif" font-size="12" font-weight="400" fill="#666666" letter-spacing="0.3">Inspired by Karpathy's autoresearch  ·  A ratchet that only turns forward</text>

  <!-- ============================================================ -->
  <!-- RIGHT SIDE: Ratchet score visualization                     -->
  <!-- ============================================================ -->

  <!-- Section label top -->
  <text x="890" y="104" font-family="'Inter', system-ui, sans-serif" font-size="11" font-weight="700" letter-spacing="3" fill="#D4532B">SCORE PROGRESSION</text>

  <!-- Thin divider -->
  <rect x="860" y="124" width="1" height="200" fill="#FFFFFF" opacity="0.08"/>

  <!-- Bars -->
  <rect x="890" y="278" width="36" height="42" rx="3" fill="url(#blockGrad1)"/>
  <text x="908" y="274" font-family="'Inter', system-ui, sans-serif" font-size="10" font-weight="600" fill="#555555" text-anchor="middle">40</text>

  <rect x="944" y="252" width="36" height="68" rx="3" fill="url(#blockGrad2)"/>
  <text x="962" y="248" font-family="'Inter', system-ui, sans-serif" font-size="10" font-weight="600" fill="#777777" text-anchor="middle">55</text>

  <rect x="998" y="220" width="36" height="100" rx="3" fill="url(#blockGrad3)"/>
  <text x="1016" y="216" font-family="'Inter', system-ui, sans-serif" font-size="10" font-weight="600" fill="#8B5E3C" text-anchor="middle">68</text>

  <rect x="1052" y="188" width="36" height="132" rx="3" fill="url(#blockGrad4)"/>
  <text x="1070" y="184" font-family="'Inter', system-ui, sans-serif" font-size="10" font-weight="600" fill="#C04020" text-anchor="middle">80</text>

  <rect x="1106" y="152" width="36" height="168" rx="3" fill="url(#blockGrad5)"/>
  <text x="1124" y="148" font-family="'Inter', system-ui, sans-serif" font-size="12" font-weight="700" fill="#D4532B" text-anchor="middle">92</text>

  <!-- Baseline for bars -->
  <rect x="880" y="320" width="276" height="1" fill="#FFFFFF" opacity="0.12"/>

  <!-- Trend arrow dashed -->
  <polyline points="908,268 962,242 1016,210 1070,178 1124,142" fill="none" stroke="#D4532B" stroke-width="1.5" stroke-dasharray="4 3" opacity="0.5"/>

  <!-- Pipeline label below bars -->
  <text x="1018" y="344" font-family="'Inter', system-ui, sans-serif" font-size="10" font-weight="600" fill="#888888" text-anchor="middle" letter-spacing="1.5">评估 → 改进 → 实测 → 保留/回滚</text>

</svg>