199 lines
9.3 KiB
XML
199 lines
9.3 KiB
XML
<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&family=Noto+Serif+SC:wght@700;900&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 & 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>
|