From 01cd74201f80fe258ab1200d45355c8a06156a7c Mon Sep 17 00:00:00 2001
From: alchain <alchaincyf@gmail.com>
Date: Tue, 21 Apr 2026 14:02:27 +0800
Subject: [PATCH] add: hero banner

Banner crafted with huashu-design skill.
https://github.com/alchaincyf/huashu-design

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 assets/banner.svg | 198 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 198 insertions(+)
 create mode 100644 assets/banner.svg

diff --git a/assets/banner.svg b/assets/banner.svg
new file mode 100644
index 0000000..65f68de
--- /dev/null
+++ b/assets/banner.svg
@@ -0,0 +1,198 @@
+<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;family=Noto+Serif+SC:wght@700;900&amp;display=swap');
+    </style>
+
+    <!-- Warm accent gradients for mini mockup highlights -->
+    <linearGradient id="hdBarGrad" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#D4532B"/>
+      <stop offset="100%" stop-color="#A83518"/>
+    </linearGradient>
+    <linearGradient id="hdBarGradSoft" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#8B5E3C"/>
+      <stop offset="100%" stop-color="#6E4A2E"/>
+    </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 horizontal rule -->
+  <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"/>
+
+  <!-- Thin divider between text and viz -->
+  <rect x="860" y="80" width="1" height="240" fill="#FFFFFF" opacity="0.08"/>
+
+  <!-- ============================================================ -->
+  <!-- LEFT: TEXT BLOCK                                             -->
+  <!-- ============================================================ -->
+
+  <!-- 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"
+  >CLAUDE CODE SKILL · DESIGN</text>
+
+  <!-- MAIN TITLE -->
+  <text
+    x="80"
+    y="178"
+    font-family="'Inter', system-ui, -apple-system, sans-serif"
+    font-size="88"
+    font-weight="900"
+    fill="#FFFFFF"
+    letter-spacing="-3"
+  >Huashu Design</text>
+
+  <!-- Chinese subtitle -->
+  <text
+    x="80"
+    y="222"
+    font-family="'Noto Serif SC', 'Source Han Serif', 'Inter', serif"
+    font-size="22"
+    font-weight="700"
+    fill="#EEEEEE"
+    letter-spacing="1"
+  >用 HTML 做设计的 skill</text>
+
+  <!-- Tagline -->
+  <text
+    x="80"
+    y="284"
+    font-family="'Inter', system-ui, -apple-system, sans-serif"
+    font-size="15"
+    font-weight="500"
+    fill="#BBBBBB"
+    letter-spacing="0.5"
+  >高保真原型</text>
+  <text x="176" y="284" font-family="'Inter', sans-serif" font-size="15" font-weight="700" fill="#D4532B">·</text>
+  <text x="188" y="284" font-family="'Inter', sans-serif" font-size="15" font-weight="500" fill="#BBBBBB" letter-spacing="0.5">幻灯片</text>
+  <text x="260" y="284" font-family="'Inter', sans-serif" font-size="15" font-weight="700" fill="#D4532B">·</text>
+  <text x="272" y="284" font-family="'Inter', sans-serif" font-size="15" font-weight="500" fill="#BBBBBB" letter-spacing="0.5">动画</text>
+  <text x="320" y="284" font-family="'Inter', sans-serif" font-size="15" font-weight="700" fill="#D4532B">·</text>
+  <text x="332" y="284" font-family="'Inter', sans-serif" font-size="15" font-weight="500" fill="#BBBBBB" letter-spacing="0.5">信息图</text>
+  <text x="404" y="284" font-family="'Inter', sans-serif" font-size="15" font-weight="700" fill="#D4532B">·</text>
+  <text x="416" y="284" font-family="'Inter', sans-serif" font-size="15" font-weight="500" fill="#BBBBBB" letter-spacing="0.5">App 原型</text>
+
+  <!-- Second tagline row -->
+  <text
+    x="80"
+    y="312"
+    font-family="'Inter', system-ui, -apple-system, sans-serif"
+    font-size="14"
+    font-weight="400"
+    fill="#888888"
+    letter-spacing="0.3"
+  >20 种设计哲学  ·  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"
+  >for Claude Code &amp; Agent-agnostic</text>
+
+  <!-- ============================================================ -->
+  <!-- RIGHT: MINI MOCKUP GRID (2×2)                                -->
+  <!-- Each mock represents one output form of huashu-design        -->
+  <!-- Viewport right area: x 880-1160, y 90-330                    -->
+  <!-- 2×2 grid, tile ≈ 128×104, gap 16                             -->
+  <!-- ============================================================ -->
+
+  <!-- Section label -->
+  <text x="890" y="108" font-family="'Inter', sans-serif" font-size="10" font-weight="700" letter-spacing="2" fill="#D4532B" opacity="0.9">OUTPUT SURFACES</text>
+
+  <!-- Grid coordinates:
+       Col1 x=890 (width 128)   Col2 x=1034 (width 128)
+       Row1 y=122 (height 100)  Row2 y=238 (height 100) -->
+
+  <!-- ============ TILE 1 · SLIDES (top-left) ============ -->
+  <rect x="890" y="122" width="128" height="100" rx="2" fill="#1A1A1A" stroke="#333333" stroke-width="1"/>
+  <!-- slide stack visual: 3 stacked rectangles offset to imply deck -->
+  <rect x="902" y="138" width="88" height="56" fill="#2A2A2A" stroke="#3A3A3A" stroke-width="0.5"/>
+  <rect x="906" y="142" width="88" height="56" fill="#353535"/>
+  <rect x="910" y="146" width="88" height="56" fill="#E8E2D4"/>
+  <!-- slide headline stripes -->
+  <rect x="916" y="152" width="48" height="3" fill="#111111"/>
+  <rect x="916" y="160" width="72" height="1.5" fill="#666666"/>
+  <rect x="916" y="166" width="60" height="1.5" fill="#666666"/>
+  <rect x="916" y="176" width="32" height="14" fill="#D4532B"/>
+  <!-- tile label -->
+  <text x="902" y="216" font-family="'Inter', sans-serif" font-size="9" font-weight="500" letter-spacing="2" fill="#777777">SLIDES</text>
+
+  <!-- ============ TILE 2 · PROTOTYPE iPhone (top-right) ============ -->
+  <rect x="1034" y="122" width="128" height="100" rx="2" fill="#1A1A1A" stroke="#333333" stroke-width="1"/>
+  <!-- iPhone outline inside tile -->
+  <rect x="1080" y="130" width="36" height="76" rx="6" fill="#0A0A0A" stroke="#444444" stroke-width="1"/>
+  <!-- Dynamic island -->
+  <rect x="1092" y="134" width="12" height="3" rx="1.5" fill="#000000"/>
+  <!-- Screen content area -->
+  <rect x="1083" y="140" width="30" height="58" fill="#EEEAE0"/>
+  <!-- Tiny app UI elements -->
+  <rect x="1086" y="144" width="24" height="4" fill="#111111"/>
+  <rect x="1086" y="152" width="16" height="1.5" fill="#888888"/>
+  <rect x="1086" y="157" width="20" height="1.5" fill="#888888"/>
+  <rect x="1086" y="164" width="24" height="12" fill="#D4532B"/>
+  <rect x="1086" y="180" width="11" height="14" fill="#D1CAB8"/>
+  <rect x="1099" y="180" width="11" height="14" fill="#D1CAB8"/>
+  <!-- Home indicator -->
+  <rect x="1092" y="201" width="12" height="1" rx="0.5" fill="#444444"/>
+  <!-- tile label -->
+  <text x="1046" y="216" font-family="'Inter', sans-serif" font-size="9" font-weight="500" letter-spacing="2" fill="#777777">PROTOTYPE</text>
+
+  <!-- ============ TILE 3 · ANIMATION storyboard (bottom-left) ============ -->
+  <rect x="890" y="238" width="128" height="100" rx="2" fill="#1A1A1A" stroke="#333333" stroke-width="1"/>
+  <!-- 3 storyboard frames in a row -->
+  <rect x="898" y="252" width="34" height="44" fill="#252525" stroke="#3A3A3A" stroke-width="0.5"/>
+  <rect x="939" y="252" width="34" height="44" fill="#2E2E2E" stroke="#3A3A3A" stroke-width="0.5"/>
+  <rect x="980" y="252" width="34" height="44" fill="#353535" stroke="#3A3A3A" stroke-width="0.5"/>
+  <!-- motion dots -->
+  <circle cx="910" cy="274" r="6" fill="#666666"/>
+  <circle cx="956" cy="274" r="6" fill="#9C6A46"/>
+  <circle cx="997" cy="274" r="6" fill="#D4532B"/>
+  <!-- motion arc dashes -->
+  <path d="M 910 274 Q 933 258 956 274" stroke="#D4532B" stroke-width="0.8" fill="none" stroke-dasharray="2 2" opacity="0.6"/>
+  <path d="M 956 274 Q 977 258 997 274" stroke="#D4532B" stroke-width="0.8" fill="none" stroke-dasharray="2 2" opacity="0.6"/>
+  <!-- timeline ruler -->
+  <rect x="898" y="306" width="116" height="1" fill="#555555"/>
+  <rect x="898" y="306" width="2" height="4" fill="#D4532B"/>
+  <rect x="938" y="306" width="2" height="4" fill="#555555"/>
+  <rect x="978" y="306" width="2" height="4" fill="#555555"/>
+  <rect x="1012" y="306" width="2" height="4" fill="#555555"/>
+  <!-- tile label -->
+  <text x="902" y="332" font-family="'Inter', sans-serif" font-size="9" font-weight="500" letter-spacing="2" fill="#777777">ANIMATION</text>
+
+  <!-- ============ TILE 4 · INFOGRAPHIC bars (bottom-right) ============ -->
+  <rect x="1034" y="238" width="128" height="100" rx="2" fill="#1A1A1A" stroke="#333333" stroke-width="1"/>
+  <!-- bars chart -->
+  <rect x="1046" y="290" width="12" height="20" fill="url(#hdBarGradSoft)"/>
+  <rect x="1062" y="278" width="12" height="32" fill="url(#hdBarGradSoft)"/>
+  <rect x="1078" y="270" width="12" height="40" fill="url(#hdBarGradSoft)"/>
+  <rect x="1094" y="262" width="12" height="48" fill="url(#hdBarGrad)"/>
+  <rect x="1110" y="254" width="12" height="56" fill="url(#hdBarGrad)"/>
+  <rect x="1126" y="248" width="12" height="62" fill="url(#hdBarGrad)"/>
+  <!-- baseline -->
+  <rect x="1044" y="310" width="104" height="1" fill="#555555"/>
+  <!-- headline at top of tile -->
+  <rect x="1046" y="252" width="50" height="3" fill="#FFFFFF" opacity="0.85"/>
+  <rect x="1046" y="260" width="34" height="1.5" fill="#666666"/>
+  <!-- tile label -->
+  <text x="1046" y="332" font-family="'Inter', sans-serif" font-size="9" font-weight="500" letter-spacing="2" fill="#777777">INFOGRAPHIC</text>
+
+</svg>