wizz-method 1.0.2 → 1.1.0

package/src/skills-lib/huashu-design/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>

package/src/skills-lib/huashu-design/assets/browser_window.jsx

@@ -0,0 +1,166 @@
+/**
+ * BrowserWindow — 浏览器窗口边框（Chrome风格）
+ *
+ * 含：traffic lights + tab bar + URL bar
+ *
+ * 用法：
+ *   <BrowserWindow url="https://example.com" title="Example">
+ *     <YourWebPage />
+ *   </BrowserWindow>
+ */
+
+const browserWindowStyles = {
+  window: {
+    display: 'inline-block',
+    background: '#fff',
+    borderRadius: 10,
+    overflow: 'hidden',
+    boxShadow: '0 30px 80px rgba(0,0,0,0.25), 0 0 0 0.5px rgba(0,0,0,0.15)',
+  },
+  chrome: {
+    background: '#dee1e6',
+    paddingTop: 10,
+    paddingLeft: 10,
+    paddingRight: 10,
+    userSelect: 'none',
+  },
+  tabRow: {
+    display: 'flex',
+    alignItems: 'flex-end',
+    gap: 6,
+    position: 'relative',
+  },
+  trafficLights: {
+    display: 'flex',
+    gap: 8,
+    alignItems: 'center',
+    paddingBottom: 10,
+    marginRight: 8,
+  },
+  light: {
+    width: 12,
+    height: 12,
+    borderRadius: '50%',
+    border: '0.5px solid rgba(0,0,0,0.15)',
+  },
+  close: { background: '#ff5f57' },
+  minimize: { background: '#febc2e' },
+  maximize: { background: '#28c840' },
+  tab: {
+    background: '#fff',
+    padding: '8px 30px 8px 14px',
+    borderTopLeftRadius: 10,
+    borderTopRightRadius: 10,
+    fontSize: 12,
+    color: '#222',
+    fontFamily: '-apple-system, sans-serif',
+    maxWidth: 220,
+    display: 'flex',
+    alignItems: 'center',
+    gap: 8,
+    position: 'relative',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+  },
+  favicon: {
+    width: 14,
+    height: 14,
+    borderRadius: 2,
+    background: '#999',
+    flexShrink: 0,
+  },
+  navBar: {
+    background: '#fff',
+    padding: '8px 14px',
+    display: 'flex',
+    alignItems: 'center',
+    gap: 10,
+    borderBottom: '1px solid #e5e7eb',
+  },
+  navButtons: {
+    display: 'flex',
+    gap: 4,
+    color: '#5f6368',
+    fontSize: 16,
+  },
+  navButton: {
+    width: 28,
+    height: 28,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: '50%',
+    cursor: 'pointer',
+  },
+  urlBar: {
+    flex: 1,
+    background: '#f1f3f4',
+    borderRadius: 999,
+    padding: '7px 14px',
+    fontSize: 13,
+    color: '#333',
+    display: 'flex',
+    alignItems: 'center',
+    gap: 8,
+    fontFamily: '-apple-system, sans-serif',
+  },
+  lockIcon: {
+    color: '#5f6368',
+    fontSize: 12,
+  },
+  content: {
+    position: 'relative',
+    overflow: 'auto',
+    background: '#fff',
+  },
+};
+
+function BrowserWindow({
+  title = 'New Tab',
+  url = 'https://example.com',
+  width = 1200,
+  height = 800,
+  showTrafficLights = true,
+  children,
+}) {
+  return (
+    <div style={browserWindowStyles.window}>
+      <div style={browserWindowStyles.chrome}>
+        <div style={browserWindowStyles.tabRow}>
+          {showTrafficLights && (
+            <div style={browserWindowStyles.trafficLights}>
+              <div style={{ ...browserWindowStyles.light, ...browserWindowStyles.close }} />
+              <div style={{ ...browserWindowStyles.light, ...browserWindowStyles.minimize }} />
+              <div style={{ ...browserWindowStyles.light, ...browserWindowStyles.maximize }} />
+            </div>
+          )}
+          <div style={browserWindowStyles.tab}>
+            <div style={browserWindowStyles.favicon} />
+            <span>{title}</span>
+          </div>
+        </div>
+      </div>
+
+      <div style={browserWindowStyles.navBar}>
+        <div style={browserWindowStyles.navButtons}>
+          <div style={browserWindowStyles.navButton}>←</div>
+          <div style={browserWindowStyles.navButton}>→</div>
+          <div style={browserWindowStyles.navButton}>↻</div>
+        </div>
+        <div style={browserWindowStyles.urlBar}>
+          <span style={browserWindowStyles.lockIcon}>🔒</span>
+          <span>{url}</span>
+        </div>
+      </div>
+
+      <div style={{ ...browserWindowStyles.content, width, height }}>
+        {children}
+      </div>
+    </div>
+  );
+}
+
+if (typeof window !== 'undefined') {
+  window.BrowserWindow = BrowserWindow;
+}