先讓人想認識自己的角色，
再談規格。

產品規則（已確認）

• 邀請制，初期免費；每人一個專屬角色。
• WhatsApp 是唯一聊天入口；網站負責一切設定，角色只能在網站修改，聊天中不能改設定。
• 角色外貌完全自訂，可上傳參考圖片。
• 長期記憶由 AI 提出建議，用戶確認後才正式保存；未確認不保存，「暫不處理／不保存」都不進入聊天上下文。

視覺方向（已確認）

• A 溫柔陪伴感：奶白、暖灰、淡玫瑰，角色為畫面主角。
• 留白充足、圓角柔和；避免愛心氾濫與高飽和裝飾。
• 字體 Noto Sans TC（標題可用 Noto Serif TC 營造書信感）。
• 角色示意圖一律標「示例」，不是所有用戶的固定角色。

本輪交付（R2）

• 產品預覽：預設開啟的全幅成品預覽，八頁皆可操作（前端模擬）。
• 完整設計：首頁、初次設定、我的角色、記憶確認（桌面＋手機）；邀請、角色設定、外貌、帳戶於 R2 套用同一視覺語言（精簡設計），線框保留為版面與狀態依據。
• 文件：資訊架構、流程與改善建議、狀態清單、設計規範、圖片規範、假設清單——集中於本交接區。
• 管理區屬後續範圍，本輪不繪製。

資訊架構

核心流程

/invite · 線框

邀請碼驗證及登入註冊

• 版面：置中單欄卡片（桌面最大寬 420px），品牌字標→說明→6 格碼輸入→結果訊息→主按鈕→「已有帳號？登入」連結。
• 狀態：輸入中／驗證中（按鈕 loading、輸入鎖定）／無效（紅框＋原因不明說「碼錯誤」與「已失效」的差別由後端回傳）／過期／已被使用／成功（自動前往 /welcome 或登入）。
• 驗證成功後才建立帳號；登入與帳戶復原方式未定案（假設），此頁預留「以註冊方式登入」區塊待決。

依賴假設：邀請碼期限、可用次數、撤銷規則、登入／復原方式皆待 PM 與後端定案；錯誤文案需依後端可區分的失敗原因調整。

/character · 線框

角色設定

• 版面：子導航分三區（基本資料／性格與說話方式／背景與關係）＋外貌跳轉；桌面右欄即時預覽角色卡，手機收合為頂部摘要。
• 狀態：編輯中（標示未儲存）／儲存中／成功（toast＋時間）／失敗（保留輸入＋重試）／離開提醒。角色只能在此與 /appearance 修改，聊天端無設定入口。
• 欄位：角色名字、你的稱呼、性格標籤＋自訂描述、說話方式、背景故事、你們的關係。

依賴假設：性格標籤清單與字數上限待 PM 定案；欄位驗證規則（必填、長度）由後端確認後補入規範。

/appearance · 線框

外貌

• 版面：左上傳區、右即時裁切預覽（3:4），下方外貌描述；桌面雙欄、手機上下堆疊。
• 圖片狀態：未上傳／上傳中（進度＋可取消）／預覽／失敗（原因＋重試，保留已上傳）／替換／刪除（需確認）。裁切與構圖規則見「圖片規範」。
• 生圖未接通：「產生預覽」保持禁用並說明原因；接通後才開放，不預先顯示假結果。

依賴假設：生圖供應商、圖片格式／大小／張數上限、儲存與保存期限皆未定案（Qwen 預定負責圖片，尚待接入）。

/settings · 線框

帳戶

• 版面：單欄清單卡：帳戶資料、WhatsApp 綁定管理、登出；危險操作（若未來有刪除帳號）獨立分區，本輪未定案不繪製。
• 狀態：綁定資訊與 /home 共用同一狀態元件，兩處顯示永遠一致。

依賴假設：登入與帳戶復原方式、WhatsApp 轉綁規則未定案；號碼模式已定案為共用 NANA 官方號碼、依驗證綁定路由（PM 決策），畫面不寫死實際號碼。

色彩 Tokens

• 內文 #302A2C on 背景 = 13.17 : 1；次文字 #71666A = 5.16 : 1；主色 #8A4F60 = 5.84 : 1，白字 on 主色 = 6.24 : 1，全數 ≥ AA（4.5）。
• 小字與連結用深主色 #74404F（7.60 : 1）；狀態色僅用於徽章與圖示，不單獨承載資訊（同時附文字）。
• 深色模式不在 R1 範圍：產品畫面固定淺色（本審閱文件外框有深色適配，框內產品畫面不跟隨）。

字體與間距

• 字體："Noto Sans TC", "Microsoft JhengHei", sans-serif；品牌與主標題可用 Noto Serif TC 600。
• 字級：內文 16px 起（行高 1.7）；頁標題 27–30px / 900；區塊標題 19–20px / 700；說明 14.5–15px；輔助 13–13.5px（不小於 12.5px）。
• 間距：4 的倍數（4/8/12/16/24/32/40）；卡片內距 24px，手機 18px；區塊間距 24–32px；內容最大寬：會員區 1120px、公開頁 1160px。
• 圓角：卡片 20px、輸入框與按鈕 12px、徽章與標籤 999px、圖片 16–20px。
• 觸控：主要操作高度 ≥ 48px，次要 ≥ 40px；手機底部導航圖示＋文字並列。

響應式規則

• ≥1024px：左側欄 248px＋內容雙欄（角色卡 5fr / 資訊 7fr）。
• 768–1023px：側欄收合為圖示列，內容單欄偏寬。
• <768px：底部導航＋單欄；首屏依序為角色名、角色圖、主要操作；表單底部固定操作列。
• 任何寬度不得出現水平捲動；表格類內容改為卡片堆疊。

互動與無障礙

• 所有互動元件可鍵盤操作，:focus-visible 3px 主色外框＋2px 偏移，全站一致。
• 狀態變化（儲存結果、驗證結果、待確認數目）以 aria-live="polite" 播報。
• prefers-reduced-motion 時停用位移動畫與轉場，loading 旋轉降速；不用自動播放動畫。
• 圖片皆有 alt：角色圖寫「角色『小澪』的示例圖像」；純裝飾圖 alt 留空。
• 對話框開啟時焦點移入、Esc 可關閉（不丟失輸入的前提下）。

文案語氣

• 溫柔、具體、低壓：說「尚未綁定 WhatsApp，完成綁定後就能開始聊天」，不說「錯誤！未完成設定」。
• 不確定就說不確定：「目前無法取得服務狀態」優於沉默或假裝正常。
• 避免愛心與誇張語氣詞氾濫；每頁至多一個情感化句子，其餘保持清楚。
• 涉及記憶用「記得／不再記得」的人稱化動詞，讓用戶理解刪除的實際影響。

裝飾圖（品牌氛圍圖）

• 首頁主視覺（R4 槽位）：採客戶選定的 Qwen 寫實圖，檔案位置固定為 assets/hero-realistic.png（1536×1024）。真圖尚未嵌入（PM 本機私有入口），目前為標示清楚的佔位圖；PM 同名覆蓋即替換。裁切焦點以 CSS 變數 --hero-focus-x / --hero-focus-y（預設 50%／30%）控制，桌面橫幅與手機裁切共用同一焦點，臉部完整、文案區與圖層分離不受裁切影響。
• 構圖：半身或胸上景，臉部位於畫面上 1/3，頭頂保留 ≥8% 留白，視線朝向鏡頭或微側。
• 色調：奶白、暖灰、淡玫瑰低飽和背景，避免高對比與深色背景壓過 UI。
• 交付尺寸：主圖 ≥1600×2000（4:5）；同時輸出 3:4 與 1:1 裁切版，文字不入圖。
• 標示：出現在產品畫面時一律附「示例」徽章或圖說，文案避免暗示固定角色。

用戶上傳圖與裁切預覽

角色卡 3:4 預覽

裁切焦點（上下）30% 裁切焦點（左右）50%

• 顯示比例：角色卡 3:4、頭像 1:1、首頁氛圍 4:5；同一原圖以 object-position 焦點裁切，不拉伸變形。
• 安全區：臉部需落在中央 60% 寬 × 上 55% 高的安全區內，三種比例才都不會切臉；上傳時即時預覽三種裁切並可拖移焦點。
• 預設焦點：未偵測到臉部時預設 50% × 30%（偏上），避免切掉頭頂。
• 格式（假設）：JPG/PNG/WebP、單張 ≤10MB、最多 3 張參考圖——待後端與 Qwen 定案後鎖定。

本輪狀態

• 已完成 資訊架構、核心流程與 6 項改善建議。
• 已完成 首頁、初次設定、我的角色、記憶確認：桌面＋手機完整設計與可操作原型。
• 線框 邀請、角色設定、外貌、帳戶：版面、狀態與依賴已定，視覺細化排下一輪。
• 示例 角色「小澪」、用戶「阿哲」、記憶與號碼皆為明標示例資料；新帳戶實際畫面為全空白狀態。
• PM 決策 導航結構、三步精靈、共用官方號碼、記憶四動作、草稿按帳戶保存，已套用到原型與文件（屬 PM 決策，非客戶逐項核准）。
• 未接通 後端、WhatsApp、生圖服務皆未接通；原型互動為前端模擬，不聲稱任何儲存或綁定已可用。
• 已交付 前端原始碼 ZIP（見下方「原始碼下載」區）：index.html 完整來源、原始圖片、資產清單、動效／響應式規則與啟動 README，可本機獨立啟動。

交接分工

• PM：統整需求與範圍、裁決下方待決問題。
• Gemini 4（預定，尚待接入）：技術框架；依本規範 token 與元件實作。
• Qwen（預定，尚待接入）：圖片與介面；依圖片規範交付裝飾圖與裁切元件。
• 後端代理：帳戶、邀請、角色與圖片保存、WhatsApp 綁定、記憶確認與資料隔離。
• 驗收代理：保存後重載一致性、帳號隔離、失敗保留輸入、手機／桌面全流程。

假設與待決（不自行定案）

每項假設定案後，需同步更新：對應畫面文案、狀態清單與本表，並由 PM 在下一輪設計前確認。

本機啟動

• 解壓後在 nana-frontend/ 內執行 python3 -m http.server 8000，瀏覽器開啟 http://localhost:8000；或使用 npx serve . 等任一靜態伺服器。
• 直接開啟 index.html 亦可運作（圖片為相對路徑）；建議用本機伺服器，行為與正式環境一致。
• 無建置步驟、無相依套件；唯一外部載入為 Google Fonts 字體，離線時自動退回系統字體堆疊。
• 在本機開啟的副本中，本區的 ZIP 下載按鈕指向 assets/ 內的同名檔案；將交付 ZIP 放回 assets/ 即可在本機重現下載。其餘頁面功能不受影響。

圖片與字體資產（摘要）

• 圖片：char-mio.webp（1280×1920，約 432 KB）、char-yuzu.webp（1120×2240，約 350 KB），原始解析度隨 ZIP 附上供檢視；另有 hero-realistic.png（1536×1024）為首頁主視覺槽位佔位圖——Qwen 真圖未嵌入（PM 本機私有入口無法存取），PM 以真圖同名覆蓋即替換。
• 示例圖僅作展示：角色的名字、性格與外貌完全由用戶自訂，示例圖不是固定角色，也不是等待批准的項目。
• 字體：Noto Sans TC（400／500／700／900）與 Noto Serif TC（600／700），經 Google Fonts CDN 載入，未隨包字體檔；後備堆疊為 "Microsoft JhengHei", system-ui, sans-serif。需自託管時，README 有改法。

接後端說明

• 目前所有互動皆為前端模擬：邀請驗證、草稿保存、圖片上傳、WhatsApp 綁定、記憶確認均未連接後端；畫面上的成功訊息一律冠以「設計示意」。
• 串接點集中在 index.html 的狀態物件與 data-act 動作委派；README.md 列出每個功能預期的 API 邊界與狀態欄位。後端實作後將模擬分支換為實際請求即可，畫面結構與狀態語義不需改動。
• WhatsApp 綁定採共用 NANA 官方號碼、依驗證綁定路由（PM 決策）；來源內不寫死實際號碼。