高保真稿

---
doc_type: "high-fidelity-mockup"
variant: "light"
status: "draft"
owner: "<your-name>"
last_updated: "YYYY-MM-DD"
upstream:
  required: ["wireframe", "design-system"]
  optional: ["micro-copy"]
---

# High-fidelity Mockup Spec: <product-name>

**Status:** Draft v0.X · **Owner:** <UI name> · **Last updated:** YYYY-MM-DD

> [!IMPORTANT]
> **AI 填寫規則：** 本範本 6 段（編號 1, 2, 3, 6, 10, 12），全部必填——刻意沿用完整版章節編號讓兩版可對照。每 screen 必含 ≥ 5 種 state（default / loading / empty / error / disabled）；只使用 design-system 既有 token，缺的標 `_TODO: 需 DS 補 token-XXX_`；行內 `（依據：wireframe §XXX / DS token §YYY）`；每量化欄位 `[H/M/L]` badge；a11y 對比 ≥ 4.5:1 + touch target ≥ 44×44 必填。

---

## 1. Executive Summary

<!-- ai-fill: 3-5 行：涵蓋 N 個 screen、選用 token 數、a11y 達標等級 -->

<3-5 行說明>

> **TL;DR:** <一句話：本 hi-fi 交付物涵蓋的範圍與下游使用方式>

---

## 2. Screens × States

<!-- ai-rule: 每個 screen 至少 5 種 state；不齊全的 state 寫 `_TODO_` 不能略 -->

### S1: <screen 名稱>

- **Breakpoint:** mobile_360 / desktop_1280
- **States covered:** default · loading · empty · error · disabled
- **Components used (from DS):** Button (primary) · Input (text) · Card
- **Confidence:** **[H]** — **Source:** wireframe §1

### S2: ...

---

## 3. Interaction States

<!-- ai-rule: 每互動元素列 hover / focus / active / disabled 四態；focus 必須對應 WCAG 2.4.7 -->

| Element | Hover | Focus | Active | Disabled |
|---|---|---|---|---|
| Primary CTA | `bg-action-primary-hover` | `outline-focus` (2px) | `bg-action-primary-active` | `bg-disabled` + `aria-disabled` |
| Input | `border-strong` | `outline-focus` (2px) | n/a | `bg-disabled` + cursor-not-allowed |

---

## 6. A11y Annotations

<!-- ai-rule: 4 項必填（對比 / focus / touch target / ARIA） -->

| Dimension | Target | Actual | Confidence |
|---|---|---|---|
| **Contrast (text)** | ≥ 4.5:1 | <實測值> | **[H]** |
| **Touch target** | ≥ 44×44 px | <實測 px> | **[H]** |
| **Focus visible** | outline ≥ 2px | <token> | **[H]** |
| **ARIA labels** | 所有 icon-only button 必填 | <list> | **[H]** |

---

## 10. Decision Log（key 2-3 條）

<!-- ai-rule: 每條必含 chosen + 至少 1 個 rejected + 拒絕原因 -->

| Date | Decision | Options | Chosen | Rejected why | Confidence |
|---|---|---|---|---|---|
| YYYY-MM-DD | Error state 呈現方式 | inline / toast / modal | inline | toast (易錯過)、modal (干擾過大) | **[H]** |

---

## 12. Confidence & Sources & TODO

- **整份文件最低 confidence 欄位：** <列出所有 [L] 與 [M]>
- **Fabricated assumptions：**
  - <例：假設深色模式不在 V1>
- **Highest-value next input:** <例：文案 owner 終版 / a11y audit>

### TODO（缺資料）

- _TODO: 需 DS 補 `bg-warning-subtle` token_
- _TODO: 需內容團隊提供 empty state 文案_

---

> [!CAUTION]
> **輸出前 AI 自檢：**
> - [ ] 6 段 H2 章節齊全（編號 1, 2, 3, 6, 10, 12）
> - [ ] 每個 screen ≥ 5 種 state（含 disabled / loading）
> - [ ] 只使用 DS 既有 token，缺者標 `_TODO_`
> - [ ] Interaction states 4 態齊（hover / focus / active / disabled）
> - [ ] A11y 4 項全填（對比 / touch target / focus / ARIA）
> - [ ] Decision Log ≥ 1 條，每條有 rejected reason
> - [ ] 無 YAML / JSON schema 輸出（hi-fi spec 是給人讀的 markdown）