Layered Storytelling Website Design Philosophy
給工作團隊與 AI Agent 的網站敘事設計理念 v1.1
\\日期\\：2026-08-09
\\角色\\：Website strategy / UX writing / editorial storytelling / fundraising conversion
\\目的\\：定義 Yogini Retreat Manang 對外網站如何同時做到「快速看懂」與「完整說故事」，並成為後續人類設計師、文案、前端與 AI Agent 的共同規格。
VISION-ALIGNED DESIGN UPDATE｜v1.1
1. 網站不是把故事縮短，而是把深度分層
仁波切的 Manang Vision 同時包含歷史、家族、修持、身體經驗、第三代責任、金剛亥母與未來實修制度。
如果全部放在首頁，故事會太重；如果只留下短句，故事又會失去靈魂。
因此網站採用三層閱讀：
\\Layer 1 --- Glimpse\\
3--8 秒理解一個核心概念。以 Hook、照片、短句建立感受。
\\Layer 2 --- Meaning\\
30--90 秒理解「為什麼」。用較短段落把概念與 Manang 的 Vision 接起來。
\\Layer 3 --- Deep Story\\
讓真正想了解的人完整閱讀原始故事、仁波切願景、傳承與修持脈絡。
短，不等於淺。
長，也不應被迫出現在每一個人的第一層閱讀裡。
2. 全站的核心敘事不是 Buildings，而是 Transformation
網站最高層問題：
\\What do we hope can happen in a person's life when they come here?\\
而不是：
\\What are we building?\\
全站 recurring narrative：
\\History / Lineage → Reconnect → Acceptance → Adjustment → Harmony\\
建築出現在後半段，作為「讓這件事可以發生的條件」。
3. 建議的新資訊架構 IA
HOME
任務：15--30 秒讓第一次來的人知道這是什麼、為什麼值得繼續看。
核心順序：
1\. Hero --- A place to return to yourself
2\. Manang / History glimpse
3\. Rinpoche Vision glimpse
4\. Reconnect → Accept → Adjust → Harmony
5\. What will happen here
6\. What we are building now
7\. Current milestone
8\. Proof / progress
9\. Support CTA
STORY
任務：回答「這個地方從哪裡來？」
內容：
- Manang
- family lineage
- Papa Rinpoche
- living Dharma in ordinary life
- third generation
- why Rinpoche returned
VISION
任務：回答「為什麼今天還需要這個地方？」
內容：
- living, breathing, experiential
- platform
- reconnect / acceptance / adjustment / harmony
- our generation + next generation
- depth before scale
PRACTICE
任務：回答「人在這裡實際會做什麼？」
內容：
- body sensitivity / relaxation
- awareness / observation / practice
- View / Practice / Fruition
- seasonal practice
- ten-day personal retreat
- Vajrayogini / Tummo / Six Yogas
PLACE / BUILD
任務：回答「Vision 如何進入土地？」
內容：
- site / climate / construction season
- Grand Café
- retreat houses
- teaching / group retreat facilities
- Vajrayogini Temple
- masterplan
- construction milestones
PROGRESS
任務：建立信任。
內容：
- timeline
- latest site photos
- completed milestones
- expenditure vs BoQ
- what is next
SUPPORT
任務：把理解轉成行動。
參與階梯：
\\Read → Follow → Share → Fund a milestone → Support a retreat house\\
4. Deep Story 不應藏在 Footer
Deep Story 是整個網站的第二閱讀路徑。
每個重要 Scroll Section 應有自然的「往深處走」入口，例如：
- Why history is only the beginning
- What the third generation is here to carry
- How Dharma returns to lived experience
- Why Vajrayogini
- Why Rinpoche returned to Manang
使用者可以一直滑而不點，也可以在任何產生興趣的位置進入完整故事。
5. Vision 與 Fundraising 的交界
募款不能突然從詩意故事跳到金額。
必須經過：
\\Meaning → Function → Milestone → Evidence → Ask\\
例如 Grand Café：
不要：
\> We need NT\$200,000 to build the Grand Café foundation.
應先讓讀者知道：
- 為什麼它是第一個 pilot building
- 它將提供現代廚房與團體餐飲
- 它是園區對外接點與社區交流空間
- 它讓當地工班先建立施工經驗
- 為什麼必須在冬季前完成地基
最後才出現：
\\Current milestone: NT\$200,000 for the foundation.\\
6. 視覺設計原則
Quiet before explanation
先讓土地、人物、生活照片說話，再補文字。
One idea per screen
手機上一個 viewport 優先只承載一個核心意思。
Avoid fundraising visual language too early
首頁前段避免進度條、巨大金額、Donate button 連續出現。
Proof should feel documentary
工程照片、日期、現場人物、BoQ 對應、簡短 caption，比裝飾性 infographic 更能建立長期信任。
Sacred content needs breathing room
Vajrayogini、Tummo、lineage 等內容不使用商業 wellness 視覺語彙，不做「神秘東方」式包裝。
7. AI Agent 的頁面生成規則
任何新頁面先回答五題：
1\. 這頁的唯一主要問題是什麼？
2\. 第一次來的人 8 秒內應理解什麼？
3\. 哪一段需要 Layer 2 才能理解？
4\. 哪一個故事值得另開 Deep Story？
5\. 這頁下一步 CTA 是理解、追蹤，還是支持？
禁止：
- 把所有背景一次塞進首頁
- 把 Vision 簡化成建築介紹
- 把佛法內容泛化成 mindfulness / wellness
- 每一屏都放 Donate
- 用長段落取代資訊層級
1\. 核心問題
現有 Master Copy 有完整的歷史、人物、土地、修行與工程脈絡，但若全部直接放進網站主頁，手機閱讀會過長。
相反地，如果所有內容都只剩 Hook + 兩句 describing copy，網站雖然變得快速，卻會失去 Manang 最重要的資產：
\\深度、時間感、人物與真實故事。\\
因此，設計目標不是「把故事縮短」。
而是：
\> \\讓不同深度的讀者，可以用不同速度進入同一個故事。\\
2\. 核心設計理念：Layered Storytelling
網站採用三層閱讀深度。
Layer 1 --- SCROLL
5 秒看懂
主頁與各 section 使用：
\\HOOK → DESCRIBING → PROOF → CTA / READ MORE\\
任務：
- 讓第一次造訪的人快速理解。
- 保持手機 scrolling 節奏。
- 建立好奇。
- 不要求使用者先讀長文才能理解專案。
原則：
- 一屏一件事。
- Hook 優先 4--12 個中文字 / 3--8 English words。
- Describing 1--3 行。
- 不把完整歷史塞進主 scroll。
Layer 2 --- DEEP STORY
2--15 分鐘真正進入故事
值得深入的節點，提供：
\\讀完整故事 → / Read the full story →\\
Deep Story 不是把短文案多加三句。
它是一篇真正完整的 editorial story：
- 有開場。
- 有人物。
- 有時間。
- 有轉折。
- 有照片／檔案／影片。
- 有 context。
- 有結尾。
- 最後自然帶到下一篇或現在正在發生的事情。
任務：
- 建立感情。
- 建立信任。
- 讓 Manang 的歷史與傳承不被 landing-page 化。
- 讓支持不是只來自「募款需求」，而來自對地方與人的理解。
Layer 3 --- ARCHIVE / SOURCE
給想真正研究的人
包括：
- 口述歷史。
- 老照片。
- 仁波切原始開示。
- 家族史。
- 建築圖。
- SMA 設計說明。
- 工程資料。
- From Manang。
- 影片。
- 相關原始文件。
任務：
- 保存。
- 查證。
- 提供深度。
- 讓網站長期成為這個地方的數位記憶。
3\. 使用者閱讀路徑
網站應同時支持三種人。
A. 快速讀者
Home → Scroll → Current Build → Support
他可能只停留 60--120 秒。
即使完全不點 Deep Story，也必須理解：
- 這是什麼。
- 為什麼在 Manang。
- 現在在做什麼。
- 為什麼現在做。
- 如何支持。
B. 故事型讀者
Home → Story → Deep Story → 下一篇 → Build → Support
這類人需要先建立關係，再決定是否支持。
C. 深度研究者／長期支持者
Deep Story → Archive → Design → From Manang → Project updates
他需要的是可追溯的深度與持續性。
4\. Deep Story 不應使用大量 Accordion
重要故事不要全部藏在「展開更多」。
原因：
- 故事需要自己的閱讀節奏。
- 需要照片與留白。
- 需要可以分享的 URL。
- 需要 SEO / social sharing。
- 未來可成為 email、社群與出版素材。
Accordion 適合：
- FAQ。
- 工程細節。
- 定義。
- 次要補充。
不適合承載 Manang 的核心故事。
5\. 第一批 Deep Story
建議優先發展：
1\. \\一個山谷，一千年\\
Manang 作為修行之地的長時間尺度。
2\. \\那把弓，還在洞口\\
Milarepa、獵人、鹿與洞穴的故事。
3\. \\他們從不說自己是誰\\
Mase 家族數百年的修行傳統。
4\. \\四十多個村落，都曾來找他\\
Papa Rinpoche 與 Manang 村落。
5\. \\這片土地，不是一次買下來的\\
2019--2026 土地整合。
6\. \\血親，也是法脈\\
Garchen Rinpoche、GarTul Chimi Dorjee Rinpoche 與傳承。
7\. \\這裡要延續的，是修持\\
Six Yogas / Vajrayogini / retreat lineage。
8\. \\先讀懂這片土地，再開始蓋\\
SMA、風、陽光、水、積雪與建築。
9\. \\為什麼先從 Grand Café 開始？\\
施工季、pilot、既有 cottage、廚房、團體使用與公共門戶。
6\. Deep Story Page Template
每篇建議使用同一個 editorial skeleton：
1. Eyebrow
STORY / LAND / PEOPLE / PRACTICE / BUILD
2. Hook
一句真正值得停下來的標題。
3. Standfirst
2--4 行，把讀者帶入情境，不把答案全部說完。
4. Opening scene
從一個人、一個地方、一個物件或一個時間點開始。
5. Narrative body
短段落。一次一個畫面／概念。
6. Evidence / artifact
照片、舊文件、影片、地圖、quote、drawing。
7. Why it matters now
這段歷史如何連到今天。
8. Next story
不要讓文章變成 dead end。
9. Contextual CTA
只有當文章已自然走到「現在」時才出現 Support CTA。
7\. 網站資訊架構建議
主導航維持簡單：
HOME
STORY
VISION
LAND
BUILD
SUPPORT
另有：
FROM MANANG / UPDATES
Deep Story 不必全部放進主導航。
它們由主頁與 Story 頁的卡片／文字連結進入。
可能路由：
/story
/story/milarepa
/story/mase-family
/story/papa-rinpoche
/story/the-land
/story/lineage
/story/practice
/land/designing-with-manang
/build/why-grand-cafe-first
/updates
8\. Scroll 與 Deep Story 的關係
範例：
SCROLL：
\\這片土地，不是一次買下來的。\\
2019 到 2026。
七年，一戶一戶，一份合約一份合約地談。
\\讀這片土地的故事 →\\
DEEP STORY：
從 2019 年開始，完整說明土地如何逐步整合、村落與家庭如何參與，以及七年後這片土地如何成為今天的園區基地。
原則：
\> Scroll 提出一個值得追問的事實。
\> Deep Story 回答它。
9\. Story Navigation
Deep Story 底部使用 editorial next chapter：
\\下一篇\\
七年後，土地終於完整了。
接下來，是怎麼在這片土地上蓋。
\\先讀懂土地，再開始蓋 →\\
這會讓網站像一本可以自由進出的數位書。
10\. Fundraising 與 Story 的關係
不要讓每篇故事最後都變成 Donate。
Story 的第一任務是：
\\meaning + relationship\\
Build 的第一任務是：
\\competence + reality\\
From Manang 的第一任務是：
\\trust + proof\\
Support 的第一任務才是：
\\action\\
因此：
Homepage / Story main scroll
→ 讓人留下
Deep Story
→ 讓人理解與產生感情
Build / From Manang
→ 讓人相信這個團隊做得到
Support
→ 讓已經理解的人行動
11\. AI Agent Content Rules
AI Agent 在生成網站文案時：
1\. 不得把 Master Copy 全文塞入主頁。
2\. 不得因為「short web copy」而刪除核心歷史。
3\. 核心故事應移到 Deep Story，而不是消失。
4\. 每個 Deep Story 必須區分 VERIFIED FACT / WORKING COPY / VERIFY。
5\. 不得自行補造傳承、年代、親屬關係或土地細節。
6\. 不得把傳說寫成現代可驗證歷史事實。
7\. 人名、藏文名、年代需沿用 Source of Truth。
8\. 未確認資料保留 \[VERIFY\]。
9\. 每篇文章應有清楚的 next story。
10\. Support CTA 只在敘事自然連到當前工程時出現。
11\. 英文不是逐字翻譯；功能、節奏與事實需一致。
12\. 每個頁面在 mobile 上優先閱讀。
12\. 成功標準
成功的網站不是「文字越少越好」。
而是：
\> \\想快的人，可以快。
\> 想深的人，可以一直走下去。\\
一個第一次來的人可以在五秒內知道這裡是什麼。
一個願意留下來的人，可以花十五分鐘真正認識 Manang。
一個陪伴多年的支持者，可以回來看見這個地方如何一年一年長出來。
這就是 Yogini Retreat Manang 網站的內容設計核心。