npm - wizz-method - Versions diffs - 1.0.3 → 1.2.0 - Mend

wizz-method 1.0.3 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (630) hide show

package/src/skills-lib/huashu-design/assets/showcases/infographic/infographic-takram.html ADDED Viewed

@@ -0,0 +1,670 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=1080">
+<title>AI Memory System Optimization — Takram Style</title>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Noto+Serif+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+<style>
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body {
+    width: 1080px;
+    height: 1920px;
+    overflow: hidden;
+    margin: 0;
+    background: #F5F0EB;
+    font-family: 'Inter', sans-serif;
+    color: #3D3730;
+  }
+  .container {
+    width: 100%;
+    height: 100%;
+    padding: 72px 80px 60px 80px;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+  }
+  /* Background texture */
+  .bg-circle {
+    position: absolute;
+    border-radius: 50%;
+    border: 1px solid rgba(168, 181, 160, 0.2);
+    pointer-events: none;
+  }
+  .bg-circle-1 {
+    width: 600px;
+    height: 600px;
+    top: -180px;
+    right: -200px;
+  }
+  .bg-circle-2 {
+    width: 400px;
+    height: 400px;
+    bottom: 200px;
+    left: -160px;
+  }
+  /* Header */
+  .header {
+    position: relative;
+    z-index: 1;
+    margin-bottom: 40px;
+  }
+  .header-label {
+    font-family: 'Inter', sans-serif;
+    font-size: 10px;
+    font-weight: 500;
+    letter-spacing: 3.5px;
+    text-transform: uppercase;
+    color: #6B8F71;
+    margin-bottom: 20px;
+    opacity: 0.8;
+  }
+  .header-title {
+    font-family: 'Noto Serif SC', serif;
+    font-size: 44px;
+    font-weight: 500;
+    line-height: 1.35;
+    color: #2D3436;
+    letter-spacing: 1px;
+  }
+  .header-subtitle {
+    font-family: 'Inter', sans-serif;
+    font-size: 15px;
+    font-weight: 300;
+    color: #8B7355;
+    margin-top: 12px;
+    line-height: 1.5;
+    letter-spacing: 0.3px;
+  }
+  /* Hero Data Circles */
+  .hero-section {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 48px;
+    padding: 36px 0;
+    position: relative;
+    z-index: 1;
+  }
+  .data-circle {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+  }
+  .data-circle-ring {
+    position: relative;
+    width: 200px;
+    height: 200px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .data-circle-ring svg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    transform: rotate(-90deg);
+  }
+  .data-circle-inner {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    z-index: 1;
+  }
+  .data-num {
+    font-family: 'Inter', sans-serif;
+    font-size: 64px;
+    font-weight: 300;
+    color: #2E2A24;
+    line-height: 1;
+  }
+  .data-unit {
+    font-family: 'Inter', sans-serif;
+    font-size: 16px;
+    font-weight: 400;
+    color: #8B7355;
+    margin-top: 4px;
+  }
+  .data-label {
+    font-family: 'Inter', sans-serif;
+    font-size: 12px;
+    font-weight: 400;
+    color: #A8A098;
+    margin-top: 12px;
+    letter-spacing: 2px;
+    text-transform: uppercase;
+  }
+  .data-circle-small .data-circle-ring {
+    width: 160px;
+    height: 160px;
+  }
+  .data-circle-small .data-num {
+    font-size: 52px;
+  }
+  /* Organic connector */
+  .hero-connector {
+    position: relative;
+    width: 120px;
+    height: 60px;
+    flex-shrink: 0;
+  }
+  /* Reduction badge — understated Takram style */
+  .reduction-pill {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 8px 28px;
+    background: transparent;
+    border: 1px solid rgba(107, 143, 113, 0.3);
+    border-radius: 20px;
+    margin: 0 auto;
+    display: flex;
+    gap: 8px;
+  }
+  .reduction-text {
+    font-family: 'Inter', sans-serif;
+    font-size: 13px;
+    font-weight: 500;
+    color: #6B8F71;
+    letter-spacing: 2px;
+  }
+  .hero-footer {
+    display: flex;
+    justify-content: center;
+    margin-top: 16px;
+  }
+  /* Categories Section */
+  .categories-section {
+    margin-top: 36px;
+    position: relative;
+    z-index: 1;
+  }
+  .section-label {
+    font-family: 'Noto Serif SC', serif;
+    font-size: 20px;
+    font-weight: 500;
+    color: #2D3436;
+    margin-bottom: 24px;
+    letter-spacing: 1px;
+  }
+  .section-label .section-num {
+    font-family: 'Inter', sans-serif;
+    font-size: 9px;
+    font-weight: 400;
+    color: #B0AAA0;
+    letter-spacing: 1px;
+    margin-right: 12px;
+  }
+  .categories-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 16px;
+  }
+  .cat-card {
+    background: rgba(255, 255, 255, 0.6);
+    backdrop-filter: blur(10px);
+    border-radius: 16px;
+    padding: 28px 24px;
+    position: relative;
+    box-shadow: 0 2px 12px rgba(0,0,0,0.03);
+    border: 1px solid rgba(232, 228, 220, 0.8);
+  }
+  .cat-card-icon {
+    margin-bottom: 14px;
+  }
+  .cat-card-title-zh {
+    font-family: 'Noto Serif SC', serif;
+    font-size: 20px;
+    font-weight: 600;
+    color: #2E2A24;
+    margin-bottom: 4px;
+  }
+  .cat-card-title-en {
+    font-family: 'Inter', sans-serif;
+    font-size: 11px;
+    font-weight: 400;
+    color: #A8A098;
+    letter-spacing: 2px;
+    text-transform: uppercase;
+    margin-bottom: 10px;
+  }
+  .cat-card-desc {
+    font-family: 'Inter', sans-serif;
+    font-size: 12px;
+    font-weight: 300;
+    color: #8B7355;
+    line-height: 1.7;
+  }
+  .cat-card.highlight {
+    border-color: rgba(107, 143, 113, 0.35);
+    background: rgba(107, 143, 113, 0.04);
+  }
+  /* Proportion circles */
+  .cat-prop {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+  }
+  /* Flow Diagram */
+  .flow-section {
+    margin-top: 36px;
+    position: relative;
+    z-index: 1;
+  }
+  .flow-diagram {
+    position: relative;
+    height: 260px;
+    width: 100%;
+  }
+  .flow-node {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+  }
+  .flow-node-circle {
+    width: 72px;
+    height: 72px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(255,255,255,0.5);
+    border: 1px solid #DDD9D2;
+  }
+  .flow-node-circle.active {
+    border-color: #6B8F71;
+    border-width: 1.5px;
+    background: rgba(107, 143, 113, 0.06);
+  }
+  .flow-node-label {
+    font-family: 'Inter', sans-serif;
+    font-size: 11px;
+    font-weight: 400;
+    color: #A8A098;
+    letter-spacing: 2px;
+    text-transform: uppercase;
+  }
+  .flow-node-text {
+    font-family: 'Noto Serif SC', serif;
+    font-size: 13px;
+    font-weight: 500;
+    color: #2E2A24;
+    text-align: center;
+  }
+  /* Insight */
+  .insight-section {
+    margin-top: auto;
+    position: relative;
+    z-index: 1;
+  }
+  .insight-card {
+    background: rgba(255, 255, 255, 0.5);
+    border-radius: 16px;
+    padding: 32px 36px;
+    border: 1px solid rgba(232, 228, 220, 0.6);
+    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
+  }
+  .insight-quote {
+    font-family: 'Noto Serif SC', serif;
+    font-size: 20px;
+    font-weight: 400;
+    color: #2E2A24;
+    line-height: 1.7;
+    letter-spacing: 0.5px;
+  }
+  .insight-quote .green {
+    color: #6B8F71;
+    font-weight: 500;
+  }
+  .insight-quote .brown {
+    color: #8B7355;
+    font-weight: 500;
+  }
+  .results-row {
+    display: flex;
+    gap: 32px;
+    margin-top: 24px;
+    padding-top: 20px;
+    border-top: 1px solid rgba(232, 228, 220, 0.6);
+  }
+  .result-item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+  .result-leaf {
+    flex-shrink: 0;
+  }
+  .result-text {
+    font-family: 'Inter', sans-serif;
+    font-size: 13px;
+    font-weight: 400;
+    color: #8B7355;
+  }
+  /* Footer */
+  .footer {
+    margin-top: 28px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    position: relative;
+    z-index: 1;
+  }
+  .footer-text {
+    font-family: 'Inter', sans-serif;
+    font-size: 10px;
+    font-weight: 300;
+    color: #C4BDB4;
+    letter-spacing: 3px;
+    text-transform: uppercase;
+  }
+</style>
+</head>
+<body>
+<div class="container">
+  <!-- Background decorations -->
+  <div class="bg-circle bg-circle-1"></div>
+  <div class="bg-circle bg-circle-2"></div>
+  <!-- Header -->
+  <div class="header">
+    <div class="header-label">Speculative Design / Memory Architecture</div>
+    <div class="header-title">AI记忆系统<br>CLAUDE.md 的断舍离</div>
+    <div class="header-subtitle">Restructuring artificial memory from monolith to modular elegance</div>
+  </div>
+  <!-- Hero Data Circles -->
+  <div class="hero-section">
+    <div class="data-circle">
+      <div class="data-circle-ring">
+        <svg width="200" height="200" viewBox="0 0 200 200">
+          <circle cx="100" cy="100" r="92" fill="none" stroke="#E8E4DC" stroke-width="1.5"/>
+          <circle cx="100" cy="100" r="92" fill="none" stroke="#8B7355" stroke-width="2" stroke-dasharray="578" stroke-dashoffset="0" opacity="0.3"/>
+        </svg>
+        <div class="data-circle-inner">
+          <span class="data-num">93</span>
+          <span class="data-unit">KB</span>
+        </div>
+      </div>
+      <span class="data-label">Before</span>
+    </div>
+    <div class="hero-connector">
+      <svg width="120" height="60" viewBox="0 0 120 60">
+        <path d="M 0,30 C 30,30 40,10 60,10 C 80,10 90,50 110,30"
+              fill="none" stroke="#6B8F71" stroke-width="1" stroke-dasharray="3,4" opacity="0.5"/>
+        <circle cx="110" cy="30" r="3.5" fill="#6B8F71" opacity="0.5"/>
+        <circle cx="110" cy="30" r="7" fill="none" stroke="#6B8F71" stroke-width="0.5" opacity="0.2"/>
+        <!-- delta annotation -->
+        <text x="60" y="50" text-anchor="middle" font-family="Inter" font-size="7" fill="#B0AAA0" letter-spacing="0.5">-71 KB</text>
+      </svg>
+    </div>
+    <div class="data-circle data-circle-small">
+      <div class="data-circle-ring">
+        <svg width="160" height="160" viewBox="0 0 160 160">
+          <circle cx="80" cy="80" r="72" fill="none" stroke="#E8E4DC" stroke-width="1.5"/>
+          <circle cx="80" cy="80" r="72" fill="none" stroke="#A8B5A0" stroke-width="2.5" stroke-dasharray="452" stroke-dashoffset="344" opacity="0.6"/>
+        </svg>
+        <div class="data-circle-inner">
+          <span class="data-num" style="color: #A8B5A0;">22</span>
+          <span class="data-unit">KB</span>
+        </div>
+      </div>
+      <span class="data-label">After</span>
+    </div>
+  </div>
+  <div class="hero-footer">
+    <div class="reduction-pill">
+      <svg width="14" height="14" viewBox="0 0 14 14"><path d="M7 2L7 12M3 8L7 12L11 8" fill="none" stroke="#6B8F71" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+      <span class="reduction-text">76% REDUCTION</span>
+    </div>
+  </div>
+  <!-- Categories -->
+  <div class="categories-section">
+    <div class="section-label"><span class="section-num">01</span>Four Pillars of Memory</div>
+    <div class="categories-grid">
+      <div class="cat-card highlight">
+        <div class="cat-card-icon">
+          <svg width="32" height="32" viewBox="0 0 32 32">
+            <circle cx="16" cy="12" r="6" fill="none" stroke="#A8B5A0" stroke-width="1.5"/>
+            <path d="M6,28 C6,22 10,18 16,18 C22,18 26,22 26,28" fill="none" stroke="#A8B5A0" stroke-width="1.5" stroke-linecap="round"/>
+          </svg>
+        </div>
+        <div class="cat-prop">
+          <svg width="28" height="28" viewBox="0 0 28 28">
+            <circle cx="14" cy="14" r="12" fill="none" stroke="#E8E4DC" stroke-width="1"/>
+            <circle cx="14" cy="14" r="12" fill="none" stroke="#A8B5A0" stroke-width="2" stroke-dasharray="75" stroke-dashoffset="56" transform="rotate(-90 14 14)"/>
+          </svg>
+        </div>
+        <div class="cat-card-title-zh">核心身份</div>
+        <div class="cat-card-title-en">Core Identity</div>
+        <div class="cat-card-desc">Immutable facts and fundamental traits that define who you are</div>
+      </div>
+      <div class="cat-card">
+        <div class="cat-card-icon">
+          <svg width="32" height="32" viewBox="0 0 32 32">
+            <path d="M8,8 L24,8 L24,24 L8,24 Z" fill="none" stroke="#8B7355" stroke-width="1.5" rx="2"/>
+            <line x1="12" y1="13" x2="20" y2="13" stroke="#8B7355" stroke-width="1.5" stroke-linecap="round"/>
+            <line x1="12" y1="17" x2="18" y2="17" stroke="#8B7355" stroke-width="1.5" stroke-linecap="round"/>
+            <line x1="12" y1="21" x2="16" y2="21" stroke="#8B7355" stroke-width="1.5" stroke-linecap="round"/>
+          </svg>
+        </div>
+        <div class="cat-prop">
+          <svg width="28" height="28" viewBox="0 0 28 28">
+            <circle cx="14" cy="14" r="12" fill="none" stroke="#E8E4DC" stroke-width="1"/>
+            <circle cx="14" cy="14" r="12" fill="none" stroke="#8B7355" stroke-width="2" stroke-dasharray="75" stroke-dashoffset="45" transform="rotate(-90 14 14)"/>
+          </svg>
+        </div>
+        <div class="cat-card-title-zh">偏好设置</div>
+        <div class="cat-card-title-en">Preferences</div>
+        <div class="cat-card-desc">Style, tools, habits — accumulated over time through sessions</div>
+      </div>
+      <div class="cat-card">
+        <div class="cat-card-icon">
+          <svg width="32" height="32" viewBox="0 0 32 32">
+            <rect x="6" y="10" width="8" height="14" rx="1" fill="none" stroke="#8B7355" stroke-width="1.5"/>
+            <rect x="18" y="6" width="8" height="18" rx="1" fill="none" stroke="#8B7355" stroke-width="1.5"/>
+            <line x1="8" y1="16" x2="12" y2="16" stroke="#8B7355" stroke-width="1" stroke-linecap="round"/>
+            <line x1="20" y1="12" x2="24" y2="12" stroke="#8B7355" stroke-width="1" stroke-linecap="round"/>
+          </svg>
+        </div>
+        <div class="cat-prop">
+          <svg width="28" height="28" viewBox="0 0 28 28">
+            <circle cx="14" cy="14" r="12" fill="none" stroke="#E8E4DC" stroke-width="1"/>
+            <circle cx="14" cy="14" r="12" fill="none" stroke="#8B7355" stroke-width="2" stroke-dasharray="75" stroke-dashoffset="37" transform="rotate(-90 14 14)"/>
+          </svg>
+        </div>
+        <div class="cat-card-title-zh">项目状态</div>
+        <div class="cat-card-title-en">Project State</div>
+        <div class="cat-card-desc">Current tasks, deadlines, priorities — always evolving context</div>
+      </div>
+      <div class="cat-card">
+        <div class="cat-card-icon">
+          <svg width="32" height="32" viewBox="0 0 32 32">
+            <circle cx="16" cy="16" r="10" fill="none" stroke="#8B7355" stroke-width="1.5"/>
+            <line x1="16" y1="10" x2="16" y2="16" stroke="#8B7355" stroke-width="1.5" stroke-linecap="round"/>
+            <line x1="16" y1="16" x2="21" y2="19" stroke="#8B7355" stroke-width="1.5" stroke-linecap="round"/>
+          </svg>
+        </div>
+        <div class="cat-prop">
+          <svg width="28" height="28" viewBox="0 0 28 28">
+            <circle cx="14" cy="14" r="12" fill="none" stroke="#E8E4DC" stroke-width="1"/>
+            <circle cx="14" cy="14" r="12" fill="none" stroke="#8B7355" stroke-width="2" stroke-dasharray="75" stroke-dashoffset="60" transform="rotate(-90 14 14)"/>
+          </svg>
+        </div>
+        <div class="cat-card-title-zh">日志流水</div>
+        <div class="cat-card-title-en">Daily Logs</div>
+        <div class="cat-card-desc">Session records — never auto-loaded, retrieved on demand only</div>
+      </div>
+    </div>
+  </div>
+  <!-- Flow Diagram -->
+  <div class="flow-section">
+    <div class="section-label"><span class="section-num">02</span>System Flow</div>
+    <div class="flow-diagram">
+      <!-- SVG organic curves connecting nodes — art-piece treatment -->
+      <svg width="920" height="260" viewBox="0 0 920 260" style="position: absolute; top: 0; left: 0;">
+        <!-- Background guide line (very subtle) -->
+        <line x1="50" y1="130" x2="870" y2="130" stroke="#E8E4DC" stroke-width="0.3" stroke-dasharray="2,8" opacity="0.4"/>
+        <!-- Curve from Input to Route -->
+        <path d="M 116,50 C 165,50 195,120 246,120" fill="none" stroke="#D4CFC6" stroke-width="1"/>
+        <!-- Curve from Route to Load -->
+        <path d="M 316,120 C 370,120 380,50 460,50" fill="none" stroke="#D4CFC6" stroke-width="1"/>
+        <!-- Curve from Load to Execute (highlighted — key transition) -->
+        <path d="M 530,50 C 585,50 600,160 660,160" fill="none" stroke="#6B8F71" stroke-width="1.5" stroke-dasharray="4,4" opacity="0.6"/>
+        <!-- Curve from Execute to Update -->
+        <path d="M 730,160 C 785,160 800,80 830,80" fill="none" stroke="#D4CFC6" stroke-width="1"/>
+        <!-- Connection dots — varying size for depth -->
+        <circle cx="116" cy="50" r="2.5" fill="#D4CFC6"/>
+        <circle cx="246" cy="120" r="2.5" fill="#D4CFC6"/>
+        <circle cx="316" cy="120" r="2.5" fill="#D4CFC6"/>
+        <circle cx="460" cy="50" r="3" fill="#6B8F71" opacity="0.5"/>
+        <circle cx="530" cy="50" r="3" fill="#6B8F71" opacity="0.5"/>
+        <circle cx="660" cy="160" r="2.5" fill="#D4CFC6"/>
+        <circle cx="730" cy="160" r="2.5" fill="#D4CFC6"/>
+        <circle cx="830" cy="80" r="2.5" fill="#D4CFC6"/>
+        <!-- Annotation: step numbers along curve -->
+        <text x="170" y="75" font-family="Inter" font-size="7" fill="#C8C2B8" letter-spacing="0.5">step 1</text>
+        <text x="350" y="100" font-family="Inter" font-size="7" fill="#C8C2B8" letter-spacing="0.5">step 2</text>
+        <text x="565" y="95" font-family="Inter" font-size="7" fill="#6B8F71" opacity="0.5" letter-spacing="0.5">step 3</text>
+        <text x="770" y="130" font-family="Inter" font-size="7" fill="#C8C2B8" letter-spacing="0.5">step 4</text>
+      </svg>
+      <!-- Node 1: User Input -->
+      <div class="flow-node" style="left: 44px; top: 8px;">
+        <div class="flow-node-circle">
+          <svg width="24" height="24" viewBox="0 0 24 24">
+            <circle cx="12" cy="9" r="4" fill="none" stroke="#8B7355" stroke-width="1.2"/>
+            <path d="M4,21 C4,16 7,14 12,14 C17,14 20,16 20,21" fill="none" stroke="#8B7355" stroke-width="1.2" stroke-linecap="round"/>
+          </svg>
+        </div>
+        <span class="flow-node-label">Input</span>
+        <span class="flow-node-text">User</span>
+      </div>
+      <!-- Node 2: Route -->
+      <div class="flow-node" style="left: 210px; top: 78px;">
+        <div class="flow-node-circle">
+          <svg width="24" height="24" viewBox="0 0 24 24">
+            <path d="M4,12 L10,6 L10,10 L20,10 L20,14 L10,14 L10,18 Z" fill="none" stroke="#8B7355" stroke-width="1.2"/>
+          </svg>
+        </div>
+        <span class="flow-node-label">Route</span>
+        <span class="flow-node-text">Workspace</span>
+      </div>
+      <!-- Node 3: Load Memory (active) -->
+      <div class="flow-node" style="left: 420px; top: 8px;">
+        <div class="flow-node-circle active">
+          <svg width="24" height="24" viewBox="0 0 24 24">
+            <rect x="4" y="4" width="16" height="16" rx="2" fill="none" stroke="#A8B5A0" stroke-width="1.2"/>
+            <line x1="8" y1="9" x2="16" y2="9" stroke="#A8B5A0" stroke-width="1.2" stroke-linecap="round"/>
+            <line x1="8" y1="13" x2="14" y2="13" stroke="#A8B5A0" stroke-width="1.2" stroke-linecap="round"/>
+            <line x1="8" y1="17" x2="12" y2="17" stroke="#A8B5A0" stroke-width="1.2" stroke-linecap="round"/>
+          </svg>
+        </div>
+        <span class="flow-node-label">Load</span>
+        <span class="flow-node-text">Memory</span>
+      </div>
+      <!-- Node 4: Execute -->
+      <div class="flow-node" style="left: 624px; top: 118px;">
+        <div class="flow-node-circle">
+          <svg width="24" height="24" viewBox="0 0 24 24">
+            <polygon points="8,4 20,12 8,20" fill="none" stroke="#8B7355" stroke-width="1.2" stroke-linejoin="round"/>
+          </svg>
+        </div>
+        <span class="flow-node-label">Execute</span>
+        <span class="flow-node-text">Task</span>
+      </div>
+      <!-- Node 5: Update -->
+      <div class="flow-node" style="left: 800px; top: 40px;">
+        <div class="flow-node-circle">
+          <svg width="24" height="24" viewBox="0 0 24 24">
+            <path d="M12,4 L12,16" stroke="#8B7355" stroke-width="1.2" stroke-linecap="round"/>
+            <path d="M8,12 L12,16 L16,12" fill="none" stroke="#8B7355" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+            <line x1="6" y1="20" x2="18" y2="20" stroke="#8B7355" stroke-width="1.2" stroke-linecap="round"/>
+          </svg>
+        </div>
+        <span class="flow-node-label">Update</span>
+        <span class="flow-node-text">Write</span>
+      </div>
+    </div>
+  </div>
+  <!-- Insight -->
+  <div class="insight-section">
+    <div class="insight-card">
+      <div class="insight-quote">
+        Like <span class="green">Marie Kondo</span> for AI memory —<br>
+        keep only what <span class="brown">sparks joy</span>.
+      </div>
+      <div class="results-row">
+        <div class="result-item">
+          <div class="result-leaf">
+            <svg width="14" height="14" viewBox="0 0 14 14">
+              <path d="M2,12 C2,6 6,2 12,2" fill="none" stroke="#A8B5A0" stroke-width="1.5" stroke-linecap="round"/>
+              <circle cx="12" cy="2" r="2" fill="#A8B5A0" opacity="0.4"/>
+            </svg>
+          </div>
+          <span class="result-text">Faster context loading</span>
+        </div>
+        <div class="result-item">
+          <div class="result-leaf">
+            <svg width="14" height="14" viewBox="0 0 14 14">
+              <path d="M2,12 C2,6 6,2 12,2" fill="none" stroke="#A8B5A0" stroke-width="1.5" stroke-linecap="round"/>
+              <circle cx="12" cy="2" r="2" fill="#A8B5A0" opacity="0.4"/>
+            </svg>
+          </div>
+          <span class="result-text">More relevant responses</span>
+        </div>
+        <div class="result-item">
+          <div class="result-leaf">
+            <svg width="14" height="14" viewBox="0 0 14 14">
+              <path d="M2,12 C2,6 6,2 12,2" fill="none" stroke="#A8B5A0" stroke-width="1.5" stroke-linecap="round"/>
+              <circle cx="12" cy="2" r="2" fill="#A8B5A0" opacity="0.4"/>
+            </svg>
+          </div>
+          <span class="result-text">Zero information loss</span>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- Footer -->
+  <div class="footer">
+    <span class="footer-text">Takram Style</span>
+    <span class="footer-text">CLAUDE.md Optimization</span>
+    <span class="footer-text">2026</span>
+  </div>
+</div>
+</body>
+</html>

package/src/skills-lib/huashu-design/assets/showcases/infographic/infographic-takram.png ADDED Viewed

Binary file