互動概念教學 — AI 主理人 Playground

用拖的學概念

你要學一個概念但只看文字記不住。AI 給你一段「複利就是利上滾利」、你點頭、隔天就忘。真正會留下來的是「我拉了那個 slider、從 10 年拉到 30 年、看到 100 萬變 760 萬、那一瞬間我感受到時間的力量」。下面這頁就是這個方法——左邊看文字、右邊邊拉邊看數字變動、概念才會被刻進腦袋。

複利不是利率厲害、是時間厲害

複利的意思是「上期賺到的錢、下期會繼續幫你賺錢」。假設你今年放 100 萬、年化年化報酬率 7%、明年你的本金就變 107 萬、後年是 107 乘以 1.07 等於 114.5 萬——這 0.5 萬就是「上期賺的錢、這期繼續幫你賺」的部分。

這個 0.5 萬看起來不多。但放 30 年、複利會讓你的 100 萬變成大約 761 萬。重點來了：如果改成單利、同樣 7%、30 年只會變 310 萬。差距是 451 萬——這 451 萬完全是「時間給你的」、不是因為你選股神準。

所以投資界有個常見講法：晚 10 年開始、要追上的不是 10 年的差距、是 10 年複利累積的差距。 25 歲開始每月放 5,000 元、跟 35 歲開始每月放 10,000 元、到 65 歲退休時、前者反而比較多。

右邊試試看：把年數從 5 年拉到 30 年、看「複利結果」跟「單利結果」的差距會怎麼炸開。一開始幾乎沒差、但過了大約 15 年之後曲線會明顯翹起來——那就是複利開始起飛的時候。

股票多 = 賺得多、也跌得重

資產配置的意思是「你把錢分成幾份、各放到不同類型的標的」。最經典的分法是「100 減年齡」法則： 30 歲放 70% 股票、40 歲放 60%、年紀越大越少股票、越多債券。原因是年輕還有時間等市場回來、中年之後沒時間扛長期下跌。

股票長期報酬高（年化 7-10%）但波動大、單年可能 -30%。債券長期報酬低（年化 2-4%）但波動小。把這兩個混在一起、你會得到一個「介於中間」的組合——既不會像純股票那樣坐雲霄飛車、也不會像純債券那樣賺得太少。

右邊那個圓餅圖、拉「股票比例」slider、會看到下面的風險指標跟著動。股票拉到 90%、預期最差年份可能 -25%；拉到 30%、最差年份大概 -8%。換來的代價是長期平均報酬從 8.5% 掉到 4.5%。

右邊試試看：把股票比例從 30% 拉到 90%、看「預期年化」跟「最差年份」怎麼一起動。你會發現報酬跟風險基本上是綁在一起的——這就是為什麼沒有「報酬高又安全」的選項、有就是詐騙。

叫 AI 給你一個

把「我想學的概念」替換到下面 prompt 的 [括號] 裡、貼進 ChatGPT / Claude / Gemini：

我想學的概念：[把你想搞懂的概念寫在這、例如：通膨怎麼吃掉購買力、保單 IRR 怎麼算、健保部分負擔變動]

請給我一個 HTML 檔的「互動概念教學」、要求：

1. 結構（兩欄並排、手機自動疊起來）：
   - 左欄：3 段文字解釋、約 200-300 字
   - 右欄：一個視覺化的圖（圓餅 / 折線 / 柱狀、依概念選）+ 2-3 個可拖動的 slider
   - 拖 slider 圖會即時動、下面的「結果摘要」數字也即時變

2. 互動要求：
   - 所有計算用 JS 即時算、不要寫死數字
   - 圖用純 SVG、不要載入任何 chart library
   - 至少要有「對照組」（例如複利 vs 單利、配置 A vs 配置 B）
   - 左欄文字裡專有名詞要加底線、hover 顯示解釋

3. 樣式：
   - 繁體中文、台灣用語
   - 單檔 HTML、inline CSS / JS、不依賴任何外部資源
   - 手機友善（min-width: 320px 不爆版）、欄位疊起來
   - 配色用暖陶橘（#D4623B）當強調色、白底、灰字
   - 不要 emoji

4. 語氣：
   - 直接、有觀點、有結論段
   - 假設讀者第一次接觸、不要假設懂 jargon
   - 用具體數字、不要說「會變很多」、要說「100 萬會變 761 萬」

請給我一個檔案、我直接存成 .html 開來看。