huashu-design/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;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>