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

wizz-method 1.0.3 → 1.1.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/demos/md-html-narration/script.md ADDED Viewed

@@ -0,0 +1,69 @@
+---
+title: md还是html，这是个蠢问题
+gap: 0.5
+---
+## opening
+前两天，[[cue:thariq]]Claude Code 团队的 Thariq 发了篇爆文。
+标题就一句话，HTML 是新的 markdown。
+他说他几乎不再写 md 文件了，全让 AI 给他生成 HTML。
+500 万阅读，X 上立马吵翻了。
+一派是 md 党，[[cue:two-camps]]觉得 md 才是 AI 时代的源代码。
+另一派觉得 Thariq 说得对，HTML 才是终极答案。
+## md-side
+md 党的证据其实挺硬的。
+你看 OpenAI 去年发的 AGENTS.md，[[cue:agents-md]]60000 多个项目用，AWS、Anthropic、Google、微软、OpenAI，AI 半壁江山一起捐进 Linux Foundation 做开放标准。
+Karpathy 的 llm-wiki，主体就是三层 markdown，单一个 CLAUDE.md 文件，5 万 star。
+Cloudflare 实测过一组数据，[[cue:token-saving]]同一篇博客，HTML 一万六千 token，转成 md 只要三千。
+省 80%。
+GitHub 官方也讲过一句，文档不再是描述代码，[[cue:doc-is-code]]文档就是代码。
+## html-side
+但 html 党也没说错。
+Thariq 那篇文章里几条论据我都同意。
+第一是空间信息。[[cue:spatial]]diff、调用图、架构图，本来就是有空间维度的，md 把它压成一行字，html 能左右对照，理解效率不是一个量级的。
+第二是动态体验。[[cue:dynamic]]做产品原型，按钮按下去什么颜色、什么 easing 曲线，文字描述再多没用，html 能让你直接看见。
+第三是结构化阅读。[[cue:structured]]可折叠章节、tab 代码块、边栏术语表，跟同样的字线性堆一遍是两种东西。
+Anthropic 现在的 Live Artifacts，HTML 已经从静态产物升级成可以交互、能拉实时数据的 dashboard。
+## the-real-question
+我看完想说，[[cue:reveal]]这俩根本是在争一个蠢问题。
+两边都赢了。
+但赢的是不同的问题。
+md 党回答的是，[[cue:question-md]]我们用什么写。
+html 党回答的是，[[cue:question-html]]我们给人什么看。
+这是两个问题。
+怎么会有谁取代谁。
+## the-split
+我觉得真问题是这个。
+md 和 html 不是替代关系，[[cue:split]]是分工关系。
+以前你写 md 自己也看 md。
+那时候要折中，所以 md 胜出。
+但 AI 出现后，[[cue:ai-changes]]第一次有了一个新情况。
+生产成本可以被 AI 吸收。
+HTML 那部分太重的代价，AI 替你扛。
+你只负责消费。
+原来要折中的需求，被拆成了两端的极端最优。
+生产端要轻、要快、要 token efficient，[[cue:md-side-win]]那就是 md。
+消费端要丰富、要可视化、要好分享，[[cue:html-side-win]]那就是 html。
+两端各自登顶。
+中间那个折中位置，没人需要了。
+## activity-proof
+最干净的活样本是 Thariq 自己。
+3 月份他发了篇 Skills 指南，[[cue:thariq-march]]强调核心还是 markdown。
+5 月份他发了 HTML 是新 markdown。
+同一个人，[[cue:same-person]]两端各自登顶，互不打架。
+Karpathy 和 Lex Fridman 那对组合也一样。
+内核是 markdown wiki，[[cue:karpathy-lex]]外壳是动态 HTML。
+不是 Lex 替换了 Karpathy，是他在 Karpathy 的基础上加了一层消费层。
+## closing
+所以下次你想吵这个的时候，[[cue:final]]先问自己一句。
+你现在面对的是「写」，还是「看」。
+写，[[cue:md-final]]用 md。
+看，[[cue:html-final]]用 html。
+工具替你处理切换。
+立场可以放下了。

package/src/skills-lib/huashu-design/demos/voiceover-demo/script.md ADDED Viewed

@@ -0,0 +1,17 @@
+---
+title: 什么是 token
+gap: 0.4
+---
+## intro
+你有没有想过，[[cue:question]]当我们和 AI 对话的时候，AI 到底是怎么理解我们的话的呢。
+## token-1
+答案是它根本不理解汉字，[[cue:reveal]]它只认识 token。
+## token-2
+你可以把 token 理解成 AI 的最小信息单位。
+比如「人工智能」这四个字，[[cue:split]]在 AI 眼里可能是两个 token：人工，智能。
+## ending
+所以下次看到「百万 token 上下文」这种说法，[[cue:context]]你就知道，它说的是 AI 一次能记住多少个这样的小块。

package/src/skills-lib/huashu-design/demos/voiceover-demo//344/273/200/344/271/210/346/230/257token.html ADDED Viewed

@@ -0,0 +1,201 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<title>什么是 token · narration demo</title>
+<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
+<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
+<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+<style>
+  body { margin: 0; background: #0a0a0a; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; min-height: 100vh; display: flex; align-items: center; justify-content: center; flex-direction: column; }
+  #root { box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
+  .scene-padding { padding: 120px; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; }
+</style>
+</head>
+<body>
+<div id="root"></div>
+<script type="text/babel">
+// ── timeline.json (inline) ─────────────────────────────────
+const TIMELINE = {
+  "title": "什么是 token",
+  "voice": null,
+  "speed": 1,
+  "gap": 0.4,
+  "totalDuration": 23.808,
+  "scenes": [
+    {"id":"intro","start":0,"end":4.368,"duration":4.368,"audio":"audio/intro.mp3","text":"你有没有想过，当我们和 AI 对话的时候，AI 到底是怎么理解我们的话的呢。","cues":[{"id":"question","offset":1.08,"absoluteTime":1.08}]},
+    {"id":"token-1","start":4.768,"end":7.576,"duration":2.808,"audio":"audio/token-1.mp3","text":"答案是它根本不理解汉字，它只认识 token。","cues":[{"id":"reveal","offset":1.632,"absoluteTime":6.4}]},
+    {"id":"token-2","start":7.976,"end":16.808,"duration":8.832,"audio":"audio/token-2.mp3","text":"你可以把 token 理解成 AI 的最小信息单位。\n比如「人工智能」这四个字，在 AI 眼里可能是两个 token：人工，智能。","cues":[{"id":"split","offset":5.4,"absoluteTime":13.376}]},
+    {"id":"ending","start":17.208,"end":23.664,"duration":6.456,"audio":"audio/ending.mp3","text":"所以下次看到「百万 token 上下文」这种说法，你就知道，它说的是 AI 一次能记住多少个这样的小块。","cues":[{"id":"context","offset":2.376,"absoluteTime":19.584}]}
+  ],
+  "voiceover": "voiceover.mp3"
+};
+// ── narration_stage.jsx (inline) ───────────────────────────
+const NarrationStageLib = (() => {
+  const NarrationContext = React.createContext({ time: 0, scene: null, sceneTime: 0, isCueTriggered: () => false, cueProgress: () => 0 });
+  function NarrationStage({ timeline, audioSrc, width = 1920, height = 1080, background = '#0e0e0e', controls = true, children }) {
+    const audioRef = React.useRef(null);
+    const [time, setTime] = React.useState(0);
+    const [playing, setPlaying] = React.useState(false);
+    const recording = typeof window !== 'undefined' && window.__recording === true;
+    React.useEffect(() => {
+      if (typeof window === 'undefined') return;
+      window.__totalDuration = timeline.totalDuration;
+      window.__ready = true;
+    }, [timeline.totalDuration]);
+    React.useEffect(() => {
+      let raf;
+      const tick = () => {
+        if (recording) {
+          if (typeof window.__time === 'number') setTime(window.__time);
+        } else if (audioRef.current && !audioRef.current.paused) {
+          setTime(audioRef.current.currentTime);
+        }
+        raf = requestAnimationFrame(tick);
+      };
+      tick();
+      return () => cancelAnimationFrame(raf);
+    }, [recording]);
+    const currentScene = React.useMemo(() => {
+      if (!timeline.scenes) return null;
+      for (let i = 0; i < timeline.scenes.length; i++) {
+        const s = timeline.scenes[i];
+        const next = timeline.scenes[i + 1];
+        if (time >= s.start && (!next || time < next.start)) return s;
+      }
+      return timeline.scenes[0];
+    }, [time, timeline.scenes]);
+    const sceneTime = currentScene ? Math.max(0, time - currentScene.start) : 0;
+    const allCues = React.useMemo(() => {
+      const map = {};
+      for (const s of timeline.scenes || []) for (const c of s.cues || []) map[c.id] = c;
+      return map;
+    }, [timeline.scenes]);
+    const isCueTriggered = React.useCallback((cueId) => { const c = allCues[cueId]; return c ? time >= c.absoluteTime : false; }, [allCues, time]);
+    const cueProgress = React.useCallback((cueId, ramp = 0.5) => { const c = allCues[cueId]; if (!c) return 0; const dt = time - c.absoluteTime; if (dt <= 0) return 0; if (dt >= ramp) return 1; return dt / ramp; }, [allCues, time]);
+    const ctx = { time, scene: currentScene, sceneTime, isCueTriggered, cueProgress };
+    const handlePlayPause = () => { if (!audioRef.current) return; if (audioRef.current.paused) { audioRef.current.play(); setPlaying(true); } else { audioRef.current.pause(); setPlaying(false); } };
+    const handleSeek = (e) => { if (!audioRef.current) return; const t = parseFloat(e.target.value); audioRef.current.currentTime = t; setTime(t); };
+    return (
+      <NarrationContext.Provider value={ctx}>
+        <div style={{ position: 'relative', width, height, background, overflow: 'hidden', color: '#fff', fontFamily: '-apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif' }}>
+          {children}
+        </div>
+        {!recording && <audio ref={audioRef} src={audioSrc} preload="auto" onEnded={() => setPlaying(false)} />}
+        {!recording && controls && (
+          <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 16px', background: '#1a1a1a', color: '#ddd', fontFamily: 'monospace', fontSize: 13, width, boxSizing: 'border-box' }}>
+            <button onClick={handlePlayPause} style={{ padding: '6px 14px', background: '#fff', color: '#000', border: 0, borderRadius: 4, cursor: 'pointer', fontWeight: 600 }}>
+              {playing ? '❚❚ Pause' : '▶ Play'}
+            </button>
+            <input type="range" min={0} max={timeline.totalDuration} step={0.01} value={time} onChange={handleSeek} style={{ flex: 1 }} />
+            <span style={{ minWidth: 110, textAlign: 'right' }}>{time.toFixed(2)} / {timeline.totalDuration.toFixed(2)}s</span>
+            <span style={{ padding: '4px 10px', background: '#2a2a2a', borderRadius: 4, minWidth: 100, textAlign: 'center' }}>{currentScene ? currentScene.id : '—'}</span>
+          </div>
+        )}
+      </NarrationContext.Provider>
+    );
+  }
+  function Scene({ id, children, keepMounted = false }) {
+    const { scene, sceneTime } = React.useContext(NarrationContext);
+    const isActive = scene && scene.id === id;
+    if (!isActive && !keepMounted) return null;
+    const content = typeof children === 'function' ? children(sceneTime, scene) : children;
+    return <div style={{ position: 'absolute', inset: 0, opacity: isActive ? 1 : 0, pointerEvents: isActive ? 'auto' : 'none', transition: keepMounted ? 'opacity 0.2s' : undefined }}>{content}</div>;
+  }
+  function Cue({ id, ramp = 0.5, children }) {
+    const { isCueTriggered, cueProgress } = React.useContext(NarrationContext);
+    return children(isCueTriggered(id), cueProgress(id, ramp));
+  }
+  return { NarrationStage, Scene, Cue };
+})();
+const { NarrationStage, Scene, Cue } = NarrationStageLib;
+// ── 视觉内容 ─────────────────────────────────────────────
+const App = () => (
+  <NarrationStage timeline={TIMELINE} audioSrc="_narration_token/voiceover.mp3" width={1920} height={1080} background="#0a0a0a">
+    {/* Scene 1: 大问号引入 */}
+    <Scene id="intro">
+      <div className="scene-padding" style={{ alignItems: 'center', justifyContent: 'center' }}>
+        <Cue id="question">{(triggered, p) => (
+          <div style={{ fontSize: 320, color: triggered ? '#ffd54a' : '#3a3a3a', fontWeight: 200, transition: 'color 0.4s', transform: `scale(${0.8 + p * 0.2})`, lineHeight: 1 }}>?</div>
+        )}</Cue>
+        <div style={{ fontSize: 56, color: '#aaa', marginTop: 60, letterSpacing: '0.05em', fontWeight: 300 }}>AI 是怎么理解我们的话的</div>
+      </div>
+    </Scene>
+    {/* Scene 2: reveal 关键词 */}
+    <Scene id="token-1">
+      <div className="scene-padding" style={{ alignItems: 'center', justifyContent: 'center' }}>
+        <div style={{ fontSize: 64, color: '#888', marginBottom: 80, fontWeight: 300 }}>它不认识汉字</div>
+        <Cue id="reveal">{(triggered, p) => (
+          <div style={{
+            fontSize: 280, fontWeight: 700, color: '#ffd54a', letterSpacing: '0.05em',
+            opacity: p, transform: `translateY(${(1 - p) * 40}px)`,
+            fontFamily: 'monospace', textShadow: triggered ? '0 0 40px rgba(255, 213, 74, 0.4)' : 'none'
+          }}>
+            token
+          </div>
+        )}</Cue>
+      </div>
+    </Scene>
+    {/* Scene 3: 拆字演示 */}
+    <Scene id="token-2">
+      <div className="scene-padding" style={{ alignItems: 'center', justifyContent: 'center' }}>
+        <div style={{ fontSize: 48, color: '#aaa', marginBottom: 100, fontWeight: 300 }}>token = AI 的最小信息单位</div>
+        <Cue id="split">{(triggered, p) => (
+          <div style={{ display: 'flex', gap: triggered ? 80 : 8, transition: 'gap 0.6s cubic-bezier(0.16, 1, 0.3, 1)' }}>
+            <div style={{ fontSize: 200, fontWeight: 600, color: triggered ? '#ffd54a' : '#fff', padding: triggered ? '40px 60px' : '40px 20px', border: triggered ? '4px solid #ffd54a' : '4px solid transparent', borderRadius: 24, transition: 'all 0.6s cubic-bezier(0.16, 1, 0.3, 1)', background: triggered ? 'rgba(255, 213, 74, 0.05)' : 'transparent' }}>
+              人工
+            </div>
+            <div style={{ fontSize: 200, fontWeight: 600, color: triggered ? '#ffd54a' : '#fff', padding: triggered ? '40px 60px' : '40px 20px', border: triggered ? '4px solid #ffd54a' : '4px solid transparent', borderRadius: 24, transition: 'all 0.6s cubic-bezier(0.16, 1, 0.3, 1)', background: triggered ? 'rgba(255, 213, 74, 0.05)' : 'transparent' }}>
+              智能
+            </div>
+          </div>
+        )}</Cue>
+        <div style={{ fontSize: 36, color: '#666', marginTop: 60, opacity: 0.6 }}>「人工智能」= 2 个 token</div>
+      </div>
+    </Scene>
+    {/* Scene 4: 总结 */}
+    <Scene id="ending">
+      <div className="scene-padding" style={{ alignItems: 'center', justifyContent: 'center' }}>
+        <Cue id="context">{(triggered, p) => (
+          <>
+            <div style={{ fontSize: 96, fontWeight: 700, letterSpacing: '0.02em', marginBottom: 40, color: '#fff', opacity: triggered ? 1 : 0.3, transition: 'opacity 0.5s' }}>
+              <span style={{ color: '#ffd54a' }}>1,000,000</span> token
+            </div>
+            <div style={{ fontSize: 48, color: '#888', fontWeight: 300, opacity: p }}>
+              ≈ AI 一次能记住的<span style={{ color: '#fff', fontWeight: 500 }}>「小块」数量</span>
+            </div>
+          </>
+        )}</Cue>
+      </div>
+    </Scene>
+    {/* 全局水印 */}
+    <div style={{ position: 'absolute', bottom: 24, right: 32, fontSize: 11, color: 'rgba(255,255,255,0.35)', letterSpacing: '0.15em', fontFamily: 'monospace', pointerEvents: 'none', zIndex: 100 }}>
+      Created by Huashu-Design
+    </div>
+  </NarrationStage>
+);
+ReactDOM.createRoot(document.getElementById('root')).render(<App />);
+</script>
+</body>
+</html>