fuzzyplace/living-stage

居住舞台：引導式設定

你正在協助某人建立這個網站的個人版本：一個擁有自己生命的墨水角色，他的手臂會在頁面滾動時列印出來，故事以他自己的話語呈現。引擎已經準備好了。你的工作是複製它、訪談他們，並填入五個地方。不要撰寫引擎程式碼。

屬於他們的五個地方

什麼內容	檔案位置
文字：姓名、標語、章節、行動呼籲、彩蛋	src/content/site.ts
連結樹中的連結	src/content/links.ts
角色的外觀	src/content/character.tsx（預設樣式在 src/art/looks.tsx）
調色盤、字型、動畫	design/tokens.json，鏡像於 src/styles/tokens.css
分享圖片與圖示	npm run og（從上述內容產生）

你也將訪談的決定寫入 docs/STORY.md，並且可以讀取 src/art/looks.tsx 以將預設樣式複製到 src/content/character.tsx。

其他所有內容（src/art/、src/audio/、src/components/、src/sections/、src/App.tsx）都是引擎。為了完成這項工作，請不要讀取它們；它們很大且你不需要。在觸碰 token 之前，請先閱讀 docs/CHARACTER.md 以了解外觀和標題規則，以及 docs/DESIGN_SYSTEM.md。只有在檢查失敗且錯誤指向那裡時，才開啟引擎檔案。

步驟 0：取得程式碼（快速，無需生成）

如果當前資料夾已經是模板的副本（它包含 src/content/site.ts 和 .claude/skills/living-stage/），請跳至步驟 1。

否則，詢問新網站應放置的位置（一個資料夾名稱），然後複製模板（不含其歷史記錄）並進行安裝：

npx degit fuzzyplace/lil_guy_portfolio my-site
cd my-site
git init
npm install

然後啟動開發伺服器（npm run dev，或者如果你有預覽工具也可以使用），並向他們展示範例網站，讓他們了解自己在做什麼。如果你無法執行或查看開發伺服器，請改用螢幕截圖：npm run build && npm run verify 會寫入 screenshots/verify-desktop-hero.png（英雄區，進行特技）等檔案，而 npm run looks 會寫入每種外觀的特寫。（第一次使用：npx playwright install chromium。）用兩行告訴他們接下來會發生什麼：一個簡短的訪談，一次一個問題，然後你建置它、檢查它，並（在他們同意下）部署它。

步驟 1：訪談

如何決定（這點最重要）

由上而下，一次決定一層，在上層未鎖定之前，絕不詢問下層。在故事和語調尚未確定前就完成視覺設計，會導致文案不通順。

1. 意圖： 網站是為誰而設、他們應該感受到什麼、以及最後他們應該做什麼。
2. 故事： 從上到下的滾動弧線。
3. 文案風格： 語調、句子結構、框架裝置。
4. 結構： 區塊（章節、彈出式視窗、聯絡方式）以及每個區塊的用途。
5. 台詞： 實際的文字，先從標語開始。
6. 角色： 他看起來像什麼。
7. 調色盤、字型與動畫。
8. 連結： 連結樹和行動呼籲。

將每個鎖定的層級寫入 docs/STORY.md 的 "LOCKED" 部分（在進行過程中替換範例人物條目）。下方所有內容都必須追溯回它。如果後來的想法與已鎖定的層級矛盾，請指出並在更改任何內容之前詢問。

如何提問

• 一次一個問題，以純文字聊天形式發送。不要使用多問題表單或對話框。
• 在每個問題之前，用一行說明它決定了什麼以及它會更改頁面上的哪些內容。
• 展示，而非描述。 對於風格和外觀問題，提供 3 或 4 個選項，每個選項都以其真實內容書寫：每次使用相同的三個時刻（開場、一個章節、結尾）。對於角色，展示預設樣式（在開發伺服器上使用 ?look=beanie|bun|hood|bot，或使用 npm run looks 取得特寫）。對於調色盤，在背景上顯示帶有文字顏色的色票。
• 推薦一個選項並說明原因，用一句話。他們可以選擇、混合或提出反對。
• 在每個回答之後，用一行重新陳述現在鎖定的內容，將其寫入 docs/STORY.md，然後詢問下一個問題。
• 「你決定」 表示你來決定，將其記錄在 docs/STORY.md 的 "Decisions" 下，然後繼續進行。
• 保持成本意識：不要重新讀取你已經讀過的檔案，不要為每個答案重新生成整個網站，只編輯已更改的行。

要問什麼，一層一層來

1. 意圖。 這是為誰而設（招聘經理、客戶、合作者、朋友）？他們應該感受到什麼？最後他們應該做的一件事是什麼（發送電子郵件、預約通話、追蹤、什麼都不做）？
2. 故事。 首先詢問原始材料（他們做過什麼、現在在做什麼、接下來想要什麼、他們在業餘時間做了什麼），然後用一句話提出 2 或 3 個弧線。預設弧線是過去、現在、一個帶有主線的彈出式視窗、未來、聯絡；章節和彈出式視窗的任何順序都可以。
3. 文案風格。 提供 3 或 4 種語氣，並根據他們自己的材料呈現，例如：安靜的第一人稱；實驗室筆記本；田野筆記；終端機日誌；或混合體。推薦一個。
4. 結構。 區塊列表，每個區塊用一句話說明其用途，另外哪些區塊會出現在頂部導航中。其中一個區塊必須是聯絡區塊。
5. 台詞。 以鎖定的語氣起草每一句台詞，然後在上下文中一併向他們展示（在撰寫 site.ts 後，使用開發伺服器）。首先把標語弄對：閱讀 docs/CHARACTER.md 中的「標題」（2 到 4 行短句，第一行是一個真實的單詞，高字母旁邊是矮字母，行尾有逗號；每行最多 24 個字元）。此外：眉毛、開場白、頁腳彩蛋、控制台彩蛋、兩行信任文字、404 提示文字。草稿文案也可以；在他們批准之前，不會發布任何內容。
6. 角色。 展示四個預設樣式。如果沒有適合的，請他們用一句話描述（頭髮或帽子、衣服、吸引光線的那個東西），然後透過將最接近的預設樣式複製到 src/content/character.tsx 並一次更改一個形狀來繪製自訂外觀。遵循 docs/CHARACTER.md 中的盒狀、關節和填充規則。絕對不要描繪照片或真人的肖像，除非那是他們自己的並且他們要求這樣做。預設樣式共用 parts.NECK 和 parts.SKULL（從 src/art/looks.tsx 匯出）。使用 npm run looks 顯示結果（screenshots/look-current.png）。
7. 調色盤、字型與動畫。 提供 3 個色票作為調色盤（預設的墨水灰色，以及兩個符合他們故事的色票）、強調色，以及是否保留預設字型。首先編輯 design/tokens.json，將你更改的每個顏色鏡像到 src/styles/tokens.css（只有灰色階梯在那裡有 --md-ref-gray-* 變數；其他每個顏色都直接放在其 --md-sys-color-<role> 上），然後執行 npm run tokens:contrast：它會檢查文字對比度（4.5:1）以及兩個檔案是否一致。霧氣（fog-light、fog-mid、fog-deep、fog-edge）承載調色盤的情緒：對所有四個進行著色。保持強調色低調（docs/DESIGN_SYSTEM.md）。動畫：預設持續時間或更平靜（更長）的持續時間。
8. 連結。 詢問每個連結及其去處（Connect、Work、Play 或重新命名的分組）。僅限真實 URL：他們尚未擁有的任何內容都是 href: null, status: 'soon'（在開發中顯示，在生產環境中隱藏）。然後是行動呼籲：預約連結、電子郵件或個人檔案連結。

步驟 2：建置與檢查

1. 根據已鎖定的內容撰寫內容檔案。將 site.url 設定為網站將存放的位置（https://host，無結尾斜線）。還沒有網域：使用主機的地址（例如 https://their-site.vercel.app）並稍後更新。
2. 執行 npm run check（類型檢查、測試包括文案規則、對比度和 token 漂移、建置）。修復任何失敗。當 site.url 仍指向模板的演示（lil-guy-portfolio.vercel.app）或行動呼籲指向 example.com 時，建置會發出警告。文案規則：沒有 em 或 en 破折號、沒有驚嘆號、沒有庫存填充詞。
3. 執行 npm run og 以產生分享卡片和圖示。
4. 執行 npm run build && npm run verify（第一次使用：npx playwright install chromium）。它會檢查在 1440 和 375 解析度下，有無減少動畫模式，角色是否在載入時出現、執行入場和標題特技、在滾動時保持在螢幕上，以及沒有發生錯誤。如果沒有播放特技，表示標語沒有給他立足點：與他們重新審視標語。
5. 向他們展示螢幕截圖（screenshots/verify-desktop-hero.png 和 verify-mobile-hero.png 用於英雄區進行特技，verify-desktop.png 和 verify-mobile.png 用於頁面結尾）和開發伺服器，並詢問需要更改什麼。循環直到他們滿意。node scripts/shots-sections.mjs 會為每個章節提供一張截圖。
6. 隱私審查。 再次閱讀 src/content/ 中的每個字串。標記任何他們可能不希望公開的內容：家庭住址、他們未選擇分享的個人電話或電子郵件、家庭或健康詳細資訊、他們尚未批准的雇主或客戶。移除範例人物的殘留物：「Pim Lanternby」、「PIM」、「The Quiet Hour」、燈和收音機的台詞以及任何他們自己未提供的 example.com、example.org 或 example.net 連結，以及演示地址 lil-guy-portfolio.vercel.app。

步驟 3：部署

部署會發布他們的網站，所以在執行之前要先詢問。請遵循 docs/DEPLOY.md（預設為 Vercel；Netlify 和 GitHub Pages 也可以）。部署上線後，開啟 URL，使用已部署的 og.png 檢查分享卡片，然後提供他們連結。

最後提供一個簡短摘要：哪些內容已上線、哪些還是 soon，以及他們說過稍後會提供的任何內容。