1.2 介紹

三層體驗

NoteCraftApp 的功能分成靜態層、AI 生成層與簡報層。這頁說明每一層要裝什麼、裝完能得到什麼。

本頁目錄

靜態層
AI 生成層
簡報層

三層是疊加的：靜態層只需要 Node，AI 生成層與簡報層再加上 Claude Code 與內建 Skill。你可以停在任何一層。

Node.js ≥ 22
1 npx notecraftapp view ./docs 靜態層
- 工作台、儀表板、系列、標籤
- 搜尋、頁籤、寫入 UI
- 標記先顯示成「待生成」卡片
＋ Claude Code ＋ init-skill
2 在對話裡說「處理視覺化」 AI 生成層
- @ai-visualize 標記生成互動元件
- 元件寫進 .notecraft/components/
同一次 init-skill，不用另外裝
3 在對話裡說「轉成簡報」簡報層
- 16:9 簡報與全螢幕播放
- 既有互動元件原樣嵌入

三層是疊加的：靜態層只要 Node，往上兩層再加 Claude Code 與 init-skill。可以停在任何一階；AI 與簡報都在你本機的對話裡執行，build 與部署時不呼叫 AI。

靜態層

一行指令就能用：

終端機

npx notecraftapp view ./docs

你會得到儀表板、系列、標籤、巢狀網址、圖片與寫入 UI，也就是完整的閱讀與輕量編輯。

MDX 裡的 @ai-visualize 標記在這一層會顯示成「待生成」卡片，等你之後處理。

AI 生成層

把「這裡放一張圖」的自然語言描述變成 React 互動元件。

在專案根目錄跑一次 npx notecraftapp init-skill，把 Skill 與 Subagent 裝進 .claude/
在 MDX 裡寫 @ai-visualize 標記，描述你要的圖
在 Claude Code 對這篇筆記說「處理這個標記」

元件會寫到 .notecraft/components/<id>.tsx，並自動插回筆記裡標記的下方。

MDX

{/* @ai-visualize
id: oauth-flow
type: diagram
status: pending
prompt: |
  畫一張 OAuth 2.0 + PKCE 的完整時序圖，
  含前端、後端、AS、Resource Server 四方通訊
*/}

安裝步驟見安裝內建 Skill，生成流程見生成流程。

簡報層

把整篇筆記轉成 16:9 多頁簡報。和 AI 生成層用同一次 init-skill 安裝，不用另外裝。

在 Claude Code 說「把 <筆記> 轉成簡報」，產出 <slug>.deck.tsx，然後在 /present/<slug> 檢視或全螢幕播放。內容頁從 29 個預先設計好的版型原子中挑選填入；筆記裡既有的 @ai-visualize 元件會原樣嵌進投影片，播放時照樣能操作。

詳見生成一份簡報。

在 GitHub 上修改這一頁