From 29014b6a57cb6451039fe509d19f446450a8536a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=B3=E6=AC=A3=E6=80=A1?= <ms.mandy610425@gmail.com>
Date: Fri, 27 Mar 2026 15:47:24 +0800
Subject: [PATCH 01/18] refactor: consolidate design folders under design/
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- design-system/ → design/system/
- pencil/        → design/wireframes/
- prototype/     → design/prototype/

Update all path references in CLAUDE.md, SKILL.md,
scripts/pencil-save.sh, and design/system/MASTER.md.

NOTE: Pencil app repository path must be updated to
design/wireframes/ in Windsurf settings.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .claude/skills/ui-ux-pro-max/SKILL.md               |  10 +++++-----
 CLAUDE.md                                           |   8 ++++----
 {prototype => design/prototype}/index.html          |   0
 .../prototype}/pages/dashboard.html                 |   0
 {prototype => design/prototype}/pages/login.html    |   0
 {design-system => design/system}/MASTER.md          |   2 +-
 .../wireframes}/assets/icon-google.png              | Bin
 .../wireframes}/assets/icon-google.svg              |   0
 {pencil => design/wireframes}/design-system.pen     |   0
 {pencil => design/wireframes}/index.pen             |   0
 {pencil => design/wireframes}/pages/dashboard.pen   |   0
 .../wireframes}/pages/images/icon-google.png        | Bin
 {pencil => design/wireframes}/pages/login.pen       |   0
 scripts/pencil-save.sh                              |   6 +++---
 14 files changed, 13 insertions(+), 13 deletions(-)
 rename {prototype => design/prototype}/index.html (100%)
 rename {prototype => design/prototype}/pages/dashboard.html (100%)
 rename {prototype => design/prototype}/pages/login.html (100%)
 rename {design-system => design/system}/MASTER.md (98%)
 rename {pencil => design/wireframes}/assets/icon-google.png (100%)
 rename {pencil => design/wireframes}/assets/icon-google.svg (100%)
 rename {pencil => design/wireframes}/design-system.pen (100%)
 rename {pencil => design/wireframes}/index.pen (100%)
 rename {pencil => design/wireframes}/pages/dashboard.pen (100%)
 rename {pencil => design/wireframes}/pages/images/icon-google.png (100%)
 rename {pencil => design/wireframes}/pages/login.pen (100%)

diff --git a/.claude/skills/ui-ux-pro-max/SKILL.md b/.claude/skills/ui-ux-pro-max/SKILL.md
index 19b2096..c50de09 100644
--- a/.claude/skills/ui-ux-pro-max/SKILL.md
+++ b/.claude/skills/ui-ux-pro-max/SKILL.md
@@ -158,8 +158,8 @@ python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persi
 ```
 
 This creates:
-- `design-system/MASTER.md` — Global Source of Truth with all design rules
-- `design-system/pages/` — Folder for page-specific overrides
+- `design/system/MASTER.md` — Global Source of Truth with all design rules
+- `design/system/pages/` — Folder for page-specific overrides
 
 **With page-specific override:**
 ```bash
@@ -167,12 +167,12 @@ python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persi
 ```
 
 This also creates:
-- `design-system/pages/dashboard.md` — Page-specific deviations from Master
+- `design/system/pages/dashboard.md` — Page-specific deviations from Master
 
 **How hierarchical retrieval works:**
-1. When building a specific page (e.g., "Checkout"), first check `design-system/pages/checkout.md`
+1. When building a specific page (e.g., "Checkout"), first check `design/system/pages/checkout.md`
 2. If the page file exists, its rules **override** the Master file
-3. If not, use `design-system/MASTER.md` exclusively
+3. If not, use `design/system/MASTER.md` exclusively
 
 ### Step 3: Supplement with Detailed Searches (as needed)
 
diff --git a/CLAUDE.md b/CLAUDE.md
index 0975f61..4c34243 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -113,8 +113,8 @@ label-suite/
 - **Traditional Chinese allowed** in the following locations, to accelerate development iteration:
   - `docs/` — all research, thesis, and design documentation
   - `specs/` — all SDD spec files (`spec.md`, `plan.md`, `tasks.md`, `checklists/`)
-  - `prototype/` — HTML/CSS UI prototypes demonstrating bilingual (zh-TW/en) features
-  - `pencil/` — Pencil wireframe files (`.pen`) demonstrating bilingual (zh-TW/en) UI designs
+  - `design/prototype/` — HTML/CSS UI prototypes demonstrating bilingual (zh-TW/en) features
+  - `design/wireframes/` — Pencil wireframe files (`.pen`) demonstrating bilingual (zh-TW/en) UI designs
 - `README.zh-TW.md` is maintained in Traditional Chinese for Chinese-speaking users.
 - All conversations with Claude should be responded to in Traditional Chinese.
 
@@ -205,7 +205,7 @@ This project adopts Spec-Driven Development (SDD). New features should follow th
 
 ```
 /speckit.specify <feature description>  → specs/NNN-feature/spec.md
-/ui-ux-pro-max                          → prototype/ + design-system/  (optional, UI-heavy features)
+/ui-ux-pro-max                          → design/prototype/ + design/system/  (optional, UI-heavy features)
 /speckit.clarify                        → clarify requirements          (optional; prototype surfaces ambiguities)
 /speckit.plan                           → specs/NNN-feature/plan.md
 /speckit.tasks                          → specs/NNN-feature/tasks.md
@@ -266,7 +266,7 @@ All development must follow the six core principles in [constitution.md](.specif
 3. **Data Fairness** (NON-NEGOTIABLE) — prevent test-set answer leakage
 4. **Test-First / TDD** (RECOMMENDED) — pytest 80%+ coverage, Playwright for core flows; all agents must follow Red-Green-Refactor (see [ADR-009](docs/adr/009-testing-strategy.md))
 5. **Simplicity** — YAGNI, KISS, avoid over-engineering
-6. **English-First** — code, comments, and commit messages in English; Traditional Chinese allowed in `docs/`, `specs/`, `prototype/`, and `pencil/`
+6. **English-First** — code, comments, and commit messages in English; Traditional Chinese allowed in `docs/`, `specs/`, `design/prototype/`, and `design/wireframes/`
 
 ---
 
diff --git a/prototype/index.html b/design/prototype/index.html
similarity index 100%
rename from prototype/index.html
rename to design/prototype/index.html
diff --git a/prototype/pages/dashboard.html b/design/prototype/pages/dashboard.html
similarity index 100%
rename from prototype/pages/dashboard.html
rename to design/prototype/pages/dashboard.html
diff --git a/prototype/pages/login.html b/design/prototype/pages/login.html
similarity index 100%
rename from prototype/pages/login.html
rename to design/prototype/pages/login.html
diff --git a/design-system/MASTER.md b/design/system/MASTER.md
similarity index 98%
rename from design-system/MASTER.md
rename to design/system/MASTER.md
index 95dc506..99ca027 100644
--- a/design-system/MASTER.md
+++ b/design/system/MASTER.md
@@ -1,6 +1,6 @@
 # Design System Master File
 
-> **LOGIC:** When building a specific page, first check `design-system/pages/[page-name].md`.
+> **LOGIC:** When building a specific page, first check `design/system/pages/[page-name].md`.
 > If that file exists, its rules **override** this Master file.
 > If not, strictly follow the rules below.
 
diff --git a/pencil/assets/icon-google.png b/design/wireframes/assets/icon-google.png
similarity index 100%
rename from pencil/assets/icon-google.png
rename to design/wireframes/assets/icon-google.png
diff --git a/pencil/assets/icon-google.svg b/design/wireframes/assets/icon-google.svg
similarity index 100%
rename from pencil/assets/icon-google.svg
rename to design/wireframes/assets/icon-google.svg
diff --git a/pencil/design-system.pen b/design/wireframes/design-system.pen
similarity index 100%
rename from pencil/design-system.pen
rename to design/wireframes/design-system.pen
diff --git a/pencil/index.pen b/design/wireframes/index.pen
similarity index 100%
rename from pencil/index.pen
rename to design/wireframes/index.pen
diff --git a/pencil/pages/dashboard.pen b/design/wireframes/pages/dashboard.pen
similarity index 100%
rename from pencil/pages/dashboard.pen
rename to design/wireframes/pages/dashboard.pen
diff --git a/pencil/pages/images/icon-google.png b/design/wireframes/pages/images/icon-google.png
similarity index 100%
rename from pencil/pages/images/icon-google.png
rename to design/wireframes/pages/images/icon-google.png
diff --git a/pencil/pages/login.pen b/design/wireframes/pages/login.pen
similarity index 100%
rename from pencil/pages/login.pen
rename to design/wireframes/pages/login.pen
diff --git a/scripts/pencil-save.sh b/scripts/pencil-save.sh
index 3204f91..a6cf3ee 100755
--- a/scripts/pencil-save.sh
+++ b/scripts/pencil-save.sh
@@ -2,8 +2,8 @@
 # pencil-save.sh — Save the active Pencil document to a project path.
 #
 # Usage:
-#   ./scripts/pencil-save.sh pencil/design-system.pen
-#   ./scripts/pencil-save.sh pencil/pages/dashboard.pen
+#   ./scripts/pencil-save.sh design/wireframes/design-system.pen
+#   ./scripts/pencil-save.sh design/wireframes/pages/dashboard.pen
 #
 # IMPORTANT — when to use this script:
 #   ✅ Use for NEW documents (open_document("new") → batch_design → pencil-save.sh)
@@ -21,7 +21,7 @@
 set -euo pipefail
 
 if [ $# -lt 1 ]; then
-  echo "Usage: $0 <target-path>  (relative to project root, e.g. pencil/design-system.pen)" >&2
+  echo "Usage: $0 <target-path>  (relative to project root, e.g. design/wireframes/design-system.pen)" >&2
   exit 1
 fi
 

From c7117d2df3a9556064836b90ef533882f371ebe3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=B3=E6=AC=A3=E6=80=A1?= <ms.mandy610425@gmail.com>
Date: Fri, 27 Mar 2026 16:27:21 +0800
Subject: [PATCH 02/18] docs: update CLAUDE.md wording and add profile
 spec/prototype

- Fix: translate prototype QA description to English
- Add design/prototype/pages/profile.html
- Add specs/002-profile-settings/spec.md

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 CLAUDE.md                           |  16 +-
 design/prototype/pages/profile.html | 516 ++++++++++++++++++++++++++++
 specs/002-profile-settings/spec.md  |  70 ++++
 3 files changed, 601 insertions(+), 1 deletion(-)
 create mode 100644 design/prototype/pages/profile.html
 create mode 100644 specs/002-profile-settings/spec.md

diff --git a/CLAUDE.md b/CLAUDE.md
index 4c34243..7bb053d 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -206,6 +206,8 @@ This project adopts Spec-Driven Development (SDD). New features should follow th
 ```
 /speckit.specify <feature description>  → specs/NNN-feature/spec.md
 /ui-ux-pro-max                          → design/prototype/ + design/system/  (optional, UI-heavy features)
+/senior-uiux review                     → prototype QA: design system compliance + accessibility  (optional, after prototype)
+/pencil wireframe                       → pencil/pages/[page].pen  (optional, after senior-uiux review)
 /speckit.clarify                        → clarify requirements          (optional; prototype surfaces ambiguities)
 /speckit.plan                           → specs/NNN-feature/plan.md
 /speckit.tasks                          → specs/NNN-feature/tasks.md
@@ -250,6 +252,8 @@ The deciding question is: **will this change make the system behave differently
 |---|---|
 | `/speckit.specify` | Create feature spec from natural language description |
 | `/ui-ux-pro-max` | Generate HTML prototype + design system (optional; run after specify, before clarify) |
+| `senior-uiux review` | Review prototype for design system compliance, a11y, ZH/EN symmetry (optional; run after ui-ux-pro-max) |
+| `pencil wireframe` | Draw ZH + EN wireframe frames in `pencil/pages/[page].pen` via Pencil MCP (optional; run after senior-uiux review) |
 | `/speckit.clarify` | Identify and clarify ambiguous requirements (prototype helps surface these) |
 | `/speckit.plan` | Build technical implementation plan |
 | `/speckit.tasks` | Generate executable task list |
@@ -257,6 +261,14 @@ The deciding question is: **will this change make the system behave differently
 | `/speckit.implement` | Execute implementation — single session (bug fix / single-layer) or Agent Team (new feature) |
 | `/speckit.checklist` | Generate quality validation checklist |
 
+### Pencil Wireframe Convention
+
+- Each page wireframe is stored as a separate file under `pencil/pages/[page-name].pen` (e.g. `login.pen`, `profile.pen`)
+- `pencil/index.pen` is for overview purposes only — **do not** place page wireframe frames inside it
+- Each `.pen` file contains two side-by-side frames: Desktop ZH (`x:0`) and Desktop EN (`x:1500`)
+- `.pen` files are encrypted — **only operate via Pencil MCP tools**; never use `Read` / `Edit` / `Grep` on them
+- Draw the ZH frame first, then the EN frame, keeping structure symmetric between the two
+
 ### Constitution Reference
 
 All development must follow the six core principles in [constitution.md](.specify/memory/constitution.md):
@@ -287,7 +299,9 @@ All development must follow the six core principles in [constitution.md](.specif
 /speckit.specify
   → [/ui-ux-pro-max] (optional) — HTML prototype + design system
                                    Use to surface UI ambiguities before clarify
-  → /speckit.clarify (optional)   Prototype makes ambiguities concrete
+  → [senior-uiux review]         Review prototype: design system compliance, a11y, ZH/EN symmetry
+  → [pencil wireframe]           Draw ZH + EN frames in pencil/pages/[page].pen via Pencil MCP
+  → /speckit.clarify (optional)  Prototype makes ambiguities concrete
 
   [Optional: Research Agents] — spawn before /speckit.plan for complex features
   (read-only, parallel, skip for simple/single-layer features)
diff --git a/design/prototype/pages/profile.html b/design/prototype/pages/profile.html
new file mode 100644
index 0000000..e342f10
--- /dev/null
+++ b/design/prototype/pages/profile.html
@@ -0,0 +1,516 @@
+<!DOCTYPE html>
+<html lang="zh-TW">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>個人設定 — Label Suite</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Crimson+Pro:wght@400;500;600;700&display=swap" rel="stylesheet" />
+  <script>
+    tailwind.config = {
+      theme: {
+        extend: {
+          colors: {
+            primary:   '#6366F1',
+            secondary: '#818CF8',
+            cta:       '#10B981',
+            surface:   '#F5F3FF',
+            ink:       '#1E1B4B',
+          },
+          fontFamily: {
+            heading: ['"Crimson Pro"', 'serif'],
+            body:    ['"Atkinson Hyperlegible"', 'sans-serif'],
+          },
+        },
+      },
+    }
+  </script>
+  <style>
+    body { font-family: 'Atkinson Hyperlegible', sans-serif; }
+    h1, h2, h3 { font-family: 'Crimson Pro', serif; }
+    @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
+
+    /* Tooltip */
+    .tooltip-wrap { position: relative; display: inline-flex; }
+    .tooltip-wrap .tooltip {
+      visibility: hidden; opacity: 0;
+      position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
+      background: #1E1B4B; color: #fff; font-size: 11px; white-space: nowrap;
+      padding: 4px 8px; border-radius: 6px;
+      transition: opacity 150ms ease;
+      pointer-events: none; z-index: 50;
+    }
+    .tooltip-wrap .tooltip::after {
+      content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
+      border: 4px solid transparent; border-top-color: #1E1B4B;
+    }
+    .tooltip-wrap:hover .tooltip,
+    .tooltip-wrap:focus-within .tooltip { visibility: visible; opacity: 1; }
+
+    /* Avatar upload hover overlay */
+    .avatar-wrap:hover .avatar-overlay { opacity: 1; }
+  </style>
+</head>
+
+<body class="bg-surface min-h-screen flex flex-col">
+
+  <!-- ── Top Navbar ── -->
+  <header class="h-14 bg-white border-b border-slate-200 flex items-center px-6 shrink-0" role="banner">
+    <div class="flex items-center gap-3 flex-1">
+      <!-- Logo -->
+      <a href="dashboard.html" class="flex items-center gap-2.5 group focus:outline-none" aria-label="Label Suite — 回首頁">
+        <div class="w-8 h-8 bg-primary rounded-lg flex items-center justify-center group-hover:bg-secondary transition-colors duration-200">
+          <svg class="w-4.5 h-4.5 text-white" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"/>
+            <line x1="7" y1="7" x2="7.01" y2="7"/>
+          </svg>
+        </div>
+        <h1 class="text-lg font-bold text-ink leading-none">Label Suite</h1>
+      </a>
+    </div>
+
+    <!-- Right: Language toggle + Avatar -->
+    <div class="flex items-center gap-3">
+      <button id="lang-toggle" onclick="toggleLang()"
+              class="flex items-center gap-1.5 text-xs font-medium text-slate-500 hover:text-primary border border-slate-200 bg-white rounded-full px-3 py-1.5 cursor-pointer transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
+              aria-label="Switch language / 切換語言">
+        <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <circle cx="12" cy="12" r="10"/>
+          <line x1="2" y1="12" x2="22" y2="12"/>
+          <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
+        </svg>
+        <span id="lang-label">EN</span>
+      </button>
+      <!-- User avatar (nav) -->
+      <div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center text-white text-xs font-bold select-none" aria-hidden="true">
+        MC
+      </div>
+    </div>
+  </header>
+
+  <!-- ── App Shell ── -->
+  <div class="flex flex-1 min-h-0">
+
+    <!-- ── Sidebar ── -->
+    <aside class="w-56 bg-white border-r border-slate-200 flex flex-col shrink-0 py-4">
+      <nav class="flex flex-col gap-0.5 px-3" aria-label="主選單">
+
+        <!-- Dashboard -->
+        <a href="dashboard.html"
+           class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm text-slate-500 hover:bg-surface hover:text-ink cursor-pointer transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary"
+           data-i18n-aria-label="aria-nav-dashboard">
+          <svg class="w-4 h-4 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/>
+            <rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/>
+          </svg>
+          <span data-i18n="nav-dashboard">儀表板</span>
+        </a>
+
+        <!-- Divider -->
+        <div class="h-px bg-slate-100 my-2 mx-3"></div>
+
+        <!-- Profile Settings — active -->
+        <a href="#"
+           class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm font-medium text-primary bg-surface cursor-pointer focus:outline-none focus:ring-2 focus:ring-primary"
+           aria-current="page" data-i18n-aria-label="aria-nav-profile">
+          <svg class="w-4 h-4 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
+            <circle cx="12" cy="7" r="4"/>
+          </svg>
+          <span data-i18n="nav-profile">個人設定</span>
+        </a>
+
+      </nav>
+    </aside>
+
+    <!-- ── Main Content ── -->
+    <main class="flex-1 overflow-y-auto p-8" role="main">
+      <div class="max-w-xl mx-auto">
+
+        <!-- Page heading -->
+        <div class="mb-6">
+          <h2 class="text-2xl font-bold text-ink" data-i18n="page-title">個人設定</h2>
+          <p class="text-sm text-slate-500 mt-1" data-i18n="page-desc">管理您的帳號資訊與顯示偏好。</p>
+        </div>
+
+        <!-- ── Toast (hidden by default) ── -->
+        <div id="toast" role="status" aria-live="polite"
+             class="hidden mb-5 flex items-center gap-2 text-sm rounded-lg px-4 py-3 border">
+          <svg id="toast-icon" class="w-4 h-4 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"></svg>
+          <span id="toast-text" class="flex-1"></span>
+          <button type="button" onclick="document.getElementById('toast').classList.add('hidden')"
+                  class="ml-2 shrink-0 opacity-60 hover:opacity-100 cursor-pointer transition-opacity duration-150 focus:outline-none focus:ring-2 focus:ring-current rounded"
+                  aria-label="關閉通知" data-i18n-aria-label="aria-toast-close">
+            <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+              <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
+            </svg>
+          </button>
+        </div>
+
+        <!-- ── Profile Card ── -->
+        <div class="bg-white border border-slate-200 rounded-2xl p-8 flex flex-col gap-6">
+
+          <!-- Avatar section -->
+          <div class="flex items-center gap-5">
+            <div class="relative avatar-wrap cursor-pointer group" onclick="document.getElementById('avatar-input').click()" role="button" tabindex="0"
+                 aria-label="上傳頭像" data-i18n-aria-label="aria-avatar" aria-describedby="avatar-error"
+                 onkeydown="if(event.key==='Enter'||event.key===' ')document.getElementById('avatar-input').click()">
+              <!-- Avatar circle -->
+              <div id="avatar-preview"
+                   class="w-20 h-20 rounded-full bg-primary flex items-center justify-center text-white text-2xl font-bold select-none overflow-hidden border-2 border-slate-100"
+                   aria-hidden="true">
+                MC
+              </div>
+              <!-- Hover overlay -->
+              <div class="avatar-overlay absolute inset-0 rounded-full bg-ink/50 flex items-center justify-center opacity-0 transition-opacity duration-200">
+                <svg class="w-6 h-6 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+                  <polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/>
+                </svg>
+              </div>
+              <!-- Hidden file input -->
+              <input id="avatar-input" type="file" accept="image/jpeg,image/png,image/webp" class="hidden"
+                     aria-label="選擇頭像圖片" onchange="previewAvatar(event)" />
+            </div>
+            <div>
+              <p class="text-sm font-medium text-ink" data-i18n="avatar-label">個人頭像</p>
+              <p class="text-xs text-slate-500 mt-0.5" data-i18n="avatar-hint">JPG、PNG 或 WebP，最大 5 MB</p>
+              <p id="avatar-error" class="hidden text-xs text-red-500 mt-1" role="alert"></p>
+            </div>
+          </div>
+
+          <div class="h-px bg-slate-100"></div>
+
+          <!-- Form fields -->
+          <div class="flex flex-col gap-5">
+
+            <!-- Display Name -->
+            <div class="flex flex-col gap-1.5">
+              <label for="display-name" class="text-sm font-medium text-ink" data-i18n="label-name">顯示名稱</label>
+              <input id="display-name" type="text" value="Mandy Chen"
+                     maxlength="50"
+                     class="w-full border border-slate-200 rounded-lg px-3 py-2.5 text-sm text-ink bg-white placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary transition-colors duration-200"
+                     data-i18n-placeholder="placeholder-name"
+                     aria-describedby="name-hint"
+                     onblur="validateName(this)" />
+              <p id="name-hint" class="text-xs text-slate-500" data-i18n="hint-name">最多 50 個字元</p>
+              <p id="name-error" class="hidden text-xs text-red-500" role="alert" data-i18n="error-name-empty">顯示名稱不得為空白。</p>
+            </div>
+
+            <!-- Email (read-only) -->
+            <div class="flex flex-col gap-1.5">
+              <div class="flex items-center gap-1.5">
+                <label for="email" class="text-sm font-medium text-ink" data-i18n="label-email">Email</label>
+                <!-- Info tooltip -->
+                <div class="tooltip-wrap" tabindex="0" aria-describedby="email-tooltip-text">
+                  <svg class="w-3.5 h-3.5 text-slate-400 cursor-default" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    <circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/>
+                  </svg>
+                  <span id="email-tooltip-text" class="tooltip" data-i18n="tooltip-email">Email 由 SSO 帳號管理，無法在此修改。</span>
+                </div>
+              </div>
+              <input id="email" type="email" value="mandy.chen@example.edu" readonly
+                     class="w-full border border-slate-100 rounded-lg px-3 py-2.5 text-sm text-slate-500 bg-slate-50 cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-slate-300"
+                     aria-readonly="true" />
+            </div>
+
+            <!-- Role (read-only badge) -->
+            <div class="flex flex-col gap-1.5">
+              <span class="text-sm font-medium text-ink" data-i18n="label-role">角色</span>
+              <div class="flex items-center gap-2">
+                <span id="role-badge"
+                      class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium bg-primary/10 text-primary border border-primary/20">
+                  <svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
+                  </svg>
+                  <span data-i18n="role-admin">管理員</span>
+                </span>
+                <span class="text-xs text-slate-500" data-i18n="role-hint">角色由系統管理員指派。</span>
+              </div>
+            </div>
+
+            <!-- Language Preference -->
+            <div class="flex flex-col gap-1.5">
+              <span class="text-sm font-medium text-ink" data-i18n="label-lang">介面語言</span>
+              <div class="flex items-center gap-1 p-1 bg-slate-100 rounded-lg w-fit" role="tablist" aria-label="介面語言">
+                <button id="lang-zh" type="button" onclick="setLangPref('zh-TW')"
+                        class="px-4 py-1.5 rounded-md text-sm font-medium cursor-pointer transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1"
+                        role="tab" aria-selected="true" title="繁體中文 (Traditional Chinese)">
+                  ZH
+                </button>
+                <button id="lang-en" type="button" onclick="setLangPref('en')"
+                        class="px-4 py-1.5 rounded-md text-sm font-medium cursor-pointer transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1"
+                        role="tab" aria-selected="false" title="English">
+                  EN
+                </button>
+              </div>
+              <p class="text-xs text-slate-500" data-i18n="hint-lang">切換後立即套用，並儲存至帳號設定。</p>
+            </div>
+
+          </div>
+
+          <div class="h-px bg-slate-100"></div>
+
+          <!-- Save button -->
+          <div class="flex items-center justify-between">
+            <p class="text-xs text-slate-400" data-i18n="last-saved">上次儲存：2026-03-27 14:32</p>
+            <button type="button" onclick="saveProfile()"
+                    id="save-btn"
+                    class="flex items-center gap-2 bg-cta hover:bg-cta/90 hover:-translate-y-px text-white text-sm font-medium rounded-lg px-5 py-2.5 cursor-pointer transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-cta focus:ring-offset-2"
+                    aria-label="儲存個人設定" data-i18n-aria-label="aria-save-btn">
+              <svg id="save-icon" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
+                <polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/>
+              </svg>
+              <span data-i18n="btn-save">儲存變更</span>
+            </button>
+          </div>
+
+        </div>
+        <!-- /Profile Card -->
+
+      </div>
+    </main>
+    <!-- /Main Content -->
+
+  </div>
+  <!-- /App Shell -->
+
+
+  <!-- ── i18n + Logic ── -->
+  <script>
+    const STRINGS = {
+      'zh-TW': {
+        'page-title':      '個人設定',
+        'page-desc':       '管理您的帳號資訊與顯示偏好。',
+        'nav-dashboard':   '儀表板',
+        'nav-profile':     '個人設定',
+        'avatar-label':    '個人頭像',
+        'avatar-hint':     'JPG、PNG 或 WebP，最大 5 MB',
+        'label-name':      '顯示名稱',
+        'placeholder-name':'輸入顯示名稱',
+        'hint-name':       '最多 50 個字元',
+        'error-name-empty':'顯示名稱不得為空白。',
+        'label-email':     'Email',
+        'tooltip-email':   'Email 由 SSO 帳號管理，無法在此修改。',
+        'label-role':      '角色',
+        'role-admin':      '管理員',
+        'role-hint':       '角色由系統管理員指派。',
+        'label-lang':      '介面語言',
+        'hint-lang':       '切換後立即套用，並儲存至帳號設定。',
+        'last-saved':      '上次儲存：2026-03-27 14:32',
+        'btn-save':        '儲存變更',
+        'toast-success':   '個人設定已儲存。',
+        'toast-error':     '儲存失敗，請稍後再試。',
+        'lang-label':      'EN',
+        'page-doc-title':  '個人設定 — Label Suite',
+        'aria-avatar':          '上傳頭像',
+        'aria-save-btn':        '儲存個人設定',
+        'aria-nav-dashboard':   '前往儀表板',
+        'aria-nav-profile':     '目前頁面：個人設定',
+        'error-avatar-size':    '檔案大小不得超過 5 MB。',
+        'error-avatar-type':    '僅支援 JPG、PNG 或 WebP 格式。',
+        'avatar-preview-alt':   '頭像預覽',
+        'aria-toast-close':     '關閉通知',
+        'aria-save-loading':    '儲存中…',
+      },
+      'en': {
+        'page-title':      'Profile Settings',
+        'page-desc':       'Manage your account information and display preferences.',
+        'nav-dashboard':   'Dashboard',
+        'nav-profile':     'Profile Settings',
+        'avatar-label':    'Profile Picture',
+        'avatar-hint':     'JPG, PNG, or WebP, max 5 MB',
+        'label-name':      'Display Name',
+        'placeholder-name':'Enter display name',
+        'hint-name':       'Up to 50 characters',
+        'error-name-empty':'Display name cannot be empty.',
+        'label-email':     'Email',
+        'tooltip-email':   'Email is managed by your SSO account and cannot be changed here.',
+        'label-role':      'Role',
+        'role-admin':      'Admin',
+        'role-hint':       'Role is assigned by the system administrator.',
+        'label-lang':      'Interface Language',
+        'hint-lang':       'Applied immediately and saved to your account.',
+        'last-saved':      'Last saved: 2026-03-27 14:32',
+        'btn-save':        'Save Changes',
+        'toast-success':   'Profile settings saved.',
+        'toast-error':     'Save failed. Please try again.',
+        'lang-label':      'ZH',
+        'page-doc-title':  'Profile Settings — Label Suite',
+        'aria-avatar':          'Upload profile picture',
+        'aria-save-btn':        'Save profile settings',
+        'aria-nav-dashboard':   'Go to Dashboard',
+        'aria-nav-profile':     'Current page: Profile Settings',
+        'error-avatar-size':    'File size must not exceed 5 MB.',
+        'error-avatar-type':    'Only JPG, PNG, or WebP formats are supported.',
+        'avatar-preview-alt':   'Avatar preview',
+        'aria-toast-close':     'Dismiss notification',
+        'aria-save-loading':    'Saving…',
+      },
+    };
+
+    const STORAGE_KEY = 'labelsuite-lang';
+    let currentLang = localStorage.getItem(STORAGE_KEY) || 'zh-TW';
+    let pendingLang  = currentLang;
+
+    // ── Language application ──────────────────────────────────────
+    function applyLang(lang) {
+      if (!STRINGS[lang]) lang = 'zh-TW';
+      currentLang = lang;
+      localStorage.setItem(STORAGE_KEY, lang);
+      const s = STRINGS[lang];
+
+      document.querySelectorAll('[data-i18n]').forEach(el => {
+        const key = el.getAttribute('data-i18n');
+        if (s[key] !== undefined) el.textContent = s[key];
+      });
+      document.querySelectorAll('[data-i18n-aria-label]').forEach(el => {
+        const key = el.getAttribute('data-i18n-aria-label');
+        if (s[key] !== undefined) el.setAttribute('aria-label', s[key]);
+      });
+      document.querySelectorAll('[data-i18n-placeholder]').forEach(el => {
+        const key = el.getAttribute('data-i18n-placeholder');
+        if (s[key] !== undefined) el.setAttribute('placeholder', s[key]);
+      });
+
+      document.getElementById('lang-label').textContent = s['lang-label'];
+      document.documentElement.lang = lang;
+      document.title = s['page-doc-title'];
+
+      updateLangToggle(lang);
+    }
+
+    function toggleLang() {
+      const next = currentLang === 'zh-TW' ? 'en' : 'zh-TW';
+      applyLang(next);
+      pendingLang = next;
+    }
+
+    // ── Language preference toggle (in form) ──────────────────────
+    function setLangPref(lang) {
+      pendingLang = lang;
+      applyLang(lang);
+    }
+
+    function updateLangToggle(lang) {
+      const zhBtn = document.getElementById('lang-zh');
+      const enBtn = document.getElementById('lang-en');
+      const activeClasses   = ['bg-white', 'text-ink', 'shadow-sm'];
+      const inactiveClasses = ['text-slate-500', 'hover:text-ink'];
+
+      [zhBtn, enBtn].forEach(btn => {
+        btn.classList.remove(...activeClasses, ...inactiveClasses);
+      });
+
+      const [selectedBtn, unselectedBtn] = lang === 'zh-TW' ? [zhBtn, enBtn] : [enBtn, zhBtn];
+      selectedBtn.classList.add(...activeClasses);
+      selectedBtn.setAttribute('aria-selected', 'true');
+      unselectedBtn.classList.add(...inactiveClasses);
+      unselectedBtn.setAttribute('aria-selected', 'false');
+    }
+
+    // ── Avatar upload & preview ───────────────────────────────────
+    function previewAvatar(event) {
+      const file = event.target.files[0];
+      if (!file) return;
+
+      const errEl = document.getElementById('avatar-error');
+      errEl.classList.add('hidden');
+
+      const allowed = ['image/jpeg', 'image/png', 'image/webp'];
+      if (!allowed.includes(file.type)) {
+        errEl.textContent = STRINGS[currentLang]['error-avatar-type'];
+        errEl.classList.remove('hidden');
+        return;
+      }
+      if (file.size > 5 * 1024 * 1024) {
+        errEl.textContent = STRINGS[currentLang]['error-avatar-size'];
+        errEl.classList.remove('hidden');
+        return;
+      }
+
+      const reader = new FileReader();
+      reader.onload = e => {
+        const preview = document.getElementById('avatar-preview');
+        preview.innerHTML = `<img src="${e.target.result}" alt="${STRINGS[currentLang]['avatar-preview-alt']}" class="w-full h-full object-cover" />`;
+      };
+      reader.readAsDataURL(file);
+    }
+
+    // ── Form validation ───────────────────────────────────────────
+    function validateName(input) {
+      const errEl = document.getElementById('name-error');
+      if (!input.value.trim()) {
+        errEl.classList.remove('hidden');
+        input.classList.add('border-red-400', 'focus:ring-red-400');
+        return false;
+      }
+      errEl.classList.add('hidden');
+      input.classList.remove('border-red-400', 'focus:ring-red-400');
+      return true;
+    }
+
+    // ── Save ──────────────────────────────────────────────────────
+    function saveProfile() {
+      const nameInput = document.getElementById('display-name');
+      if (!validateName(nameInput)) {
+        nameInput.focus();
+        return;
+      }
+
+      const btn = document.getElementById('save-btn');
+      const s = STRINGS[currentLang];
+      // Loading state
+      btn.disabled = true;
+      btn.setAttribute('aria-busy', 'true');
+      btn.setAttribute('aria-label', s['aria-save-loading'] || '儲存中…');
+      btn.classList.add('opacity-70', 'cursor-not-allowed');
+      document.getElementById('save-icon').innerHTML = `
+        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none" opacity="0.3"/>
+        <path d="M12 2a10 10 0 0 1 10 10" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round">
+          <animateTransform attributeName="transform" type="rotate" from="0 12 12" to="360 12 12" dur="0.8s" repeatCount="indefinite"/>
+        </path>`;
+
+      // Simulate async save
+      setTimeout(() => {
+        btn.disabled = false;
+        btn.setAttribute('aria-busy', 'false');
+        btn.setAttribute('aria-label', s['aria-save-btn']);
+        btn.classList.remove('opacity-70', 'cursor-not-allowed');
+        document.getElementById('save-icon').innerHTML = `
+          <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
+          <polyline points="17 21 17 13 7 13 7 21"/>
+          <polyline points="7 3 7 8 15 8"/>`;
+        showToast('success');
+      }, 900);
+    }
+
+    function showToast(type) {
+      const toast   = document.getElementById('toast');
+      const toastTxt = document.getElementById('toast-text');
+      const toastIcon = document.getElementById('toast-icon');
+      const s = STRINGS[currentLang];
+
+      toast.classList.remove('hidden', 'bg-green-50', 'border-green-200', 'text-green-700',
+                                       'bg-red-50',   'border-red-200',   'text-red-700');
+      if (type === 'success') {
+        toast.classList.add('bg-green-50', 'border-green-200', 'text-green-700');
+        toastTxt.textContent = s['toast-success'];
+        toastIcon.innerHTML = `<polyline points="20 6 9 17 4 12"/>`;
+      } else {
+        toast.classList.add('bg-red-50', 'border-red-200', 'text-red-700');
+        toastTxt.textContent = s['toast-error'];
+        toastIcon.innerHTML = `<circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/>`;
+      }
+      toast.classList.remove('hidden');
+      setTimeout(() => toast.classList.add('hidden'), 4000);
+    }
+
+    // ── Init ──────────────────────────────────────────────────────
+    applyLang(currentLang);
+  </script>
+</body>
+</html>
diff --git a/specs/002-profile-settings/spec.md b/specs/002-profile-settings/spec.md
new file mode 100644
index 0000000..c518694
--- /dev/null
+++ b/specs/002-profile-settings/spec.md
@@ -0,0 +1,70 @@
+# Feature Specification: Profile Settings Page
+
+**Feature Branch**: `002-profile-settings`
+**Created**: 2026-03-27
+**Status**: Draft
+**Input**: User description: "個人設定頁（M1b）：登入後的使用者個人資料設定頁面。使用者可以查看與編輯自己的帳號資訊，包含顯示名稱、Email（唯讀，來自 SSO）、頭像、介面語言切換（ZH/EN）。"
+
+## User Scenarios & Testing *(required)*
+
+### User Story 1 - View and Edit Profile Info (Priority: P1)
+
+登入後的使用者（管理員、標記員、審核員）可以在個人設定頁查看自己的帳號資訊，並編輯顯示名稱與頭像，讓平台上的其他使用者能識別自己。
+
+**Why this priority**: 所有角色都需要基本的個人資料管理，是帳號模組的核心功能，且不依賴任何其他模組。
+
+**Independent Test**: 登入後進入個人設定頁，修改顯示名稱並儲存，再重新整理頁面確認名稱已更新。
+
+**Acceptance Scenarios**:
+
+1. **Given** 使用者已登入，**When** 進入個人設定頁，**Then** 頁面顯示目前的顯示名稱、Email（唯讀）、頭像、角色。
+2. **Given** 使用者在個人設定頁，**When** 修改顯示名稱並點擊儲存，**Then** 系統顯示儲存成功提示，頁面更新為新名稱。
+3. **Given** 使用者在個人設定頁，**When** 上傳新頭像，**Then** 頭像預覽即時更新，儲存後全站導覽列顯示新頭像。
+4. **Given** 使用者嘗試修改 Email 欄位，**When** 點擊 Email 輸入框，**Then** 欄位維持唯讀狀態，並顯示「Email 由 SSO 帳號管理」提示。
+
+---
+
+### User Story 2 - Switch Interface Language (Priority: P2)
+
+使用者可以在個人設定頁切換介面語言（ZH 繁體中文 / EN English），切換後全站 UI 文字立即反映新語言設定。
+
+**Why this priority**: 語言切換增強使用體驗但不影響核心標注功能，屬於增強功能，可在 P1 完成後獨立交付。
+
+**Independent Test**: 在個人設定頁將語言從 ZH 切換為 EN，確認頁面標題、按鈕文字、導覽列全部切換為英文。
+
+**Acceptance Scenarios**:
+
+1. **Given** 使用者介面語言為 ZH，**When** 在個人設定頁切換為 EN 並儲存，**Then** 全站 UI 立即切換為英文，頁面不重新整理。
+2. **Given** 使用者已設定語言偏好，**When** 登出後重新登入，**Then** 系統套用上次儲存的語言設定。
+
+---
+
+### Edge Cases
+
+- 顯示名稱為空白時，系統應拒絕儲存並顯示驗證錯誤。
+- 上傳的頭像超過檔案大小限制（5MB）時，系統應顯示錯誤提示並拒絕上傳。
+- 上傳非圖片格式時，系統應顯示「僅支援 JPG、PNG、WebP」錯誤。
+- 儲存時網路中斷，系統應顯示失敗提示並保留表單內容。
+
+## Requirements *(required)*
+
+### Functional Requirements
+
+- **FR-001**: The system MUST display the user's current display name, Email (read-only), avatar, and role on the profile settings page.
+- **FR-002**: The system MUST allow users to update their display name (non-empty, max 50 characters).
+- **FR-003**: The system MUST allow users to upload a new avatar (JPG/PNG/WebP, max 5MB) with live preview before saving.
+- **FR-004**: The system MUST prevent editing of the Email field, with a tooltip explaining it is managed by SSO.
+- **FR-005**: Users MUST be able to switch the interface language between ZH (Traditional Chinese) and EN (English).
+- **FR-006**: The system MUST persist the language preference across sessions.
+- **FR-007**: The system MUST show a success/failure toast notification after save actions.
+
+### Key Entities
+
+- **UserProfile**: Represents a logged-in user's profile. Key attributes: `id`, `display_name`, `email` (from SSO, read-only), `avatar_url`, `role` (admin | annotator | reviewer), `language_preference` (zh | en).
+
+## Success Criteria *(required)*
+
+- **SC-001**: Users can view and update their profile information in under 30 seconds.
+- **SC-002**: Language switch takes effect immediately without page reload.
+- **SC-003**: All form validation errors are surfaced inline before submission.
+- **SC-004**: Avatar upload and preview works correctly for JPG, PNG, and WebP formats under 5MB.

From 0c4f894c7453bbb2c5a97c7b95a580757c12c180 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=B3=E6=AC=A3=E6=80=A1?= <ms.mandy610425@gmail.com>
Date: Mon, 30 Mar 2026 09:43:03 +0800
Subject: [PATCH 03/18] fix: address qodo review findings on PR #16

- fix: replace innerHTML with DOM API in previewAvatar() to prevent XSS
- fix: update deploy-prototype.yml paths from prototype/ to design/prototype/
- fix: update design_system.py persist path from design-system/ to design/system/
- fix: update search.py help text and output paths to design/system/
- fix: update CLAUDE.md wireframe paths from pencil/ to design/wireframes/

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../ui-ux-pro-max/scripts/design_system.py       |  4 ++--
 .claude/skills/ui-ux-pro-max/scripts/search.py   | 16 ++++++++--------
 .github/workflows/deploy-prototype.yml           |  4 ++--
 CLAUDE.md                                        |  8 ++++----
 design/prototype/pages/profile.html              | 15 +++++++++------
 5 files changed, 25 insertions(+), 22 deletions(-)

diff --git a/.claude/skills/ui-ux-pro-max/scripts/design_system.py b/.claude/skills/ui-ux-pro-max/scripts/design_system.py
index 209de20..70177c3 100644
--- a/.claude/skills/ui-ux-pro-max/scripts/design_system.py
+++ b/.claude/skills/ui-ux-pro-max/scripts/design_system.py
@@ -507,7 +507,7 @@ def persist_design_system(design_system: dict, page: str = None, output_dir: str
     project_name = design_system.get("project_name", "default")
     project_slug = project_name.lower().replace(' ', '-')
     
-    design_system_dir = base_dir / "design-system" / project_slug
+    design_system_dir = base_dir / "design" / "system" / project_slug
     pages_dir = design_system_dir / "pages"
     
     created_files = []
@@ -556,7 +556,7 @@ def format_master_md(design_system: dict) -> str:
     # Logic header
     lines.append("# Design System Master File")
     lines.append("")
-    lines.append("> **LOGIC:** When building a specific page, first check `design-system/pages/[page-name].md`.")
+    lines.append("> **LOGIC:** When building a specific page, first check `design/system/pages/[page-name].md`.")
     lines.append("> If that file exists, its rules **override** this Master file.")
     lines.append("> If not, strictly follow the rules below.")
     lines.append("")
diff --git a/.claude/skills/ui-ux-pro-max/scripts/search.py b/.claude/skills/ui-ux-pro-max/scripts/search.py
index 3562d30..c62077d 100644
--- a/.claude/skills/ui-ux-pro-max/scripts/search.py
+++ b/.claude/skills/ui-ux-pro-max/scripts/search.py
@@ -10,8 +10,8 @@
 Stacks: html-tailwind, react, nextjs
 
 Persistence (Master + Overrides pattern):
-  --persist    Save design system to design-system/MASTER.md
-  --page       Also create a page-specific override file in design-system/pages/
+  --persist    Save design system to design/system/MASTER.md
+  --page       Also create a page-specific override file in design/system/pages/
 """
 
 import argparse
@@ -65,8 +65,8 @@ def format_output(result):
     parser.add_argument("--project-name", "-p", type=str, default=None, help="Project name for design system output")
     parser.add_argument("--format", "-f", choices=["ascii", "markdown"], default="ascii", help="Output format for design system")
     # Persistence (Master + Overrides pattern)
-    parser.add_argument("--persist", action="store_true", help="Save design system to design-system/MASTER.md (creates hierarchical structure)")
-    parser.add_argument("--page", type=str, default=None, help="Create page-specific override file in design-system/pages/")
+    parser.add_argument("--persist", action="store_true", help="Save design system to design/system/MASTER.md (creates hierarchical structure)")
+    parser.add_argument("--page", type=str, default=None, help="Create page-specific override file in design/system/pages/")
     parser.add_argument("--output-dir", "-o", type=str, default=None, help="Output directory for persisted files (default: current directory)")
 
     args = parser.parse_args()
@@ -87,13 +87,13 @@ def format_output(result):
         if args.persist:
             project_slug = args.project_name.lower().replace(' ', '-') if args.project_name else "default"
             print("\n" + "=" * 60)
-            print(f"✅ Design system persisted to design-system/{project_slug}/")
-            print(f"   📄 design-system/{project_slug}/MASTER.md (Global Source of Truth)")
+            print(f"✅ Design system persisted to design/system/{project_slug}/")
+            print(f"   📄 design/system/{project_slug}/MASTER.md (Global Source of Truth)")
             if args.page:
                 page_filename = args.page.lower().replace(' ', '-')
-                print(f"   📄 design-system/{project_slug}/pages/{page_filename}.md (Page Overrides)")
+                print(f"   📄 design/system/{project_slug}/pages/{page_filename}.md (Page Overrides)")
             print("")
-            print(f"📖 Usage: When building a page, check design-system/{project_slug}/pages/[page].md first.")
+            print(f"📖 Usage: When building a page, check design/system/{project_slug}/pages/[page].md first.")
             print(f"   If exists, its rules override MASTER.md. Otherwise, use MASTER.md.")
             print("=" * 60)
     # Stack search
diff --git a/.github/workflows/deploy-prototype.yml b/.github/workflows/deploy-prototype.yml
index 3292fe3..5d6deee 100644
--- a/.github/workflows/deploy-prototype.yml
+++ b/.github/workflows/deploy-prototype.yml
@@ -3,7 +3,7 @@ name: Deploy Prototype to GitHub Pages
 on:
   push:
     branches: [main]
-    paths: ['prototype/**']
+    paths: ['design/prototype/**']
   workflow_dispatch:  # allow manual trigger
 
 concurrency:
@@ -29,7 +29,7 @@ jobs:
 
       - uses: actions/upload-pages-artifact@v3
         with:
-          path: prototype/
+          path: design/prototype/
 
       - uses: actions/deploy-pages@v4
         id: deployment
diff --git a/CLAUDE.md b/CLAUDE.md
index 7bb053d..4238888 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -207,7 +207,7 @@ This project adopts Spec-Driven Development (SDD). New features should follow th
 /speckit.specify <feature description>  → specs/NNN-feature/spec.md
 /ui-ux-pro-max                          → design/prototype/ + design/system/  (optional, UI-heavy features)
 /senior-uiux review                     → prototype QA: design system compliance + accessibility  (optional, after prototype)
-/pencil wireframe                       → pencil/pages/[page].pen  (optional, after senior-uiux review)
+/pencil wireframe                       → design/wireframes/pages/[page].pen  (optional, after senior-uiux review)
 /speckit.clarify                        → clarify requirements          (optional; prototype surfaces ambiguities)
 /speckit.plan                           → specs/NNN-feature/plan.md
 /speckit.tasks                          → specs/NNN-feature/tasks.md
@@ -253,7 +253,7 @@ The deciding question is: **will this change make the system behave differently
 | `/speckit.specify` | Create feature spec from natural language description |
 | `/ui-ux-pro-max` | Generate HTML prototype + design system (optional; run after specify, before clarify) |
 | `senior-uiux review` | Review prototype for design system compliance, a11y, ZH/EN symmetry (optional; run after ui-ux-pro-max) |
-| `pencil wireframe` | Draw ZH + EN wireframe frames in `pencil/pages/[page].pen` via Pencil MCP (optional; run after senior-uiux review) |
+| `pencil wireframe` | Draw ZH + EN wireframe frames in `design/wireframes/pages/[page].pen` via Pencil MCP (optional; run after senior-uiux review) |
 | `/speckit.clarify` | Identify and clarify ambiguous requirements (prototype helps surface these) |
 | `/speckit.plan` | Build technical implementation plan |
 | `/speckit.tasks` | Generate executable task list |
@@ -263,8 +263,8 @@ The deciding question is: **will this change make the system behave differently
 
 ### Pencil Wireframe Convention
 
-- Each page wireframe is stored as a separate file under `pencil/pages/[page-name].pen` (e.g. `login.pen`, `profile.pen`)
-- `pencil/index.pen` is for overview purposes only — **do not** place page wireframe frames inside it
+- Each page wireframe is stored as a separate file under `design/wireframes/pages/[page-name].pen` (e.g. `login.pen`, `profile.pen`)
+- `design/wireframes/index.pen` is for overview purposes only — **do not** place page wireframe frames inside it
 - Each `.pen` file contains two side-by-side frames: Desktop ZH (`x:0`) and Desktop EN (`x:1500`)
 - `.pen` files are encrypted — **only operate via Pencil MCP tools**; never use `Read` / `Edit` / `Grep` on them
 - Draw the ZH frame first, then the EN frame, keeping structure symmetric between the two
diff --git a/design/prototype/pages/profile.html b/design/prototype/pages/profile.html
index e342f10..d3f6763 100644
--- a/design/prototype/pages/profile.html
+++ b/design/prototype/pages/profile.html
@@ -432,12 +432,15 @@ <h2 class="text-2xl font-bold text-ink" data-i18n="page-title">個人設定</h2>
         return;
       }
 
-      const reader = new FileReader();
-      reader.onload = e => {
-        const preview = document.getElementById('avatar-preview');
-        preview.innerHTML = `<img src="${e.target.result}" alt="${STRINGS[currentLang]['avatar-preview-alt']}" class="w-full h-full object-cover" />`;
-      };
-      reader.readAsDataURL(file);
+      const objectUrl = URL.createObjectURL(file);
+      const preview = document.getElementById('avatar-preview');
+      preview.innerHTML = '';
+      const img = document.createElement('img');
+      img.src = objectUrl;
+      img.alt = STRINGS[currentLang]['avatar-preview-alt'];
+      img.className = 'w-full h-full object-cover';
+      img.onload = () => URL.revokeObjectURL(objectUrl);
+      preview.appendChild(img);
     }
 
     // ── Form validation ───────────────────────────────────────────

From 7cf260e34d5c5591d2adc5ed9250cd986659cd1c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=B3=E6=AC=A3=E6=80=A1?= <ms.mandy610425@gmail.com>
Date: Mon, 30 Mar 2026 10:21:38 +0800
Subject: [PATCH 04/18] design: update system design and wireframe with
 senior-uiux adjustments

- Add ui-ux-pro-max pre-generation reminder in CLAUDE.md
- Update design/system/MASTER.md with revised design system rules
- Update design/wireframes/design-system.pen wireframe
- Update SKILL.md with design system path adjustments

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .claude/skills/ui-ux-pro-max/SKILL.md |   18 +
 CLAUDE.md                             |    1 +
 design/system/MASTER.md               |  234 +++++-
 design/wireframes/design-system.pen   | 1056 ++++++++++++++++++++++---
 4 files changed, 1166 insertions(+), 143 deletions(-)

diff --git a/.claude/skills/ui-ux-pro-max/SKILL.md b/.claude/skills/ui-ux-pro-max/SKILL.md
index c50de09..dfce329 100644
--- a/.claude/skills/ui-ux-pro-max/SKILL.md
+++ b/.claude/skills/ui-ux-pro-max/SKILL.md
@@ -122,6 +122,24 @@ winget install Python.Python.3.12
 
 When user requests UI/UX work (design, build, create, implement, review, fix, improve), follow this workflow:
 
+### Step 0: Load Existing Project Design System (if present)
+
+Before doing any design work, check whether this project already has a design system:
+
+1. **Read `design/system/MASTER.md`** (if it exists) — this is the authoritative style spec: color tokens, typography, spacing, components, and anti-patterns. Always follow it instead of generating a new design system from scratch.
+
+2. **Read `design/wireframes/design-system.pen`** (if it exists) via Pencil MCP tools — this contains the **visual component library** that is the source of truth for implemented component specs:
+   ```
+   mcp__pencil__open_document("design/wireframes/design-system.pen")
+   mcp__pencil__get_editor_state(include_schema=false)
+   mcp__pencil__batch_get(patterns=[{reusable: true}], readDepth=2)
+   ```
+   Extract: reusable component IDs, their fills/strokes/cornerRadius/padding/font values, and variable names (e.g. `$color-surface`, `$color-ink`). Use these exact values when implementing prototype components — **do not invent new values**.
+
+3. **Page-specific overrides**: also check `design/system/pages/[page-name].md` if building a specific page. Its rules override MASTER.md.
+
+If neither file exists, proceed with Step 1–4 as normal to generate a new design system.
+
 ### Step 1: Analyze User Requirements
 
 Extract key information from user request:
diff --git a/CLAUDE.md b/CLAUDE.md
index 4238888..2dd0b2c 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -206,6 +206,7 @@ This project adopts Spec-Driven Development (SDD). New features should follow th
 ```
 /speckit.specify <feature description>  → specs/NNN-feature/spec.md
 /ui-ux-pro-max                          → design/prototype/ + design/system/  (optional, UI-heavy features)
+                                          ⚠ Before generating: read MASTER.md + design/wireframes/design-system.pen via Pencil MCP
 /senior-uiux review                     → prototype QA: design system compliance + accessibility  (optional, after prototype)
 /pencil wireframe                       → design/wireframes/pages/[page].pen  (optional, after senior-uiux review)
 /speckit.clarify                        → clarify requirements          (optional; prototype surfaces ambiguities)
diff --git a/design/system/MASTER.md b/design/system/MASTER.md
index 99ca027..88d6d33 100644
--- a/design/system/MASTER.md
+++ b/design/system/MASTER.md
@@ -4,11 +4,16 @@
 > If that file exists, its rules **override** this Master file.
 > If not, strictly follow the rules below.
 
+> **WIREFRAME REFERENCE:** The visual component library lives in `design/wireframes/design-system.pen`.
+> It is encrypted — read it via Pencil MCP tools only (`mcp__pencil__open_document` → `mcp__pencil__batch_get`).
+> When implementing components, extract exact token values (fills, cornerRadius, padding, fonts) from that file.
+> The token names defined there (e.g. `$color-surface`, `$color-ink`) are the canonical names to use in code.
+
 ---
 
 **Project:** Label Suite
-**Generated:** 2026-03-25 11:49:50
-**Category:** Micro SaaS
+**Updated:** 2026-03-30
+**Category:** Micro SaaS (Tool-based Web App)
 
 ---
 
@@ -16,15 +21,46 @@
 
 ### Color Palette
 
-| Role | Hex | CSS Variable |
-|------|-----|--------------|
-| Primary | `#6366F1` | `--color-primary` |
-| Secondary | `#818CF8` | `--color-secondary` |
-| CTA/Accent | `#10B981` | `--color-cta` |
-| Background | `#F5F3FF` | `--color-background` |
-| Text | `#1E1B4B` | `--color-text` |
+| Role | Hex | CSS Variable | Tailwind Token |
+|------|-----|--------------|----------------|
+| Primary | `#6366F1` | `--color-primary` | `primary` |
+| Secondary | `#818CF8` | `--color-secondary` | `secondary` |
+| CTA/Accent | `#10B981` | `--color-cta` | `cta` |
+| Surface (Background) | `#F5F3FF` | `--color-surface` | `surface` |
+| Ink (Text) | `#1E1B4B` | `--color-ink` | `ink` |
+
+**Color Notes:** Indigo primary + emerald CTA. Use `surface` / `ink` (not `background` / `text`) as the canonical semantic token names in both CSS variables and Tailwind config.
+
+**Tailwind Config Example:**
+```js
+colors: {
+  primary:   '#6366F1',
+  secondary: '#818CF8',
+  cta:       '#10B981',
+  surface:   '#F5F3FF',
+  ink:       '#1E1B4B',
+}
+```
+
+### Semantic State Colors
+
+Used for status badges, error banners, alerts, and feedback messages.
+
+| Role | Text | Background | Border | Tailwind Classes |
+|------|------|------------|--------|-----------------|
+| Error | `#B91C1C` (red-700) | `#FEF2F2` (red-50) | `#FECACA` (red-200) | `text-red-700 bg-red-50 border-red-200` |
+| Success | `#15803D` (green-700) | `#F0FDF4` (green-50) | `#BBF7D0` (green-200) | `text-green-700 bg-green-50 border-green-200` |
+| Warning | `#A16207` (yellow-700) | `#FEFCE8` (yellow-50) | `#FEF08A` (yellow-200) | `text-yellow-700 bg-yellow-50 border-yellow-200` |
+| Info | `#1D4ED8` (blue-700) | `#EFF6FF` (blue-50) | `#BFDBFE` (blue-200) | `text-blue-700 bg-blue-50 border-blue-200` |
 
-**Color Notes:** Indigo primary + emerald CTA
+**Task Status Badge Mapping:**
+
+| Status | Color Role | Example |
+|--------|-----------|---------|
+| In Progress | Warning | `bg-yellow-50 text-yellow-700 border-yellow-200` |
+| Not Started | Info | `bg-blue-50 text-blue-700 border-blue-200` |
+| Submitted / Completed | Success | `bg-green-50 text-green-700 border-green-200` |
+| Error / Rejected | Error | `bg-red-50 text-red-700 border-red-200` |
 
 ### Typography
 
@@ -38,6 +74,37 @@
 @import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Crimson+Pro:wght@400;500;600;700&display=swap');
 ```
 
+**Chinese Fallback:**
+```css
+/* Headings */
+font-family: 'Crimson Pro', 'Noto Serif TC', 'Source Han Serif TC', serif;
+
+/* Body */
+font-family: 'Atkinson Hyperlegible', 'Noto Sans TC', 'PingFang TC', sans-serif;
+```
+
+### Typography Scale
+
+| Level | Font | Size | Weight | Line-Height | Usage |
+|-------|------|------|--------|-------------|-------|
+| Display | Crimson Pro | 48px / `text-5xl` | 700 | 1.2 | Hero titles |
+| H1 | Crimson Pro | 36px / `text-4xl` | 700 | 1.3 | Page titles |
+| H2 | Crimson Pro | 24px / `text-2xl` | 600 | 1.4 | Section headings |
+| H3 | Atkinson | 18px / `text-xl` | 600 | 1.5 | Card titles, subsections |
+| Body | Atkinson | 16px / `text-base` | 400 | 1.6 (EN) / 1.8 (ZH) | Default body text |
+| Caption | Atkinson | 14px / `text-sm` | 400 | 1.5 | Supporting text, metadata |
+| Label | Atkinson | 12px / `text-xs` | 500 | 1.4 | Tags, badges, form labels |
+
+### Bilingual Typography
+
+Label Suite supports zh-TW / EN. Apply these rules when building bilingual pages:
+
+- **Line Height:** Chinese body text requires `line-height: 1.8` (vs 1.6 for English) for readability
+- **`lang` attribute:** Always set `lang="zh-TW"` or `lang="en"` on the `<html>` element to let browsers apply correct text rendering
+- **Mixed CJK/Latin:** When Chinese and English appear inline, the browser handles spacing automatically — do not add manual letter-spacing to Chinese text
+- **Heading fallback:** Crimson Pro does not include CJK glyphs; always declare `'Noto Serif TC'` as the next fallback so Chinese headings render in a matching serif weight
+- **Font size parity:** At the same `px` size, Chinese characters appear visually larger than Latin; consider using `text-sm` for Chinese where `text-base` is used for English labels
+
 ### Spacing Variables
 
 | Token | Value | Usage |
@@ -48,7 +115,29 @@
 | `--space-lg` | `24px` / `1.5rem` | Section padding |
 | `--space-xl` | `32px` / `2rem` | Large gaps |
 | `--space-2xl` | `48px` / `3rem` | Section margins |
-| `--space-3xl` | `64px` / `4rem` | Hero padding |
+| `--space-3xl` | `64px` / `4rem` | Page-level padding |
+
+### Border Radius Scale
+
+| Token | Value | Tailwind | Usage |
+|-------|-------|----------|-------|
+| `--radius-sm` | `4px` | `rounded` | Badges, tags, small chips |
+| `--radius-md` | `8px` | `rounded-lg` | Buttons, inputs, small cards |
+| `--radius-lg` | `12px` | `rounded-xl` | Cards, panels |
+| `--radius-xl` | `16px` | `rounded-2xl` | Modals, drawers |
+| `--radius-full` | `9999px` | `rounded-full` | Avatars, pill badges |
+
+### Z-index Scale
+
+| Level | Value | Usage |
+|-------|-------|-------|
+| Base | `0` | Default stacking |
+| Raised | `10` | Inline popovers, small overlays |
+| Dropdown | `100` | Select menus, command palette |
+| Sticky | `200` | Sticky header, sticky sidebar |
+| Modal | `300` | Modal dialogs, drawer panels |
+| Toast | `400` | Toast notifications (above modal) |
+| Tooltip | `500` | Tooltips (highest interactive layer) |
 
 ### Shadow Depths
 
@@ -68,10 +157,10 @@
 ```css
 /* Primary Button */
 .btn-primary {
-  background: #10B981;
+  background: var(--color-cta);
   color: white;
   padding: 12px 24px;
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   font-weight: 600;
   transition: all 200ms ease;
   cursor: pointer;
@@ -85,10 +174,10 @@
 /* Secondary Button */
 .btn-secondary {
   background: transparent;
-  color: #6366F1;
-  border: 2px solid #6366F1;
+  color: var(--color-primary);
+  border: 2px solid var(--color-primary);
   padding: 12px 24px;
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   font-weight: 600;
   transition: all 200ms ease;
   cursor: pointer;
@@ -98,19 +187,22 @@
 ### Cards
 
 ```css
+/* Interactive card (clickable) */
 .card {
-  background: #F5F3FF;
-  border-radius: 12px;
+  background: white;
+  border: 1px solid #E2E8F0;
+  border-radius: var(--radius-lg);
   padding: 24px;
-  box-shadow: var(--shadow-md);
-  transition: all 200ms ease;
+  transition: border-color 200ms ease, transform 200ms ease;
   cursor: pointer;
 }
 
 .card:hover {
-  box-shadow: var(--shadow-lg);
+  border-color: var(--color-primary);
   transform: translateY(-2px);
 }
+
+/* Non-interactive card: omit cursor:pointer and hover transform */
 ```
 
 ### Inputs
@@ -119,15 +211,19 @@
 .input {
   padding: 12px 16px;
   border: 1px solid #E2E8F0;
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   font-size: 16px;
   transition: border-color 200ms ease;
 }
 
 .input:focus {
-  border-color: #6366F1;
+  border-color: var(--color-primary);
   outline: none;
-  box-shadow: 0 0 0 3px #6366F120;
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
+}
+
+.input.error {
+  border-color: #B91C1C;
 }
 ```
 
@@ -137,11 +233,12 @@
 .modal-overlay {
   background: rgba(0, 0, 0, 0.5);
   backdrop-filter: blur(4px);
+  z-index: 300;
 }
 
 .modal {
   background: white;
-  border-radius: 16px;
+  border-radius: var(--radius-xl);
   padding: 32px;
   box-shadow: var(--shadow-xl);
   max-width: 500px;
@@ -149,25 +246,81 @@
 }
 ```
 
+### Status Badges
+
+```html
+<!-- In Progress -->
+<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-yellow-50 text-yellow-700 border border-yellow-200">
+  In Progress
+</span>
+
+<!-- Not Started -->
+<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-50 text-blue-700 border border-blue-200">
+  Not Started
+</span>
+
+<!-- Submitted / Completed -->
+<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-50 text-green-700 border border-green-200">
+  Submitted
+</span>
+```
+
+### Error / Alert Banner
+
+```html
+<!-- Error Banner (e.g. login failure) -->
+<div class="flex items-start gap-2 bg-red-50 border border-red-200 text-red-700 text-sm rounded-lg px-4 py-3" role="alert">
+  <!-- SVG icon -->
+  <span>Error message here</span>
+</div>
+```
+
 ---
 
 ## Style Guidelines
 
 **Style:** Flat Design
 
-**Keywords:** 2D, minimalist, bold colors, no shadows, clean lines, simple shapes, typography-focused, modern, icon-heavy
+**Keywords:** 2D, minimalist, bold colors, clean lines, simple shapes, typography-focused, modern, tool-oriented
+
+**Best For:** Web apps, SaaS dashboards, annotation tools, cross-platform
 
-**Best For:** Web apps, mobile apps, cross-platform, startup MVPs, user-friendly, SaaS, dashboards, corporate
+**Key Effects:**
+- No gradients or decorative shadows
+- Hover feedback: `opacity` change and/or `color` change
+- Allowed micro-interaction: `translateY` up to `-2px` maximum (creates subtle lift without layout shift)
+- Forbidden hover: `scale` transforms, shadow enhancement on hover
+- Transitions: 150–200ms ease
+- Minimal, purposeful icons (Heroicons / Lucide)
 
-**Key Effects:** No gradients/shadows, simple hover (color/opacity shift), fast loading, clean transitions (150-200ms ease), minimal icons
+### Flat Design in This Project
 
-### Page Pattern
+Label Suite uses Flat Design with **one allowed exception**: a maximum `translateY(-2px)` on interactive elements (cards, primary buttons) to provide tactile hover feedback without adding shadows or gradients. This is intentional and consistent.
 
-**Pattern Name:** Enterprise Gateway
+| Effect | Allowed | Notes |
+|--------|---------|-------|
+| `opacity` change on hover | Yes | Preferred for buttons |
+| `color` / `border-color` change on hover | Yes | Preferred for cards |
+| `translateY(-1px)` to `(-2px)` | Yes | Max 2px, buttons and interactive cards only |
+| `scale` transform | No | Causes layout shift |
+| Shadow enhancement on hover | No | Violates flat design |
+| Gradients | No | Background or border |
 
-- **Conversion Strategy:**  logo carousel,  tab switching for industries, Path selection (I am a...). Mega menu navigation. Trust signals prominent.
-- **CTA Placement:** Contact Sales (Primary) + Login (Secondary)
-- **Section Order:** 1. Hero (Video/Mission), 2. Solutions by Industry, 3. Solutions by Role, 4. Client Logos, 5. Contact Sales
+### Page Shell Patterns
+
+Label Suite is a **tool-based web app** (not a marketing site). Use these two shell layouts:
+
+**Pattern A: Header + Content Layout**
+- Used for: Dashboard, Leaderboard, Settings, Profile
+- Structure: Fixed top navbar (height 56px) + scrollable main content area
+- Max content width: `max-w-7xl mx-auto px-4 sm:px-6 lg:px-8`
+- Top padding: `pt-6` below navbar
+
+**Pattern B: Sidebar + Content Layout** *(reserved for annotation task pages)*
+- Used for: Annotation task interface
+- Structure: Fixed left sidebar (width 240px) + scrollable main content area
+- Sidebar contains: task metadata, label palette, progress indicator
+- Define in `design/system/pages/annotation.md` when implemented
 
 ---
 
@@ -175,15 +328,15 @@
 
 - ❌ Complex onboarding flow
 - ❌ Cluttered layout
-
-### Additional Forbidden Patterns
-
 - ❌ **Emojis as icons** — Use SVG icons (Heroicons, Lucide, Simple Icons)
 - ❌ **Missing cursor:pointer** — All clickable elements must have cursor:pointer
-- ❌ **Layout-shifting hovers** — Avoid scale transforms that shift layout
+- ❌ **cursor:pointer on non-interactive cards** — Only add when the card is actually clickable
+- ❌ **Layout-shifting hovers** — No scale transforms; translateY max -2px
 - ❌ **Low contrast text** — Maintain 4.5:1 minimum contrast ratio
 - ❌ **Instant state changes** — Always use transitions (150-300ms)
 - ❌ **Invisible focus states** — Focus states must be visible for a11y
+- ❌ **Hardcoded state colors** — Use the Semantic State Colors table, not ad-hoc Tailwind color classes
+- ❌ **`--color-background` / `--color-text`** — Use `--color-surface` / `--color-ink` (deprecated naming)
 
 ---
 
@@ -193,7 +346,7 @@ Before delivering any UI code, verify:
 
 - [ ] No emojis used as icons (use SVG instead)
 - [ ] All icons from consistent icon set (Heroicons/Lucide)
-- [ ] `cursor-pointer` on all clickable elements
+- [ ] `cursor-pointer` on all **clickable** elements only
 - [ ] Hover states with smooth transitions (150-300ms)
 - [ ] Light mode: text contrast 4.5:1 minimum
 - [ ] Focus states visible for keyboard navigation
@@ -201,3 +354,8 @@ Before delivering any UI code, verify:
 - [ ] Responsive: 375px, 768px, 1024px, 1440px
 - [ ] No content hidden behind fixed navbars
 - [ ] No horizontal scroll on mobile
+- [ ] Color tokens use `surface`/`ink` (not `background`/`text`)
+- [ ] State colors use Semantic State Colors (not ad-hoc Tailwind utilities)
+- [ ] `lang` attribute set on `<html>` for bilingual pages
+- [ ] Chinese body text uses `line-height: 1.8`
+- [ ] Z-index values follow the Z-index Scale table
diff --git a/design/wireframes/design-system.pen b/design/wireframes/design-system.pen
index ea9d522..55c9ac8 100644
--- a/design/wireframes/design-system.pen
+++ b/design/wireframes/design-system.pen
@@ -19,7 +19,7 @@
       "x": 0,
       "y": 0,
       "name": "Label Suite — Design System",
-      "width": 1287,
+      "width": 1656,
       "fill": "#FFFFFF",
       "layout": "vertical",
       "gap": 48,
@@ -28,7 +28,7 @@
         {
           "type": "text",
           "id": "8RHMx",
-          "fill": "$color-text",
+          "fill": "$color-ink",
           "content": "Label Suite — Design System",
           "fontFamily": "Crimson Pro",
           "fontSize": 32,
@@ -79,7 +79,7 @@
                       "type": "text",
                       "id": "OGlM2",
                       "fill": "$color-text",
-                      "content": "Primary",
+                      "content": "Primary · primary",
                       "fontFamily": "Inter",
                       "fontSize": 12,
                       "fontWeight": "600"
@@ -115,7 +115,7 @@
                       "type": "text",
                       "id": "qsOhc",
                       "fill": "$color-text",
-                      "content": "Secondary",
+                      "content": "Secondary · secondary",
                       "fontFamily": "Inter",
                       "fontSize": 12,
                       "fontWeight": "600"
@@ -151,7 +151,7 @@
                       "type": "text",
                       "id": "Qaauq",
                       "fill": "$color-text",
-                      "content": "CTA / Accent",
+                      "content": "CTA / Accent · cta",
                       "fontFamily": "Inter",
                       "fontSize": 12,
                       "fontWeight": "600"
@@ -180,7 +180,7 @@
                       "id": "jA9iB",
                       "width": "fill_container",
                       "height": 64,
-                      "fill": "$color-background",
+                      "fill": "$color-surface",
                       "cornerRadius": "$radius-md",
                       "stroke": {
                         "align": "inside",
@@ -192,7 +192,7 @@
                       "type": "text",
                       "id": "KP7KG",
                       "fill": "$color-text",
-                      "content": "Background",
+                      "content": "Surface",
                       "fontFamily": "Inter",
                       "fontSize": 12,
                       "fontWeight": "600"
@@ -201,7 +201,7 @@
                       "type": "text",
                       "id": "FRzbf",
                       "fill": "$color-text-muted",
-                      "content": "#F5F3FF",
+                      "content": "#F5F3FF · surface",
                       "fontFamily": "Inter",
                       "fontSize": 11,
                       "fontWeight": "normal"
@@ -221,14 +221,14 @@
                       "id": "km17Z",
                       "width": "fill_container",
                       "height": 64,
-                      "fill": "$color-text",
+                      "fill": "$color-ink",
                       "cornerRadius": "$radius-md"
                     },
                     {
                       "type": "text",
                       "id": "rjKpr",
                       "fill": "$color-text",
-                      "content": "Text",
+                      "content": "Ink",
                       "fontFamily": "Inter",
                       "fontSize": 12,
                       "fontWeight": "600"
@@ -237,7 +237,201 @@
                       "type": "text",
                       "id": "ypsJH",
                       "fill": "$color-text-muted",
-                      "content": "#1E1B4B",
+                      "content": "#1E1B4B · ink",
+                      "fontFamily": "Inter",
+                      "fontSize": 11,
+                      "fontWeight": "normal"
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "type": "frame",
+          "id": "a5Aaa",
+          "name": "sec_state",
+          "width": "fill_container",
+          "layout": "vertical",
+          "gap": 16,
+          "children": [
+            {
+              "type": "text",
+              "id": "LFzAQ",
+              "name": "lbl_s",
+              "fill": "$color-text-muted",
+              "content": "STATE COLORS",
+              "fontFamily": "Inter",
+              "fontSize": 11,
+              "fontWeight": "700",
+              "letterSpacing": 2
+            },
+            {
+              "type": "frame",
+              "id": "8D8KZ",
+              "name": "state_swatches",
+              "width": "fill_container",
+              "gap": 16,
+              "children": [
+                {
+                  "type": "frame",
+                  "id": "HwUMn",
+                  "name": "swe",
+                  "width": "fill_container",
+                  "layout": "vertical",
+                  "gap": 8,
+                  "children": [
+                    {
+                      "type": "frame",
+                      "id": "0OClA",
+                      "width": "fill_container",
+                      "height": 56,
+                      "fill": "$color-error-bg",
+                      "cornerRadius": 6,
+                      "stroke": {
+                        "align": "inside",
+                        "thickness": 1,
+                        "fill": "$color-error-border"
+                      }
+                    },
+                    {
+                      "type": "text",
+                      "id": "JQkJZ",
+                      "fill": "$color-error",
+                      "content": "Error",
+                      "fontFamily": "Inter",
+                      "fontSize": 12,
+                      "fontWeight": "600"
+                    },
+                    {
+                      "type": "text",
+                      "id": "Qet5r",
+                      "fill": "$color-text-muted",
+                      "content": "#B91C1C · red-700",
+                      "fontFamily": "Inter",
+                      "fontSize": 11,
+                      "fontWeight": "normal"
+                    }
+                  ]
+                },
+                {
+                  "type": "frame",
+                  "id": "1ADmt",
+                  "name": "sws",
+                  "width": "fill_container",
+                  "layout": "vertical",
+                  "gap": 8,
+                  "children": [
+                    {
+                      "type": "frame",
+                      "id": "aM0uS",
+                      "width": "fill_container",
+                      "height": 56,
+                      "fill": "$color-success-bg",
+                      "cornerRadius": 6,
+                      "stroke": {
+                        "align": "inside",
+                        "thickness": 1,
+                        "fill": "$color-success-border"
+                      }
+                    },
+                    {
+                      "type": "text",
+                      "id": "YFodQ",
+                      "fill": "$color-success",
+                      "content": "Success",
+                      "fontFamily": "Inter",
+                      "fontSize": 12,
+                      "fontWeight": "600"
+                    },
+                    {
+                      "type": "text",
+                      "id": "nYgFA",
+                      "fill": "$color-text-muted",
+                      "content": "#15803D · green-700",
+                      "fontFamily": "Inter",
+                      "fontSize": 11,
+                      "fontWeight": "normal"
+                    }
+                  ]
+                },
+                {
+                  "type": "frame",
+                  "id": "sPcnt",
+                  "name": "sww",
+                  "width": "fill_container",
+                  "layout": "vertical",
+                  "gap": 8,
+                  "children": [
+                    {
+                      "type": "frame",
+                      "id": "TIxIM",
+                      "width": "fill_container",
+                      "height": 56,
+                      "fill": "$color-warning-bg",
+                      "cornerRadius": 6,
+                      "stroke": {
+                        "align": "inside",
+                        "thickness": 1,
+                        "fill": "$color-warning-border"
+                      }
+                    },
+                    {
+                      "type": "text",
+                      "id": "6WwUY",
+                      "fill": "$color-warning",
+                      "content": "Warning",
+                      "fontFamily": "Inter",
+                      "fontSize": 12,
+                      "fontWeight": "600"
+                    },
+                    {
+                      "type": "text",
+                      "id": "h9nOx",
+                      "fill": "$color-text-muted",
+                      "content": "#A16207 · yellow-700",
+                      "fontFamily": "Inter",
+                      "fontSize": 11,
+                      "fontWeight": "normal"
+                    }
+                  ]
+                },
+                {
+                  "type": "frame",
+                  "id": "pC3XQ",
+                  "name": "swi",
+                  "width": "fill_container",
+                  "layout": "vertical",
+                  "gap": 8,
+                  "children": [
+                    {
+                      "type": "frame",
+                      "id": "VGFwV",
+                      "width": "fill_container",
+                      "height": 56,
+                      "fill": "$color-info-bg",
+                      "cornerRadius": 6,
+                      "stroke": {
+                        "align": "inside",
+                        "thickness": 1,
+                        "fill": "$color-info-border"
+                      }
+                    },
+                    {
+                      "type": "text",
+                      "id": "PW1MA",
+                      "fill": "$color-info",
+                      "content": "Info",
+                      "fontFamily": "Inter",
+                      "fontSize": 12,
+                      "fontWeight": "600"
+                    },
+                    {
+                      "type": "text",
+                      "id": "BxyUJ",
+                      "fill": "$color-text-muted",
+                      "content": "#1D4ED8 · blue-700",
                       "fontFamily": "Inter",
                       "fontSize": 11,
                       "fontWeight": "normal"
@@ -276,7 +470,7 @@
                 {
                   "type": "frame",
                   "id": "skUVT",
-                  "name": "typo_h",
+                  "name": "typo_heading",
                   "layout": "vertical",
                   "gap": 8,
                   "children": [
@@ -293,26 +487,36 @@
                       "type": "text",
                       "id": "g54eJ",
                       "fill": "$color-text",
-                      "content": "Display 32px",
+                      "content": "Display  48px",
                       "fontFamily": "Crimson Pro",
-                      "fontSize": 32,
+                      "fontSize": 48,
                       "fontWeight": "700"
                     },
                     {
                       "type": "text",
                       "id": "xLx1V",
                       "fill": "$color-text",
-                      "content": "Heading 24px",
+                      "content": "H1  36px",
                       "fontFamily": "Crimson Pro",
-                      "fontSize": 24,
-                      "fontWeight": "600"
+                      "fontSize": 36,
+                      "fontWeight": "700"
                     },
                     {
                       "type": "text",
                       "id": "w8oTX",
                       "fill": "$color-text",
-                      "content": "Subheading 18px",
+                      "content": "H2  24px",
                       "fontFamily": "Crimson Pro",
+                      "fontSize": 24,
+                      "fontWeight": "600"
+                    },
+                    {
+                      "type": "text",
+                      "id": "Bj4Zf",
+                      "name": "h3txt",
+                      "fill": "$color-text",
+                      "content": "H3  18px",
+                      "fontFamily": "Atkinson Hyperlegible",
                       "fontSize": 18,
                       "fontWeight": "600"
                     }
@@ -321,7 +525,7 @@
                 {
                   "type": "frame",
                   "id": "DQ9Mm",
-                  "name": "typo_b",
+                  "name": "typo_body",
                   "layout": "vertical",
                   "gap": 8,
                   "children": [
@@ -336,29 +540,418 @@
                     },
                     {
                       "type": "text",
-                      "id": "xB3rJ",
-                      "fill": "$color-text",
-                      "content": "Body 16px — The quick brown fox",
+                      "id": "xB3rJ",
+                      "fill": "$color-text",
+                      "content": "Body  16px  line-height 1.6 (EN) / 1.8 (ZH)",
+                      "fontFamily": "Atkinson Hyperlegible",
+                      "fontSize": 16,
+                      "fontWeight": "normal"
+                    },
+                    {
+                      "type": "text",
+                      "id": "PDaOd",
+                      "fill": "$color-text",
+                      "content": "Caption  14px",
+                      "fontFamily": "Atkinson Hyperlegible",
+                      "fontSize": 14,
+                      "fontWeight": "normal"
+                    },
+                    {
+                      "type": "text",
+                      "id": "EO00V",
+                      "fill": "$color-text-muted",
+                      "content": "Label  12px  weight 500",
+                      "fontFamily": "Atkinson Hyperlegible",
+                      "fontSize": 12,
+                      "fontWeight": "500"
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "type": "frame",
+          "id": "mgPhB",
+          "name": "sec_space",
+          "width": "fill_container",
+          "layout": "vertical",
+          "gap": 16,
+          "children": [
+            {
+              "type": "text",
+              "id": "fk06b",
+              "fill": "$color-text-muted",
+              "content": "SPACING",
+              "fontFamily": "Inter",
+              "fontSize": 11,
+              "fontWeight": "700",
+              "letterSpacing": 2
+            },
+            {
+              "type": "frame",
+              "id": "cww4x",
+              "name": "space_row",
+              "width": "fill_container",
+              "gap": 16,
+              "alignItems": "end",
+              "children": [
+                {
+                  "type": "frame",
+                  "id": "HAncA",
+                  "name": "sp1",
+                  "layout": "vertical",
+                  "gap": 4,
+                  "alignItems": "center",
+                  "children": [
+                    {
+                      "type": "frame",
+                      "id": "GIZWU",
+                      "width": 4,
+                      "height": 4,
+                      "fill": "$color-primary"
+                    },
+                    {
+                      "type": "text",
+                      "id": "ZtS9s",
+                      "fill": "$color-text-muted",
+                      "content": "xs\n4px",
+                      "textAlign": "center",
+                      "fontFamily": "Inter",
+                      "fontSize": 10,
+                      "fontWeight": "normal"
+                    }
+                  ]
+                },
+                {
+                  "type": "frame",
+                  "id": "sEbYI",
+                  "name": "sp2",
+                  "layout": "vertical",
+                  "gap": 4,
+                  "alignItems": "center",
+                  "children": [
+                    {
+                      "type": "frame",
+                      "id": "9ZuMx",
+                      "width": 8,
+                      "height": 8,
+                      "fill": "$color-primary"
+                    },
+                    {
+                      "type": "text",
+                      "id": "E5YiN",
+                      "fill": "$color-text-muted",
+                      "content": "sm\n8px",
+                      "textAlign": "center",
+                      "fontFamily": "Inter",
+                      "fontSize": 10,
+                      "fontWeight": "normal"
+                    }
+                  ]
+                },
+                {
+                  "type": "frame",
+                  "id": "YewYz",
+                  "name": "sp3",
+                  "layout": "vertical",
+                  "gap": 4,
+                  "alignItems": "center",
+                  "children": [
+                    {
+                      "type": "frame",
+                      "id": "m1nwU",
+                      "width": 16,
+                      "height": 16,
+                      "fill": "$color-primary"
+                    },
+                    {
+                      "type": "text",
+                      "id": "vjpAT",
+                      "fill": "$color-text-muted",
+                      "content": "md\n16px",
+                      "textAlign": "center",
+                      "fontFamily": "Inter",
+                      "fontSize": 10,
+                      "fontWeight": "normal"
+                    }
+                  ]
+                },
+                {
+                  "type": "frame",
+                  "id": "5f2KU",
+                  "name": "sp4",
+                  "layout": "vertical",
+                  "gap": 4,
+                  "alignItems": "center",
+                  "children": [
+                    {
+                      "type": "frame",
+                      "id": "TEd02",
+                      "width": 24,
+                      "height": 24,
+                      "fill": "$color-primary"
+                    },
+                    {
+                      "type": "text",
+                      "id": "w4cUu",
+                      "fill": "$color-text-muted",
+                      "content": "lg\n24px",
+                      "textAlign": "center",
+                      "fontFamily": "Inter",
+                      "fontSize": 10,
+                      "fontWeight": "normal"
+                    }
+                  ]
+                },
+                {
+                  "type": "frame",
+                  "id": "qZCIo",
+                  "name": "sp5",
+                  "layout": "vertical",
+                  "gap": 4,
+                  "alignItems": "center",
+                  "children": [
+                    {
+                      "type": "frame",
+                      "id": "D1gGZ",
+                      "width": 32,
+                      "height": 32,
+                      "fill": "$color-primary"
+                    },
+                    {
+                      "type": "text",
+                      "id": "XMvil",
+                      "fill": "$color-text-muted",
+                      "content": "xl\n32px",
+                      "textAlign": "center",
+                      "fontFamily": "Inter",
+                      "fontSize": 10,
+                      "fontWeight": "normal"
+                    }
+                  ]
+                },
+                {
+                  "type": "frame",
+                  "id": "e9wzk",
+                  "name": "sp6",
+                  "layout": "vertical",
+                  "gap": 4,
+                  "alignItems": "center",
+                  "children": [
+                    {
+                      "type": "frame",
+                      "id": "DCaye",
+                      "width": 48,
+                      "height": 48,
+                      "fill": "$color-primary"
+                    },
+                    {
+                      "type": "text",
+                      "id": "E5YLx",
+                      "fill": "$color-text-muted",
+                      "content": "2xl\n48px",
+                      "textAlign": "center",
+                      "fontFamily": "Inter",
+                      "fontSize": 10,
+                      "fontWeight": "normal"
+                    }
+                  ]
+                },
+                {
+                  "type": "frame",
+                  "id": "5KllR",
+                  "name": "sp7",
+                  "layout": "vertical",
+                  "gap": 4,
+                  "alignItems": "center",
+                  "children": [
+                    {
+                      "type": "frame",
+                      "id": "UrupJ",
+                      "width": 64,
+                      "height": 64,
+                      "fill": "$color-primary"
+                    },
+                    {
+                      "type": "text",
+                      "id": "7SYUu",
+                      "fill": "$color-text-muted",
+                      "content": "3xl\n64px",
+                      "textAlign": "center",
+                      "fontFamily": "Inter",
+                      "fontSize": 10,
+                      "fontWeight": "normal"
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "type": "frame",
+          "id": "woh0Y",
+          "name": "sec_radius",
+          "width": "fill_container",
+          "layout": "vertical",
+          "gap": 16,
+          "children": [
+            {
+              "type": "text",
+              "id": "zxKQG",
+              "fill": "$color-text-muted",
+              "content": "BORDER RADIUS",
+              "fontFamily": "Inter",
+              "fontSize": 11,
+              "fontWeight": "700",
+              "letterSpacing": 2
+            },
+            {
+              "type": "frame",
+              "id": "eF4uX",
+              "name": "radius_row",
+              "width": "fill_container",
+              "gap": 24,
+              "alignItems": "end",
+              "children": [
+                {
+                  "type": "frame",
+                  "id": "1SSsG",
+                  "name": "rasm",
+                  "layout": "vertical",
+                  "gap": 8,
+                  "alignItems": "center",
+                  "children": [
+                    {
+                      "type": "frame",
+                      "id": "XfTdw",
+                      "width": 40,
+                      "height": 40,
+                      "fill": "$color-primary",
+                      "cornerRadius": 4
+                    },
+                    {
+                      "type": "text",
+                      "id": "nx4ge",
+                      "fill": "$color-text-muted",
+                      "content": "sm\n4px",
+                      "textAlign": "center",
+                      "fontFamily": "Inter",
+                      "fontSize": 10,
+                      "fontWeight": "normal"
+                    }
+                  ]
+                },
+                {
+                  "type": "frame",
+                  "id": "ZreSo",
+                  "name": "ramd",
+                  "layout": "vertical",
+                  "gap": 8,
+                  "alignItems": "center",
+                  "children": [
+                    {
+                      "type": "frame",
+                      "id": "z3N8u",
+                      "width": 48,
+                      "height": 48,
+                      "fill": "$color-primary",
+                      "cornerRadius": 8
+                    },
+                    {
+                      "type": "text",
+                      "id": "IjHau",
+                      "fill": "$color-text-muted",
+                      "content": "md\n8px",
+                      "textAlign": "center",
+                      "fontFamily": "Inter",
+                      "fontSize": 10,
+                      "fontWeight": "normal"
+                    }
+                  ]
+                },
+                {
+                  "type": "frame",
+                  "id": "ghSCK",
+                  "name": "ralg",
+                  "layout": "vertical",
+                  "gap": 8,
+                  "alignItems": "center",
+                  "children": [
+                    {
+                      "type": "frame",
+                      "id": "Yivo3",
+                      "width": 56,
+                      "height": 56,
+                      "fill": "$color-primary",
+                      "cornerRadius": 12
+                    },
+                    {
+                      "type": "text",
+                      "id": "PWo3F",
+                      "fill": "$color-text-muted",
+                      "content": "lg\n12px",
+                      "textAlign": "center",
+                      "fontFamily": "Inter",
+                      "fontSize": 10,
+                      "fontWeight": "normal"
+                    }
+                  ]
+                },
+                {
+                  "type": "frame",
+                  "id": "TqiLM",
+                  "name": "raxl",
+                  "layout": "vertical",
+                  "gap": 8,
+                  "alignItems": "center",
+                  "children": [
+                    {
+                      "type": "frame",
+                      "id": "CgInz",
+                      "width": 64,
+                      "height": 64,
+                      "fill": "$color-primary",
+                      "cornerRadius": 16
+                    },
+                    {
+                      "type": "text",
+                      "id": "Cx4KL",
+                      "fill": "$color-text-muted",
+                      "content": "xl\n16px",
+                      "textAlign": "center",
                       "fontFamily": "Inter",
-                      "fontSize": 16,
+                      "fontSize": 10,
                       "fontWeight": "normal"
-                    },
+                    }
+                  ]
+                },
+                {
+                  "type": "frame",
+                  "id": "jdBcr",
+                  "name": "rafu",
+                  "layout": "vertical",
+                  "gap": 8,
+                  "alignItems": "center",
+                  "children": [
                     {
-                      "type": "text",
-                      "id": "PDaOd",
-                      "fill": "$color-text",
-                      "content": "Small 14px — The quick brown fox",
-                      "fontFamily": "Inter",
-                      "fontSize": 14,
-                      "fontWeight": "normal"
+                      "type": "frame",
+                      "id": "drzoh",
+                      "width": 40,
+                      "height": 40,
+                      "fill": "$color-primary",
+                      "cornerRadius": 9999
                     },
                     {
                       "type": "text",
-                      "id": "EO00V",
+                      "id": "ghwxo",
                       "fill": "$color-text-muted",
-                      "content": "Caption 12px — The quick brown fox",
+                      "content": "full\n9999px",
+                      "textAlign": "center",
                       "fontFamily": "Inter",
-                      "fontSize": 12,
+                      "fontSize": 10,
                       "fontWeight": "normal"
                     }
                   ]
@@ -369,17 +962,17 @@
         },
         {
           "type": "frame",
-          "id": "mgPhB",
-          "name": "sec_space",
+          "id": "ILfvU",
+          "name": "sec_zindex",
           "width": "fill_container",
           "layout": "vertical",
           "gap": 16,
           "children": [
             {
               "type": "text",
-              "id": "fk06b",
+              "id": "JNBe4",
               "fill": "$color-text-muted",
-              "content": "SPACING",
+              "content": "Z-INDEX SCALE",
               "fontFamily": "Inter",
               "fontSize": 11,
               "fontWeight": "700",
@@ -387,32 +980,34 @@
             },
             {
               "type": "frame",
-              "id": "cww4x",
-              "name": "space_row",
+              "id": "PtoLp",
+              "name": "zindex_row",
               "width": "fill_container",
-              "gap": 16,
+              "gap": 12,
               "alignItems": "end",
               "children": [
                 {
                   "type": "frame",
-                  "id": "HAncA",
-                  "name": "sp1",
+                  "id": "2d7dO",
+                  "name": "z1",
                   "layout": "vertical",
-                  "gap": 4,
+                  "gap": 6,
                   "alignItems": "center",
                   "children": [
                     {
                       "type": "frame",
-                      "id": "GIZWU",
-                      "width": 4,
-                      "height": 4,
-                      "fill": "$color-primary"
+                      "id": "FWGwd",
+                      "opacity": 0.15,
+                      "width": 72,
+                      "height": 24,
+                      "fill": "$color-primary",
+                      "cornerRadius": 4
                     },
                     {
                       "type": "text",
-                      "id": "ZtS9s",
+                      "id": "KAy1Y",
                       "fill": "$color-text-muted",
-                      "content": "xs\n4px",
+                      "content": "Base\n0",
                       "textAlign": "center",
                       "fontFamily": "Inter",
                       "fontSize": 10,
@@ -422,24 +1017,26 @@
                 },
                 {
                   "type": "frame",
-                  "id": "sEbYI",
-                  "name": "sp2",
+                  "id": "Qg5Tb",
+                  "name": "z2",
                   "layout": "vertical",
-                  "gap": 4,
+                  "gap": 6,
                   "alignItems": "center",
                   "children": [
                     {
                       "type": "frame",
-                      "id": "9ZuMx",
-                      "width": 8,
-                      "height": 8,
-                      "fill": "$color-primary"
+                      "id": "PVFRX",
+                      "opacity": 0.25,
+                      "width": 72,
+                      "height": 36,
+                      "fill": "$color-primary",
+                      "cornerRadius": 4
                     },
                     {
                       "type": "text",
-                      "id": "E5YiN",
+                      "id": "DjlSK",
                       "fill": "$color-text-muted",
-                      "content": "sm\n8px",
+                      "content": "Raised\n10",
                       "textAlign": "center",
                       "fontFamily": "Inter",
                       "fontSize": 10,
@@ -449,24 +1046,26 @@
                 },
                 {
                   "type": "frame",
-                  "id": "YewYz",
-                  "name": "sp3",
+                  "id": "1hzVO",
+                  "name": "z3",
                   "layout": "vertical",
-                  "gap": 4,
+                  "gap": 6,
                   "alignItems": "center",
                   "children": [
                     {
                       "type": "frame",
-                      "id": "m1nwU",
-                      "width": 16,
-                      "height": 16,
-                      "fill": "$color-primary"
+                      "id": "Olluj",
+                      "opacity": 0.4,
+                      "width": 72,
+                      "height": 48,
+                      "fill": "$color-primary",
+                      "cornerRadius": 4
                     },
                     {
                       "type": "text",
-                      "id": "vjpAT",
+                      "id": "2OILp",
                       "fill": "$color-text-muted",
-                      "content": "md\n16px",
+                      "content": "Dropdown\n100",
                       "textAlign": "center",
                       "fontFamily": "Inter",
                       "fontSize": 10,
@@ -476,24 +1075,26 @@
                 },
                 {
                   "type": "frame",
-                  "id": "5f2KU",
-                  "name": "sp4",
+                  "id": "2ckIv",
+                  "name": "z4",
                   "layout": "vertical",
-                  "gap": 4,
+                  "gap": 6,
                   "alignItems": "center",
                   "children": [
                     {
                       "type": "frame",
-                      "id": "TEd02",
-                      "width": 24,
-                      "height": 24,
-                      "fill": "$color-primary"
+                      "id": "Y1BJ2",
+                      "opacity": 0.55,
+                      "width": 72,
+                      "height": 60,
+                      "fill": "$color-primary",
+                      "cornerRadius": 4
                     },
                     {
                       "type": "text",
-                      "id": "w4cUu",
+                      "id": "oanp6",
                       "fill": "$color-text-muted",
-                      "content": "lg\n24px",
+                      "content": "Sticky\n200",
                       "textAlign": "center",
                       "fontFamily": "Inter",
                       "fontSize": 10,
@@ -503,24 +1104,26 @@
                 },
                 {
                   "type": "frame",
-                  "id": "qZCIo",
-                  "name": "sp5",
+                  "id": "OAwg3",
+                  "name": "z5",
                   "layout": "vertical",
-                  "gap": 4,
+                  "gap": 6,
                   "alignItems": "center",
                   "children": [
                     {
                       "type": "frame",
-                      "id": "D1gGZ",
-                      "width": 32,
-                      "height": 32,
-                      "fill": "$color-primary"
+                      "id": "1ak1m",
+                      "opacity": 0.7,
+                      "width": 72,
+                      "height": 72,
+                      "fill": "$color-primary",
+                      "cornerRadius": 4
                     },
                     {
                       "type": "text",
-                      "id": "XMvil",
+                      "id": "0UDqT",
                       "fill": "$color-text-muted",
-                      "content": "xl\n32px",
+                      "content": "Modal\n300",
                       "textAlign": "center",
                       "fontFamily": "Inter",
                       "fontSize": 10,
@@ -530,24 +1133,26 @@
                 },
                 {
                   "type": "frame",
-                  "id": "e9wzk",
-                  "name": "sp6",
+                  "id": "HFQd8",
+                  "name": "z6",
                   "layout": "vertical",
-                  "gap": 4,
+                  "gap": 6,
                   "alignItems": "center",
                   "children": [
                     {
                       "type": "frame",
-                      "id": "DCaye",
-                      "width": 48,
-                      "height": 48,
-                      "fill": "$color-primary"
+                      "id": "A9BWg",
+                      "opacity": 0.7,
+                      "width": 72,
+                      "height": 84,
+                      "fill": "$color-cta",
+                      "cornerRadius": 4
                     },
                     {
                       "type": "text",
-                      "id": "E5YLx",
+                      "id": "05YXi",
                       "fill": "$color-text-muted",
-                      "content": "2xl\n48px",
+                      "content": "Toast\n400",
                       "textAlign": "center",
                       "fontFamily": "Inter",
                       "fontSize": 10,
@@ -557,24 +1162,26 @@
                 },
                 {
                   "type": "frame",
-                  "id": "5KllR",
-                  "name": "sp7",
+                  "id": "ra0sI",
+                  "name": "z7",
                   "layout": "vertical",
-                  "gap": 4,
+                  "gap": 6,
                   "alignItems": "center",
                   "children": [
                     {
                       "type": "frame",
-                      "id": "UrupJ",
-                      "width": 64,
-                      "height": 64,
-                      "fill": "$color-primary"
+                      "id": "ljJM8",
+                      "opacity": 0.9,
+                      "width": 72,
+                      "height": 96,
+                      "fill": "$color-cta",
+                      "cornerRadius": 4
                     },
                     {
                       "type": "text",
-                      "id": "7SYUu",
+                      "id": "R2JIt",
                       "fill": "$color-text-muted",
-                      "content": "3xl\n64px",
+                      "content": "Tooltip\n500",
                       "textAlign": "center",
                       "fontFamily": "Inter",
                       "fontSize": 10,
@@ -741,7 +1348,7 @@
                       "name": "Card / Default",
                       "reusable": true,
                       "width": 280,
-                      "fill": "$color-background",
+                      "fill": "$color-surface",
                       "cornerRadius": "$radius-lg",
                       "stroke": {
                         "align": "inside",
@@ -1051,6 +1658,185 @@
                       ]
                     }
                   ]
+                },
+                {
+                  "type": "frame",
+                  "id": "f3VKu",
+                  "name": "badge_col",
+                  "layout": "vertical",
+                  "gap": 16,
+                  "children": [
+                    {
+                      "type": "text",
+                      "id": "LDXEn",
+                      "fill": "$color-text",
+                      "content": "Status Badges",
+                      "fontFamily": "Inter",
+                      "fontSize": 13,
+                      "fontWeight": "600"
+                    },
+                    {
+                      "type": "frame",
+                      "id": "55Ud6",
+                      "name": "b1",
+                      "fill": "$color-warning-bg",
+                      "cornerRadius": 4,
+                      "stroke": {
+                        "align": "inside",
+                        "thickness": 1,
+                        "fill": "$color-warning-border"
+                      },
+                      "gap": 6,
+                      "padding": [
+                        4,
+                        8
+                      ],
+                      "children": [
+                        {
+                          "type": "text",
+                          "id": "B9sGc",
+                          "fill": "$color-warning",
+                          "content": "In Progress",
+                          "fontFamily": "Inter",
+                          "fontSize": 12,
+                          "fontWeight": "500"
+                        }
+                      ]
+                    },
+                    {
+                      "type": "frame",
+                      "id": "TLmhx",
+                      "name": "b2",
+                      "fill": "$color-info-bg",
+                      "cornerRadius": 4,
+                      "stroke": {
+                        "align": "inside",
+                        "thickness": 1,
+                        "fill": "$color-info-border"
+                      },
+                      "gap": 6,
+                      "padding": [
+                        4,
+                        8
+                      ],
+                      "children": [
+                        {
+                          "type": "text",
+                          "id": "f5NhT",
+                          "fill": "$color-info",
+                          "content": "Not Started",
+                          "fontFamily": "Inter",
+                          "fontSize": 12,
+                          "fontWeight": "500"
+                        }
+                      ]
+                    },
+                    {
+                      "type": "frame",
+                      "id": "eRGLu",
+                      "name": "b3",
+                      "fill": "$color-success-bg",
+                      "cornerRadius": 4,
+                      "stroke": {
+                        "align": "inside",
+                        "thickness": 1,
+                        "fill": "$color-success-border"
+                      },
+                      "gap": 6,
+                      "padding": [
+                        4,
+                        8
+                      ],
+                      "children": [
+                        {
+                          "type": "text",
+                          "id": "sf3zo",
+                          "fill": "$color-success",
+                          "content": "Submitted",
+                          "fontFamily": "Inter",
+                          "fontSize": 12,
+                          "fontWeight": "500"
+                        }
+                      ]
+                    },
+                    {
+                      "type": "frame",
+                      "id": "BUvik",
+                      "name": "b4",
+                      "fill": "$color-error-bg",
+                      "cornerRadius": 4,
+                      "stroke": {
+                        "align": "inside",
+                        "thickness": 1,
+                        "fill": "$color-error-border"
+                      },
+                      "gap": 6,
+                      "padding": [
+                        4,
+                        8
+                      ],
+                      "children": [
+                        {
+                          "type": "text",
+                          "id": "Pagqm",
+                          "fill": "$color-error",
+                          "content": "Rejected",
+                          "fontFamily": "Inter",
+                          "fontSize": 12,
+                          "fontWeight": "500"
+                        }
+                      ]
+                    },
+                    {
+                      "type": "text",
+                      "id": "VvpIv",
+                      "fill": "$color-text",
+                      "content": "Error Banner",
+                      "fontFamily": "Inter",
+                      "fontSize": 13,
+                      "fontWeight": "600"
+                    },
+                    {
+                      "type": "frame",
+                      "id": "gpxAc",
+                      "name": "error_banner",
+                      "width": 280,
+                      "fill": "$color-error-bg",
+                      "cornerRadius": 8,
+                      "stroke": {
+                        "align": "inside",
+                        "thickness": 1,
+                        "fill": "$color-error-border"
+                      },
+                      "gap": 8,
+                      "padding": [
+                        12,
+                        16
+                      ],
+                      "children": [
+                        {
+                          "type": "icon_font",
+                          "id": "KvNKc",
+                          "width": 16,
+                          "height": 16,
+                          "iconFontName": "triangle-alert",
+                          "iconFontFamily": "lucide",
+                          "fill": "$color-error"
+                        },
+                        {
+                          "type": "text",
+                          "id": "7oHLV",
+                          "fill": "$color-error",
+                          "textGrowth": "fixed-width",
+                          "width": "fill_container",
+                          "content": "Invalid credentials. Please try again.",
+                          "fontFamily": "Inter",
+                          "fontSize": 13,
+                          "fontWeight": "normal"
+                        }
+                      ]
+                    }
+                  ]
                 }
               ]
             }
@@ -1135,6 +1921,66 @@
     "space-xs": {
       "type": "number",
       "value": 4
+    },
+    "color-error": {
+      "type": "color",
+      "value": "#B91C1C"
+    },
+    "color-error-bg": {
+      "type": "color",
+      "value": "#FEF2F2"
+    },
+    "color-error-border": {
+      "type": "color",
+      "value": "#FECACA"
+    },
+    "color-info": {
+      "type": "color",
+      "value": "#1D4ED8"
+    },
+    "color-info-bg": {
+      "type": "color",
+      "value": "#EFF6FF"
+    },
+    "color-info-border": {
+      "type": "color",
+      "value": "#BFDBFE"
+    },
+    "color-ink": {
+      "type": "color",
+      "value": "#1E1B4B"
+    },
+    "color-success": {
+      "type": "color",
+      "value": "#15803D"
+    },
+    "color-success-bg": {
+      "type": "color",
+      "value": "#F0FDF4"
+    },
+    "color-success-border": {
+      "type": "color",
+      "value": "#BBF7D0"
+    },
+    "color-surface": {
+      "type": "color",
+      "value": "#F5F3FF"
+    },
+    "color-warning": {
+      "type": "color",
+      "value": "#A16207"
+    },
+    "color-warning-bg": {
+      "type": "color",
+      "value": "#FEFCE8"
+    },
+    "color-warning-border": {
+      "type": "color",
+      "value": "#FEF08A"
+    },
+    "radius-full": {
+      "type": "number",
+      "value": 9999
     }
   }
 }
\ No newline at end of file

From c58514fe1b21ac96aa71791d5fe3dac4c78e0d32 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=B3=E6=AC=A3=E6=80=A1?= <ms.mandy610425@gmail.com>
Date: Mon, 30 Mar 2026 10:28:33 +0800
Subject: [PATCH 05/18] design: update dashboard prototype, design system, and
 profile spec

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .specify/templates/spec-template.md   | 16 ++++++++++++++++
 design/prototype/pages/dashboard.html | 11 ++++++++---
 design/system/MASTER.md               |  3 +++
 specs/002-profile-settings/spec.md    | 24 ++++++++++++------------
 4 files changed, 39 insertions(+), 15 deletions(-)

diff --git a/.specify/templates/spec-template.md b/.specify/templates/spec-template.md
index 819e3ad..29e41ef 100644
--- a/.specify/templates/spec-template.md
+++ b/.specify/templates/spec-template.md
@@ -54,6 +54,22 @@
 - **FR-002**: The system MUST [specific capability]
 - **FR-003**: Users MUST be able to [key interaction]
 
+### Page Navigation Flow *(include if feature introduces new pages or modifies navigation)*
+
+<!--
+  List every page/screen in this feature and define how users navigate between them.
+  This prevents orphan pages (pages with no entry point) in prototypes and implementation.
+  Format: [Source Page] --[trigger]--> [Target Page]
+-->
+
+| From | Trigger | To |
+|------|---------|-----|
+| [Page A] | [e.g. click avatar] | [Page B] |
+| [Page B] | [e.g. sidebar link] | [Page A] |
+
+**Entry points**: [Which existing pages link INTO the new pages?]
+**Exit points**: [Which pages can users navigate to FROM the new pages?]
+
 ### Key Entities *(include if feature involves data)*
 
 - **[Entity 1]**: [What it represents, key attributes]
diff --git a/design/prototype/pages/dashboard.html b/design/prototype/pages/dashboard.html
index 32132c4..c6a845a 100644
--- a/design/prototype/pages/dashboard.html
+++ b/design/prototype/pages/dashboard.html
@@ -60,12 +60,15 @@
 
       <!-- User menu -->
       <div class="flex items-center gap-2">
-        <!-- Avatar + name -->
-        <div class="hidden sm:flex items-center gap-2 mr-1">
+        <!-- Avatar + name → links to profile -->
+        <a href="profile.html"
+           class="hidden sm:flex items-center gap-2 mr-1 rounded-lg px-2 py-1 hover:bg-slate-50 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 cursor-pointer"
+           data-i18n-aria-label="aria-profile"
+           aria-label="查看個人資料">
           <img src="https://api.dicebear.com/7.x/initials/svg?seed=Researcher&backgroundColor=6366f1&textColor=ffffff"
                alt="User avatar" class="w-8 h-8 rounded-full border-2 border-primary/20" />
           <span class="text-sm text-ink font-medium">Researcher</span>
-        </div>
+        </a>
 
         <!-- Language toggle -->
         <button id="lang-toggle"
@@ -339,6 +342,7 @@ <h3 id="modal-title" class="text-lg font-semibold text-ink mb-2" data-i18n="moda
         'lang-label':            'EN',
         'page-title':            '儀表板 — Label Suite',
         'aria-home':             'Label Suite 首頁',
+        'aria-profile':          '查看個人資料',
         'aria-logout':           '登出',
         'aria-mobile-menu':      '開啟導覽選單',
         'aria-tasks-table':      '進行中標注任務',
@@ -384,6 +388,7 @@ <h3 id="modal-title" class="text-lg font-semibold text-ink mb-2" data-i18n="moda
         'lang-label':            'ZH',
         'page-title':            'Dashboard — Label Suite',
         'aria-home':             'Label Suite home',
+        'aria-profile':          'View profile',
         'aria-logout':           'Sign out',
         'aria-mobile-menu':      'Open navigation menu',
         'aria-tasks-table':      'Active annotation tasks',
diff --git a/design/system/MASTER.md b/design/system/MASTER.md
index 88d6d33..e3d90a4 100644
--- a/design/system/MASTER.md
+++ b/design/system/MASTER.md
@@ -344,6 +344,9 @@ Label Suite is a **tool-based web app** (not a marketing site). Use these two sh
 
 Before delivering any UI code, verify:
 
+- [ ] Every page is reachable from at least one entry point (no orphan pages)
+- [ ] Every `href="#"` placeholder has been replaced with a real path or marked `aria-disabled="true"`
+- [ ] Navigation flow matches the Page Navigation Flow table in `spec.md`
 - [ ] No emojis used as icons (use SVG instead)
 - [ ] All icons from consistent icon set (Heroicons/Lucide)
 - [ ] `cursor-pointer` on all **clickable** elements only
diff --git a/specs/002-profile-settings/spec.md b/specs/002-profile-settings/spec.md
index c518694..a5c2a35 100644
--- a/specs/002-profile-settings/spec.md
+++ b/specs/002-profile-settings/spec.md
@@ -50,21 +50,21 @@
 
 ### Functional Requirements
 
-- **FR-001**: The system MUST display the user's current display name, Email (read-only), avatar, and role on the profile settings page.
-- **FR-002**: The system MUST allow users to update their display name (non-empty, max 50 characters).
-- **FR-003**: The system MUST allow users to upload a new avatar (JPG/PNG/WebP, max 5MB) with live preview before saving.
-- **FR-004**: The system MUST prevent editing of the Email field, with a tooltip explaining it is managed by SSO.
-- **FR-005**: Users MUST be able to switch the interface language between ZH (Traditional Chinese) and EN (English).
-- **FR-006**: The system MUST persist the language preference across sessions.
-- **FR-007**: The system MUST show a success/failure toast notification after save actions.
+- **FR-001**: 系統必須在個人設定頁顯示使用者目前的顯示名稱、Email（唯讀）、頭像與角色。
+- **FR-002**: 系統必須允許使用者更新顯示名稱（不可為空，最多 50 個字元）。
+- **FR-003**: 系統必須允許使用者上傳新頭像（JPG／PNG／WebP，最大 5MB），並在儲存前提供即時預覽。
+- **FR-004**: 系統必須鎖定 Email 欄位為唯讀，並顯示提示說明「Email 由 SSO 帳號管理」。
+- **FR-005**: 使用者必須能在個人設定頁切換介面語言（ZH 繁體中文 ／ EN English）。
+- **FR-006**: 系統必須跨 session 保存語言偏好設定。
+- **FR-007**: 系統必須在儲存操作後顯示成功／失敗的 Toast 通知。
 
 ### Key Entities
 
-- **UserProfile**: Represents a logged-in user's profile. Key attributes: `id`, `display_name`, `email` (from SSO, read-only), `avatar_url`, `role` (admin | annotator | reviewer), `language_preference` (zh | en).
+- **UserProfile**：代表已登入使用者的個人資料。主要屬性：`id`、`display_name`、`email`（來自 SSO，唯讀）、`avatar_url`、`role`（admin｜annotator｜reviewer）、`language_preference`（zh｜en）。
 
 ## Success Criteria *(required)*
 
-- **SC-001**: Users can view and update their profile information in under 30 seconds.
-- **SC-002**: Language switch takes effect immediately without page reload.
-- **SC-003**: All form validation errors are surfaced inline before submission.
-- **SC-004**: Avatar upload and preview works correctly for JPG, PNG, and WebP formats under 5MB.
+- **SC-001**: 使用者可在 30 秒內完成個人資料的查看與更新。
+- **SC-002**: 語言切換立即生效，不需重新整理頁面。
+- **SC-003**: 所有表單驗證錯誤在送出前即時顯示於欄位旁。
+- **SC-004**: 頭像上傳與預覽功能對 JPG、PNG、WebP 格式（5MB 以內）正常運作。

From fb780422d38c0bfce9e0507890862475343c63c2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=B3=E6=AC=A3=E6=80=A1?= <ms.mandy610425@gmail.com>
Date: Mon, 30 Mar 2026 11:34:36 +0800
Subject: [PATCH 06/18] docs: update templates, CLAUDE.md, and feature specs

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .specify/templates/plan-template.md | 36 +++++++++++++++
 .specify/templates/spec-template.md | 41 +++++++++++++++--
 CLAUDE.md                           | 13 ++++++
 specs/001-sso-login/spec.md         | 69 +++++++++++++++++++++++++++++
 specs/002-profile-settings/spec.md  | 56 +++++++++++++++++++++++
 5 files changed, 211 insertions(+), 4 deletions(-)

diff --git a/.specify/templates/plan-template.md b/.specify/templates/plan-template.md
index f2f7d68..ffa8e19 100644
--- a/.specify/templates/plan-template.md
+++ b/.specify/templates/plan-template.md
@@ -60,6 +60,42 @@ backend/
     └── integration/test_[feature].py
 ```
 
+## System Flow & Data Flow *(include if feature involves API calls, async tasks, or multi-layer data processing)*
+
+<!--
+  Show how data moves through the system layers: Frontend → API → Service → DB.
+  Include error paths and async flows (Celery tasks, WebSocket, etc.) where relevant.
+  Renders natively on GitHub — no extra tooling needed.
+-->
+
+```mermaid
+sequenceDiagram
+    participant Frontend
+    participant API
+    participant Service
+    participant DB
+
+    Frontend->>API: POST /api/[resource] {payload}
+    API->>Service: [function_name](dto)
+    Service->>DB: INSERT / UPDATE [table]
+    DB-->>Service: return [entity]
+    Service-->>API: [ResponseSchema]
+    API-->>Frontend: 200 [ResponseDTO]
+
+    Note over Service,API: Error path
+    Service-->>API: raise [Exception] {detail: "..."}
+    API-->>Frontend: 4xx / 5xx {detail: "..."}
+```
+
+| Layer | Component | Responsibility |
+|-------|-----------|---------------|
+| Frontend | `pages/[feature]` | Form state, API call, display result |
+| API | `api/routes/[feature].py` | Request validation, auth check, delegate to service |
+| Service | `services/[feature].py` | Business logic, DB interaction |
+| DB | `models/[feature].py` | Persistence |
+
+---
+
 ## Complexity Tracking
 
 > Only fill in when a Constitution principle is violated and justification is required
diff --git a/.specify/templates/spec-template.md b/.specify/templates/spec-template.md
index 29e41ef..7e8aba7 100644
--- a/.specify/templates/spec-template.md
+++ b/.specify/templates/spec-template.md
@@ -5,6 +5,31 @@
 **Status**: Draft
 **Input**: User description: "$ARGUMENTS"
 
+## Process Flow *(include if feature involves a multi-step business process or cross-role workflow)*
+
+<!--
+  Describe the end-to-end business process BEFORE breaking it into user stories.
+  Focus on WHO does WHAT and in what ORDER — not on technical implementation.
+  Use a Mermaid sequenceDiagram and a step table. Renders natively on GitHub — no extra tooling needed.
+-->
+
+```mermaid
+sequenceDiagram
+    actor ActorA
+    participant System
+    actor ActorB
+
+    ActorA->>System: [action]
+    System-->>ActorB: [notification / response]
+    ActorB->>System: [confirmation / next action]
+```
+
+| Step | Role | Action | System Response |
+|------|------|--------|----------------|
+| 1 | [Role] | [What they do] | [What the system does] |
+
+---
+
 ## User Scenarios & Testing *(required)*
 
 <!--
@@ -54,14 +79,22 @@
 - **FR-002**: The system MUST [specific capability]
 - **FR-003**: Users MUST be able to [key interaction]
 
-### Page Navigation Flow *(include if feature introduces new pages or modifies navigation)*
+### User Flow & Navigation *(include if feature introduces new pages or modifies navigation)*
 
 <!--
-  List every page/screen in this feature and define how users navigate between them.
-  This prevents orphan pages (pages with no entry point) in prototypes and implementation.
-  Format: [Source Page] --[trigger]--> [Target Page]
+  1. Map every screen and its navigation triggers to prevent orphan pages.
+  2. Include a Mermaid flowchart for flows with 3+ screens or branching paths.
+  Renders natively on GitHub — no extra tooling needed.
 -->
 
+```mermaid
+flowchart LR
+    Login --> |login success| Dashboard
+    Dashboard --> |click avatar| Profile
+    Profile --> |sidebar link| Dashboard
+    Dashboard --> |sign out| Login
+```
+
 | From | Trigger | To |
 |------|---------|-----|
 | [Page A] | [e.g. click avatar] | [Page B] |
diff --git a/CLAUDE.md b/CLAUDE.md
index 2dd0b2c..f81513c 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -205,18 +205,31 @@ This project adopts Spec-Driven Development (SDD). New features should follow th
 
 ```
 /speckit.specify <feature description>  → specs/NNN-feature/spec.md
+                                          ↳ Process Flow      (spec.md § Process Flow — cross-role business process)
+                                          ↳ User Flow         (spec.md § User Flow & Navigation — screens + triggers)
 /ui-ux-pro-max                          → design/prototype/ + design/system/  (optional, UI-heavy features)
                                           ⚠ Before generating: read MASTER.md + design/wireframes/design-system.pen via Pencil MCP
 /senior-uiux review                     → prototype QA: design system compliance + accessibility  (optional, after prototype)
 /pencil wireframe                       → design/wireframes/pages/[page].pen  (optional, after senior-uiux review)
 /speckit.clarify                        → clarify requirements          (optional; prototype surfaces ambiguities)
 /speckit.plan                           → specs/NNN-feature/plan.md
+                                          ↳ System Flow       (plan.md § System Flow & Data Flow — API/service/DB layers)
 /speckit.tasks                          → specs/NNN-feature/tasks.md
 /speckit.analyze                        → cross-document consistency check (optional)
 /speckit.implement                      → execute implementation
 /speckit.checklist                      → quality validation
 ```
 
+**Flow Chart Ownership**:
+
+| Flow Type | Document | When | Purpose |
+|-----------|----------|------|---------|
+| Process Flow | `spec.md` | During `/speckit.specify` | Cross-role business process; WHO does WHAT |
+| User Flow | `spec.md` | During `/speckit.specify` | Screen navigation; prevents orphan pages |
+| System Flow | `plan.md` | During `/speckit.plan` | Data path through API → Service → DB layers |
+
+All diagrams use Mermaid (`sequenceDiagram` for process/system flows, `flowchart LR` for navigation flows). Renders natively on GitHub — no extra tooling needed.
+
 **Key Rules**:
 - Each spec directory contains: `spec.md`, `plan.md`, `tasks.md`, `checklists/`
 - Follow User Story priority order (P1 → P2 → P3)
diff --git a/specs/001-sso-login/spec.md b/specs/001-sso-login/spec.md
index 5dccea0..e59b6ad 100644
--- a/specs/001-sso-login/spec.md
+++ b/specs/001-sso-login/spec.md
@@ -5,6 +5,49 @@
 **狀態**：Clarified
 **需求來源**：「先做一個簡單的登入畫面，需要串接 Google、GitHub 登入的 SSO 功能」
 
+## Process Flow
+
+OAuth 登入涉及四個系統角色，以下為完整業務流程：
+
+```mermaid
+sequenceDiagram
+    actor 使用者
+    participant 瀏覽器
+    participant 後端API as 後端 API
+    participant OAuthProvider as OAuth Provider
+    participant 資料庫
+
+    使用者->>瀏覽器: 開啟 /login
+    瀏覽器->>後端API: GET /login（未驗證）
+    後端API-->>瀏覽器: 回傳登入頁面
+
+    使用者->>瀏覽器: 點擊「以 Google / GitHub 登入」
+    瀏覽器->>OAuthProvider: 導向授權頁（client_id、redirect_uri）
+    OAuthProvider-->>使用者: 顯示授權請求
+    使用者->>OAuthProvider: 允許授權
+
+    OAuthProvider->>後端API: callback（authorization code）
+    後端API->>OAuthProvider: 交換 access token
+    OAuthProvider-->>後端API: access token
+    後端API->>OAuthProvider: 取得使用者資料
+    OAuthProvider-->>後端API: name、email、avatar
+    後端API->>資料庫: 查詢或建立使用者記錄（以 email 比對）
+    資料庫-->>後端API: User record
+    後端API-->>瀏覽器: 設定 JWT cookie + 導向 /dashboard
+```
+
+| 步驟 | 角色 | 動作 | 系統回應 |
+|------|------|------|---------|
+| 1 | 使用者 | 開啟 `/login` | 回傳登入頁面 |
+| 2 | 使用者 | 點擊 OAuth 按鈕 | 導向 Provider 授權頁 |
+| 3 | OAuth Provider | 使用者授權後回調 | 後端接收 `code` |
+| 4 | 後端 | 交換 token + 取得資料 | 查詢或建立 User 記錄 |
+| 5 | 後端 | 簽發 JWT | 導向 `/dashboard` |
+| E1 | 使用者 | 取消授權 | 停留 `/login` 並顯示錯誤 |
+| E2 | 後端 | JWT 過期 | 導向 `/login`，不靜默更新 |
+
+---
+
 ## 使用者情境與測試 *(必填)*
 
 ### User Story 1 — 使用 Google 或 GitHub 登入（優先級：P1）
@@ -104,6 +147,32 @@
 - **FR-013**：當使用者以某個身份提供者登入，且 email 已對應另一個身份提供者的帳號時，系統必須靜默合併兩個 provider 至既有帳號，不需使用者確認。
 - **FR-014**：登入頁面必須支援 zh-TW / en 語言切換，與應用程式其他頁面一致。
 
+### User Flow & Navigation
+
+```mermaid
+flowchart LR
+    login["/login"]
+    dashboard["/dashboard"]
+    protected["受保護路由\n/dashboard · /tasks · /profile …"]
+
+    login      -->|"登入成功（OAuth 完成）"| dashboard
+    dashboard  -->|"登出（JWT 失效）"| login
+    protected  -->|"未驗證存取 → 自動導向"| login
+    login      -->|"登入成功 + ?next= 參數"| protected
+    login      -->|"已登入使用者訪問 → 自動導向"| dashboard
+```
+
+| From | Trigger | To |
+|------|---------|-----|
+| `/login` | OAuth 登入成功 | `/dashboard` |
+| `/login` | 已登入使用者訪問 | `/dashboard`（自動導向）|
+| `/login` | 登入成功 + `?next=` 參數 | 原始目標路由 |
+| 任意已登入頁面 | 點擊登出 | `/login` |
+| 任意受保護路由 | 未驗證存取 | `/login?next=[原始路徑]` |
+
+**Entry points**：`/login` 是系統唯一的未驗證入口。
+**Exit points**：所有受保護路由均可透過登出按鈕返回 `/login`。
+
 ### 關鍵實體
 
 - **User（使用者）**：代表已驗證身份。關鍵屬性：`id`、`email`、`name`、`avatar_url`、`provider`（google | github）、`provider_id`、`role`（annotator | researcher | admin）、`created_at`。
diff --git a/specs/002-profile-settings/spec.md b/specs/002-profile-settings/spec.md
index a5c2a35..10db9c6 100644
--- a/specs/002-profile-settings/spec.md
+++ b/specs/002-profile-settings/spec.md
@@ -5,6 +5,43 @@
 **Status**: Draft
 **Input**: User description: "個人設定頁（M1b）：登入後的使用者個人資料設定頁面。使用者可以查看與編輯自己的帳號資訊，包含顯示名稱、Email（唯讀，來自 SSO）、頭像、介面語言切換（ZH/EN）。"
 
+## Process Flow
+
+單一角色操作流程（使用者在個人設定頁查看與更新資料）：
+
+```mermaid
+sequenceDiagram
+    actor 使用者
+    participant ProfilePage as Profile 設定頁
+    participant 後端API as 後端 API
+    participant 資料庫
+
+    使用者->>ProfilePage: 進入個人設定頁（點擊 Navbar Avatar）
+    ProfilePage-->>使用者: 顯示目前資料（email 唯讀、avatar、role）
+
+    使用者->>ProfilePage: 修改顯示名稱 / 上傳新頭像 / 切換語言
+    ProfilePage-->>使用者: 即時預覽頭像（未儲存）
+
+    使用者->>ProfilePage: 點擊「儲存」
+    ProfilePage->>後端API: PATCH /api/users/me
+    後端API->>資料庫: UPDATE users SET ...
+    資料庫-->>後端API: 200 OK
+    後端API-->>ProfilePage: UserProfileResponse
+    ProfilePage-->>使用者: Toast「儲存成功」+ 頁面更新
+```
+
+| 步驟 | 角色 | 動作 | 系統回應 |
+|------|------|------|---------|
+| 1 | 使用者 | 進入個人設定頁 | 顯示目前資料（email 唯讀）|
+| 2 | 使用者 | 修改欄位 / 上傳頭像 | 即時預覽（未儲存）|
+| 3 | 使用者 | 點擊「儲存」 | PATCH API → DB 更新 |
+| 4 | 系統 | 儲存成功 | Toast 通知 + 頁面更新 |
+| E1 | 使用者 | 顯示名稱為空 | 拒絕儲存 + inline 錯誤 |
+| E2 | 使用者 | 上傳檔案過大或格式錯誤 | 拒絕上傳 + 顯示錯誤訊息 |
+| E3 | 系統 | 網路中斷 | Toast「儲存失敗」+ 保留表單 |
+
+---
+
 ## User Scenarios & Testing *(required)*
 
 ### User Story 1 - View and Edit Profile Info (Priority: P1)
@@ -58,6 +95,25 @@
 - **FR-006**: 系統必須跨 session 保存語言偏好設定。
 - **FR-007**: 系統必須在儲存操作後顯示成功／失敗的 Toast 通知。
 
+### User Flow & Navigation
+
+```mermaid
+flowchart LR
+    dashboard["/dashboard"]
+    profile["/profile"]
+
+    dashboard -->|"點擊 Navbar Avatar"| profile
+    profile   -->|"點擊 Sidebar「儀表板」連結"| dashboard
+```
+
+| From | Trigger | To |
+|------|---------|-----|
+| `/dashboard` | 點擊 Navbar Avatar（使用者名稱）| `/profile` |
+| `/profile` | 點擊 Sidebar「儀表板」連結 | `/dashboard` |
+
+**Entry points**：`/dashboard` Navbar 的 Avatar 是唯一入口。
+**Exit points**：`/profile` Sidebar 可導回 `/dashboard`。
+
 ### Key Entities
 
 - **UserProfile**：代表已登入使用者的個人資料。主要屬性：`id`、`display_name`、`email`（來自 SSO，唯讀）、`avatar_url`、`role`（admin｜annotator｜reviewer）、`language_preference`（zh｜en）。

From af4007e7f68c77c444b0427e5c994d94e77b073c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=B3=E6=AC=A3=E6=80=A1?= <ms.mandy610425@gmail.com>
Date: Mon, 30 Mar 2026 11:39:46 +0800
Subject: [PATCH 07/18] docs: update constitution.md

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .specify/memory/constitution.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.specify/memory/constitution.md b/.specify/memory/constitution.md
index 3415942..0e1d49e 100644
--- a/.specify/memory/constitution.md
+++ b/.specify/memory/constitution.md
@@ -48,7 +48,7 @@ Evaluation results must be fair and reproducible.
 
 ### VI. English-First
 - Code, comments, docstrings, commit messages, and variable/function names are always written in English
-- Traditional Chinese is permitted in `docs/` and `specs/` directories to accelerate research documentation
+- Traditional Chinese is permitted in `docs/`, `specs/`, `design/prototype/`, and `design/wireframes/` directories to accelerate research documentation and UI iteration
 - The only fully Chinese file outside those directories is `README.zh-TW.md`
 
 ## Governance
@@ -68,4 +68,4 @@ Constitution principles take precedence over all other conventions.
 
 **Compliance Review**: All PRs must verify compliance with all six principles before merging. Use `/speckit.analyze` to check cross-artifact consistency and Constitution alignment.
 
-**Version**: 1.2.1 | **Ratified**: 2026-03-18 | **Last Amended**: 2026-03-25
+**Version**: 1.2.2 | **Ratified**: 2026-03-18 | **Last Amended**: 2026-03-30

From 9ee792353717079d1e92c9dbd190b3b6d2cde2db Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=B3=E6=AC=A3=E6=80=A1?= <ms.mandy610425@gmail.com>
Date: Mon, 30 Mar 2026 15:18:25 +0800
Subject: [PATCH 08/18] fix: address devin review findings on PR #16

- fix: update stale pencil/pages/ path to design/wireframes/pages/ in CLAUDE.md workflow section
- fix: add Pattern C (Header + Sidebar + Content) to MASTER.md for Profile pages,
  resolving inconsistency between profile.html sidebar layout and Pattern A spec

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 CLAUDE.md               | 6 +++---
 design/system/MASTER.md | 8 +++++++-
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/CLAUDE.md b/CLAUDE.md
index f81513c..d372b59 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -175,7 +175,7 @@ Format: `<type>: <description>`, type must be one of:
 | `fix` | Bug fix | `fix: correct scoring logic error` |
 | `docs` | Documentation | `docs: update roadmap` |
 | `refactor` | Refactoring | `refactor: split evaluation service layer` |
-| `test` | Tests | `test: add leaderboard E2E tests` |
+| `test` | Tests | `test: add labeling flow E2E tests` |
 | `style` | Formatting | `style: apply ruff formatting` |
 | `chore` | Build / dependencies | `chore: upgrade FastAPI version` |
 | `perf` | Performance | `perf: add Redis caching` |
@@ -191,7 +191,7 @@ Format: `<type>/<short-description>`, lowercase with `-` separator, aligned with
 | `fix/` | Bug fix | `fix/score-calculation` |
 | `docs/` | Documentation | `docs/roadmap-update` |
 | `refactor/` | Refactoring | `refactor/eval-service` |
-| `test/` | Tests | `test/leaderboard-e2e` |
+| `test/` | Tests | `test/labeling-flow-e2e` |
 | `chore/` | Build / dependencies | `chore/upgrade-dependencies` |
 
 ### Protection Rules
@@ -314,7 +314,7 @@ All development must follow the six core principles in [constitution.md](.specif
   → [/ui-ux-pro-max] (optional) — HTML prototype + design system
                                    Use to surface UI ambiguities before clarify
   → [senior-uiux review]         Review prototype: design system compliance, a11y, ZH/EN symmetry
-  → [pencil wireframe]           Draw ZH + EN frames in pencil/pages/[page].pen via Pencil MCP
+  → [pencil wireframe]           Draw ZH + EN frames in design/wireframes/pages/[page].pen via Pencil MCP
   → /speckit.clarify (optional)  Prototype makes ambiguities concrete
 
   [Optional: Research Agents] — spawn before /speckit.plan for complex features
diff --git a/design/system/MASTER.md b/design/system/MASTER.md
index e3d90a4..47913be 100644
--- a/design/system/MASTER.md
+++ b/design/system/MASTER.md
@@ -311,7 +311,7 @@ Label Suite uses Flat Design with **one allowed exception**: a maximum `translat
 Label Suite is a **tool-based web app** (not a marketing site). Use these two shell layouts:
 
 **Pattern A: Header + Content Layout**
-- Used for: Dashboard, Leaderboard, Settings, Profile
+- Used for: Dashboard, Settings
 - Structure: Fixed top navbar (height 56px) + scrollable main content area
 - Max content width: `max-w-7xl mx-auto px-4 sm:px-6 lg:px-8`
 - Top padding: `pt-6` below navbar
@@ -322,6 +322,12 @@ Label Suite is a **tool-based web app** (not a marketing site). Use these two sh
 - Sidebar contains: task metadata, label palette, progress indicator
 - Define in `design/system/pages/annotation.md` when implemented
 
+**Pattern C: Header + Sidebar + Content Layout**
+- Used for: Profile, multi-section settings pages
+- Structure: Fixed top navbar (height 56px) + fixed left nav sidebar (width 224px) + scrollable main content area
+- Sidebar contains: section navigation links (e.g., Profile Info, Security, Notifications)
+- Max content width: `max-w-3xl` within the content area
+
 ---
 
 ## Anti-Patterns (Do NOT Use)

From c7d917868e80ed79ae87cb02549948ce86bfc9c4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=B3=E6=AC=A3=E6=80=A1?= <ms.mandy610425@gmail.com>
Date: Tue, 31 Mar 2026 09:26:31 +0800
Subject: [PATCH 09/18] fix: update stale design-system/ paths in
 design_system.py

- Update docstrings at lines 471 and 493
- Update format_page_override_md output at line 822
All changed from design-system/ to design/system/

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .claude/skills/ui-ux-pro-max/scripts/design_system.py | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/.claude/skills/ui-ux-pro-max/scripts/design_system.py b/.claude/skills/ui-ux-pro-max/scripts/design_system.py
index 70177c3..3fc6cd0 100644
--- a/.claude/skills/ui-ux-pro-max/scripts/design_system.py
+++ b/.claude/skills/ui-ux-pro-max/scripts/design_system.py
@@ -468,7 +468,7 @@ def generate_design_system(query: str, project_name: str = None, output_format:
         query: Search query (e.g., "SaaS dashboard", "e-commerce luxury")
         project_name: Optional project name for output header
         output_format: "ascii" (default) or "markdown"
-        persist: If True, save design system to design-system/ folder
+        persist: If True, save design system to design/system/ folder
         page: Optional page name for page-specific override file
         output_dir: Optional output directory (defaults to current working directory)
 
@@ -490,7 +490,7 @@ def generate_design_system(query: str, project_name: str = None, output_format:
 # ============ PERSISTENCE FUNCTIONS ============
 def persist_design_system(design_system: dict, page: str = None, output_dir: str = None, page_query: str = None) -> dict:
     """
-    Persist design system to design-system/<project>/ folder using Master + Overrides pattern.
+    Persist design system to design/system/<project>/ folder using Master + Overrides pattern.
     
     Args:
         design_system: The generated design system dictionary
@@ -819,7 +819,7 @@ def format_page_override_md(design_system: dict, page_name: str, page_query: str
     lines.append(f"> **Generated:** {timestamp}")
     lines.append(f"> **Page Type:** {page_overrides.get('page_type', 'General')}")
     lines.append("")
-    lines.append("> ⚠️ **IMPORTANT:** Rules in this file **override** the Master file (`design-system/MASTER.md`).")
+    lines.append("> ⚠️ **IMPORTANT:** Rules in this file **override** the Master file (`design/system/MASTER.md`).")
     lines.append("> Only deviations from the Master are documented here. For all other rules, refer to the Master.")
     lines.append("")
     lines.append("---")

From 4ace7a4ec83808ebce8e94ab900441eb098ce19b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=B3=E6=AC=A3=E6=80=A1?= <ms.mandy610425@gmail.com>
Date: Tue, 31 Mar 2026 09:27:05 +0800
Subject: [PATCH 10/18] design: update CLAUDE.md, constitution, dashboard
 prototype, and add profile wireframe

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .specify/memory/constitution.md       |    5 +-
 CLAUDE.md                             |   46 +-
 design/prototype/pages/dashboard.html |   24 +-
 design/wireframes/pages/profile.pen   | 1323 +++++++++++++++++++++++++
 4 files changed, 1356 insertions(+), 42 deletions(-)
 create mode 100644 design/wireframes/pages/profile.pen

diff --git a/.specify/memory/constitution.md b/.specify/memory/constitution.md
index 0e1d49e..eda2312 100644
--- a/.specify/memory/constitution.md
+++ b/.specify/memory/constitution.md
@@ -34,11 +34,10 @@ Evaluation results must be fair and reproducible.
 
 - Test-set answers must never be exposed to annotators
 - Scoring logic must be transparent and covered by tests
-- Leaderboard update mechanism must prevent duplicate submission abuse
 
 ### IV. Test-First (RECOMMENDED)
 - Backend: pytest coverage target ≥ 80%
-- E2E: Playwright covers core user flows (labeling, submission, leaderboard)
+- E2E: Playwright covers core user flows (labeling, submission, review)
 - Tests must be written and confirmed to fail before implementation begins
 
 ### V. Simplicity
@@ -68,4 +67,4 @@ Constitution principles take precedence over all other conventions.
 
 **Compliance Review**: All PRs must verify compliance with all six principles before merging. Use `/speckit.analyze` to check cross-artifact consistency and Constitution alignment.
 
-**Version**: 1.2.2 | **Ratified**: 2026-03-18 | **Last Amended**: 2026-03-30
+**Version**: 1.2.3 | **Ratified**: 2026-03-18 | **Last Amended**: 2026-03-30
diff --git a/CLAUDE.md b/CLAUDE.md
index d372b59..4cabecb 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -207,11 +207,13 @@ This project adopts Spec-Driven Development (SDD). New features should follow th
 /speckit.specify <feature description>  → specs/NNN-feature/spec.md
                                           ↳ Process Flow      (spec.md § Process Flow — cross-role business process)
                                           ↳ User Flow         (spec.md § User Flow & Navigation — screens + triggers)
-/ui-ux-pro-max                          → design/prototype/ + design/system/  (optional, UI-heavy features)
-                                          ⚠ Before generating: read MASTER.md + design/wireframes/design-system.pen via Pencil MCP
-/senior-uiux review                     → prototype QA: design system compliance + accessibility  (optional, after prototype)
-/pencil wireframe                       → design/wireframes/pages/[page].pen  (optional, after senior-uiux review)
-/speckit.clarify                        → clarify requirements          (optional; prototype surfaces ambiguities)
+/pencil wireframe                       → design/wireframes/pages/[page].pen  (optional, after specify)
+                                          ⚠ Each .pen: Desktop ZH (x:0) · Desktop EN (x:1500) · Mobile ZH (x:3000) · Mobile EN (x:4500)
+                                            + Component ZH (x:6000) · Component EN (x:7500); draw ZH first, Desktop before Mobile
+/ui-ux-pro-max                          → design/prototype/ + design/system/  (optional, after wireframe)
+                                          ⚠ Before generating: read MASTER.md + design/wireframes/[page].pen via Pencil MCP
+/senior-uiux review                     → prototype QA: wireframe fidelity, design system compliance, a11y  (optional, after prototype)
+/speckit.clarify                        → clarify requirements          (optional; wireframe + prototype surface ambiguities)
 /speckit.plan                           → specs/NNN-feature/plan.md
                                           ↳ System Flow       (plan.md § System Flow & Data Flow — API/service/DB layers)
 /speckit.tasks                          → specs/NNN-feature/tasks.md
@@ -265,10 +267,10 @@ The deciding question is: **will this change make the system behave differently
 | Command | Purpose |
 |---|---|
 | `/speckit.specify` | Create feature spec from natural language description |
-| `/ui-ux-pro-max` | Generate HTML prototype + design system (optional; run after specify, before clarify) |
-| `senior-uiux review` | Review prototype for design system compliance, a11y, ZH/EN symmetry (optional; run after ui-ux-pro-max) |
-| `pencil wireframe` | Draw ZH + EN wireframe frames in `design/wireframes/pages/[page].pen` via Pencil MCP (optional; run after senior-uiux review) |
-| `/speckit.clarify` | Identify and clarify ambiguous requirements (prototype helps surface these) |
+| `pencil wireframe` | Draw 6 frames (Desktop ZH·EN · Mobile ZH·EN · Component ZH·EN) in `design/wireframes/pages/[page].pen` via Pencil MCP (optional; run after specify, before prototype) |
+| `/ui-ux-pro-max` | Generate HTML prototype + design system based on wireframe (optional; run after wireframe, before clarify) |
+| `senior-uiux review` | Review prototype against wireframe for fidelity, design system compliance, a11y, ZH/EN/mobile symmetry (optional; run after ui-ux-pro-max) |
+| `/speckit.clarify` | Identify and clarify ambiguous requirements (wireframe + prototype help surface these) |
 | `/speckit.plan` | Build technical implementation plan |
 | `/speckit.tasks` | Generate executable task list |
 | `/speckit.analyze` | Cross-document consistency analysis |
@@ -279,9 +281,21 @@ The deciding question is: **will this change make the system behave differently
 
 - Each page wireframe is stored as a separate file under `design/wireframes/pages/[page-name].pen` (e.g. `login.pen`, `profile.pen`)
 - `design/wireframes/index.pen` is for overview purposes only — **do not** place page wireframe frames inside it
-- Each `.pen` file contains two side-by-side frames: Desktop ZH (`x:0`) and Desktop EN (`x:1500`)
+- Each `.pen` file contains **6 side-by-side frames** in this order:
+
+  | Frame | x offset | Purpose |
+  |---|---|---|
+  | Desktop ZH | `x:0` | Full page — Traditional Chinese, desktop |
+  | Desktop EN | `x:1500` | Full page — English, desktop |
+  | Mobile ZH | `x:3000` | Full page — Traditional Chinese, mobile |
+  | Mobile EN | `x:4500` | Full page — English, mobile |
+  | Component ZH | `x:6000` | UI component set (dropdowns, buttons, etc.) — ZH |
+  | Component EN | `x:7500` | UI component set — EN |
+
+- Draw order: Desktop ZH → Desktop EN → Mobile ZH → Mobile EN → Component ZH → Component EN
+- Keep structure symmetric between ZH and EN frames at each device tier
+- Component frames (`x:6000` onward) capture all reusable UI elements introduced in this page; not repeated in `index.pen`
 - `.pen` files are encrypted — **only operate via Pencil MCP tools**; never use `Read` / `Edit` / `Grep` on them
-- Draw the ZH frame first, then the EN frame, keeping structure symmetric between the two
 
 ### Constitution Reference
 
@@ -311,11 +325,11 @@ All development must follow the six core principles in [constitution.md](.specif
 ```
 ── Phase 1: Spec ─────────────────────────────────────────────────────────────
 /speckit.specify
-  → [/ui-ux-pro-max] (optional) — HTML prototype + design system
-                                   Use to surface UI ambiguities before clarify
-  → [senior-uiux review]         Review prototype: design system compliance, a11y, ZH/EN symmetry
-  → [pencil wireframe]           Draw ZH + EN frames in design/wireframes/pages/[page].pen via Pencil MCP
-  → /speckit.clarify (optional)  Prototype makes ambiguities concrete
+  → [pencil wireframe]           Draw 6 frames (Desktop/Mobile ZH·EN + Components) in
+                                   design/wireframes/pages/[page].pen via Pencil MCP
+  → [/ui-ux-pro-max] (optional) — HTML prototype + design system; use wireframe as layout reference
+  → [senior-uiux review]         Review prototype against wireframe: fidelity, a11y, ZH/EN/mobile symmetry
+  → /speckit.clarify (optional)  Wireframe + prototype make ambiguities concrete
 
   [Optional: Research Agents] — spawn before /speckit.plan for complex features
   (read-only, parallel, skip for simple/single-layer features)
diff --git a/design/prototype/pages/dashboard.html b/design/prototype/pages/dashboard.html
index c6a845a..13c0318 100644
--- a/design/prototype/pages/dashboard.html
+++ b/design/prototype/pages/dashboard.html
@@ -54,7 +54,6 @@
       <nav class="hidden md:flex items-center gap-1" role="navigation" aria-label="Main navigation">
         <a href="#" class="px-3 py-2 text-sm text-primary font-medium bg-surface rounded-lg cursor-pointer" aria-current="page" data-i18n="nav-dashboard">儀表板</a>
         <a href="#" aria-disabled="true" class="px-3 py-2 text-sm text-slate-600 hover:text-ink hover:bg-slate-50 rounded-lg cursor-pointer transition-colors duration-200" data-i18n="nav-tasks">任務</a>
-        <a href="#" class="px-3 py-2 text-sm text-slate-600 hover:text-ink hover:bg-slate-50 rounded-lg cursor-pointer transition-colors duration-200" data-i18n="nav-leaderboard">排行榜</a>
         <a href="#" class="px-3 py-2 text-sm text-slate-600 hover:text-ink hover:bg-slate-50 rounded-lg cursor-pointer transition-colors duration-200" data-i18n="nav-settings">設定</a>
       </nav>
 
@@ -110,7 +109,6 @@
     <nav id="mobile-menu" class="hidden md:hidden border-t border-slate-200 bg-white px-4 py-3 space-y-1" role="navigation" aria-label="Mobile navigation">
       <a href="#" class="block px-3 py-2 text-sm text-primary font-medium bg-surface rounded-lg" aria-current="page" data-i18n="nav-dashboard">儀表板</a>
       <a href="#" aria-disabled="true" class="block px-3 py-2 text-sm text-slate-600 hover:text-ink hover:bg-slate-50 rounded-lg cursor-pointer transition-colors duration-200" data-i18n="nav-tasks">任務</a>
-      <a href="#" class="block px-3 py-2 text-sm text-slate-600 hover:text-ink hover:bg-slate-50 rounded-lg cursor-pointer transition-colors duration-200" data-i18n="nav-leaderboard">排行榜</a>
       <a href="#" class="block px-3 py-2 text-sm text-slate-600 hover:text-ink hover:bg-slate-50 rounded-lg cursor-pointer transition-colors duration-200" data-i18n="nav-settings">設定</a>
     </nav>
   </header>
@@ -127,7 +125,7 @@ <h1 class="text-2xl font-bold text-ink" data-i18n="welcome">歡迎回來，Resea
     <!-- Stat cards -->
     <section aria-labelledby="stats-heading">
       <h2 id="stats-heading" class="sr-only" data-i18n="stats-sr">活動統計</h2>
-      <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
+      <div class="grid grid-cols-2 lg:grid-cols-3 gap-4 mb-8">
 
         <!-- Card: Active Tasks -->
         <div class="bg-white border border-slate-200 rounded-xl p-5 cursor-pointer hover:border-primary transition-colors duration-200">
@@ -172,20 +170,6 @@ <h2 id="stats-heading" class="sr-only" data-i18n="stats-sr">活動統計</h2>
           <p class="text-xs text-slate-400 mt-1" data-i18n="stat-best-score-sub">NER 任務 #2</p>
         </div>
 
-        <!-- Card: Rank -->
-        <div class="bg-white border border-slate-200 rounded-xl p-5 cursor-pointer hover:border-primary transition-colors duration-200">
-          <div class="flex items-center justify-between mb-3">
-            <span class="text-xs text-slate-500 font-medium uppercase tracking-wide" data-i18n="stat-rank">排名</span>
-            <div class="w-8 h-8 bg-surface rounded-lg flex items-center justify-center">
-              <svg class="w-4 h-4 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-                <line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/>
-              </svg>
-            </div>
-          </div>
-          <p class="text-2xl font-bold text-ink">#5</p>
-          <p class="text-xs text-cta mt-1" data-i18n="stat-rank-sub">↑ 較上週上升 2 名</p>
-        </div>
-
       </div>
     </section>
 
@@ -305,7 +289,6 @@ <h3 id="modal-title" class="text-lg font-semibold text-ink mb-2" data-i18n="moda
       'zh-TW': {
         'nav-dashboard':     '儀表板',
         'nav-tasks':         '任務',
-        'nav-leaderboard':   '排行榜',
         'nav-settings':      '設定',
         'btn-signout':       '登出',
         'welcome':           '歡迎回來，Researcher',
@@ -317,8 +300,6 @@ <h3 id="modal-title" class="text-lg font-semibold text-ink mb-2" data-i18n="moda
         'stat-submissions-sub': '累計提交',
         'stat-best-score':   '最高分數',
         'stat-best-score-sub': 'NER 任務 #2',
-        'stat-rank':         '排名',
-        'stat-rank-sub':     '↑ 較上週上升 2 名',
         'table-title':       '進行中任務',
         'table-view-all':    '查看全部',
         'th-task':           '任務',
@@ -351,7 +332,6 @@ <h3 id="modal-title" class="text-lg font-semibold text-ink mb-2" data-i18n="moda
       'en': {
         'nav-dashboard':     'Dashboard',
         'nav-tasks':         'Tasks',
-        'nav-leaderboard':   'Leaderboard',
         'nav-settings':      'Settings',
         'btn-signout':       'Sign out',
         'welcome':           'Welcome back, Researcher',
@@ -363,8 +343,6 @@ <h3 id="modal-title" class="text-lg font-semibold text-ink mb-2" data-i18n="moda
         'stat-submissions-sub': 'Total submitted',
         'stat-best-score':   'Best Score',
         'stat-best-score-sub': 'NER Task #2',
-        'stat-rank':         'Rank',
-        'stat-rank-sub':     '↑ 2 since last week',
         'table-title':       'Active Tasks',
         'table-view-all':    'View all',
         'th-task':           'Task',
diff --git a/design/wireframes/pages/profile.pen b/design/wireframes/pages/profile.pen
new file mode 100644
index 0000000..05aafc4
--- /dev/null
+++ b/design/wireframes/pages/profile.pen
@@ -0,0 +1,1323 @@
+{
+  "version": "2.9",
+  "children": [
+    {
+      "type": "frame",
+      "id": "Nt8Ke",
+      "x": 0,
+      "y": 0,
+      "name": "Profile Desktop (ZH)",
+      "clip": true,
+      "width": 1440,
+      "height": 960,
+      "fill": "#F5F3FF",
+      "layout": "vertical",
+      "children": [
+        {
+          "type": "frame",
+          "id": "oqggu",
+          "name": "navbar",
+          "width": "fill_container",
+          "height": 56,
+          "fill": "#FFFFFF",
+          "stroke": {
+            "align": "inside",
+            "thickness": {
+              "bottom": 1
+            },
+            "fill": "#E2E8F0"
+          },
+          "padding": [
+            0,
+            80
+          ],
+          "justifyContent": "space_between",
+          "alignItems": "center",
+          "children": [
+            {
+              "type": "frame",
+              "id": "mmYv3",
+              "name": "logo",
+              "gap": 8,
+              "alignItems": "center",
+              "children": [
+                {
+                  "type": "rectangle",
+                  "cornerRadius": 8,
+                  "id": "A48c9",
+                  "fill": "#6366F1",
+                  "width": 32,
+                  "height": 32
+                },
+                {
+                  "type": "text",
+                  "id": "f5nFC",
+                  "fill": "#1E1B4B",
+                  "content": "Label Suite",
+                  "fontFamily": "Inter",
+                  "fontSize": 18,
+                  "fontWeight": "700"
+                }
+              ]
+            },
+            {
+              "type": "frame",
+              "id": "oQROS",
+              "name": "rarea",
+              "gap": 12,
+              "alignItems": "center",
+              "children": [
+                {
+                  "type": "frame",
+                  "id": "2KYsF",
+                  "name": "lang_btn",
+                  "fill": "#FFFFFF",
+                  "cornerRadius": 9999,
+                  "stroke": {
+                    "align": "inside",
+                    "thickness": 1,
+                    "fill": "#E2E8F0"
+                  },
+                  "gap": 6,
+                  "padding": [
+                    6,
+                    12
+                  ],
+                  "alignItems": "center",
+                  "children": [
+                    {
+                      "type": "text",
+                      "id": "4ywlO",
+                      "fill": "#64748B",
+                      "content": "EN",
+                      "fontFamily": "Inter",
+                      "fontSize": 12,
+                      "fontWeight": "500"
+                    }
+                  ]
+                },
+                {
+                  "type": "frame",
+                  "id": "zc2Wm",
+                  "name": "nav_av",
+                  "width": 32,
+                  "height": 32,
+                  "fill": "#6366F1",
+                  "cornerRadius": 9999,
+                  "justifyContent": "center",
+                  "alignItems": "center",
+                  "children": [
+                    {
+                      "type": "text",
+                      "id": "PZME9",
+                      "fill": "#FFFFFF",
+                      "content": "MC",
+                      "fontFamily": "Inter",
+                      "fontSize": 11,
+                      "fontWeight": "700"
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "type": "frame",
+          "id": "FXUFx",
+          "name": "content_row",
+          "width": "fill_container",
+          "height": "fill_container",
+          "children": [
+            {
+              "type": "frame",
+              "id": "pkffF",
+              "name": "sidebar",
+              "width": 224,
+              "height": "fill_container",
+              "fill": "#FFFFFF",
+              "stroke": {
+                "align": "inside",
+                "thickness": {
+                  "right": 1
+                },
+                "fill": "#E2E8F0"
+              },
+              "layout": "vertical",
+              "gap": 4,
+              "padding": [
+                16,
+                12
+              ],
+              "children": [
+                {
+                  "type": "frame",
+                  "id": "IMCwC",
+                  "name": "nav_dashboard",
+                  "width": "fill_container",
+                  "cornerRadius": 8,
+                  "gap": 10,
+                  "padding": [
+                    8,
+                    12
+                  ],
+                  "alignItems": "center",
+                  "children": [
+                    {
+                      "type": "rectangle",
+                      "cornerRadius": 2,
+                      "id": "p4yIi",
+                      "fill": "#94A3B8",
+                      "width": 16,
+                      "height": 16
+                    },
+                    {
+                      "type": "text",
+                      "id": "jldk6",
+                      "fill": "#64748B",
+                      "content": "儀表板",
+                      "fontFamily": "Inter",
+                      "fontSize": 14,
+                      "fontWeight": "normal"
+                    }
+                  ]
+                },
+                {
+                  "type": "rectangle",
+                  "id": "Qkv3E",
+                  "name": "divider",
+                  "fill": "#F1F5F9",
+                  "width": "fill_container",
+                  "height": 1
+                },
+                {
+                  "type": "frame",
+                  "id": "1eV0c",
+                  "name": "nav_profile",
+                  "width": "fill_container",
+                  "fill": "#F5F3FF",
+                  "cornerRadius": 8,
+                  "gap": 10,
+                  "padding": [
+                    8,
+                    12
+                  ],
+                  "alignItems": "center",
+                  "children": [
+                    {
+                      "type": "rectangle",
+                      "cornerRadius": 9999,
+                      "id": "BwScw",
+                      "fill": "#6366F1",
+                      "width": 16,
+                      "height": 16
+                    },
+                    {
+                      "type": "text",
+                      "id": "YVGu8",
+                      "fill": "#6366F1",
+                      "content": "個人設定",
+                      "fontFamily": "Inter",
+                      "fontSize": 14,
+                      "fontWeight": "500"
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "type": "frame",
+              "id": "nsjTb",
+              "name": "main",
+              "width": "fill_container",
+              "height": "fill_container",
+              "fill": "#F5F3FF",
+              "layout": "vertical",
+              "gap": 24,
+              "padding": [
+                32,
+                80
+              ],
+              "children": [
+                {
+                  "type": "frame",
+                  "id": "7ADvQ",
+                  "name": "page_hd",
+                  "width": "fill_container",
+                  "layout": "vertical",
+                  "gap": 6,
+                  "children": [
+                    {
+                      "type": "text",
+                      "id": "byNk8",
+                      "fill": "#1E1B4B",
+                      "content": "個人設定",
+                      "fontFamily": "Inter",
+                      "fontSize": 24,
+                      "fontWeight": "700"
+                    },
+                    {
+                      "type": "text",
+                      "id": "e8hiG",
+                      "fill": "#94A3B8",
+                      "content": "管理您的帳號資訊與顯示偏好。",
+                      "fontFamily": "Inter",
+                      "fontSize": 14,
+                      "fontWeight": "normal"
+                    }
+                  ]
+                },
+                {
+                  "type": "frame",
+                  "id": "QmAa2",
+                  "name": "profile_card",
+                  "width": "fill_container",
+                  "fill": "#FFFFFF",
+                  "cornerRadius": 16,
+                  "stroke": {
+                    "align": "inside",
+                    "thickness": 1,
+                    "fill": "#E2E8F0"
+                  },
+                  "layout": "vertical",
+                  "gap": 24,
+                  "padding": 32,
+                  "children": [
+                    {
+                      "type": "frame",
+                      "id": "4JEjG",
+                      "name": "avatar_row",
+                      "width": "fill_container",
+                      "gap": 20,
+                      "alignItems": "center",
+                      "children": [
+                        {
+                          "type": "frame",
+                          "id": "H9zO4",
+                          "name": "avatar",
+                          "width": 80,
+                          "height": 80,
+                          "fill": "#6366F1",
+                          "cornerRadius": 9999,
+                          "justifyContent": "center",
+                          "alignItems": "center",
+                          "children": [
+                            {
+                              "type": "text",
+                              "id": "yDccT",
+                              "fill": "#FFFFFF",
+                              "content": "MC",
+                              "fontFamily": "Inter",
+                              "fontSize": 24,
+                              "fontWeight": "700"
+                            }
+                          ]
+                        },
+                        {
+                          "type": "frame",
+                          "id": "pmw1w",
+                          "name": "av_info",
+                          "layout": "vertical",
+                          "gap": 6,
+                          "children": [
+                            {
+                              "type": "text",
+                              "id": "hzaTQ",
+                              "fill": "#1E1B4B",
+                              "content": "個人頭像",
+                              "fontFamily": "Inter",
+                              "fontSize": 14,
+                              "fontWeight": "500"
+                            },
+                            {
+                              "type": "text",
+                              "id": "dYPnw",
+                              "fill": "#94A3B8",
+                              "content": "JPG、PNG 或 WebP，最大 5 MB",
+                              "fontFamily": "Inter",
+                              "fontSize": 12,
+                              "fontWeight": "normal"
+                            }
+                          ]
+                        }
+                      ]
+                    },
+                    {
+                      "type": "rectangle",
+                      "id": "4Gje3",
+                      "name": "div1",
+                      "fill": "#F1F5F9",
+                      "width": "fill_container",
+                      "height": 1
+                    },
+                    {
+                      "type": "frame",
+                      "id": "2DU84",
+                      "name": "form",
+                      "width": "fill_container",
+                      "layout": "vertical",
+                      "gap": 20,
+                      "children": [
+                        {
+                          "type": "frame",
+                          "id": "5lJMU",
+                          "name": "field_name",
+                          "width": "fill_container",
+                          "layout": "vertical",
+                          "gap": 6,
+                          "children": [
+                            {
+                              "type": "text",
+                              "id": "5Vc0O",
+                              "fill": "#1E1B4B",
+                              "content": "顯示名稱",
+                              "fontFamily": "Inter",
+                              "fontSize": 14,
+                              "fontWeight": "500"
+                            },
+                            {
+                              "type": "frame",
+                              "id": "fDfDC",
+                              "name": "input_name",
+                              "width": "fill_container",
+                              "height": 40,
+                              "fill": "#FFFFFF",
+                              "cornerRadius": 8,
+                              "stroke": {
+                                "align": "inside",
+                                "thickness": 1,
+                                "fill": "#E2E8F0"
+                              },
+                              "padding": [
+                                0,
+                                12
+                              ],
+                              "alignItems": "center",
+                              "children": [
+                                {
+                                  "type": "text",
+                                  "id": "wG99T",
+                                  "fill": "#1E1B4B",
+                                  "content": "Mandy Chen",
+                                  "fontFamily": "Inter",
+                                  "fontSize": 14,
+                                  "fontWeight": "normal"
+                                }
+                              ]
+                            },
+                            {
+                              "type": "text",
+                              "id": "8aZkU",
+                              "fill": "#94A3B8",
+                              "content": "最多 50 個字元",
+                              "fontFamily": "Inter",
+                              "fontSize": 12,
+                              "fontWeight": "normal"
+                            }
+                          ]
+                        },
+                        {
+                          "type": "frame",
+                          "id": "IIxOV",
+                          "name": "field_email",
+                          "width": "fill_container",
+                          "layout": "vertical",
+                          "gap": 6,
+                          "children": [
+                            {
+                              "type": "text",
+                              "id": "FfSFP",
+                              "fill": "#1E1B4B",
+                              "content": "Email",
+                              "fontFamily": "Inter",
+                              "fontSize": 14,
+                              "fontWeight": "500"
+                            },
+                            {
+                              "type": "frame",
+                              "id": "DmxNI",
+                              "name": "input_email",
+                              "width": "fill_container",
+                              "height": 40,
+                              "fill": "#F8FAFC",
+                              "cornerRadius": 8,
+                              "stroke": {
+                                "align": "inside",
+                                "thickness": 1,
+                                "fill": "#E2E8F0"
+                              },
+                              "padding": [
+                                0,
+                                12
+                              ],
+                              "alignItems": "center",
+                              "children": [
+                                {
+                                  "type": "text",
+                                  "id": "M3m7s",
+                                  "fill": "#94A3B8",
+                                  "content": "mandy.chen@example.edu",
+                                  "fontFamily": "Inter",
+                                  "fontSize": 14,
+                                  "fontWeight": "normal"
+                                }
+                              ]
+                            }
+                          ]
+                        },
+                        {
+                          "type": "frame",
+                          "id": "crEIr",
+                          "name": "field_role",
+                          "width": "fill_container",
+                          "layout": "vertical",
+                          "gap": 6,
+                          "children": [
+                            {
+                              "type": "text",
+                              "id": "iTJDc",
+                              "fill": "#1E1B4B",
+                              "content": "角色",
+                              "fontFamily": "Inter",
+                              "fontSize": 14,
+                              "fontWeight": "500"
+                            },
+                            {
+                              "type": "frame",
+                              "id": "GLTwV",
+                              "name": "role_badge",
+                              "fill": "#EEF2FF",
+                              "cornerRadius": 9999,
+                              "stroke": {
+                                "align": "inside",
+                                "thickness": 1,
+                                "fill": "#6366F1"
+                              },
+                              "padding": [
+                                4,
+                                12
+                              ],
+                              "alignItems": "center",
+                              "children": [
+                                {
+                                  "type": "text",
+                                  "id": "qevUv",
+                                  "fill": "#6366F1",
+                                  "content": "管理員",
+                                  "fontFamily": "Inter",
+                                  "fontSize": 12,
+                                  "fontWeight": "500"
+                                }
+                              ]
+                            }
+                          ]
+                        },
+                        {
+                          "type": "frame",
+                          "id": "YUyrc",
+                          "name": "field_lang",
+                          "width": "fill_container",
+                          "layout": "vertical",
+                          "gap": 6,
+                          "children": [
+                            {
+                              "type": "text",
+                              "id": "MzXBS",
+                              "fill": "#1E1B4B",
+                              "content": "介面語言",
+                              "fontFamily": "Inter",
+                              "fontSize": 14,
+                              "fontWeight": "500"
+                            },
+                            {
+                              "type": "frame",
+                              "id": "wV90N",
+                              "name": "lang_toggle",
+                              "fill": "#F1F5F9",
+                              "cornerRadius": 8,
+                              "gap": 4,
+                              "padding": 4,
+                              "alignItems": "center",
+                              "children": [
+                                {
+                                  "type": "frame",
+                                  "id": "QkN66",
+                                  "name": "btn_zh",
+                                  "fill": "#FFFFFF",
+                                  "cornerRadius": 6,
+                                  "padding": [
+                                    6,
+                                    16
+                                  ],
+                                  "justifyContent": "center",
+                                  "alignItems": "center",
+                                  "children": [
+                                    {
+                                      "type": "text",
+                                      "id": "YakXN",
+                                      "fill": "#1E1B4B",
+                                      "content": "ZH",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 14,
+                                      "fontWeight": "500"
+                                    }
+                                  ]
+                                },
+                                {
+                                  "type": "frame",
+                                  "id": "6Jt9e",
+                                  "name": "btn_en",
+                                  "cornerRadius": 6,
+                                  "padding": [
+                                    6,
+                                    16
+                                  ],
+                                  "justifyContent": "center",
+                                  "alignItems": "center",
+                                  "children": [
+                                    {
+                                      "type": "text",
+                                      "id": "LKBLL",
+                                      "fill": "#94A3B8",
+                                      "content": "EN",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 14,
+                                      "fontWeight": "normal"
+                                    }
+                                  ]
+                                }
+                              ]
+                            },
+                            {
+                              "type": "text",
+                              "id": "1hUq8",
+                              "fill": "#94A3B8",
+                              "content": "切換後立即套用，並儲存至帳號設定。",
+                              "fontFamily": "Inter",
+                              "fontSize": 12,
+                              "fontWeight": "normal"
+                            }
+                          ]
+                        }
+                      ]
+                    },
+                    {
+                      "type": "rectangle",
+                      "id": "ovB6E",
+                      "name": "div2",
+                      "fill": "#F1F5F9",
+                      "width": "fill_container",
+                      "height": 1
+                    },
+                    {
+                      "type": "frame",
+                      "id": "9xzjd",
+                      "name": "save_row",
+                      "width": "fill_container",
+                      "justifyContent": "space_between",
+                      "alignItems": "center",
+                      "children": [
+                        {
+                          "type": "text",
+                          "id": "Y0AsX",
+                          "fill": "#94A3B8",
+                          "content": "上次儲存：2026-03-27 14:32",
+                          "fontFamily": "Inter",
+                          "fontSize": 12,
+                          "fontWeight": "normal"
+                        },
+                        {
+                          "type": "frame",
+                          "id": "rpZQK",
+                          "name": "save_btn",
+                          "fill": "#10B981",
+                          "cornerRadius": 8,
+                          "gap": 8,
+                          "padding": [
+                            10,
+                            20
+                          ],
+                          "alignItems": "center",
+                          "children": [
+                            {
+                              "type": "text",
+                              "id": "IO9aN",
+                              "fill": "#FFFFFF",
+                              "content": "儲存變更",
+                              "fontFamily": "Inter",
+                              "fontSize": 14,
+                              "fontWeight": "500"
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "type": "frame",
+      "id": "uXyra",
+      "x": 1520,
+      "y": 0,
+      "name": "Profile Desktop (EN)",
+      "clip": true,
+      "width": 1440,
+      "height": 960,
+      "fill": "#F5F3FF",
+      "layout": "vertical",
+      "children": [
+        {
+          "type": "frame",
+          "id": "QEkZp",
+          "name": "navbar",
+          "width": "fill_container",
+          "height": 56,
+          "fill": "#FFFFFF",
+          "stroke": {
+            "align": "inside",
+            "thickness": {
+              "bottom": 1
+            },
+            "fill": "#E2E8F0"
+          },
+          "padding": [
+            0,
+            80
+          ],
+          "justifyContent": "space_between",
+          "alignItems": "center",
+          "children": [
+            {
+              "type": "frame",
+              "id": "h0rfw",
+              "name": "logo",
+              "gap": 8,
+              "alignItems": "center",
+              "children": [
+                {
+                  "type": "rectangle",
+                  "cornerRadius": 8,
+                  "id": "kcyzo",
+                  "fill": "#6366F1",
+                  "width": 32,
+                  "height": 32
+                },
+                {
+                  "type": "text",
+                  "id": "IU1Dc",
+                  "fill": "#1E1B4B",
+                  "content": "Label Suite",
+                  "fontFamily": "Inter",
+                  "fontSize": 18,
+                  "fontWeight": "700"
+                }
+              ]
+            },
+            {
+              "type": "frame",
+              "id": "QOpON",
+              "name": "rarea",
+              "gap": 12,
+              "alignItems": "center",
+              "children": [
+                {
+                  "type": "frame",
+                  "id": "09kqC",
+                  "name": "lang_btn",
+                  "fill": "#FFFFFF",
+                  "cornerRadius": 9999,
+                  "stroke": {
+                    "align": "inside",
+                    "thickness": 1,
+                    "fill": "#E2E8F0"
+                  },
+                  "gap": 6,
+                  "padding": [
+                    6,
+                    12
+                  ],
+                  "alignItems": "center",
+                  "children": [
+                    {
+                      "type": "text",
+                      "id": "VJ1Lu",
+                      "fill": "#64748B",
+                      "content": "ZH",
+                      "fontFamily": "Inter",
+                      "fontSize": 12,
+                      "fontWeight": "500"
+                    }
+                  ]
+                },
+                {
+                  "type": "frame",
+                  "id": "p9i7D",
+                  "name": "nav_av",
+                  "width": 32,
+                  "height": 32,
+                  "fill": "#6366F1",
+                  "cornerRadius": 9999,
+                  "justifyContent": "center",
+                  "alignItems": "center",
+                  "children": [
+                    {
+                      "type": "text",
+                      "id": "gfDkj",
+                      "fill": "#FFFFFF",
+                      "content": "MC",
+                      "fontFamily": "Inter",
+                      "fontSize": 11,
+                      "fontWeight": "700"
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "type": "frame",
+          "id": "acOGC",
+          "name": "content_row",
+          "width": "fill_container",
+          "height": "fill_container",
+          "children": [
+            {
+              "type": "frame",
+              "id": "6y1uP",
+              "name": "sidebar",
+              "width": 224,
+              "height": "fill_container",
+              "fill": "#FFFFFF",
+              "stroke": {
+                "align": "inside",
+                "thickness": {
+                  "right": 1
+                },
+                "fill": "#E2E8F0"
+              },
+              "layout": "vertical",
+              "gap": 4,
+              "padding": [
+                16,
+                12
+              ],
+              "children": [
+                {
+                  "type": "frame",
+                  "id": "1wR6G",
+                  "name": "nav_dashboard",
+                  "width": "fill_container",
+                  "cornerRadius": 8,
+                  "gap": 10,
+                  "padding": [
+                    8,
+                    12
+                  ],
+                  "alignItems": "center",
+                  "children": [
+                    {
+                      "type": "rectangle",
+                      "cornerRadius": 2,
+                      "id": "NAg7B",
+                      "fill": "#94A3B8",
+                      "width": 16,
+                      "height": 16
+                    },
+                    {
+                      "type": "text",
+                      "id": "slhhh",
+                      "fill": "#64748B",
+                      "content": "Dashboard",
+                      "fontFamily": "Inter",
+                      "fontSize": 14,
+                      "fontWeight": "normal"
+                    }
+                  ]
+                },
+                {
+                  "type": "rectangle",
+                  "id": "BPTuG",
+                  "name": "divider",
+                  "fill": "#F1F5F9",
+                  "width": "fill_container",
+                  "height": 1
+                },
+                {
+                  "type": "frame",
+                  "id": "wbuBq",
+                  "name": "nav_profile",
+                  "width": "fill_container",
+                  "fill": "#F5F3FF",
+                  "cornerRadius": 8,
+                  "gap": 10,
+                  "padding": [
+                    8,
+                    12
+                  ],
+                  "alignItems": "center",
+                  "children": [
+                    {
+                      "type": "rectangle",
+                      "cornerRadius": 9999,
+                      "id": "0t17L",
+                      "fill": "#6366F1",
+                      "width": 16,
+                      "height": 16
+                    },
+                    {
+                      "type": "text",
+                      "id": "YGapj",
+                      "fill": "#6366F1",
+                      "content": "Profile Settings",
+                      "fontFamily": "Inter",
+                      "fontSize": 14,
+                      "fontWeight": "500"
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "type": "frame",
+              "id": "R8Cj9",
+              "name": "main",
+              "width": "fill_container",
+              "height": "fill_container",
+              "fill": "#F5F3FF",
+              "layout": "vertical",
+              "gap": 24,
+              "padding": [
+                32,
+                80
+              ],
+              "children": [
+                {
+                  "type": "frame",
+                  "id": "xqHOj",
+                  "name": "page_hd",
+                  "width": "fill_container",
+                  "layout": "vertical",
+                  "gap": 6,
+                  "children": [
+                    {
+                      "type": "text",
+                      "id": "a6hj6",
+                      "fill": "#1E1B4B",
+                      "content": "Profile Settings",
+                      "fontFamily": "Inter",
+                      "fontSize": 24,
+                      "fontWeight": "700"
+                    },
+                    {
+                      "type": "text",
+                      "id": "Igabc",
+                      "fill": "#94A3B8",
+                      "content": "Manage your account information and display preferences.",
+                      "fontFamily": "Inter",
+                      "fontSize": 14,
+                      "fontWeight": "normal"
+                    }
+                  ]
+                },
+                {
+                  "type": "frame",
+                  "id": "atDyM",
+                  "name": "profile_card",
+                  "width": "fill_container",
+                  "fill": "#FFFFFF",
+                  "cornerRadius": 16,
+                  "stroke": {
+                    "align": "inside",
+                    "thickness": 1,
+                    "fill": "#E2E8F0"
+                  },
+                  "layout": "vertical",
+                  "gap": 24,
+                  "padding": 32,
+                  "children": [
+                    {
+                      "type": "frame",
+                      "id": "K8kU9",
+                      "name": "avatar_row",
+                      "width": "fill_container",
+                      "gap": 20,
+                      "alignItems": "center",
+                      "children": [
+                        {
+                          "type": "frame",
+                          "id": "D4rpy",
+                          "name": "avatar",
+                          "width": 80,
+                          "height": 80,
+                          "fill": "#6366F1",
+                          "cornerRadius": 9999,
+                          "justifyContent": "center",
+                          "alignItems": "center",
+                          "children": [
+                            {
+                              "type": "text",
+                              "id": "rl0tH",
+                              "fill": "#FFFFFF",
+                              "content": "MC",
+                              "fontFamily": "Inter",
+                              "fontSize": 24,
+                              "fontWeight": "700"
+                            }
+                          ]
+                        },
+                        {
+                          "type": "frame",
+                          "id": "wq18o",
+                          "name": "av_info",
+                          "layout": "vertical",
+                          "gap": 6,
+                          "children": [
+                            {
+                              "type": "text",
+                              "id": "Uatah",
+                              "fill": "#1E1B4B",
+                              "content": "Profile Picture",
+                              "fontFamily": "Inter",
+                              "fontSize": 14,
+                              "fontWeight": "500"
+                            },
+                            {
+                              "type": "text",
+                              "id": "ph8Ty",
+                              "fill": "#94A3B8",
+                              "content": "JPG, PNG, or WebP, max 5 MB",
+                              "fontFamily": "Inter",
+                              "fontSize": 12,
+                              "fontWeight": "normal"
+                            }
+                          ]
+                        }
+                      ]
+                    },
+                    {
+                      "type": "rectangle",
+                      "id": "t3wAj",
+                      "name": "div1",
+                      "fill": "#F1F5F9",
+                      "width": "fill_container",
+                      "height": 1
+                    },
+                    {
+                      "type": "frame",
+                      "id": "KSp3K",
+                      "name": "form",
+                      "width": "fill_container",
+                      "layout": "vertical",
+                      "gap": 20,
+                      "children": [
+                        {
+                          "type": "frame",
+                          "id": "0Jpu6",
+                          "name": "field_name",
+                          "width": "fill_container",
+                          "layout": "vertical",
+                          "gap": 6,
+                          "children": [
+                            {
+                              "type": "text",
+                              "id": "2KSoA",
+                              "fill": "#1E1B4B",
+                              "content": "Display Name",
+                              "fontFamily": "Inter",
+                              "fontSize": 14,
+                              "fontWeight": "500"
+                            },
+                            {
+                              "type": "frame",
+                              "id": "nOfAs",
+                              "name": "input",
+                              "width": "fill_container",
+                              "height": 40,
+                              "fill": "#FFFFFF",
+                              "cornerRadius": 8,
+                              "stroke": {
+                                "align": "inside",
+                                "thickness": 1,
+                                "fill": "#E2E8F0"
+                              },
+                              "padding": [
+                                0,
+                                12
+                              ],
+                              "alignItems": "center",
+                              "children": [
+                                {
+                                  "type": "text",
+                                  "id": "uoygv",
+                                  "fill": "#1E1B4B",
+                                  "content": "Mandy Chen",
+                                  "fontFamily": "Inter",
+                                  "fontSize": 14,
+                                  "fontWeight": "normal"
+                                }
+                              ]
+                            },
+                            {
+                              "type": "text",
+                              "id": "UQSSl",
+                              "fill": "#94A3B8",
+                              "content": "Up to 50 characters",
+                              "fontFamily": "Inter",
+                              "fontSize": 12,
+                              "fontWeight": "normal"
+                            }
+                          ]
+                        },
+                        {
+                          "type": "frame",
+                          "id": "rnYdF",
+                          "name": "field_email",
+                          "width": "fill_container",
+                          "layout": "vertical",
+                          "gap": 6,
+                          "children": [
+                            {
+                              "type": "text",
+                              "id": "Bv8LH",
+                              "fill": "#1E1B4B",
+                              "content": "Email",
+                              "fontFamily": "Inter",
+                              "fontSize": 14,
+                              "fontWeight": "500"
+                            },
+                            {
+                              "type": "frame",
+                              "id": "Qey0j",
+                              "name": "input",
+                              "width": "fill_container",
+                              "height": 40,
+                              "fill": "#F8FAFC",
+                              "cornerRadius": 8,
+                              "stroke": {
+                                "align": "inside",
+                                "thickness": 1,
+                                "fill": "#E2E8F0"
+                              },
+                              "padding": [
+                                0,
+                                12
+                              ],
+                              "alignItems": "center",
+                              "children": [
+                                {
+                                  "type": "text",
+                                  "id": "2MPwo",
+                                  "fill": "#94A3B8",
+                                  "content": "mandy.chen@example.edu",
+                                  "fontFamily": "Inter",
+                                  "fontSize": 14,
+                                  "fontWeight": "normal"
+                                }
+                              ]
+                            }
+                          ]
+                        },
+                        {
+                          "type": "frame",
+                          "id": "ROfhw",
+                          "name": "field_role",
+                          "width": "fill_container",
+                          "layout": "vertical",
+                          "gap": 6,
+                          "children": [
+                            {
+                              "type": "text",
+                              "id": "yDldX",
+                              "fill": "#1E1B4B",
+                              "content": "Role",
+                              "fontFamily": "Inter",
+                              "fontSize": 14,
+                              "fontWeight": "500"
+                            },
+                            {
+                              "type": "frame",
+                              "id": "guO0L",
+                              "name": "role_badge",
+                              "fill": "#EEF2FF",
+                              "cornerRadius": 9999,
+                              "stroke": {
+                                "align": "inside",
+                                "thickness": 1,
+                                "fill": "#6366F1"
+                              },
+                              "padding": [
+                                4,
+                                12
+                              ],
+                              "alignItems": "center",
+                              "children": [
+                                {
+                                  "type": "text",
+                                  "id": "6Nrqr",
+                                  "fill": "#6366F1",
+                                  "content": "Admin",
+                                  "fontFamily": "Inter",
+                                  "fontSize": 12,
+                                  "fontWeight": "500"
+                                }
+                              ]
+                            }
+                          ]
+                        },
+                        {
+                          "type": "frame",
+                          "id": "9tYs9",
+                          "name": "field_lang",
+                          "width": "fill_container",
+                          "layout": "vertical",
+                          "gap": 6,
+                          "children": [
+                            {
+                              "type": "text",
+                              "id": "dtDZS",
+                              "fill": "#1E1B4B",
+                              "content": "Interface Language",
+                              "fontFamily": "Inter",
+                              "fontSize": 14,
+                              "fontWeight": "500"
+                            },
+                            {
+                              "type": "frame",
+                              "id": "Wyq2p",
+                              "name": "lang_toggle",
+                              "fill": "#F1F5F9",
+                              "cornerRadius": 8,
+                              "gap": 4,
+                              "padding": 4,
+                              "alignItems": "center",
+                              "children": [
+                                {
+                                  "type": "frame",
+                                  "id": "tS6YW",
+                                  "name": "btn_zh",
+                                  "cornerRadius": 6,
+                                  "padding": [
+                                    6,
+                                    16
+                                  ],
+                                  "justifyContent": "center",
+                                  "alignItems": "center",
+                                  "children": [
+                                    {
+                                      "type": "text",
+                                      "id": "qGgMi",
+                                      "fill": "#94A3B8",
+                                      "content": "ZH",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 14,
+                                      "fontWeight": "normal"
+                                    }
+                                  ]
+                                },
+                                {
+                                  "type": "frame",
+                                  "id": "YISbS",
+                                  "name": "btn_en",
+                                  "fill": "#FFFFFF",
+                                  "cornerRadius": 6,
+                                  "padding": [
+                                    6,
+                                    16
+                                  ],
+                                  "justifyContent": "center",
+                                  "alignItems": "center",
+                                  "children": [
+                                    {
+                                      "type": "text",
+                                      "id": "1sKMs",
+                                      "fill": "#1E1B4B",
+                                      "content": "EN",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 14,
+                                      "fontWeight": "500"
+                                    }
+                                  ]
+                                }
+                              ]
+                            },
+                            {
+                              "type": "text",
+                              "id": "wpHDx",
+                              "fill": "#94A3B8",
+                              "content": "Applied immediately and saved to your account.",
+                              "fontFamily": "Inter",
+                              "fontSize": 12,
+                              "fontWeight": "normal"
+                            }
+                          ]
+                        }
+                      ]
+                    },
+                    {
+                      "type": "rectangle",
+                      "id": "oFjHu",
+                      "name": "div2",
+                      "fill": "#F1F5F9",
+                      "width": "fill_container",
+                      "height": 1
+                    },
+                    {
+                      "type": "frame",
+                      "id": "EkYD0",
+                      "name": "save_row",
+                      "width": "fill_container",
+                      "justifyContent": "space_between",
+                      "alignItems": "center",
+                      "children": [
+                        {
+                          "type": "text",
+                          "id": "iuIsM",
+                          "fill": "#94A3B8",
+                          "content": "Last saved: 2026-03-27 14:32",
+                          "fontFamily": "Inter",
+                          "fontSize": 12,
+                          "fontWeight": "normal"
+                        },
+                        {
+                          "type": "frame",
+                          "id": "m1KhX",
+                          "name": "save_btn",
+                          "fill": "#10B981",
+                          "cornerRadius": 8,
+                          "gap": 8,
+                          "padding": [
+                            10,
+                            20
+                          ],
+                          "alignItems": "center",
+                          "children": [
+                            {
+                              "type": "text",
+                              "id": "EaygH",
+                              "fill": "#FFFFFF",
+                              "content": "Save Changes",
+                              "fontFamily": "Inter",
+                              "fontSize": 14,
+                              "fontWeight": "500"
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file

From 6f2355e2eb1211f806dfe1671fd1d1ad3db51c08 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=B3=E6=AC=A3=E6=80=A1?= <ms.mandy610425@gmail.com>
Date: Tue, 31 Mar 2026 14:34:53 +0800
Subject: [PATCH 11/18] fix: add missing frames to profile.pen and fix Desktop
 EN x position
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Fix Desktop EN frame x position: 1520 → 1500
- Add Mobile ZH frame at x:3000 (390×844)
- Add Mobile EN frame at x:4500 (390×844)
- Add Component ZH placeholder frame at x:6000 (1440×960)
- Add Component EN placeholder frame at x:7500 (1440×960)

Follows Pencil Wireframe Convention: 6 frames per page

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 design/wireframes/pages/profile.pen | 1824 ++++++++++++++++++++++++++-
 1 file changed, 1823 insertions(+), 1 deletion(-)

diff --git a/design/wireframes/pages/profile.pen b/design/wireframes/pages/profile.pen
index 05aafc4..08d15d3 100644
--- a/design/wireframes/pages/profile.pen
+++ b/design/wireframes/pages/profile.pen
@@ -663,7 +663,7 @@
     {
       "type": "frame",
       "id": "uXyra",
-      "x": 1520,
+      "x": 1500,
       "y": 0,
       "name": "Profile Desktop (EN)",
       "clip": true,
@@ -1318,6 +1318,1828 @@
           ]
         }
       ]
+    },
+    {
+      "type": "frame",
+      "id": "524eq",
+      "x": 3000,
+      "y": 0,
+      "name": "Profile Mobile (ZH)",
+      "clip": true,
+      "width": 390,
+      "height": 796,
+      "fill": "#F5F3FF",
+      "layout": "vertical",
+      "children": [
+        {
+          "type": "frame",
+          "id": "6m5tt",
+          "name": "navbar",
+          "width": "fill_container",
+          "height": 56,
+          "fill": "#FFFFFF",
+          "stroke": {
+            "align": "inside",
+            "thickness": {
+              "bottom": 1
+            },
+            "fill": "#E2E8F0"
+          },
+          "padding": [
+            0,
+            16
+          ],
+          "justifyContent": "space_between",
+          "alignItems": "center",
+          "children": [
+            {
+              "type": "frame",
+              "id": "S4oRJ",
+              "name": "logo",
+              "gap": 8,
+              "alignItems": "center",
+              "children": [
+                {
+                  "type": "rectangle",
+                  "cornerRadius": 8,
+                  "id": "R8hlO",
+                  "fill": "#6366F1",
+                  "width": 32,
+                  "height": 32
+                },
+                {
+                  "type": "text",
+                  "id": "ykZH5",
+                  "fill": "#1E1B4B",
+                  "content": "Label Suite",
+                  "fontFamily": "Inter",
+                  "fontSize": 18,
+                  "fontWeight": "700"
+                }
+              ]
+            },
+            {
+              "type": "frame",
+              "id": "73P30",
+              "name": "rarea",
+              "gap": 8,
+              "alignItems": "center",
+              "children": [
+                {
+                  "type": "frame",
+                  "id": "LxGMT",
+                  "name": "lang_btn",
+                  "fill": "#FFFFFF",
+                  "cornerRadius": 9999,
+                  "stroke": {
+                    "align": "inside",
+                    "thickness": 1,
+                    "fill": "#E2E8F0"
+                  },
+                  "gap": 6,
+                  "padding": [
+                    6,
+                    12
+                  ],
+                  "alignItems": "center",
+                  "children": [
+                    {
+                      "type": "text",
+                      "id": "G2Ft0",
+                      "fill": "#64748B",
+                      "content": "EN",
+                      "fontFamily": "Inter",
+                      "fontSize": 12,
+                      "fontWeight": "500"
+                    }
+                  ]
+                },
+                {
+                  "type": "frame",
+                  "id": "PthqZ",
+                  "name": "nav_av",
+                  "width": 32,
+                  "height": 32,
+                  "fill": "#6366F1",
+                  "cornerRadius": 9999,
+                  "justifyContent": "center",
+                  "alignItems": "center",
+                  "children": [
+                    {
+                      "type": "text",
+                      "id": "mGWCU",
+                      "fill": "#FFFFFF",
+                      "content": "MC",
+                      "fontFamily": "Inter",
+                      "fontSize": 11,
+                      "fontWeight": "700"
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "type": "frame",
+          "id": "JBxkL",
+          "name": "main",
+          "width": "fill_container",
+          "fill": "#F5F3FF",
+          "layout": "vertical",
+          "gap": 16,
+          "padding": 16,
+          "children": [
+            {
+              "type": "frame",
+              "id": "m5UUi",
+              "name": "page_hd",
+              "width": "fill_container",
+              "layout": "vertical",
+              "gap": 4,
+              "children": [
+                {
+                  "type": "text",
+                  "id": "juthj",
+                  "fill": "#1E1B4B",
+                  "content": "個人設定",
+                  "fontFamily": "Inter",
+                  "fontSize": 20,
+                  "fontWeight": "700"
+                },
+                {
+                  "type": "text",
+                  "id": "nT55m",
+                  "fill": "#94A3B8",
+                  "content": "管理您的帳號資訊與顯示偏好。",
+                  "fontFamily": "Inter",
+                  "fontSize": 13,
+                  "fontWeight": "normal"
+                }
+              ]
+            },
+            {
+              "type": "frame",
+              "id": "UUuBX",
+              "name": "profile_card",
+              "width": "fill_container",
+              "fill": "#FFFFFF",
+              "cornerRadius": 12,
+              "stroke": {
+                "align": "inside",
+                "thickness": 1,
+                "fill": "#E2E8F0"
+              },
+              "layout": "vertical",
+              "gap": 20,
+              "padding": 16,
+              "children": [
+                {
+                  "type": "frame",
+                  "id": "RSl9C",
+                  "name": "avatar_row",
+                  "width": "fill_container",
+                  "gap": 16,
+                  "alignItems": "center",
+                  "children": [
+                    {
+                      "type": "frame",
+                      "id": "wn9Eh",
+                      "name": "avatar",
+                      "width": 64,
+                      "height": 64,
+                      "fill": "#6366F1",
+                      "cornerRadius": 9999,
+                      "justifyContent": "center",
+                      "alignItems": "center",
+                      "children": [
+                        {
+                          "type": "text",
+                          "id": "NFKFq",
+                          "fill": "#FFFFFF",
+                          "content": "MC",
+                          "fontFamily": "Inter",
+                          "fontSize": 20,
+                          "fontWeight": "700"
+                        }
+                      ]
+                    },
+                    {
+                      "type": "frame",
+                      "id": "RIkCU",
+                      "name": "av_info",
+                      "layout": "vertical",
+                      "gap": 4,
+                      "children": [
+                        {
+                          "type": "text",
+                          "id": "USnLY",
+                          "fill": "#1E1B4B",
+                          "content": "個人頭像",
+                          "fontFamily": "Inter",
+                          "fontSize": 14,
+                          "fontWeight": "500"
+                        },
+                        {
+                          "type": "text",
+                          "id": "J0Jfm",
+                          "fill": "#94A3B8",
+                          "content": "JPG、PNG 或 WebP，最大 5 MB",
+                          "fontFamily": "Inter",
+                          "fontSize": 12,
+                          "fontWeight": "normal"
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "type": "rectangle",
+                  "id": "V6vhi",
+                  "name": "div1",
+                  "fill": "#F1F5F9",
+                  "width": "fill_container",
+                  "height": 1
+                },
+                {
+                  "type": "frame",
+                  "id": "ktNGF",
+                  "name": "form",
+                  "width": "fill_container",
+                  "layout": "vertical",
+                  "gap": 16,
+                  "children": [
+                    {
+                      "type": "frame",
+                      "id": "3vyEh",
+                      "name": "field_name",
+                      "width": "fill_container",
+                      "layout": "vertical",
+                      "gap": 6,
+                      "children": [
+                        {
+                          "type": "text",
+                          "id": "qDAxa",
+                          "fill": "#1E1B4B",
+                          "content": "顯示名稱",
+                          "fontFamily": "Inter",
+                          "fontSize": 14,
+                          "fontWeight": "500"
+                        },
+                        {
+                          "type": "frame",
+                          "id": "GWYM0",
+                          "name": "input_name",
+                          "width": "fill_container",
+                          "height": 40,
+                          "fill": "#FFFFFF",
+                          "cornerRadius": 8,
+                          "stroke": {
+                            "align": "inside",
+                            "thickness": 1,
+                            "fill": "#E2E8F0"
+                          },
+                          "padding": [
+                            0,
+                            12
+                          ],
+                          "alignItems": "center",
+                          "children": [
+                            {
+                              "type": "text",
+                              "id": "P9J65",
+                              "fill": "#1E1B4B",
+                              "content": "Mandy Chen",
+                              "fontFamily": "Inter",
+                              "fontSize": 14,
+                              "fontWeight": "normal"
+                            }
+                          ]
+                        },
+                        {
+                          "type": "text",
+                          "id": "mlX6M",
+                          "fill": "#94A3B8",
+                          "content": "最多 50 個字元",
+                          "fontFamily": "Inter",
+                          "fontSize": 12,
+                          "fontWeight": "normal"
+                        }
+                      ]
+                    },
+                    {
+                      "type": "frame",
+                      "id": "Rm8vF",
+                      "name": "field_email",
+                      "width": "fill_container",
+                      "layout": "vertical",
+                      "gap": 6,
+                      "children": [
+                        {
+                          "type": "text",
+                          "id": "IQXYf",
+                          "fill": "#1E1B4B",
+                          "content": "Email",
+                          "fontFamily": "Inter",
+                          "fontSize": 14,
+                          "fontWeight": "500"
+                        },
+                        {
+                          "type": "frame",
+                          "id": "YTERk",
+                          "name": "input_email",
+                          "width": "fill_container",
+                          "height": 40,
+                          "fill": "#F8FAFC",
+                          "cornerRadius": 8,
+                          "stroke": {
+                            "align": "inside",
+                            "thickness": 1,
+                            "fill": "#E2E8F0"
+                          },
+                          "padding": [
+                            0,
+                            12
+                          ],
+                          "alignItems": "center",
+                          "children": [
+                            {
+                              "type": "text",
+                              "id": "sor7v",
+                              "fill": "#94A3B8",
+                              "content": "mandy.chen@example.edu",
+                              "fontFamily": "Inter",
+                              "fontSize": 14,
+                              "fontWeight": "normal"
+                            }
+                          ]
+                        }
+                      ]
+                    },
+                    {
+                      "type": "frame",
+                      "id": "j4J1i",
+                      "name": "field_role",
+                      "width": "fill_container",
+                      "layout": "vertical",
+                      "gap": 6,
+                      "children": [
+                        {
+                          "type": "text",
+                          "id": "CjzSE",
+                          "fill": "#1E1B4B",
+                          "content": "角色",
+                          "fontFamily": "Inter",
+                          "fontSize": 14,
+                          "fontWeight": "500"
+                        },
+                        {
+                          "type": "frame",
+                          "id": "GZc9a",
+                          "name": "role_badge",
+                          "fill": "#EEF2FF",
+                          "cornerRadius": 9999,
+                          "stroke": {
+                            "align": "inside",
+                            "thickness": 1,
+                            "fill": "#6366F1"
+                          },
+                          "padding": [
+                            4,
+                            12
+                          ],
+                          "alignItems": "center",
+                          "children": [
+                            {
+                              "type": "text",
+                              "id": "hFkyQ",
+                              "fill": "#6366F1",
+                              "content": "管理員",
+                              "fontFamily": "Inter",
+                              "fontSize": 12,
+                              "fontWeight": "500"
+                            }
+                          ]
+                        }
+                      ]
+                    },
+                    {
+                      "type": "frame",
+                      "id": "ab3v9",
+                      "name": "field_lang",
+                      "width": "fill_container",
+                      "layout": "vertical",
+                      "gap": 6,
+                      "children": [
+                        {
+                          "type": "text",
+                          "id": "Q37yF",
+                          "fill": "#1E1B4B",
+                          "content": "介面語言",
+                          "fontFamily": "Inter",
+                          "fontSize": 14,
+                          "fontWeight": "500"
+                        },
+                        {
+                          "type": "frame",
+                          "id": "6IHpY",
+                          "name": "lang_toggle",
+                          "fill": "#F1F5F9",
+                          "cornerRadius": 8,
+                          "gap": 4,
+                          "padding": 4,
+                          "children": [
+                            {
+                              "type": "frame",
+                              "id": "dyAds",
+                              "name": "btn_zh",
+                              "fill": "#FFFFFF",
+                              "cornerRadius": 6,
+                              "padding": [
+                                6,
+                                16
+                              ],
+                              "justifyContent": "center",
+                              "alignItems": "center",
+                              "children": [
+                                {
+                                  "type": "text",
+                                  "id": "J4IyK",
+                                  "fill": "#1E1B4B",
+                                  "content": "ZH",
+                                  "fontFamily": "Inter",
+                                  "fontSize": 14,
+                                  "fontWeight": "500"
+                                }
+                              ]
+                            },
+                            {
+                              "type": "frame",
+                              "id": "ybLRN",
+                              "name": "btn_en",
+                              "cornerRadius": 6,
+                              "padding": [
+                                6,
+                                16
+                              ],
+                              "justifyContent": "center",
+                              "alignItems": "center",
+                              "children": [
+                                {
+                                  "type": "text",
+                                  "id": "0B7QV",
+                                  "fill": "#94A3B8",
+                                  "content": "EN",
+                                  "fontFamily": "Inter",
+                                  "fontSize": 14,
+                                  "fontWeight": "normal"
+                                }
+                              ]
+                            }
+                          ]
+                        },
+                        {
+                          "type": "text",
+                          "id": "UORYz",
+                          "fill": "#94A3B8",
+                          "content": "切換後立即套用，並儲存至帳號設定。",
+                          "fontFamily": "Inter",
+                          "fontSize": 12,
+                          "fontWeight": "normal"
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "type": "rectangle",
+                  "id": "mcewK",
+                  "name": "div2",
+                  "fill": "#F1F5F9",
+                  "width": "fill_container",
+                  "height": 1
+                },
+                {
+                  "type": "frame",
+                  "id": "wZVXS",
+                  "name": "save_section",
+                  "width": "fill_container",
+                  "layout": "vertical",
+                  "gap": 8,
+                  "children": [
+                    {
+                      "type": "text",
+                      "id": "miX7u",
+                      "fill": "#94A3B8",
+                      "content": "上次儲存：2026-03-27 14:32",
+                      "fontFamily": "Inter",
+                      "fontSize": 12,
+                      "fontWeight": "normal"
+                    },
+                    {
+                      "type": "frame",
+                      "id": "laGYI",
+                      "name": "save_btn",
+                      "width": "fill_container",
+                      "height": 44,
+                      "fill": "#10B981",
+                      "cornerRadius": 8,
+                      "justifyContent": "center",
+                      "alignItems": "center",
+                      "children": [
+                        {
+                          "type": "text",
+                          "id": "h4A91",
+                          "fill": "#FFFFFF",
+                          "content": "儲存變更",
+                          "fontFamily": "Inter",
+                          "fontSize": 14,
+                          "fontWeight": "500"
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "type": "frame",
+          "id": "T8FPo",
+          "name": "bottom_tab",
+          "width": "fill_container",
+          "height": 56,
+          "fill": "#FFFFFF",
+          "stroke": {
+            "align": "inside",
+            "thickness": {
+              "top": 1
+            },
+            "fill": "#E2E8F0"
+          },
+          "justifyContent": "space_around",
+          "alignItems": "center",
+          "children": [
+            {
+              "type": "frame",
+              "id": "ZIaLp",
+              "name": "tab_dashboard",
+              "layout": "vertical",
+              "gap": 4,
+              "alignItems": "center",
+              "children": [
+                {
+                  "type": "rectangle",
+                  "cornerRadius": 2,
+                  "id": "nXyIr",
+                  "name": "icon",
+                  "fill": "#94A3B8",
+                  "width": 20,
+                  "height": 20
+                },
+                {
+                  "type": "text",
+                  "id": "Mz1kC",
+                  "fill": "#94A3B8",
+                  "content": "儀表板",
+                  "fontFamily": "Inter",
+                  "fontSize": 10,
+                  "fontWeight": "normal"
+                }
+              ]
+            },
+            {
+              "type": "frame",
+              "id": "nIOoL",
+              "name": "tab_profile",
+              "layout": "vertical",
+              "gap": 4,
+              "alignItems": "center",
+              "children": [
+                {
+                  "type": "ellipse",
+                  "id": "sCFFf",
+                  "name": "icon",
+                  "fill": "#6366F1",
+                  "width": 20,
+                  "height": 20
+                },
+                {
+                  "type": "text",
+                  "id": "oG2QC",
+                  "fill": "#6366F1",
+                  "content": "個人設定",
+                  "fontFamily": "Inter",
+                  "fontSize": 10,
+                  "fontWeight": "500"
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "type": "frame",
+      "id": "czZnZ",
+      "x": 3531,
+      "y": 0,
+      "name": "Profile Mobile (EN)",
+      "clip": true,
+      "width": 390,
+      "height": 796,
+      "fill": "#F5F3FF",
+      "layout": "vertical",
+      "children": [
+        {
+          "type": "frame",
+          "id": "3n0Gr",
+          "name": "navbar",
+          "width": "fill_container",
+          "height": 56,
+          "fill": "#FFFFFF",
+          "stroke": {
+            "align": "inside",
+            "thickness": {
+              "bottom": 1
+            },
+            "fill": "#E2E8F0"
+          },
+          "padding": [
+            0,
+            16
+          ],
+          "justifyContent": "space_between",
+          "alignItems": "center",
+          "children": [
+            {
+              "type": "frame",
+              "id": "41gOK",
+              "name": "logo",
+              "gap": 8,
+              "alignItems": "center",
+              "children": [
+                {
+                  "type": "rectangle",
+                  "cornerRadius": 8,
+                  "id": "zF7dO",
+                  "fill": "#6366F1",
+                  "width": 32,
+                  "height": 32
+                },
+                {
+                  "type": "text",
+                  "id": "enOyd",
+                  "fill": "#1E1B4B",
+                  "content": "Label Suite",
+                  "fontFamily": "Inter",
+                  "fontSize": 18,
+                  "fontWeight": "700"
+                }
+              ]
+            },
+            {
+              "type": "frame",
+              "id": "xdBFu",
+              "name": "rarea",
+              "gap": 8,
+              "alignItems": "center",
+              "children": [
+                {
+                  "type": "frame",
+                  "id": "CU9fG",
+                  "name": "lang_btn",
+                  "fill": "#FFFFFF",
+                  "cornerRadius": 9999,
+                  "stroke": {
+                    "align": "inside",
+                    "thickness": 1,
+                    "fill": "#E2E8F0"
+                  },
+                  "gap": 6,
+                  "padding": [
+                    6,
+                    12
+                  ],
+                  "alignItems": "center",
+                  "children": [
+                    {
+                      "type": "text",
+                      "id": "Zt3xf",
+                      "fill": "#64748B",
+                      "content": "ZH",
+                      "fontFamily": "Inter",
+                      "fontSize": 12,
+                      "fontWeight": "500"
+                    }
+                  ]
+                },
+                {
+                  "type": "frame",
+                  "id": "9sgTt",
+                  "name": "nav_av",
+                  "width": 32,
+                  "height": 32,
+                  "fill": "#6366F1",
+                  "cornerRadius": 9999,
+                  "justifyContent": "center",
+                  "alignItems": "center",
+                  "children": [
+                    {
+                      "type": "text",
+                      "id": "UTlhl",
+                      "fill": "#FFFFFF",
+                      "content": "MC",
+                      "fontFamily": "Inter",
+                      "fontSize": 11,
+                      "fontWeight": "700"
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "type": "frame",
+          "id": "wVDBW",
+          "name": "main",
+          "width": "fill_container",
+          "fill": "#F5F3FF",
+          "layout": "vertical",
+          "gap": 16,
+          "padding": 16,
+          "children": [
+            {
+              "type": "frame",
+              "id": "ulkWT",
+              "name": "page_hd",
+              "width": "fill_container",
+              "layout": "vertical",
+              "gap": 4,
+              "children": [
+                {
+                  "type": "text",
+                  "id": "ZUQpj",
+                  "fill": "#1E1B4B",
+                  "content": "Profile Settings",
+                  "fontFamily": "Inter",
+                  "fontSize": 20,
+                  "fontWeight": "700"
+                },
+                {
+                  "type": "text",
+                  "id": "E6rR8",
+                  "fill": "#94A3B8",
+                  "content": "Manage your account information and display preferences.",
+                  "fontFamily": "Inter",
+                  "fontSize": 13,
+                  "fontWeight": "normal"
+                }
+              ]
+            },
+            {
+              "type": "frame",
+              "id": "qZQyW",
+              "name": "profile_card",
+              "width": "fill_container",
+              "fill": "#FFFFFF",
+              "cornerRadius": 12,
+              "stroke": {
+                "align": "inside",
+                "thickness": 1,
+                "fill": "#E2E8F0"
+              },
+              "layout": "vertical",
+              "gap": 20,
+              "padding": 16,
+              "children": [
+                {
+                  "type": "frame",
+                  "id": "Rmspl",
+                  "name": "avatar_row",
+                  "width": "fill_container",
+                  "gap": 16,
+                  "alignItems": "center",
+                  "children": [
+                    {
+                      "type": "frame",
+                      "id": "9TgBb",
+                      "name": "avatar",
+                      "width": 64,
+                      "height": 64,
+                      "fill": "#6366F1",
+                      "cornerRadius": 9999,
+                      "justifyContent": "center",
+                      "alignItems": "center",
+                      "children": [
+                        {
+                          "type": "text",
+                          "id": "sxnGe",
+                          "fill": "#FFFFFF",
+                          "content": "MC",
+                          "fontFamily": "Inter",
+                          "fontSize": 20,
+                          "fontWeight": "700"
+                        }
+                      ]
+                    },
+                    {
+                      "type": "frame",
+                      "id": "Fcjc4",
+                      "name": "av_info",
+                      "layout": "vertical",
+                      "gap": 4,
+                      "children": [
+                        {
+                          "type": "text",
+                          "id": "UzmYT",
+                          "fill": "#1E1B4B",
+                          "content": "Profile Photo",
+                          "fontFamily": "Inter",
+                          "fontSize": 14,
+                          "fontWeight": "500"
+                        },
+                        {
+                          "type": "text",
+                          "id": "VJjlX",
+                          "fill": "#94A3B8",
+                          "content": "JPG, PNG or WebP, max 5 MB",
+                          "fontFamily": "Inter",
+                          "fontSize": 12,
+                          "fontWeight": "normal"
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "type": "rectangle",
+                  "id": "1Lcvo",
+                  "name": "div1",
+                  "fill": "#F1F5F9",
+                  "width": "fill_container",
+                  "height": 1
+                },
+                {
+                  "type": "frame",
+                  "id": "mFy3i",
+                  "name": "form",
+                  "width": "fill_container",
+                  "layout": "vertical",
+                  "gap": 16,
+                  "children": [
+                    {
+                      "type": "frame",
+                      "id": "IZHdD",
+                      "name": "field_name",
+                      "width": "fill_container",
+                      "layout": "vertical",
+                      "gap": 6,
+                      "children": [
+                        {
+                          "type": "text",
+                          "id": "pqpzI",
+                          "fill": "#1E1B4B",
+                          "content": "Display Name",
+                          "fontFamily": "Inter",
+                          "fontSize": 14,
+                          "fontWeight": "500"
+                        },
+                        {
+                          "type": "frame",
+                          "id": "LOOOO",
+                          "name": "input_name",
+                          "width": "fill_container",
+                          "height": 40,
+                          "fill": "#FFFFFF",
+                          "cornerRadius": 8,
+                          "stroke": {
+                            "align": "inside",
+                            "thickness": 1,
+                            "fill": "#E2E8F0"
+                          },
+                          "padding": [
+                            0,
+                            12
+                          ],
+                          "alignItems": "center",
+                          "children": [
+                            {
+                              "type": "text",
+                              "id": "SDTey",
+                              "fill": "#1E1B4B",
+                              "content": "Mandy Chen",
+                              "fontFamily": "Inter",
+                              "fontSize": 14,
+                              "fontWeight": "normal"
+                            }
+                          ]
+                        },
+                        {
+                          "type": "text",
+                          "id": "Vryz4",
+                          "fill": "#94A3B8",
+                          "content": "Max 50 characters",
+                          "fontFamily": "Inter",
+                          "fontSize": 12,
+                          "fontWeight": "normal"
+                        }
+                      ]
+                    },
+                    {
+                      "type": "frame",
+                      "id": "1dmuE",
+                      "name": "field_email",
+                      "width": "fill_container",
+                      "layout": "vertical",
+                      "gap": 6,
+                      "children": [
+                        {
+                          "type": "text",
+                          "id": "oOzir",
+                          "fill": "#1E1B4B",
+                          "content": "Email",
+                          "fontFamily": "Inter",
+                          "fontSize": 14,
+                          "fontWeight": "500"
+                        },
+                        {
+                          "type": "frame",
+                          "id": "qCwvD",
+                          "name": "input_email",
+                          "width": "fill_container",
+                          "height": 40,
+                          "fill": "#F8FAFC",
+                          "cornerRadius": 8,
+                          "stroke": {
+                            "align": "inside",
+                            "thickness": 1,
+                            "fill": "#E2E8F0"
+                          },
+                          "padding": [
+                            0,
+                            12
+                          ],
+                          "alignItems": "center",
+                          "children": [
+                            {
+                              "type": "text",
+                              "id": "f6sF4",
+                              "fill": "#94A3B8",
+                              "content": "mandy.chen@example.edu",
+                              "fontFamily": "Inter",
+                              "fontSize": 14,
+                              "fontWeight": "normal"
+                            }
+                          ]
+                        }
+                      ]
+                    },
+                    {
+                      "type": "frame",
+                      "id": "LJiZJ",
+                      "name": "field_role",
+                      "width": "fill_container",
+                      "layout": "vertical",
+                      "gap": 6,
+                      "children": [
+                        {
+                          "type": "text",
+                          "id": "EuLgx",
+                          "fill": "#1E1B4B",
+                          "content": "Role",
+                          "fontFamily": "Inter",
+                          "fontSize": 14,
+                          "fontWeight": "500"
+                        },
+                        {
+                          "type": "frame",
+                          "id": "ISQ95",
+                          "name": "role_badge",
+                          "fill": "#EEF2FF",
+                          "cornerRadius": 9999,
+                          "stroke": {
+                            "align": "inside",
+                            "thickness": 1,
+                            "fill": "#6366F1"
+                          },
+                          "padding": [
+                            4,
+                            12
+                          ],
+                          "alignItems": "center",
+                          "children": [
+                            {
+                              "type": "text",
+                              "id": "mdXWz",
+                              "fill": "#6366F1",
+                              "content": "Admin",
+                              "fontFamily": "Inter",
+                              "fontSize": 12,
+                              "fontWeight": "500"
+                            }
+                          ]
+                        }
+                      ]
+                    },
+                    {
+                      "type": "frame",
+                      "id": "cldvx",
+                      "name": "field_lang",
+                      "width": "fill_container",
+                      "layout": "vertical",
+                      "gap": 6,
+                      "children": [
+                        {
+                          "type": "text",
+                          "id": "CmO3e",
+                          "fill": "#1E1B4B",
+                          "content": "Interface Language",
+                          "fontFamily": "Inter",
+                          "fontSize": 14,
+                          "fontWeight": "500"
+                        },
+                        {
+                          "type": "frame",
+                          "id": "JBToh",
+                          "name": "lang_toggle",
+                          "fill": "#F1F5F9",
+                          "cornerRadius": 8,
+                          "gap": 4,
+                          "padding": 4,
+                          "children": [
+                            {
+                              "type": "frame",
+                              "id": "KAzij",
+                              "name": "btn_zh",
+                              "cornerRadius": 6,
+                              "padding": [
+                                6,
+                                16
+                              ],
+                              "justifyContent": "center",
+                              "alignItems": "center",
+                              "children": [
+                                {
+                                  "type": "text",
+                                  "id": "lrUDl",
+                                  "fill": "#94A3B8",
+                                  "content": "ZH",
+                                  "fontFamily": "Inter",
+                                  "fontSize": 14,
+                                  "fontWeight": "normal"
+                                }
+                              ]
+                            },
+                            {
+                              "type": "frame",
+                              "id": "nIS5Q",
+                              "name": "btn_en",
+                              "fill": "#FFFFFF",
+                              "cornerRadius": 6,
+                              "padding": [
+                                6,
+                                16
+                              ],
+                              "justifyContent": "center",
+                              "alignItems": "center",
+                              "children": [
+                                {
+                                  "type": "text",
+                                  "id": "zSxly",
+                                  "fill": "#1E1B4B",
+                                  "content": "EN",
+                                  "fontFamily": "Inter",
+                                  "fontSize": 14,
+                                  "fontWeight": "500"
+                                }
+                              ]
+                            }
+                          ]
+                        },
+                        {
+                          "type": "text",
+                          "id": "AHENh",
+                          "fill": "#94A3B8",
+                          "content": "Applied immediately and saved to account settings.",
+                          "fontFamily": "Inter",
+                          "fontSize": 12,
+                          "fontWeight": "normal"
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "type": "rectangle",
+                  "id": "ftB2D",
+                  "name": "div2",
+                  "fill": "#F1F5F9",
+                  "width": "fill_container",
+                  "height": 1
+                },
+                {
+                  "type": "frame",
+                  "id": "kZ9NT",
+                  "name": "save_section",
+                  "width": "fill_container",
+                  "layout": "vertical",
+                  "gap": 8,
+                  "children": [
+                    {
+                      "type": "text",
+                      "id": "pnUtA",
+                      "fill": "#94A3B8",
+                      "content": "Last saved: 2026-03-27 14:32",
+                      "fontFamily": "Inter",
+                      "fontSize": 12,
+                      "fontWeight": "normal"
+                    },
+                    {
+                      "type": "frame",
+                      "id": "PAvcv",
+                      "name": "save_btn",
+                      "width": "fill_container",
+                      "height": 44,
+                      "fill": "#10B981",
+                      "cornerRadius": 8,
+                      "justifyContent": "center",
+                      "alignItems": "center",
+                      "children": [
+                        {
+                          "type": "text",
+                          "id": "7yRtC",
+                          "fill": "#FFFFFF",
+                          "content": "Save Changes",
+                          "fontFamily": "Inter",
+                          "fontSize": 14,
+                          "fontWeight": "500"
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "type": "frame",
+          "id": "6G4ST",
+          "name": "bottom_tab",
+          "width": "fill_container",
+          "height": 56,
+          "fill": "#FFFFFF",
+          "stroke": {
+            "align": "inside",
+            "thickness": {
+              "top": 1
+            },
+            "fill": "#E2E8F0"
+          },
+          "justifyContent": "space_around",
+          "alignItems": "center",
+          "children": [
+            {
+              "type": "frame",
+              "id": "cjmhx",
+              "name": "tab_dashboard",
+              "layout": "vertical",
+              "gap": 4,
+              "alignItems": "center",
+              "children": [
+                {
+                  "type": "rectangle",
+                  "cornerRadius": 2,
+                  "id": "40w2S",
+                  "name": "icon",
+                  "fill": "#94A3B8",
+                  "width": 20,
+                  "height": 20
+                },
+                {
+                  "type": "text",
+                  "id": "qkbEY",
+                  "fill": "#94A3B8",
+                  "content": "Dashboard",
+                  "fontFamily": "Inter",
+                  "fontSize": 10,
+                  "fontWeight": "normal"
+                }
+              ]
+            },
+            {
+              "type": "frame",
+              "id": "Acohq",
+              "name": "tab_profile",
+              "layout": "vertical",
+              "gap": 4,
+              "alignItems": "center",
+              "children": [
+                {
+                  "type": "ellipse",
+                  "id": "46rKA",
+                  "name": "icon",
+                  "fill": "#6366F1",
+                  "width": 20,
+                  "height": 20
+                },
+                {
+                  "type": "text",
+                  "id": "vLoIw",
+                  "fill": "#6366F1",
+                  "content": "Profile",
+                  "fontFamily": "Inter",
+                  "fontSize": 10,
+                  "fontWeight": "500"
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "type": "frame",
+      "id": "Zqjwo",
+      "x": 4066,
+      "y": 0,
+      "name": "Profile Component (ZH)",
+      "width": 800,
+      "fill": "#FFFFFF",
+      "stroke": {
+        "align": "inside",
+        "thickness": 1,
+        "fill": "#E2E8F0"
+      },
+      "layout": "vertical",
+      "gap": 32,
+      "padding": 32,
+      "children": [
+        {
+          "type": "text",
+          "id": "TnGDF",
+          "name": "labelZH",
+          "fill": "#6366F1",
+          "content": "Profile Component (ZH)",
+          "fontFamily": "Inter",
+          "fontSize": 24,
+          "fontWeight": "600"
+        },
+        {
+          "type": "text",
+          "id": "oFq4i",
+          "fill": "#94A3B8",
+          "content": "AVATAR UPLOAD — Profile-specific Component",
+          "fontFamily": "Inter",
+          "fontSize": 11,
+          "fontWeight": "700",
+          "letterSpacing": 2
+        },
+        {
+          "type": "frame",
+          "id": "WA4ZN",
+          "name": "avatar_states",
+          "gap": 32,
+          "children": [
+            {
+              "type": "frame",
+              "id": "AZReF",
+              "name": "av_default",
+              "layout": "vertical",
+              "gap": 8,
+              "alignItems": "center",
+              "children": [
+                {
+                  "type": "text",
+                  "id": "vye6A",
+                  "fill": "#94A3B8",
+                  "content": "Default",
+                  "fontFamily": "Inter",
+                  "fontSize": 11,
+                  "fontWeight": "normal"
+                },
+                {
+                  "type": "frame",
+                  "id": "kDtsH",
+                  "name": "avatar",
+                  "width": 80,
+                  "height": 80,
+                  "fill": "#6366F1",
+                  "cornerRadius": 9999,
+                  "justifyContent": "center",
+                  "alignItems": "center",
+                  "children": [
+                    {
+                      "type": "text",
+                      "id": "DWcxs",
+                      "fill": "#FFFFFF",
+                      "content": "MC",
+                      "fontFamily": "Inter",
+                      "fontSize": 24,
+                      "fontWeight": "700"
+                    }
+                  ]
+                },
+                {
+                  "type": "text",
+                  "id": "ncihi",
+                  "fill": "#94A3B8",
+                  "content": "縮寫顯示",
+                  "fontFamily": "Inter",
+                  "fontSize": 11,
+                  "fontWeight": "normal"
+                }
+              ]
+            },
+            {
+              "type": "frame",
+              "id": "vqLzw",
+              "name": "av_hover",
+              "layout": "vertical",
+              "gap": 8,
+              "alignItems": "center",
+              "children": [
+                {
+                  "type": "text",
+                  "id": "sBhcM",
+                  "fill": "#94A3B8",
+                  "content": "Hover (overlay)",
+                  "fontFamily": "Inter",
+                  "fontSize": 11,
+                  "fontWeight": "normal"
+                },
+                {
+                  "type": "frame",
+                  "id": "JgS8O",
+                  "name": "avatar",
+                  "width": 80,
+                  "height": 80,
+                  "fill": "#6366F1",
+                  "cornerRadius": 9999,
+                  "layout": "none",
+                  "children": [
+                    {
+                      "type": "text",
+                      "id": "KtnXe",
+                      "x": 22,
+                      "y": 26,
+                      "fill": "#FFFFFF",
+                      "content": "MC",
+                      "fontFamily": "Inter",
+                      "fontSize": 24,
+                      "fontWeight": "700"
+                    },
+                    {
+                      "type": "ellipse",
+                      "id": "GTKGf",
+                      "x": 0,
+                      "y": 0,
+                      "name": "overlay",
+                      "opacity": 0.5,
+                      "fill": "#000000",
+                      "width": 80,
+                      "height": 80
+                    },
+                    {
+                      "type": "rectangle",
+                      "cornerRadius": 4,
+                      "id": "5KgPR",
+                      "x": 28,
+                      "y": 28,
+                      "name": "upload_icon",
+                      "opacity": 0.9,
+                      "fill": "#FFFFFF",
+                      "width": 24,
+                      "height": 24
+                    }
+                  ]
+                },
+                {
+                  "type": "text",
+                  "id": "0SDdE",
+                  "fill": "#94A3B8",
+                  "content": "hover → 上傳圖示浮現",
+                  "fontFamily": "Inter",
+                  "fontSize": 11,
+                  "fontWeight": "normal"
+                }
+              ]
+            },
+            {
+              "type": "frame",
+              "id": "VhYxD",
+              "name": "av_uploaded",
+              "layout": "vertical",
+              "gap": 8,
+              "alignItems": "center",
+              "children": [
+                {
+                  "type": "text",
+                  "id": "AMluv",
+                  "fill": "#94A3B8",
+                  "content": "Uploaded",
+                  "fontFamily": "Inter",
+                  "fontSize": 11,
+                  "fontWeight": "normal"
+                },
+                {
+                  "type": "frame",
+                  "id": "yXHyv",
+                  "name": "avatar",
+                  "width": 80,
+                  "height": 80,
+                  "fill": "#E2E8F0",
+                  "cornerRadius": 9999,
+                  "stroke": {
+                    "align": "inside",
+                    "thickness": 2,
+                    "fill": "#6366F1"
+                  },
+                  "justifyContent": "center",
+                  "alignItems": "center",
+                  "children": [
+                    {
+                      "type": "rectangle",
+                      "cornerRadius": 9999,
+                      "id": "Wc0Te",
+                      "opacity": 0.3,
+                      "fill": "#818CF8",
+                      "width": 80,
+                      "height": 80
+                    },
+                    {
+                      "type": "text",
+                      "id": "x4Iy0",
+                      "fill": "#6366F1",
+                      "content": "IMG",
+                      "fontFamily": "Inter",
+                      "fontSize": 14,
+                      "fontWeight": "700"
+                    }
+                  ]
+                },
+                {
+                  "type": "text",
+                  "id": "3iHnw",
+                  "fill": "#94A3B8",
+                  "content": "圖片填滿，縮寫消失",
+                  "fontFamily": "Inter",
+                  "fontSize": 11,
+                  "fontWeight": "normal"
+                }
+              ]
+            },
+            {
+              "type": "frame",
+              "id": "L53jk",
+              "name": "av_error",
+              "layout": "vertical",
+              "gap": 8,
+              "alignItems": "center",
+              "children": [
+                {
+                  "type": "text",
+                  "id": "SxWNm",
+                  "fill": "#94A3B8",
+                  "content": "Error",
+                  "fontFamily": "Inter",
+                  "fontSize": 11,
+                  "fontWeight": "normal"
+                },
+                {
+                  "type": "frame",
+                  "id": "7ZQe7",
+                  "name": "avatar",
+                  "width": 80,
+                  "height": 80,
+                  "fill": "#6366F1",
+                  "cornerRadius": 9999,
+                  "stroke": {
+                    "align": "inside",
+                    "thickness": 2,
+                    "fill": "#B91C1C"
+                  },
+                  "justifyContent": "center",
+                  "alignItems": "center",
+                  "children": [
+                    {
+                      "type": "text",
+                      "id": "JGVp8",
+                      "fill": "#FFFFFF",
+                      "content": "MC",
+                      "fontFamily": "Inter",
+                      "fontSize": 24,
+                      "fontWeight": "700"
+                    }
+                  ]
+                },
+                {
+                  "type": "text",
+                  "id": "9xg9T",
+                  "fill": "#B91C1C",
+                  "content": "格式錯誤 / 超過 5 MB",
+                  "fontFamily": "Inter",
+                  "fontSize": 11,
+                  "fontWeight": "normal"
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "type": "frame",
+      "id": "V3BHH",
+      "x": 4990,
+      "y": 0,
+      "name": "Profile Component (EN)",
+      "width": 800,
+      "fill": "#FFFFFF",
+      "stroke": {
+        "align": "inside",
+        "thickness": 1,
+        "fill": "#E2E8F0"
+      },
+      "layout": "vertical",
+      "gap": 32,
+      "padding": 32,
+      "children": [
+        {
+          "type": "text",
+          "id": "emdJA",
+          "name": "labelEN",
+          "fill": "#6366F1",
+          "content": "Profile Component (EN)",
+          "fontFamily": "Inter",
+          "fontSize": 24,
+          "fontWeight": "600"
+        },
+        {
+          "type": "text",
+          "id": "4XVeD",
+          "fill": "#94A3B8",
+          "content": "AVATAR UPLOAD — Profile-specific Component",
+          "fontFamily": "Inter",
+          "fontSize": 11,
+          "fontWeight": "700",
+          "letterSpacing": 2
+        },
+        {
+          "type": "frame",
+          "id": "md59g",
+          "name": "avatar_states",
+          "gap": 32,
+          "children": [
+            {
+              "type": "frame",
+              "id": "N0Xqo",
+              "name": "av_default",
+              "layout": "vertical",
+              "gap": 8,
+              "alignItems": "center",
+              "children": [
+                {
+                  "type": "text",
+                  "id": "8sXAW",
+                  "fill": "#94A3B8",
+                  "content": "Default",
+                  "fontFamily": "Inter",
+                  "fontSize": 11,
+                  "fontWeight": "normal"
+                },
+                {
+                  "type": "frame",
+                  "id": "E7CCg",
+                  "name": "avatar",
+                  "width": 80,
+                  "height": 80,
+                  "fill": "#6366F1",
+                  "cornerRadius": 9999,
+                  "justifyContent": "center",
+                  "alignItems": "center",
+                  "children": [
+                    {
+                      "type": "text",
+                      "id": "2x3Lp",
+                      "fill": "#FFFFFF",
+                      "content": "MC",
+                      "fontFamily": "Inter",
+                      "fontSize": 24,
+                      "fontWeight": "700"
+                    }
+                  ]
+                },
+                {
+                  "type": "text",
+                  "id": "RLUKh",
+                  "fill": "#94A3B8",
+                  "content": "Initials shown",
+                  "fontFamily": "Inter",
+                  "fontSize": 11,
+                  "fontWeight": "normal"
+                }
+              ]
+            },
+            {
+              "type": "frame",
+              "id": "jDRwc",
+              "name": "av_hover",
+              "layout": "vertical",
+              "gap": 8,
+              "alignItems": "center",
+              "children": [
+                {
+                  "type": "text",
+                  "id": "DbVc0",
+                  "fill": "#94A3B8",
+                  "content": "Hover (overlay)",
+                  "fontFamily": "Inter",
+                  "fontSize": 11,
+                  "fontWeight": "normal"
+                },
+                {
+                  "type": "frame",
+                  "id": "3qyK1",
+                  "name": "avatar",
+                  "width": 80,
+                  "height": 80,
+                  "fill": "#6366F1",
+                  "cornerRadius": 9999,
+                  "layout": "none",
+                  "children": [
+                    {
+                      "type": "text",
+                      "id": "VFFjb",
+                      "x": 22,
+                      "y": 26,
+                      "fill": "#FFFFFF",
+                      "content": "MC",
+                      "fontFamily": "Inter",
+                      "fontSize": 24,
+                      "fontWeight": "700"
+                    },
+                    {
+                      "type": "ellipse",
+                      "id": "ATC2M",
+                      "x": 0,
+                      "y": 0,
+                      "name": "overlay",
+                      "opacity": 0.5,
+                      "fill": "#000000",
+                      "width": 80,
+                      "height": 80
+                    },
+                    {
+                      "type": "rectangle",
+                      "cornerRadius": 4,
+                      "id": "H9Wep",
+                      "x": 28,
+                      "y": 28,
+                      "name": "upload_icon",
+                      "opacity": 0.9,
+                      "fill": "#FFFFFF",
+                      "width": 24,
+                      "height": 24
+                    }
+                  ]
+                },
+                {
+                  "type": "text",
+                  "id": "EoETr",
+                  "fill": "#94A3B8",
+                  "content": "hover → upload icon appears",
+                  "fontFamily": "Inter",
+                  "fontSize": 11,
+                  "fontWeight": "normal"
+                }
+              ]
+            },
+            {
+              "type": "frame",
+              "id": "6JyLX",
+              "name": "av_uploaded",
+              "layout": "vertical",
+              "gap": 8,
+              "alignItems": "center",
+              "children": [
+                {
+                  "type": "text",
+                  "id": "orA63",
+                  "fill": "#94A3B8",
+                  "content": "Uploaded",
+                  "fontFamily": "Inter",
+                  "fontSize": 11,
+                  "fontWeight": "normal"
+                },
+                {
+                  "type": "frame",
+                  "id": "6h4FR",
+                  "name": "avatar",
+                  "width": 80,
+                  "height": 80,
+                  "fill": "#E2E8F0",
+                  "cornerRadius": 9999,
+                  "stroke": {
+                    "align": "inside",
+                    "thickness": 2,
+                    "fill": "#6366F1"
+                  },
+                  "justifyContent": "center",
+                  "alignItems": "center",
+                  "children": [
+                    {
+                      "type": "rectangle",
+                      "cornerRadius": 9999,
+                      "id": "pHnFv",
+                      "opacity": 0.3,
+                      "fill": "#818CF8",
+                      "width": 80,
+                      "height": 80
+                    },
+                    {
+                      "type": "text",
+                      "id": "oDTQD",
+                      "fill": "#6366F1",
+                      "content": "IMG",
+                      "fontFamily": "Inter",
+                      "fontSize": 14,
+                      "fontWeight": "700"
+                    }
+                  ]
+                },
+                {
+                  "type": "text",
+                  "id": "CHylD",
+                  "fill": "#94A3B8",
+                  "content": "Image fills; initials hidden",
+                  "fontFamily": "Inter",
+                  "fontSize": 11,
+                  "fontWeight": "normal"
+                }
+              ]
+            },
+            {
+              "type": "frame",
+              "id": "RA08O",
+              "name": "av_error",
+              "layout": "vertical",
+              "gap": 8,
+              "alignItems": "center",
+              "children": [
+                {
+                  "type": "text",
+                  "id": "61ZdI",
+                  "fill": "#94A3B8",
+                  "content": "Error",
+                  "fontFamily": "Inter",
+                  "fontSize": 11,
+                  "fontWeight": "normal"
+                },
+                {
+                  "type": "frame",
+                  "id": "PS4DT",
+                  "name": "avatar",
+                  "width": 80,
+                  "height": 80,
+                  "fill": "#6366F1",
+                  "cornerRadius": 9999,
+                  "stroke": {
+                    "align": "inside",
+                    "thickness": 2,
+                    "fill": "#B91C1C"
+                  },
+                  "justifyContent": "center",
+                  "alignItems": "center",
+                  "children": [
+                    {
+                      "type": "text",
+                      "id": "im6YA",
+                      "fill": "#FFFFFF",
+                      "content": "MC",
+                      "fontFamily": "Inter",
+                      "fontSize": 24,
+                      "fontWeight": "700"
+                    }
+                  ]
+                },
+                {
+                  "type": "text",
+                  "id": "a9qMM",
+                  "fill": "#B91C1C",
+                  "content": "Invalid format / exceeds 5 MB",
+                  "fontFamily": "Inter",
+                  "fontSize": 11,
+                  "fontWeight": "normal"
+                }
+              ]
+            }
+          ]
+        }
+      ]
     }
   ]
 }
\ No newline at end of file

From a4d59ba9118cbb2395ffef1f8f3c6bd7aaa98539 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=B3=E6=AC=A3=E6=80=A1?= <ms.mandy610425@gmail.com>
Date: Tue, 31 Mar 2026 14:35:39 +0800
Subject: [PATCH 12/18] docs: update CLAUDE.md pencil wireframe paths and
 conventions

- Update pencil/ paths to design/wireframes/
- Add Pattern C (Header + Sidebar + Content) to Page Shell Patterns
- Update Pencil Wireframe Convention to specify 6 frames per page
- Update SDD workflow sequence

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 CLAUDE.md | 32 +++++++++++++++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)

diff --git a/CLAUDE.md b/CLAUDE.md
index 4cabecb..3e9ae13 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -294,9 +294,39 @@ The deciding question is: **will this change make the system behave differently
 
 - Draw order: Desktop ZH → Desktop EN → Mobile ZH → Mobile EN → Component ZH → Component EN
 - Keep structure symmetric between ZH and EN frames at each device tier
-- Component frames (`x:6000` onward) capture all reusable UI elements introduced in this page; not repeated in `index.pen`
+- Component frames (`x:6000` onward) contain **only page-specific components** — elements unique to this page's interactions
+- **Shared / cross-page components belong in `design/wireframes/design-system.pen`**, not in individual page files
+
+#### Component Placement Rule
+
+| Where | What goes here |
+|---|---|
+| `design-system.pen` | Components used across multiple pages (e.g. Button states, Text Input states, Toast, Navigation elements) |
+| Page `.pen` Component frame | Components unique to this page only (e.g. Avatar upload interaction in `profile.pen`) |
+
+> When deciding: if the component could appear on any other page, put it in `design-system.pen`.
+
 - `.pen` files are encrypted — **only operate via Pencil MCP tools**; never use `Read` / `Edit` / `Grep` on them
 
+#### Mobile RWD Requirements
+
+Mobile frames **must implement genuine RWD** — do NOT simply shrink the desktop layout. Key rules:
+
+| Desktop pattern | Mobile replacement |
+|---|---|
+| Sidebar navigation (`width: 224`) | Remove sidebar; use **bottom tab bar** (`height: 56`, `justifyContent: space_around`) |
+| Large navbar padding (e.g. `padding: [0, 80]`) | Reduce to `padding: [0, 16]` |
+| Multi-column layout | Collapse to single-column `fill_container` |
+| Large card padding (e.g. `32`) | Reduce to `16` |
+| Inline action buttons in wide rows | Stack vertically inside card: metadata text above, full-width button (`width: fill_container`) below |
+
+- Mobile canvas size: **390 × auto** (iPhone 14 viewport, height varies by page content)
+  - Use `height: "fit_content(900)"` during drawing
+  - After completion, run `snapshot_layout` on both ZH and EN frames to get actual heights
+  - Set both to the same fixed height (use the larger value): `U("frameId", {height: N})`
+  - **ZH and EN mobile frames must have identical `width × height`**
+- After drawing, take a screenshot and verify: no element overflows, no sidebar visible, all text readable
+
 ### Constitution Reference
 
 All development must follow the six core principles in [constitution.md](.specify/memory/constitution.md):

From 30e341b1e6557991df97c8085720bf6992ba0dc2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=B3=E6=AC=A3=E6=80=A1?= <ms.mandy610425@gmail.com>
Date: Tue, 31 Mar 2026 14:35:48 +0800
Subject: [PATCH 13/18] fix: replace innerHTML with DOM API to prevent XSS in
 profile avatar upload

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 design/prototype/pages/profile.html | 135 ++++++++++++++++++----------
 1 file changed, 88 insertions(+), 47 deletions(-)

diff --git a/design/prototype/pages/profile.html b/design/prototype/pages/profile.html
index d3f6763..f6db0b6 100644
--- a/design/prototype/pages/profile.html
+++ b/design/prototype/pages/profile.html
@@ -20,18 +20,23 @@
             ink:       '#1E1B4B',
           },
           fontFamily: {
-            heading: ['"Crimson Pro"', 'serif'],
-            body:    ['"Atkinson Hyperlegible"', 'sans-serif'],
+            heading: ['"Crimson Pro"', 'Noto Serif TC', 'serif'],
+            body:    ['"Atkinson Hyperlegible"', 'Noto Sans TC', 'sans-serif'],
           },
         },
       },
     }
   </script>
   <style>
-    body { font-family: 'Atkinson Hyperlegible', sans-serif; }
-    h1, h2, h3 { font-family: 'Crimson Pro', serif; }
+    body { font-family: 'Atkinson Hyperlegible', 'Noto Sans TC', sans-serif; }
+    h1, h2, h3 { font-family: 'Crimson Pro', 'Noto Serif TC', serif; }
     @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
 
+    /* Mobile: reserve space for fixed bottom tab bar */
+    @media (max-width: 767px) {
+      body { padding-bottom: 56px; }
+    }
+
     /* Tooltip */
     .tooltip-wrap { position: relative; display: inline-flex; }
     .tooltip-wrap .tooltip {
@@ -40,7 +45,7 @@
       background: #1E1B4B; color: #fff; font-size: 11px; white-space: nowrap;
       padding: 4px 8px; border-radius: 6px;
       transition: opacity 150ms ease;
-      pointer-events: none; z-index: 50;
+      pointer-events: none; z-index: 500;
     }
     .tooltip-wrap .tooltip::after {
       content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
@@ -57,12 +62,12 @@
 <body class="bg-surface min-h-screen flex flex-col">
 
   <!-- ── Top Navbar ── -->
-  <header class="h-14 bg-white border-b border-slate-200 flex items-center px-6 shrink-0" role="banner">
+  <!-- Desktop: px-20 (80px) | Mobile: px-4 (16px) — from wireframe -->
+  <header class="h-14 bg-white border-b border-slate-200 flex items-center px-4 md:px-20 shrink-0 z-[200]" role="banner">
     <div class="flex items-center gap-3 flex-1">
-      <!-- Logo -->
       <a href="dashboard.html" class="flex items-center gap-2.5 group focus:outline-none" aria-label="Label Suite — 回首頁">
         <div class="w-8 h-8 bg-primary rounded-lg flex items-center justify-center group-hover:bg-secondary transition-colors duration-200">
-          <svg class="w-4.5 h-4.5 text-white" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <svg class="w-4 h-4 text-white" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
             <path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"/>
             <line x1="7" y1="7" x2="7.01" y2="7"/>
           </svg>
@@ -83,7 +88,6 @@ <h1 class="text-lg font-bold text-ink leading-none">Label Suite</h1>
         </svg>
         <span id="lang-label">EN</span>
       </button>
-      <!-- User avatar (nav) -->
       <div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center text-white text-xs font-bold select-none" aria-hidden="true">
         MC
       </div>
@@ -93,11 +97,12 @@ <h1 class="text-lg font-bold text-ink leading-none">Label Suite</h1>
   <!-- ── App Shell ── -->
   <div class="flex flex-1 min-h-0">
 
-    <!-- ── Sidebar ── -->
-    <aside class="w-56 bg-white border-r border-slate-200 flex flex-col shrink-0 py-4">
-      <nav class="flex flex-col gap-0.5 px-3" aria-label="主選單">
+    <!-- ── Sidebar (desktop only, 224px) ── -->
+    <!-- wireframe: sidebar width 224, padding [16,12], gap 4 -->
+    <aside class="hidden md:flex w-56 bg-white border-r border-slate-200 flex-col shrink-0 py-4 z-[200]">
+      <nav class="flex flex-col gap-1 px-3" aria-label="主選單">
 
-        <!-- Dashboard -->
+        <!-- Dashboard (inactive) -->
         <a href="dashboard.html"
            class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm text-slate-500 hover:bg-surface hover:text-ink cursor-pointer transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary"
            data-i18n-aria-label="aria-nav-dashboard">
@@ -108,10 +113,9 @@ <h1 class="text-lg font-bold text-ink leading-none">Label Suite</h1>
           <span data-i18n="nav-dashboard">儀表板</span>
         </a>
 
-        <!-- Divider -->
-        <div class="h-px bg-slate-100 my-2 mx-3"></div>
+        <div class="h-px bg-slate-100 my-1 mx-3" aria-hidden="true"></div>
 
-        <!-- Profile Settings — active -->
+        <!-- Profile Settings (active) -->
         <a href="#"
            class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm font-medium text-primary bg-surface cursor-pointer focus:outline-none focus:ring-2 focus:ring-primary"
            aria-current="page" data-i18n-aria-label="aria-nav-profile">
@@ -126,13 +130,16 @@ <h1 class="text-lg font-bold text-ink leading-none">Label Suite</h1>
     </aside>
 
     <!-- ── Main Content ── -->
-    <main class="flex-1 overflow-y-auto p-8" role="main">
-      <div class="max-w-xl mx-auto">
-
-        <!-- Page heading -->
-        <div class="mb-6">
-          <h2 class="text-2xl font-bold text-ink" data-i18n="page-title">個人設定</h2>
-          <p class="text-sm text-slate-500 mt-1" data-i18n="page-desc">管理您的帳號資訊與顯示偏好。</p>
+    <!-- Desktop: py-8 px-20 (32px/80px) | Mobile: p-4 (16px) — from wireframe -->
+    <main class="flex-1 overflow-y-auto p-4 md:py-8 md:px-20" role="main">
+      <!-- max-w-3xl per MASTER.md Pattern C -->
+      <div class="max-w-3xl">
+
+        <!-- Page heading — desktop gap 6, mobile gap 4 -->
+        <div class="mb-4 md:mb-6">
+          <!-- Desktop: font-size 24 | Mobile: font-size 20 — from wireframe -->
+          <h2 class="text-xl md:text-2xl font-bold text-ink" data-i18n="page-title">個人設定</h2>
+          <p class="text-sm text-slate-500 mt-1 leading-relaxed" data-i18n="page-desc">管理您的帳號資訊與顯示偏好。</p>
         </div>
 
         <!-- ── Toast (hidden by default) ── -->
@@ -150,27 +157,31 @@ <h2 class="text-2xl font-bold text-ink" data-i18n="page-title">個人設定</h2>
         </div>
 
         <!-- ── Profile Card ── -->
-        <div class="bg-white border border-slate-200 rounded-2xl p-8 flex flex-col gap-6">
+        <!-- Desktop: p-8 rounded-2xl (padding 32, radius 16) | Mobile: p-4 rounded-xl (padding 16, radius 12) -->
+        <div class="bg-white border border-slate-200 rounded-xl md:rounded-2xl p-4 md:p-8 flex flex-col gap-5 md:gap-6">
 
           <!-- Avatar section -->
-          <div class="flex items-center gap-5">
-            <div class="relative avatar-wrap cursor-pointer group" onclick="document.getElementById('avatar-input').click()" role="button" tabindex="0"
-                 aria-label="上傳頭像" data-i18n-aria-label="aria-avatar" aria-describedby="avatar-error"
+          <!-- Desktop: gap-5 (20px), avatar 80px | Mobile: gap-4 (16px), avatar 64px -->
+          <div class="flex items-center gap-4 md:gap-5">
+            <div class="relative avatar-wrap cursor-pointer group shrink-0"
+                 onclick="document.getElementById('avatar-input').click()"
+                 role="button" tabindex="0"
+                 aria-label="上傳頭像" data-i18n-aria-label="aria-avatar"
+                 aria-describedby="avatar-error"
                  onkeydown="if(event.key==='Enter'||event.key===' ')document.getElementById('avatar-input').click()">
-              <!-- Avatar circle -->
+              <!-- Avatar: w-16 h-16 mobile (64px), w-20 h-20 desktop (80px) -->
               <div id="avatar-preview"
-                   class="w-20 h-20 rounded-full bg-primary flex items-center justify-center text-white text-2xl font-bold select-none overflow-hidden border-2 border-slate-100"
+                   class="w-16 h-16 md:w-20 md:h-20 rounded-full bg-primary flex items-center justify-center text-white text-xl md:text-2xl font-bold select-none overflow-hidden"
                    aria-hidden="true">
                 MC
               </div>
-              <!-- Hover overlay -->
-              <div class="avatar-overlay absolute inset-0 rounded-full bg-ink/50 flex items-center justify-center opacity-0 transition-opacity duration-200">
+              <!-- Hover overlay (wireframe: semi-transparent dark + upload icon) -->
+              <div class="avatar-overlay absolute inset-0 rounded-full bg-black/50 flex items-center justify-center opacity-0 transition-opacity duration-200">
                 <svg class="w-6 h-6 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                   <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                   <polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/>
                 </svg>
               </div>
-              <!-- Hidden file input -->
               <input id="avatar-input" type="file" accept="image/jpeg,image/png,image/webp" class="hidden"
                      aria-label="選擇頭像圖片" onchange="previewAvatar(event)" />
             </div>
@@ -181,10 +192,11 @@ <h2 class="text-2xl font-bold text-ink" data-i18n="page-title">個人設定</h2>
             </div>
           </div>
 
-          <div class="h-px bg-slate-100"></div>
+          <div class="h-px bg-slate-100" aria-hidden="true"></div>
 
           <!-- Form fields -->
-          <div class="flex flex-col gap-5">
+          <!-- Desktop: gap-5 (20px) | Mobile: gap-4 (16px) — from wireframe -->
+          <div class="flex flex-col gap-4 md:gap-5">
 
             <!-- Display Name -->
             <div class="flex flex-col gap-1.5">
@@ -203,7 +215,6 @@ <h2 class="text-2xl font-bold text-ink" data-i18n="page-title">個人設定</h2>
             <div class="flex flex-col gap-1.5">
               <div class="flex items-center gap-1.5">
                 <label for="email" class="text-sm font-medium text-ink" data-i18n="label-email">Email</label>
-                <!-- Info tooltip -->
                 <div class="tooltip-wrap" tabindex="0" aria-describedby="email-tooltip-text">
                   <svg class="w-3.5 h-3.5 text-slate-400 cursor-default" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                     <circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/>
@@ -211,6 +222,7 @@ <h2 class="text-2xl font-bold text-ink" data-i18n="page-title">個人設定</h2>
                   <span id="email-tooltip-text" class="tooltip" data-i18n="tooltip-email">Email 由 SSO 帳號管理，無法在此修改。</span>
                 </div>
               </div>
+              <!-- wireframe: fill #F8FAFC (readonly bg), border #E2E8F0 -->
               <input id="email" type="email" value="mandy.chen@example.edu" readonly
                      class="w-full border border-slate-100 rounded-lg px-3 py-2.5 text-sm text-slate-500 bg-slate-50 cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-slate-300"
                      aria-readonly="true" />
@@ -219,9 +231,10 @@ <h2 class="text-2xl font-bold text-ink" data-i18n="page-title">個人設定</h2>
             <!-- Role (read-only badge) -->
             <div class="flex flex-col gap-1.5">
               <span class="text-sm font-medium text-ink" data-i18n="label-role">角色</span>
-              <div class="flex items-center gap-2">
+              <div class="flex items-center gap-2 flex-wrap">
+                <!-- wireframe: role_badge = cornerRadius 9999, fill #EEF2FF, border #6366F1 -->
                 <span id="role-badge"
-                      class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium bg-primary/10 text-primary border border-primary/20">
+                      class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium bg-indigo-50 text-primary border border-primary/30">
                   <svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                     <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
                   </svg>
@@ -234,6 +247,7 @@ <h2 class="text-2xl font-bold text-ink" data-i18n="page-title">個人設定</h2>
             <!-- Language Preference -->
             <div class="flex flex-col gap-1.5">
               <span class="text-sm font-medium text-ink" data-i18n="label-lang">介面語言</span>
+              <!-- wireframe: lang_toggle = fill #F1F5F9, cornerRadius 8, padding 4, gap 4 -->
               <div class="flex items-center gap-1 p-1 bg-slate-100 rounded-lg w-fit" role="tablist" aria-label="介面語言">
                 <button id="lang-zh" type="button" onclick="setLangPref('zh-TW')"
                         class="px-4 py-1.5 rounded-md text-sm font-medium cursor-pointer transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1"
@@ -251,16 +265,19 @@ <h2 class="text-2xl font-bold text-ink" data-i18n="page-title">個人設定</h2>
 
           </div>
 
-          <div class="h-px bg-slate-100"></div>
+          <div class="h-px bg-slate-100" aria-hidden="true"></div>
 
-          <!-- Save button -->
-          <div class="flex items-center justify-between">
+          <!-- Save section -->
+          <!-- Desktop: space-between row (time left, btn right)
+               Mobile: vertical stack (time on top, full-width btn below) — from wireframe -->
+          <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-3">
             <p class="text-xs text-slate-400" data-i18n="last-saved">上次儲存：2026-03-27 14:32</p>
+            <!-- Mobile: w-full h-11 (44px) | Desktop: w-auto — from wireframe -->
             <button type="button" onclick="saveProfile()"
                     id="save-btn"
-                    class="flex items-center gap-2 bg-cta hover:bg-cta/90 hover:-translate-y-px text-white text-sm font-medium rounded-lg px-5 py-2.5 cursor-pointer transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-cta focus:ring-offset-2"
+                    class="flex items-center justify-center gap-2 bg-cta hover:opacity-90 hover:-translate-y-px text-white text-sm font-medium rounded-lg px-5 h-11 md:h-auto md:py-2.5 cursor-pointer transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-cta focus:ring-offset-2 w-full md:w-auto"
                     aria-label="儲存個人設定" data-i18n-aria-label="aria-save-btn">
-              <svg id="save-icon" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+              <svg id="save-icon" class="w-4 h-4 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                 <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
                 <polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/>
               </svg>
@@ -273,12 +290,38 @@ <h2 class="text-2xl font-bold text-ink" data-i18n="page-title">個人設定</h2>
 
       </div>
     </main>
-    <!-- /Main Content -->
 
   </div>
   <!-- /App Shell -->
 
 
+  <!-- ── Bottom Tab Bar (mobile only, height 56px) ── -->
+  <!-- wireframe: justifyContent space_around, border-top #E2E8F0 -->
+  <nav class="md:hidden fixed bottom-0 left-0 right-0 h-14 bg-white border-t border-slate-200 flex items-stretch z-[200]"
+       aria-label="底部導覽">
+    <!-- Dashboard tab (inactive) -->
+    <a href="dashboard.html"
+       class="flex-1 flex flex-col items-center justify-center gap-0.5 text-slate-500 hover:text-primary transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary"
+       data-i18n-aria-label="aria-nav-dashboard">
+      <svg class="w-5 h-5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/>
+        <rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/>
+      </svg>
+      <span class="text-xs" data-i18n="nav-dashboard">儀表板</span>
+    </a>
+    <!-- Profile tab (active) -->
+    <a href="#"
+       class="flex-1 flex flex-col items-center justify-center gap-0.5 text-primary font-medium transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary"
+       aria-current="page" data-i18n-aria-label="aria-nav-profile">
+      <svg class="w-5 h-5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
+        <circle cx="12" cy="7" r="4"/>
+      </svg>
+      <span class="text-xs font-medium" data-i18n="nav-profile">個人設定</span>
+    </a>
+  </nav>
+
+
   <!-- ── i18n + Logic ── -->
   <script>
     const STRINGS = {
@@ -466,7 +509,6 @@ <h2 class="text-2xl font-bold text-ink" data-i18n="page-title">個人設定</h2>
 
       const btn = document.getElementById('save-btn');
       const s = STRINGS[currentLang];
-      // Loading state
       btn.disabled = true;
       btn.setAttribute('aria-busy', 'true');
       btn.setAttribute('aria-label', s['aria-save-loading'] || '儲存中…');
@@ -477,7 +519,6 @@ <h2 class="text-2xl font-bold text-ink" data-i18n="page-title">個人設定</h2>
           <animateTransform attributeName="transform" type="rotate" from="0 12 12" to="360 12 12" dur="0.8s" repeatCount="indefinite"/>
         </path>`;
 
-      // Simulate async save
       setTimeout(() => {
         btn.disabled = false;
         btn.setAttribute('aria-busy', 'false');
@@ -492,8 +533,8 @@ <h2 class="text-2xl font-bold text-ink" data-i18n="page-title">個人設定</h2>
     }
 
     function showToast(type) {
-      const toast   = document.getElementById('toast');
-      const toastTxt = document.getElementById('toast-text');
+      const toast    = document.getElementById('toast');
+      const toastTxt  = document.getElementById('toast-text');
       const toastIcon = document.getElementById('toast-icon');
       const s = STRINGS[currentLang];
 

From 3f68fd28a3f120af2c458ac11f65f91e7ad84860 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=B3=E6=AC=A3=E6=80=A1?= <ms.mandy610425@gmail.com>
Date: Tue, 31 Mar 2026 14:35:54 +0800
Subject: [PATCH 14/18] chore: update design-system.pen wireframe assets

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 design/wireframes/design-system.pen | 805 ++++++++++++++++++++++++++++
 1 file changed, 805 insertions(+)

diff --git a/design/wireframes/design-system.pen b/design/wireframes/design-system.pen
index 55c9ac8..49dc0cf 100644
--- a/design/wireframes/design-system.pen
+++ b/design/wireframes/design-system.pen
@@ -1841,6 +1841,811 @@
               ]
             }
           ]
+        },
+        {
+          "type": "frame",
+          "id": "DeBeO",
+          "name": "sec_form",
+          "width": "fill_container",
+          "layout": "vertical",
+          "gap": 24,
+          "children": [
+            {
+              "type": "text",
+              "id": "Waept",
+              "fill": "$color-text-muted",
+              "content": "FORM & INTERACTION COMPONENTS",
+              "fontFamily": "Inter",
+              "fontSize": 11,
+              "fontWeight": "700",
+              "letterSpacing": 2
+            },
+            {
+              "type": "frame",
+              "id": "5K5Lj",
+              "name": "sub_save",
+              "width": "fill_container",
+              "layout": "vertical",
+              "gap": 12,
+              "children": [
+                {
+                  "type": "text",
+                  "id": "JzEtX",
+                  "fill": "$color-ink",
+                  "content": "Save Button",
+                  "fontFamily": "Inter",
+                  "fontSize": 13,
+                  "fontWeight": "600"
+                },
+                {
+                  "type": "frame",
+                  "id": "V0arp",
+                  "name": "save_row",
+                  "gap": 24,
+                  "children": [
+                    {
+                      "type": "frame",
+                      "id": "EOW6o",
+                      "name": "state_default",
+                      "layout": "vertical",
+                      "gap": 6,
+                      "children": [
+                        {
+                          "type": "text",
+                          "id": "rUUYv",
+                          "fill": "$color-text-muted",
+                          "content": "Default",
+                          "fontFamily": "Inter",
+                          "fontSize": 11,
+                          "fontWeight": "normal"
+                        },
+                        {
+                          "type": "frame",
+                          "id": "8TbTX",
+                          "name": "sb1",
+                          "fill": "$color-cta",
+                          "cornerRadius": "$radius-md",
+                          "padding": [
+                            10,
+                            20
+                          ],
+                          "justifyContent": "center",
+                          "alignItems": "center",
+                          "children": [
+                            {
+                              "type": "text",
+                              "id": "tSF3A",
+                              "fill": "$color-white",
+                              "content": "儲存變更",
+                              "fontFamily": "Inter",
+                              "fontSize": 14,
+                              "fontWeight": "500"
+                            }
+                          ]
+                        }
+                      ]
+                    },
+                    {
+                      "type": "frame",
+                      "id": "7e564",
+                      "name": "state_hover",
+                      "layout": "vertical",
+                      "gap": 6,
+                      "children": [
+                        {
+                          "type": "text",
+                          "id": "KBQxd",
+                          "fill": "$color-text-muted",
+                          "content": "Hover (opacity 90%)",
+                          "fontFamily": "Inter",
+                          "fontSize": 11,
+                          "fontWeight": "normal"
+                        },
+                        {
+                          "type": "frame",
+                          "id": "1Dmyu",
+                          "name": "sb2",
+                          "opacity": 0.9,
+                          "fill": "$color-cta",
+                          "cornerRadius": "$radius-md",
+                          "padding": [
+                            10,
+                            20
+                          ],
+                          "justifyContent": "center",
+                          "alignItems": "center",
+                          "children": [
+                            {
+                              "type": "text",
+                              "id": "9izU8",
+                              "fill": "$color-white",
+                              "content": "儲存變更",
+                              "fontFamily": "Inter",
+                              "fontSize": 14,
+                              "fontWeight": "500"
+                            }
+                          ]
+                        }
+                      ]
+                    },
+                    {
+                      "type": "frame",
+                      "id": "1Iafv",
+                      "name": "state_loading",
+                      "layout": "vertical",
+                      "gap": 6,
+                      "children": [
+                        {
+                          "type": "text",
+                          "id": "Xu6pO",
+                          "fill": "$color-text-muted",
+                          "content": "Loading (opacity 70%)",
+                          "fontFamily": "Inter",
+                          "fontSize": 11,
+                          "fontWeight": "normal"
+                        },
+                        {
+                          "type": "frame",
+                          "id": "09PNt",
+                          "name": "sb3",
+                          "opacity": 0.7,
+                          "fill": "$color-cta",
+                          "cornerRadius": "$radius-md",
+                          "gap": 8,
+                          "padding": [
+                            10,
+                            20
+                          ],
+                          "justifyContent": "center",
+                          "alignItems": "center",
+                          "children": [
+                            {
+                              "type": "ellipse",
+                              "id": "mdyuG",
+                              "fill": "#00000000",
+                              "width": 14,
+                              "height": 14,
+                              "stroke": {
+                                "align": "center",
+                                "thickness": 2,
+                                "fill": "$color-white"
+                              }
+                            },
+                            {
+                              "type": "text",
+                              "id": "IkkZX",
+                              "fill": "$color-white",
+                              "content": "儲存中…",
+                              "fontFamily": "Inter",
+                              "fontSize": 14,
+                              "fontWeight": "500"
+                            }
+                          ]
+                        }
+                      ]
+                    },
+                    {
+                      "type": "frame",
+                      "id": "CrSJd",
+                      "name": "state_disabled",
+                      "layout": "vertical",
+                      "gap": 6,
+                      "children": [
+                        {
+                          "type": "text",
+                          "id": "2nme3",
+                          "fill": "$color-text-muted",
+                          "content": "Disabled",
+                          "fontFamily": "Inter",
+                          "fontSize": 11,
+                          "fontWeight": "normal"
+                        },
+                        {
+                          "type": "frame",
+                          "id": "dZNTb",
+                          "name": "sb4",
+                          "fill": "$color-border",
+                          "cornerRadius": "$radius-md",
+                          "padding": [
+                            10,
+                            20
+                          ],
+                          "justifyContent": "center",
+                          "alignItems": "center",
+                          "children": [
+                            {
+                              "type": "text",
+                              "id": "PWfji",
+                              "fill": "$color-text-muted",
+                              "content": "儲存變更",
+                              "fontFamily": "Inter",
+                              "fontSize": 14,
+                              "fontWeight": "500"
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "type": "frame",
+              "id": "9R3om",
+              "name": "sub_input",
+              "width": "fill_container",
+              "layout": "vertical",
+              "gap": 12,
+              "children": [
+                {
+                  "type": "text",
+                  "id": "QvAPc",
+                  "fill": "$color-ink",
+                  "content": "Text Input",
+                  "fontFamily": "Inter",
+                  "fontSize": 13,
+                  "fontWeight": "600"
+                },
+                {
+                  "type": "frame",
+                  "id": "cPuei",
+                  "name": "input_row",
+                  "gap": 24,
+                  "children": [
+                    {
+                      "type": "frame",
+                      "id": "2B5HX",
+                      "name": "input_default",
+                      "layout": "vertical",
+                      "gap": 6,
+                      "children": [
+                        {
+                          "type": "text",
+                          "id": "4DIMZ",
+                          "fill": "$color-text-muted",
+                          "content": "Default",
+                          "fontFamily": "Inter",
+                          "fontSize": 11,
+                          "fontWeight": "normal"
+                        },
+                        {
+                          "type": "frame",
+                          "id": "tvnWU",
+                          "name": "input",
+                          "width": 200,
+                          "height": 40,
+                          "fill": "$color-white",
+                          "cornerRadius": "$radius-md",
+                          "stroke": {
+                            "align": "inside",
+                            "thickness": 1,
+                            "fill": "$color-border"
+                          },
+                          "padding": [
+                            0,
+                            12
+                          ],
+                          "alignItems": "center",
+                          "children": [
+                            {
+                              "type": "text",
+                              "id": "DmbSc",
+                              "fill": "$color-text-muted",
+                              "content": "輸入文字…",
+                              "fontFamily": "Inter",
+                              "fontSize": 14,
+                              "fontWeight": "normal"
+                            }
+                          ]
+                        }
+                      ]
+                    },
+                    {
+                      "type": "frame",
+                      "id": "TypUy",
+                      "name": "input_focus",
+                      "layout": "vertical",
+                      "gap": 6,
+                      "children": [
+                        {
+                          "type": "text",
+                          "id": "S1b0h",
+                          "fill": "$color-text-muted",
+                          "content": "Focus",
+                          "fontFamily": "Inter",
+                          "fontSize": 11,
+                          "fontWeight": "normal"
+                        },
+                        {
+                          "type": "frame",
+                          "id": "VIAKt",
+                          "name": "input",
+                          "width": 200,
+                          "height": 40,
+                          "fill": "$color-white",
+                          "cornerRadius": "$radius-md",
+                          "stroke": {
+                            "align": "inside",
+                            "thickness": 2,
+                            "fill": "$color-primary"
+                          },
+                          "padding": [
+                            0,
+                            12
+                          ],
+                          "alignItems": "center",
+                          "children": [
+                            {
+                              "type": "text",
+                              "id": "FFsVU",
+                              "fill": "$color-text",
+                              "content": "Mandy Chen",
+                              "fontFamily": "Inter",
+                              "fontSize": 14,
+                              "fontWeight": "normal"
+                            }
+                          ]
+                        }
+                      ]
+                    },
+                    {
+                      "type": "frame",
+                      "id": "3QJJZ",
+                      "name": "input_error",
+                      "layout": "vertical",
+                      "gap": 6,
+                      "children": [
+                        {
+                          "type": "text",
+                          "id": "uWQhj",
+                          "fill": "$color-text-muted",
+                          "content": "Error",
+                          "fontFamily": "Inter",
+                          "fontSize": 11,
+                          "fontWeight": "normal"
+                        },
+                        {
+                          "type": "frame",
+                          "id": "rRF8I",
+                          "name": "input",
+                          "width": 200,
+                          "height": 40,
+                          "fill": "$color-white",
+                          "cornerRadius": "$radius-md",
+                          "stroke": {
+                            "align": "inside",
+                            "thickness": 1,
+                            "fill": "$color-error"
+                          },
+                          "padding": [
+                            0,
+                            12
+                          ],
+                          "alignItems": "center",
+                          "children": [
+                            {
+                              "type": "text",
+                              "id": "bHMm2",
+                              "fill": "$color-text",
+                              "content": "Mandy Chen",
+                              "fontFamily": "Inter",
+                              "fontSize": 14,
+                              "fontWeight": "normal"
+                            }
+                          ]
+                        },
+                        {
+                          "type": "text",
+                          "id": "GrY5n",
+                          "fill": "$color-error",
+                          "content": "最多 50 個字元",
+                          "fontFamily": "Inter",
+                          "fontSize": 12,
+                          "fontWeight": "normal"
+                        }
+                      ]
+                    },
+                    {
+                      "type": "frame",
+                      "id": "9nm0X",
+                      "name": "input_readonly",
+                      "layout": "vertical",
+                      "gap": 6,
+                      "children": [
+                        {
+                          "type": "text",
+                          "id": "I1Hny",
+                          "fill": "$color-text-muted",
+                          "content": "Readonly / Disabled",
+                          "fontFamily": "Inter",
+                          "fontSize": 11,
+                          "fontWeight": "normal"
+                        },
+                        {
+                          "type": "frame",
+                          "id": "ShEqV",
+                          "name": "input",
+                          "width": 200,
+                          "height": 40,
+                          "fill": "#F8FAFC",
+                          "cornerRadius": "$radius-md",
+                          "stroke": {
+                            "align": "inside",
+                            "thickness": 1,
+                            "fill": "$color-border"
+                          },
+                          "padding": [
+                            0,
+                            12
+                          ],
+                          "alignItems": "center",
+                          "children": [
+                            {
+                              "type": "text",
+                              "id": "1IYoh",
+                              "fill": "$color-text-muted",
+                              "content": "mandy.chen@example.edu",
+                              "fontFamily": "Inter",
+                              "fontSize": 14,
+                              "fontWeight": "normal"
+                            }
+                          ]
+                        },
+                        {
+                          "type": "text",
+                          "id": "ydQcl",
+                          "fill": "$color-text-muted",
+                          "content": "readonly — aria-readonly=\"true\"",
+                          "fontFamily": "Inter",
+                          "fontSize": 11,
+                          "fontWeight": "normal"
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "type": "frame",
+              "id": "wKc4g",
+              "name": "sub_toast",
+              "width": "fill_container",
+              "layout": "vertical",
+              "gap": 12,
+              "children": [
+                {
+                  "type": "text",
+                  "id": "Xwz7k",
+                  "fill": "$color-ink",
+                  "content": "Toast Notification",
+                  "fontFamily": "Inter",
+                  "fontSize": 13,
+                  "fontWeight": "600"
+                },
+                {
+                  "type": "frame",
+                  "id": "8GIeM",
+                  "name": "toast_row",
+                  "gap": 24,
+                  "children": [
+                    {
+                      "type": "frame",
+                      "id": "pntd5",
+                      "name": "toast_success",
+                      "layout": "vertical",
+                      "gap": 6,
+                      "children": [
+                        {
+                          "type": "text",
+                          "id": "9RHMR",
+                          "fill": "$color-text-muted",
+                          "content": "Success",
+                          "fontFamily": "Inter",
+                          "fontSize": 11,
+                          "fontWeight": "normal"
+                        },
+                        {
+                          "type": "frame",
+                          "id": "tKlns",
+                          "name": "toast",
+                          "width": 320,
+                          "fill": "$color-success-bg",
+                          "cornerRadius": "$radius-md",
+                          "stroke": {
+                            "align": "inside",
+                            "thickness": 1,
+                            "fill": "$color-success-border"
+                          },
+                          "gap": 10,
+                          "padding": [
+                            12,
+                            16
+                          ],
+                          "alignItems": "center",
+                          "children": [
+                            {
+                              "type": "ellipse",
+                              "id": "6V3WP",
+                              "fill": "$color-success",
+                              "width": 16,
+                              "height": 16
+                            },
+                            {
+                              "type": "text",
+                              "id": "KJ9GK",
+                              "fill": "$color-success",
+                              "textGrowth": "fixed-width",
+                              "width": "fill_container",
+                              "content": "儲存成功。",
+                              "fontFamily": "Inter",
+                              "fontSize": 14,
+                              "fontWeight": "500"
+                            },
+                            {
+                              "type": "rectangle",
+                              "cornerRadius": 2,
+                              "id": "Szogs",
+                              "opacity": 0.5,
+                              "fill": "$color-text-muted",
+                              "width": 16,
+                              "height": 16
+                            }
+                          ]
+                        }
+                      ]
+                    },
+                    {
+                      "type": "frame",
+                      "id": "YUuk5",
+                      "name": "toast_error",
+                      "layout": "vertical",
+                      "gap": 6,
+                      "children": [
+                        {
+                          "type": "text",
+                          "id": "c9Djd",
+                          "fill": "$color-text-muted",
+                          "content": "Error",
+                          "fontFamily": "Inter",
+                          "fontSize": 11,
+                          "fontWeight": "normal"
+                        },
+                        {
+                          "type": "frame",
+                          "id": "6ZvHO",
+                          "name": "toast",
+                          "width": 320,
+                          "fill": "$color-error-bg",
+                          "cornerRadius": "$radius-md",
+                          "stroke": {
+                            "align": "inside",
+                            "thickness": 1,
+                            "fill": "$color-error-border"
+                          },
+                          "gap": 10,
+                          "padding": [
+                            12,
+                            16
+                          ],
+                          "alignItems": "center",
+                          "children": [
+                            {
+                              "type": "ellipse",
+                              "id": "Xa8tj",
+                              "fill": "$color-error",
+                              "width": 16,
+                              "height": 16
+                            },
+                            {
+                              "type": "text",
+                              "id": "6kWOU",
+                              "fill": "$color-error",
+                              "textGrowth": "fixed-width",
+                              "width": "fill_container",
+                              "content": "儲存失敗，請稍後再試。",
+                              "fontFamily": "Inter",
+                              "fontSize": 14,
+                              "fontWeight": "500"
+                            },
+                            {
+                              "type": "rectangle",
+                              "cornerRadius": 2,
+                              "id": "PTK1Z",
+                              "opacity": 0.5,
+                              "fill": "$color-text-muted",
+                              "width": 16,
+                              "height": 16
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "type": "frame",
+              "id": "NAjgA",
+              "name": "sub_toggle",
+              "width": "fill_container",
+              "layout": "vertical",
+              "gap": 12,
+              "children": [
+                {
+                  "type": "text",
+                  "id": "nb5nn",
+                  "fill": "$color-ink",
+                  "content": "Language Toggle",
+                  "fontFamily": "Inter",
+                  "fontSize": 13,
+                  "fontWeight": "600"
+                },
+                {
+                  "type": "frame",
+                  "id": "KG9xS",
+                  "name": "toggle_row",
+                  "gap": 24,
+                  "children": [
+                    {
+                      "type": "frame",
+                      "id": "W9iAG",
+                      "name": "toggle_zh",
+                      "layout": "vertical",
+                      "gap": 6,
+                      "children": [
+                        {
+                          "type": "text",
+                          "id": "JWlUV",
+                          "fill": "$color-text-muted",
+                          "content": "ZH Selected",
+                          "fontFamily": "Inter",
+                          "fontSize": 11,
+                          "fontWeight": "normal"
+                        },
+                        {
+                          "type": "frame",
+                          "id": "r2Qph",
+                          "name": "toggle",
+                          "fill": "#F1F5F9",
+                          "cornerRadius": "$radius-md",
+                          "gap": 4,
+                          "padding": 4,
+                          "children": [
+                            {
+                              "type": "frame",
+                              "id": "6nwh5",
+                              "name": "b1",
+                              "fill": "$color-white",
+                              "cornerRadius": "$radius-sm",
+                              "padding": [
+                                6,
+                                16
+                              ],
+                              "justifyContent": "center",
+                              "alignItems": "center",
+                              "children": [
+                                {
+                                  "type": "text",
+                                  "id": "FadIS",
+                                  "fill": "$color-text",
+                                  "content": "ZH",
+                                  "fontFamily": "Inter",
+                                  "fontSize": 14,
+                                  "fontWeight": "500"
+                                }
+                              ]
+                            },
+                            {
+                              "type": "frame",
+                              "id": "Hlwia",
+                              "name": "b2",
+                              "cornerRadius": "$radius-sm",
+                              "padding": [
+                                6,
+                                16
+                              ],
+                              "justifyContent": "center",
+                              "alignItems": "center",
+                              "children": [
+                                {
+                                  "type": "text",
+                                  "id": "MlmAf",
+                                  "fill": "$color-text-muted",
+                                  "content": "EN",
+                                  "fontFamily": "Inter",
+                                  "fontSize": 14,
+                                  "fontWeight": "normal"
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    },
+                    {
+                      "type": "frame",
+                      "id": "B8WQX",
+                      "name": "toggle_en",
+                      "layout": "vertical",
+                      "gap": 6,
+                      "children": [
+                        {
+                          "type": "text",
+                          "id": "uJ9s5",
+                          "fill": "$color-text-muted",
+                          "content": "EN Selected",
+                          "fontFamily": "Inter",
+                          "fontSize": 11,
+                          "fontWeight": "normal"
+                        },
+                        {
+                          "type": "frame",
+                          "id": "vdk6X",
+                          "name": "toggle",
+                          "fill": "#F1F5F9",
+                          "cornerRadius": "$radius-md",
+                          "gap": 4,
+                          "padding": 4,
+                          "children": [
+                            {
+                              "type": "frame",
+                              "id": "UxkAm",
+                              "name": "b3",
+                              "cornerRadius": "$radius-sm",
+                              "padding": [
+                                6,
+                                16
+                              ],
+                              "justifyContent": "center",
+                              "alignItems": "center",
+                              "children": [
+                                {
+                                  "type": "text",
+                                  "id": "io4do",
+                                  "fill": "$color-text-muted",
+                                  "content": "ZH",
+                                  "fontFamily": "Inter",
+                                  "fontSize": 14,
+                                  "fontWeight": "normal"
+                                }
+                              ]
+                            },
+                            {
+                              "type": "frame",
+                              "id": "ieDSl",
+                              "name": "b4",
+                              "fill": "$color-white",
+                              "cornerRadius": "$radius-sm",
+                              "padding": [
+                                6,
+                                16
+                              ],
+                              "justifyContent": "center",
+                              "alignItems": "center",
+                              "children": [
+                                {
+                                  "type": "text",
+                                  "id": "d4Zf6",
+                                  "fill": "$color-text",
+                                  "content": "EN",
+                                  "fontFamily": "Inter",
+                                  "fontSize": 14,
+                                  "fontWeight": "500"
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
         }
       ]
     }

From 700ec11b0735228f453ef5490ee5726673de552f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=B3=E6=AC=A3=E6=80=A1?= <ms.mandy610425@gmail.com>
Date: Tue, 31 Mar 2026 14:44:27 +0800
Subject: [PATCH 15/18] docs: propagate constitution English-First amendment to
 dependent templates

Update plan-template.md and agent-file-template.md to include
design/prototype/ and design/wireframes/ in Traditional Chinese allowed
directories, per constitution amendment procedure

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .specify/templates/agent-file-template.md | 2 +-
 .specify/templates/plan-template.md       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/.specify/templates/agent-file-template.md b/.specify/templates/agent-file-template.md
index 0cdf265..dc4501a 100644
--- a/.specify/templates/agent-file-template.md
+++ b/.specify/templates/agent-file-template.md
@@ -25,7 +25,7 @@ Auto-generated from feature plans. Last updated: [DATE]
 - **KISS & YAGNI**: Pursue extreme simplicity. Reject over-engineering; write code only for current, clearly defined needs.
 - **Config-Driven**: Task types and evaluation metrics are defined in YAML/JSON config — never hardcoded.
 - **Security First (NON-NEGOTIABLE)**: Test-set answers must never be exposed to annotators or included in any annotator-facing API response.
-- **English-First**: Code, comments, and commit messages are written in English. Traditional Chinese is permitted in `docs/` and `specs/`.
+- **English-First**: Code, comments, and commit messages are written in English. Traditional Chinese is permitted in `docs/`, `specs/`, `design/prototype/`, and `design/wireframes/`.
 
 ## Protected Files
 
diff --git a/.specify/templates/plan-template.md b/.specify/templates/plan-template.md
index ffa8e19..586ab8a 100644
--- a/.specify/templates/plan-template.md
+++ b/.specify/templates/plan-template.md
@@ -24,7 +24,7 @@
 - [ ] III. Data Fairness: Does this involve test sets? If so, leakage prevention is planned
 - [ ] IV. Test-First: Test plan is listed
 - [ ] V. Simplicity: Any signs of over-engineering?
-- [ ] VI. English-First: Code, comments, and commit messages in English; Traditional Chinese allowed in `docs/` and `specs/`
+- [ ] VI. English-First: Code, comments, and commit messages in English; Traditional Chinese allowed in `docs/`, `specs/`, `design/prototype/`, and `design/wireframes/`
 
 ## Project Structure
 

From 2e576ac97d325f0d440bbe47e9bf5345d5fd3c66 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=B3=E6=AC=A3=E6=80=A1?= <ms.mandy610425@gmail.com>
Date: Tue, 31 Mar 2026 14:44:53 +0800
Subject: [PATCH 16/18] fix: add profile link to mobile nav drawer to prevent
 orphan page on mobile

Add nav-profile link to mobile hamburger menu with zh-TW/en i18n strings,
ensuring profile page is reachable on screens narrower than 640px

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 design/prototype/pages/dashboard.html | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/design/prototype/pages/dashboard.html b/design/prototype/pages/dashboard.html
index 13c0318..d8d4319 100644
--- a/design/prototype/pages/dashboard.html
+++ b/design/prototype/pages/dashboard.html
@@ -110,6 +110,7 @@
       <a href="#" class="block px-3 py-2 text-sm text-primary font-medium bg-surface rounded-lg" aria-current="page" data-i18n="nav-dashboard">儀表板</a>
       <a href="#" aria-disabled="true" class="block px-3 py-2 text-sm text-slate-600 hover:text-ink hover:bg-slate-50 rounded-lg cursor-pointer transition-colors duration-200" data-i18n="nav-tasks">任務</a>
       <a href="#" class="block px-3 py-2 text-sm text-slate-600 hover:text-ink hover:bg-slate-50 rounded-lg cursor-pointer transition-colors duration-200" data-i18n="nav-settings">設定</a>
+      <a href="profile.html" class="block px-3 py-2 text-sm text-slate-600 hover:text-ink hover:bg-slate-50 rounded-lg cursor-pointer transition-colors duration-200" data-i18n="nav-profile">個人設定</a>
     </nav>
   </header>
 
@@ -290,6 +291,7 @@ <h3 id="modal-title" class="text-lg font-semibold text-ink mb-2" data-i18n="moda
         'nav-dashboard':     '儀表板',
         'nav-tasks':         '任務',
         'nav-settings':      '設定',
+        'nav-profile':       '個人設定',
         'btn-signout':       '登出',
         'welcome':           '歡迎回來，Researcher',
         'welcome-sub':       '以下是您的標注活動概覽。',
@@ -333,6 +335,7 @@ <h3 id="modal-title" class="text-lg font-semibold text-ink mb-2" data-i18n="moda
         'nav-dashboard':     'Dashboard',
         'nav-tasks':         'Tasks',
         'nav-settings':      'Settings',
+        'nav-profile':       'Profile',
         'btn-signout':       'Sign out',
         'welcome':           'Welcome back, Researcher',
         'welcome-sub':       'Here\'s an overview of your annotation activity.',

From 8581a624d43e92d11b58063e64649ae03d4ba29e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=B3=E6=AC=A3=E6=80=A1?= <ms.mandy610425@gmail.com>
Date: Tue, 31 Mar 2026 15:01:23 +0800
Subject: [PATCH 17/18] fix: include project-slug in persist paths in SKILL.md
 and format_master_md

- SKILL.md: update --persist documentation to show design/system/<project-slug>/
  paths instead of design/system/ to match actual persist_design_system output
- design_system.py: compute project_slug in format_master_md and use it in
  the generated LOGIC header so page override paths point to correct location

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .claude/skills/ui-ux-pro-max/SKILL.md                 | 10 +++++-----
 .claude/skills/ui-ux-pro-max/scripts/design_system.py |  9 +++++----
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/.claude/skills/ui-ux-pro-max/SKILL.md b/.claude/skills/ui-ux-pro-max/SKILL.md
index dfce329..0368bcf 100644
--- a/.claude/skills/ui-ux-pro-max/SKILL.md
+++ b/.claude/skills/ui-ux-pro-max/SKILL.md
@@ -176,8 +176,8 @@ python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persi
 ```
 
 This creates:
-- `design/system/MASTER.md` — Global Source of Truth with all design rules
-- `design/system/pages/` — Folder for page-specific overrides
+- `design/system/<project-slug>/MASTER.md` — Global Source of Truth with all design rules
+- `design/system/<project-slug>/pages/` — Folder for page-specific overrides
 
 **With page-specific override:**
 ```bash
@@ -185,12 +185,12 @@ python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persi
 ```
 
 This also creates:
-- `design/system/pages/dashboard.md` — Page-specific deviations from Master
+- `design/system/<project-slug>/pages/dashboard.md` — Page-specific deviations from Master
 
 **How hierarchical retrieval works:**
-1. When building a specific page (e.g., "Checkout"), first check `design/system/pages/checkout.md`
+1. When building a specific page (e.g., "Checkout"), first check `design/system/<project-slug>/pages/checkout.md`
 2. If the page file exists, its rules **override** the Master file
-3. If not, use `design/system/MASTER.md` exclusively
+3. If not, use `design/system/<project-slug>/MASTER.md` exclusively
 
 ### Step 3: Supplement with Detailed Searches (as needed)
 
diff --git a/.claude/skills/ui-ux-pro-max/scripts/design_system.py b/.claude/skills/ui-ux-pro-max/scripts/design_system.py
index 3fc6cd0..f15625a 100644
--- a/.claude/skills/ui-ux-pro-max/scripts/design_system.py
+++ b/.claude/skills/ui-ux-pro-max/scripts/design_system.py
@@ -542,21 +542,22 @@ def persist_design_system(design_system: dict, page: str = None, output_dir: str
 def format_master_md(design_system: dict) -> str:
     """Format design system as MASTER.md with hierarchical override logic."""
     project = design_system.get("project_name", "PROJECT")
+    project_slug = project.lower().replace(' ', '-')
     pattern = design_system.get("pattern", {})
     style = design_system.get("style", {})
     colors = design_system.get("colors", {})
     typography = design_system.get("typography", {})
     effects = design_system.get("key_effects", "")
     anti_patterns = design_system.get("anti_patterns", "")
-    
+
     timestamp = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
-    
+
     lines = []
-    
+
     # Logic header
     lines.append("# Design System Master File")
     lines.append("")
-    lines.append("> **LOGIC:** When building a specific page, first check `design/system/pages/[page-name].md`.")
+    lines.append(f"> **LOGIC:** When building a specific page, first check `design/system/{project_slug}/pages/[page-name].md`.")
     lines.append("> If that file exists, its rules **override** this Master file.")
     lines.append("> If not, strictly follow the rules below.")
     lines.append("")

From b4e38380d8c01815edee2b842b52779915cb6b5a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=B3=E6=AC=A3=E6=80=A1?= <ms.mandy610425@gmail.com>
Date: Tue, 31 Mar 2026 15:25:33 +0800
Subject: [PATCH 18/18] fix: add project-slug to MASTER.md reference in
 format_page_override_md

Line 823 was hardcoding design/system/MASTER.md; now uses project_slug
to match the actual persist path design/system/<project-slug>/MASTER.md

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .claude/skills/ui-ux-pro-max/scripts/design_system.py | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/.claude/skills/ui-ux-pro-max/scripts/design_system.py b/.claude/skills/ui-ux-pro-max/scripts/design_system.py
index f15625a..f5db5f1 100644
--- a/.claude/skills/ui-ux-pro-max/scripts/design_system.py
+++ b/.claude/skills/ui-ux-pro-max/scripts/design_system.py
@@ -806,21 +806,22 @@ def format_master_md(design_system: dict) -> str:
 def format_page_override_md(design_system: dict, page_name: str, page_query: str = None) -> str:
     """Format a page-specific override file with intelligent AI-generated content."""
     project = design_system.get("project_name", "PROJECT")
+    project_slug = project.lower().replace(' ', '-')
     timestamp = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
     page_title = page_name.replace("-", " ").replace("_", " ").title()
-    
+
     # Detect page type and generate intelligent overrides
     page_overrides = _generate_intelligent_overrides(page_name, page_query, design_system)
-    
+
     lines = []
-    
+
     lines.append(f"# {page_title} Page Overrides")
     lines.append("")
     lines.append(f"> **PROJECT:** {project}")
     lines.append(f"> **Generated:** {timestamp}")
     lines.append(f"> **Page Type:** {page_overrides.get('page_type', 'General')}")
     lines.append("")
-    lines.append("> ⚠️ **IMPORTANT:** Rules in this file **override** the Master file (`design/system/MASTER.md`).")
+    lines.append(f"> ⚠️ **IMPORTANT:** Rules in this file **override** the Master file (`design/system/{project_slug}/MASTER.md`).")
     lines.append("> Only deviations from the Master are documented here. For all other rules, refer to the Master.")
     lines.append("")
     lines.append("---")