1
0
Эх сурвалжийг харах

refactor: expand banner with full info hierarchy

Match sibling banners (nuwa-skill / huashu-design) with English caption,
subtitle, tagline, data line, and pipeline label. Banner crafted with
huashu-design skill.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
alchain 2 сар өмнө
parent
commit
2056abfccd
1 өөрчлөгдсөн 34 нэмэгдсэн , 130 устгасан
  1. 34 130
      assets/banner.svg

+ 34 - 130
assets/banner.svg

@@ -1,9 +1,8 @@
 <svg width="1200" height="400" viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg">
 <svg width="1200" height="400" viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg">
   <defs>
   <defs>
     <style>
     <style>
-      @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&amp;display=swap');
+      @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&amp;display=swap');
     </style>
     </style>
-    <!-- Gradient for ratchet blocks -->
     <linearGradient id="blockGrad1" x1="0" y1="0" x2="0" y2="1">
     <linearGradient id="blockGrad1" x1="0" y1="0" x2="0" y2="1">
       <stop offset="0%" stop-color="#444444"/>
       <stop offset="0%" stop-color="#444444"/>
       <stop offset="100%" stop-color="#333333"/>
       <stop offset="100%" stop-color="#333333"/>
@@ -32,159 +31,64 @@
   <!-- Left accent line (Pentagram-style editorial vertical rule) -->
   <!-- Left accent line (Pentagram-style editorial vertical rule) -->
   <rect x="60" y="48" width="3" height="304" fill="#D4532B"/>
   <rect x="60" y="48" width="3" height="304" fill="#D4532B"/>
 
 
-  <!-- Top horizontal rule -->
+  <!-- Top / bottom horizontal rules -->
   <rect x="60" y="48" width="760" height="2" fill="#FFFFFF" opacity="0.15"/>
   <rect x="60" y="48" width="760" height="2" fill="#FFFFFF" opacity="0.15"/>
-
-  <!-- Bottom horizontal rule -->
   <rect x="60" y="350" width="760" height="1" fill="#FFFFFF" opacity="0.15"/>
   <rect x="60" y="350" width="760" height="1" fill="#FFFFFF" opacity="0.15"/>
 
 
-  <!-- CATEGORY LABEL -->
-  <text
-    x="80"
-    y="88"
-    font-family="'Inter', system-ui, -apple-system, sans-serif"
-    font-size="11"
-    font-weight="700"
-    letter-spacing="3"
-    fill="#D4532B"
-    text-transform="uppercase"
-  >CLAUDE CODE SKILL SYSTEM</text>
-
-  <!-- MAIN TITLE — two lines for visual weight -->
-  <text
-    x="80"
-    y="178"
-    font-family="'Inter', system-ui, -apple-system, sans-serif"
-    font-size="82"
-    font-weight="900"
-    fill="#FFFFFF"
-    letter-spacing="-2"
-  >达尔文.skill</text>
-
-  <!-- Subtitle pipeline -->
-  <text
-    x="80"
-    y="312"
-    font-family="'Inter', system-ui, -apple-system, sans-serif"
-    font-size="16"
-    font-weight="400"
-    fill="#CCCCCC"
-    letter-spacing="0.5"
-  >评估</text>
-
-  <text
-    x="128"
-    y="312"
-    font-family="'Inter', system-ui, -apple-system, sans-serif"
-    font-size="16"
-    font-weight="700"
-    fill="#D4532B"
-  >→</text>
-
-  <text
-    x="152"
-    y="312"
-    font-family="'Inter', system-ui, -apple-system, sans-serif"
-    font-size="16"
-    font-weight="400"
-    fill="#CCCCCC"
-    letter-spacing="0.5"
-  >改进</text>
-
-  <text
-    x="200"
-    y="312"
-    font-family="'Inter', system-ui, -apple-system, sans-serif"
-    font-size="16"
-    font-weight="700"
-    fill="#D4532B"
-  >→</text>
-
-  <text
-    x="224"
-    y="312"
-    font-family="'Inter', system-ui, -apple-system, sans-serif"
-    font-size="16"
-    font-weight="400"
-    fill="#CCCCCC"
-    letter-spacing="0.5"
-  >实测验证</text>
-
-  <text
-    x="320"
-    y="312"
-    font-family="'Inter', system-ui, -apple-system, sans-serif"
-    font-size="16"
-    font-weight="700"
-    fill="#D4532B"
-  >→</text>
-
-  <text
-    x="344"
-    y="312"
-    font-family="'Inter', system-ui, -apple-system, sans-serif"
-    font-size="16"
-    font-weight="400"
-    fill="#CCCCCC"
-    letter-spacing="0.5"
-  >保留或回滚</text>
-
-  <!-- Footer credit -->
-  <text
-    x="80"
-    y="370"
-    font-family="'Inter', system-ui, -apple-system, sans-serif"
-    font-size="12"
-    font-weight="400"
-    fill="#666666"
-    letter-spacing="0.3"
-  >Inspired by Karpathy's autoresearch</text>
+  <!-- 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">8-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">1,430</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 visualization                           -->
-  <!-- 5 bars of increasing height + score labels, anchored right  -->
+  <!-- RIGHT SIDE: Ratchet score visualization                     -->
   <!-- ============================================================ -->
   <!-- ============================================================ -->
 
 
-  <!-- Thin divider between text and viz -->
-  <rect x="860" y="80" width="1" height="240" fill="#FFFFFF" opacity="0.08"/>
+  <!-- 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>
 
 
-  <!-- Bar 1 — smallest, dark gray (score ~40) -->
+  <!-- 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)"/>
   <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>
   <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>
 
 
-  <!-- Bar 2 — medium-small, mid gray (score ~55) -->
   <rect x="944" y="252" width="36" height="68" rx="3" fill="url(#blockGrad2)"/>
   <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>
   <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>
 
 
-  <!-- Bar 3 — medium, warm brown (score ~68) -->
   <rect x="998" y="220" width="36" height="100" rx="3" fill="url(#blockGrad3)"/>
   <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>
   <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>
 
 
-  <!-- Bar 4 — tall, warm orange-red (score ~80) -->
   <rect x="1052" y="188" width="36" height="132" rx="3" fill="url(#blockGrad4)"/>
   <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>
   <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>
 
 
-  <!-- Bar 5 — tallest, brand orange (score ~92) -->
   <rect x="1106" y="152" width="36" height="168" rx="3" fill="url(#blockGrad5)"/>
   <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>
   <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 -->
   <!-- Baseline for bars -->
   <rect x="880" y="320" width="276" height="1" fill="#FFFFFF" opacity="0.12"/>
   <rect x="880" y="320" width="276" height="1" fill="#FFFFFF" opacity="0.12"/>
 
 
-  <!-- Label below bars -->
-  <text x="1018" y="344" font-family="'Inter', system-ui, sans-serif" font-size="11" font-weight="600" fill="#555555" text-anchor="middle" letter-spacing="2">SCORE PROGRESSION</text>
-
-  <!-- Upward trend arrow on top-right -->
-  <polyline
-    points="890,268 944,242 998,210 1052,178 1124,142"
-    fill="none"
-    stroke="#D4532B"
-    stroke-width="1.5"
-    stroke-dasharray="4 3"
-    opacity="0.5"
-  />
-
-  <!-- Ratchet label top -->
-  <text x="890" y="124" font-family="'Inter', system-ui, sans-serif" font-size="10" font-weight="700" letter-spacing="2" fill="#D4532B" opacity="0.8">AUTO-OPTIMIZE</text>
+  <!-- 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>
 </svg>