wizz-method 2.0.0 → 2.1.0

package/src/skills-lib/wizz-huashu-design/assets/showcases/cover/cover-pentagram.html

@@ -1,229 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=1200">
-<title>Agent Parallel — Pentagram Style Cover</title>
-<style>
-  * { margin: 0; padding: 0; box-sizing: border-box; }
-  body {
-    width: 1200px;
-    height: 510px;
-    overflow: hidden;
-    margin: 0;
-    background: #FFFFFF;
-    font-family: 'Helvetica Neue', 'Arial', sans-serif;
-    position: relative;
-  }
-
-  /* Grid rules — Swiss grid visible structure */
-  .rule-h {
-    position: absolute;
-    left: 64px;
-    right: 64px;
-    height: 1px;
-    background: #000;
-    opacity: 0.06;
-  }
-
-  .rule-v {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    width: 1px;
-    background: #000;
-    opacity: 0.04;
-  }
-
-  /* Giant typographic element — the "8" bleeds off right edge */
-  .type-anchor {
-    position: absolute;
-    right: -60px;
-    top: 50%;
-    transform: translateY(-50%);
-    font-family: 'Helvetica Neue', Arial, sans-serif;
-    font-weight: 900;
-    font-size: 640px;
-    line-height: 0.82;
-    color: #000;
-    opacity: 0.07;
-    z-index: 0;
-    user-select: none;
-  }
-
-  /* Red geometric dot grid — 8 dots representing 8 agents */
-  .dot-grid {
-    position: absolute;
-    right: 340px;
-    top: 50%;
-    transform: translateY(-50%);
-    display: grid;
-    grid-template-columns: repeat(4, 24px);
-    grid-template-rows: repeat(2, 24px);
-    gap: 16px;
-    z-index: 1;
-  }
-
-  .dot {
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    background: #000;
-    opacity: 0.12;
-    align-self: center;
-    justify-self: center;
-  }
-
-  .dot.active {
-    background: #E63946;
-    opacity: 0.8;
-    width: 10px;
-    height: 10px;
-  }
-
-  /* Primary content zone — left-aligned on Swiss grid */
-  .content {
-    position: absolute;
-    left: 64px;
-    top: 56px;
-    z-index: 2;
-  }
-
-  .label {
-    font-family: 'Helvetica Neue', Arial, sans-serif;
-    font-size: 11px;
-    font-weight: 700;
-    letter-spacing: 4px;
-    text-transform: uppercase;
-    color: #E63946;
-    margin-bottom: 16px;
-  }
-
-  .title {
-    font-family: 'Helvetica Neue', Arial, sans-serif;
-    font-weight: 900;
-    font-size: 120px;
-    line-height: 0.9;
-    color: #000;
-    letter-spacing: -5px;
-  }
-
-  .title .accent {
-    color: #E63946;
-  }
-
-  /* Bottom information bar */
-  .bottom-bar {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: 48px;
-    background: #000;
-    z-index: 2;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 64px;
-  }
-
-  .bottom-left {
-    display: flex;
-    align-items: center;
-    gap: 24px;
-  }
-
-  .bottom-stat {
-    font-family: 'Helvetica Neue', Arial, sans-serif;
-    font-size: 11px;
-    font-weight: 700;
-    letter-spacing: 2px;
-    text-transform: uppercase;
-    color: #fff;
-    opacity: 0.6;
-  }
-
-  .bottom-stat strong {
-    color: #E63946;
-    opacity: 1;
-    font-size: 16px;
-    margin-right: 6px;
-  }
-
-  .bottom-right {
-    font-family: 'Helvetica Neue', Arial, sans-serif;
-    font-size: 10px;
-    font-weight: 700;
-    letter-spacing: 3px;
-    text-transform: uppercase;
-    color: #fff;
-    opacity: 0.4;
-  }
-
-  /* Subtitle */
-  .subtitle {
-    font-family: 'Helvetica Neue', Arial, sans-serif;
-    font-size: 14px;
-    font-weight: 500;
-    color: #999;
-    letter-spacing: 0.5px;
-    margin-top: 20px;
-  }
-
-  /* Horizontal red rule through center */
-  .center-rule {
-    position: absolute;
-    left: 64px;
-    width: 240px;
-    height: 3px;
-    background: #E63946;
-    top: 306px;
-    z-index: 2;
-  }
-</style>
-</head>
-<body>
-
-  <!-- Grid structure -->
-  <div class="rule-h" style="top: 56px;"></div>
-  <div class="rule-v" style="left: 64px;"></div>
-  <div class="rule-v" style="left: 600px;"></div>
-  <div class="rule-v" style="right: 64px;"></div>
-
-  <!-- Typographic anchor — bleeds right -->
-  <div class="type-anchor">8</div>
-
-  <!-- 8-dot grid representing agents -->
-  <div class="dot-grid">
-    <div class="dot active"></div>
-    <div class="dot"></div>
-    <div class="dot active"></div>
-    <div class="dot"></div>
-    <div class="dot"></div>
-    <div class="dot active"></div>
-    <div class="dot"></div>
-    <div class="dot active"></div>
-  </div>
-
-  <!-- Content -->
-  <div class="content">
-    <div class="label">Claude Code Architecture</div>
-    <div class="title">Agent<br><span class="accent">Parallel</span></div>
-    <div class="subtitle">8 autonomous agents running in unified workflow</div>
-  </div>
-
-  <!-- Red horizontal rule -->
-  <div class="center-rule"></div>
-
-  <!-- Black bottom bar with data -->
-  <div class="bottom-bar">
-    <div class="bottom-left">
-      <div class="bottom-stat"><strong>8</strong>Agents</div>
-      <div class="bottom-stat"><strong>3.2x</strong>Faster</div>
-      <div class="bottom-stat"><strong>1</strong>Workflow</div>
-    </div>
-    <div class="bottom-right">Pentagram Design System</div>
-  </div>
-
-</body>
-</html>

package/src/skills-lib/wizz-huashu-design/assets/showcases/cover/cover-takram.html

@@ -1,288 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=1200">
-<title>Claude Code Agent - Takram Style</title>
-<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&family=Noto+Serif+SC:wght@300;400;500;600&display=swap" rel="stylesheet">
-<style>
-  * { margin: 0; padding: 0; box-sizing: border-box; }
-  body {
-    width: 1200px;
-    height: 510px;
-    overflow: hidden;
-    margin: 0;
-    background: #F5F0EB;
-    font-family: 'Inter', sans-serif;
-    position: relative;
-  }
-
-  /* Subtle paper texture overlay */
-  .texture {
-    position: absolute;
-    top: 0; left: 0;
-    width: 1200px;
-    height: 510px;
-    background:
-      radial-gradient(ellipse 500px 400px at 72% 50%, rgba(168, 181, 160, 0.06) 0%, transparent 70%),
-      radial-gradient(ellipse 300px 250px at 15% 40%, rgba(232, 228, 220, 0.2) 0%, transparent 60%);
-    z-index: 0;
-  }
-
-  /* Flow diagram — the art piece */
-  .diagram {
-    position: absolute;
-    top: 0; left: 0;
-    width: 1200px;
-    height: 510px;
-    z-index: 1;
-  }
-
-  /* Left text panel */
-  .text-panel {
-    position: absolute;
-    left: 72px;
-    top: 56px;
-    z-index: 2;
-    max-width: 360px;
-  }
-
-  .text-panel .label {
-    font-family: 'Inter', sans-serif;
-    font-weight: 500;
-    font-size: 9px;
-    letter-spacing: 3px;
-    text-transform: uppercase;
-    color: #6B8F71;
-    margin-bottom: 20px;
-    opacity: 0.8;
-  }
-
-  .text-panel .title-main {
-    font-family: 'Noto Serif SC', serif;
-    font-weight: 500;
-    font-size: 52px;
-    color: #2D3436;
-    line-height: 1.15;
-    letter-spacing: -0.5px;
-    margin-bottom: 4px;
-  }
-
-  .text-panel .title-sub {
-    font-family: 'Noto Serif SC', serif;
-    font-weight: 300;
-    font-size: 20px;
-    color: #6D685F;
-    line-height: 1.4;
-    margin-bottom: 16px;
-  }
-
-  .text-panel .title-en {
-    font-family: 'Inter', sans-serif;
-    font-weight: 300;
-    font-size: 13px;
-    color: #9A958D;
-    letter-spacing: 0.3px;
-    line-height: 1.8;
-  }
-
-  /* Bottom annotation */
-  .annotation {
-    position: absolute;
-    left: 72px;
-    bottom: 40px;
-    z-index: 2;
-  }
-
-  .annotation .note {
-    font-family: 'Inter', sans-serif;
-    font-weight: 400;
-    font-size: 10px;
-    color: #B0AAA0;
-    letter-spacing: 0.3px;
-  }
-
-  .annotation .note-serif {
-    font-family: 'Noto Serif SC', serif;
-    font-weight: 300;
-    font-size: 11px;
-    color: #9A958D;
-    margin-top: 4px;
-  }
-
-  /* Right side number */
-  .spec-number {
-    position: absolute;
-    right: 72px;
-    bottom: 40px;
-    font-family: 'Inter', sans-serif;
-    font-weight: 300;
-    font-size: 10px;
-    color: #B0AAA0;
-    letter-spacing: 1px;
-    z-index: 2;
-  }
-
-  /* Agent node styling */
-  .node-label {
-    font-family: 'Inter', sans-serif;
-    font-size: 9px;
-    font-weight: 400;
-    fill: #8A857D;
-    letter-spacing: 0.5px;
-  }
-
-  .node-label-serif {
-    font-family: 'Noto Serif SC', serif;
-    font-size: 11px;
-    font-weight: 400;
-    fill: #6D685F;
-  }
-
-  .node-index {
-    font-family: 'Inter', sans-serif;
-    font-size: 7px;
-    font-weight: 400;
-    fill: #B0AAA0;
-    letter-spacing: 0.5px;
-  }
-</style>
-</head>
-<body>
-
-  <div class="texture"></div>
-
-  <!-- Text panel -->
-  <div class="text-panel">
-    <div class="label">Speculative Architecture</div>
-    <div class="title-main">协作智能体</div>
-    <div class="title-sub">Parallel Workflow</div>
-    <div class="title-en">
-      Eight agents, each autonomous,<br>
-      converging toward a shared intent.
-    </div>
-  </div>
-
-  <!-- The diagram as art -->
-  <svg class="diagram" viewBox="0 0 1200 510" xmlns="http://www.w3.org/2000/svg">
-
-    <!-- Subtle background grid hints (Takram spec-drawing aesthetic) -->
-    <line x1="440" y1="0" x2="440" y2="510" stroke="#E8E4DC" stroke-width="0.3" opacity="0.4"/>
-    <line x1="760" y1="0" x2="760" y2="510" stroke="#E8E4DC" stroke-width="0.3" opacity="0.3"/>
-
-    <!-- Subtle outer orbital paths — layered ellipses for depth -->
-    <ellipse cx="760" cy="255" rx="260" ry="195" fill="none" stroke="#E0DCD5" stroke-width="0.5" stroke-dasharray="1,8" opacity="0.5"/>
-    <ellipse cx="760" cy="255" rx="180" ry="135" fill="none" stroke="#D8D3CB" stroke-width="0.4" stroke-dasharray="2,6" opacity="0.35"/>
-
-    <!-- Central orchestrator node — refined with layered depth -->
-    <circle cx="760" cy="255" r="48" fill="none" stroke="#6B8F71" stroke-width="0.5" opacity="0.12" stroke-dasharray="2,4"/>
-    <circle cx="760" cy="255" r="36" fill="none" stroke="#6B8F71" stroke-width="0.8" opacity="0.18"/>
-    <circle cx="760" cy="255" r="24" fill="none" stroke="#6B8F71" stroke-width="1.2" opacity="0.3"/>
-    <circle cx="760" cy="255" r="14" fill="rgba(107,143,113,0.05)"/>
-    <circle cx="760" cy="255" r="5.5" fill="#6B8F71" opacity="0.55"/>
-    <circle cx="760" cy="255" r="2" fill="#6B8F71" opacity="0.9"/>
-    <text x="760" y="312" text-anchor="middle" class="node-label-serif">Orchestrator</text>
-    <!-- Subtle cross-hair on center -->
-    <line x1="748" y1="255" x2="730" y2="255" stroke="#6B8F71" stroke-width="0.3" opacity="0.15"/>
-    <line x1="772" y1="255" x2="790" y2="255" stroke="#6B8F71" stroke-width="0.3" opacity="0.15"/>
-    <line x1="760" y1="243" x2="760" y2="225" stroke="#6B8F71" stroke-width="0.3" opacity="0.15"/>
-    <line x1="760" y1="267" x2="760" y2="285" stroke="#6B8F71" stroke-width="0.3" opacity="0.15"/>
-
-    <!-- Agent 1 — top-left (Research) -->
-    <line x1="738" y1="232" x2="598" y2="118" stroke="#C8C2B8" stroke-width="0.7" stroke-dasharray="3,5"/>
-    <rect x="560" y="92" width="76" height="38" rx="14" fill="rgba(245,240,235,0.7)" stroke="#B8B2A8" stroke-width="0.8"/>
-    <circle cx="598" cy="111" r="3.5" fill="#6B8F71" opacity="0.5"/>
-    <text x="598" y="144" text-anchor="middle" class="node-label">Research</text>
-    <text x="560" y="88" class="node-index">01</text>
-
-    <!-- Agent 2 — top (Analysis) -->
-    <line x1="760" y1="217" x2="760" y2="145" stroke="#C8C2B8" stroke-width="0.7" stroke-dasharray="3,5"/>
-    <rect x="722" y="100" width="76" height="38" rx="14" fill="rgba(245,240,235,0.7)" stroke="#B8B2A8" stroke-width="0.8"/>
-    <circle cx="760" cy="119" r="3.5" fill="#6B8F71" opacity="0.5"/>
-    <text x="760" y="152" text-anchor="middle" class="node-label">Analysis</text>
-    <text x="722" y="96" class="node-index">02</text>
-
-    <!-- Agent 3 — top-right (Code) -->
-    <line x1="782" y1="232" x2="918" y2="118" stroke="#C8C2B8" stroke-width="0.7" stroke-dasharray="3,5"/>
-    <rect x="884" y="92" width="76" height="38" rx="14" fill="rgba(245,240,235,0.7)" stroke="#B8B2A8" stroke-width="0.8"/>
-    <circle cx="922" cy="111" r="3.5" fill="#6B8F71" opacity="0.5"/>
-    <text x="922" y="144" text-anchor="middle" class="node-label">Code</text>
-    <text x="884" y="88" class="node-index">03</text>
-
-    <!-- Agent 4 — right (Test) -->
-    <line x1="786" y1="252" x2="940" y2="215" stroke="#C8C2B8" stroke-width="0.7" stroke-dasharray="3,5"/>
-    <rect x="940" y="196" width="76" height="38" rx="14" fill="rgba(245,240,235,0.7)" stroke="#B8B2A8" stroke-width="0.8"/>
-    <circle cx="978" cy="215" r="3.5" fill="#6B8F71" opacity="0.5"/>
-    <text x="978" y="248" text-anchor="middle" class="node-label">Test</text>
-    <text x="940" y="192" class="node-index">04</text>
-
-    <!-- Agent 5 — bottom-right (Review) -->
-    <line x1="782" y1="278" x2="918" y2="385" stroke="#C8C2B8" stroke-width="0.7" stroke-dasharray="3,5"/>
-    <rect x="884" y="368" width="76" height="38" rx="14" fill="rgba(245,240,235,0.7)" stroke="#B8B2A8" stroke-width="0.8"/>
-    <circle cx="922" cy="387" r="3.5" fill="#6B8F71" opacity="0.5"/>
-    <text x="922" y="420" text-anchor="middle" class="node-label">Review</text>
-    <text x="884" y="364" class="node-index">05</text>
-
-    <!-- Agent 6 — bottom (Deploy) -->
-    <line x1="760" y1="293" x2="760" y2="365" stroke="#C8C2B8" stroke-width="0.7" stroke-dasharray="3,5"/>
-    <rect x="722" y="370" width="76" height="38" rx="14" fill="rgba(245,240,235,0.7)" stroke="#B8B2A8" stroke-width="0.8"/>
-    <circle cx="760" cy="389" r="3.5" fill="#6B8F71" opacity="0.5"/>
-    <text x="760" y="422" text-anchor="middle" class="node-label">Deploy</text>
-    <text x="722" y="366" class="node-index">06</text>
-
-    <!-- Agent 7 — bottom-left (Monitor) -->
-    <line x1="738" y1="278" x2="600" y2="375" stroke="#C8C2B8" stroke-width="0.7" stroke-dasharray="3,5"/>
-    <rect x="562" y="358" width="76" height="38" rx="14" fill="rgba(245,240,235,0.7)" stroke="#B8B2A8" stroke-width="0.8"/>
-    <circle cx="600" cy="377" r="3.5" fill="#6B8F71" opacity="0.5"/>
-    <text x="600" y="410" text-anchor="middle" class="node-label">Monitor</text>
-    <text x="562" y="354" class="node-index">07</text>
-
-    <!-- Agent 8 — left (Design) -->
-    <line x1="734" y1="252" x2="578" y2="245" stroke="#C8C2B8" stroke-width="0.7" stroke-dasharray="3,5"/>
-    <rect x="502" y="226" width="76" height="38" rx="14" fill="rgba(245,240,235,0.7)" stroke="#B8B2A8" stroke-width="0.8"/>
-    <circle cx="540" cy="245" r="3.5" fill="#6B8F71" opacity="0.5"/>
-    <text x="540" y="278" text-anchor="middle" class="node-label">Design</text>
-    <text x="502" y="222" class="node-index">08</text>
-
-    <!-- Small annotation marks — Takram spec-drawing details -->
-    <circle cx="490" cy="120" r="1.2" fill="#B0AAA0" opacity="0.35"/>
-    <line x1="492" y1="120" x2="535" y2="120" stroke="#B0AAA0" stroke-width="0.4" opacity="0.25"/>
-
-    <circle cx="1040" cy="390" r="1.2" fill="#B0AAA0" opacity="0.35"/>
-    <line x1="1038" y1="390" x2="995" y2="390" stroke="#B0AAA0" stroke-width="0.4" opacity="0.25"/>
-
-    <!-- Dimension annotation line (top) -->
-    <line x1="540" y1="60" x2="980" y2="60" stroke="#D4CFC6" stroke-width="0.4" opacity="0.3"/>
-    <line x1="540" y1="55" x2="540" y2="65" stroke="#D4CFC6" stroke-width="0.4" opacity="0.3"/>
-    <line x1="980" y1="55" x2="980" y2="65" stroke="#D4CFC6" stroke-width="0.4" opacity="0.3"/>
-    <text x="760" y="54" text-anchor="middle" font-family="Inter" font-size="7" font-weight="300" fill="#C8C2B8" letter-spacing="1.5">AGENT FIELD</text>
-
-    <!-- Right-side vertical annotation -->
-    <line x1="1060" y1="130" x2="1060" y2="380" stroke="#D4CFC6" stroke-width="0.3" opacity="0.25"/>
-    <line x1="1056" y1="130" x2="1064" y2="130" stroke="#D4CFC6" stroke-width="0.3" opacity="0.25"/>
-    <line x1="1056" y1="380" x2="1064" y2="380" stroke="#D4CFC6" stroke-width="0.3" opacity="0.25"/>
-    <text x="1068" y="260" font-family="Inter" font-size="7" font-weight="300" fill="#D4CFC6" letter-spacing="0.5" transform="rotate(90, 1068, 260)">NETWORK DEPTH</text>
-
-    <!-- Subtle data pulse lines emanating from center (organic feel) -->
-    <path d="M 760 217 Q 755 200 758 185" fill="none" stroke="#6B8F71" stroke-width="0.3" opacity="0.12"/>
-    <path d="M 786 248 Q 810 230 835 225" fill="none" stroke="#6B8F71" stroke-width="0.3" opacity="0.12"/>
-    <path d="M 786 262 Q 815 275 840 290" fill="none" stroke="#6B8F71" stroke-width="0.3" opacity="0.12"/>
-
-    <!-- Top-right spec box -->
-    <rect x="1040" y="48" width="104" height="56" rx="3" fill="rgba(245,240,235,0.5)" stroke="#E0DCD5" stroke-width="0.6"/>
-    <text x="1052" y="66" font-family="Inter" font-size="8" font-weight="500" fill="#B0AAA0" letter-spacing="1.5">AGENTS</text>
-    <text x="1052" y="92" font-family="Inter" font-size="28" font-weight="300" fill="#6B8F71">8</text>
-    <text x="1082" y="92" font-family="Inter" font-size="9" font-weight="300" fill="#B0AAA0"> parallel</text>
-  </svg>
-
-  <!-- Bottom annotation -->
-  <div class="annotation">
-    <div class="note">Fig. 01 — Parallel Agent Architecture</div>
-    <div class="note-serif">Claude Code 协作编排模型</div>
-  </div>
-
-  <!-- Spec number -->
-  <div class="spec-number">v1.0 / 2026</div>
-
-</body>
-</html>