requirements-prototyping

需求文件產出技能

需求文件產出三部曲，適用於任何專案的需求訪談準備：

流程總覽

Step 1 → 建立 index.html 需求總表（表格+卡片雙視圖、依訪談日期過濾）
Step 2 → 為每個 UR/RS 建立 tabbed HTML 原型頁面
Step 3 → 建立訪談問題表 .md（依模組分組、含現況摘要+確認/探索問題）

HTML 原型設計規範

CSS 變數系統

使用統一色系（定義在 :root），參見 prototype-template.html：

• Navy：--navy-900 ~ --navy-600（Header 背景）
• Blue：--blue-500 ~ --blue-50（主色調、連結、Tag）
• Slate：--slate-700 ~ --slate-50（文字、背景、邊框）
• Emerald：--emerald-500 / --emerald-50（新功能標記）
• Amber：--amber-500 / --amber-50（警告、待確認）
• Rose：--rose-500 / --rose-50（必填標記、錯誤）

頁面結構

page-header → tab-bar → tab-content（多個 tab）

標準組件庫

1. section：section-icon + section-header(h2 + badge) + section-body
2. compare-table：項目 / 現況 / 規劃 三欄對照表
3. mock-form：含星等、量表(Likert)、單選、文字等互動元素，支援必填標記
4. data-table：含 status-tag（active/draft/closed）、action-link
5. decision-table：訪談決策表（# / RS / 決策點 / 需確認 / 狀態）
6. chart-area：chart-box 含 bar-chart + pie-placeholder
7. note-box：amber 背景提示框
8. mermaid-wrap：Mermaid.js 圖表容器

Mermaid.js 整合

<script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
  mermaid.initialize({ startOnLoad: true, theme: 'neutral', fontFamily: 'Noto Sans TC, sans-serif' });
</script>

注意：隱藏 tab 中的 Mermaid 圖表需在 tab 切換時重新渲染。

Tab 切換 JS

function switchTab(tab) {
  document.querySelectorAll('.tab-content').forEach(el => el.classList.remove('active'));
  document.querySelectorAll('.tab-btn').forEach(el => el.classList.remove('active'));
  document.getElementById('tab-' + tab).classList.add('active');
  event.target.classList.add('active');
}

互動元素 JS

• 星等評分：click 切換 .active、hover 預覽
• 量表(Likert)：click 切換 .selected

需求總表規範

雙視圖

• 表格視圖：full-table（UR/RS/階層/模組/名稱/備註/訪談）
• 卡片視圖：group > card-grid > req-card

訪談日期過濾系統

• 每筆資料標記 interview-tag + 日期 CSS class（如 interview-0313）
• Legend 區提供 filter-btn，點擊 toggleFilter(dateCode) 切換顯示/隱藏
• 同時過濾表格行和卡片

Tag 色系對應

Tag	Background	Color
主功能需求	blue-100	blue-500
子項	slate-100	slate-500
研究型交付物	violet-50	violet-500
推動項目	teal-50	teal-500
文件交付物	orange-50	orange-500

訪談問題表規範

文件結構

# {日期} {專案名稱} 需求訪談問題表

## 訪談資訊
- 日期 / 與會單位 / 與會人員 / 訪談目的

## 訪談流程建議
（含各 UR 預估時間分配）

---

## {UR}（{RS}）{功能名稱}

【現況摘要】
- 基於系統程式碼分析的現況描述
- 含資料表、API、頁面等技術細節

【確認型問題】（已知需求的細節確認）
1. ...

【探索型問題】（開放性探索）
1. ...

【訪談記錄】
> （訪談時填寫）

問題設計原則

• 基於系統現況分析：先讀相關 Controller、DAO、前端元件，再設計問題
• 確認型問題：針對已有的需求描述，確認實作細節
• 探索型問題：基於系統現況，探索可能的擴充方向
• 避免通用問題：每個問題都要具體對應到系統功能或資料流

叫用範例

建立新專案需求總表

請為本專案建立需求總表 index.html，包含以下模組：
- UR01 使用者管理（RS01 登入、RS02 權限）
- UR02 報表功能（RS03 日報、RS04 月報）
放在 docs/requirements/prototypes/ 目錄

新增原型頁面

請為 UR02 報表功能建立原型頁面，比照 tabbed HTML 風格，包含：
- Tab 1: 現況與規劃對照
- Tab 2: RS03 日報表畫面
- Tab 3: RS04 月報表畫面
- Tab 4: 訪談決策

產出訪談問題表

請建立 {日期} 訪談問題表，涵蓋 UR01、UR02，
請先分析相關程式碼後再設計問題

樣板檔案參考

建立文件時，請參考本 skill 目錄下的樣板：

• prototype-template.html：原型頁面樣板（含完整 CSS + JS + 組件範例）
• index-template.html：需求總表樣板（含雙視圖 + 過濾系統）
• interview-template.md：訪談問題表 Markdown 樣板