Use when creating requirement documents including interactive HTML prototypes, requirement index pages with filtering, and interview question sheets for stakeholder meetings
How this skill is triggered — by the user, by Claude, or both
Slash command
/requirements-prototyping:requirements-prototypingThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
需求文件產出三部曲,適用於任何專案的需求訪談準備:
需求文件產出三部曲,適用於任何專案的需求訪談準備:
Step 1 → 建立 index.html 需求總表(表格+卡片雙視圖、依訪談日期過濾)
Step 2 → 為每個 UR/RS 建立 tabbed HTML 原型頁面
Step 3 → 建立訪談問題表 .md(依模組分組、含現況摘要+確認/探索問題)
使用統一色系(定義在 :root),參見 prototype-template.html:
--navy-900 ~ --navy-600(Header 背景)--blue-500 ~ --blue-50(主色調、連結、Tag)--slate-700 ~ --slate-50(文字、背景、邊框)--emerald-500 / --emerald-50(新功能標記)--amber-500 / --amber-50(警告、待確認)--rose-500 / --rose-50(必填標記、錯誤)page-header → tab-bar → tab-content(多個 tab)
section-icon + section-header(h2 + badge) + section-bodystatus-tag(active/draft/closed)、action-linkchart-box 含 bar-chart + pie-placeholder<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 切換時重新渲染。
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');
}
.active、hover 預覽.selectedfull-table(UR/RS/階層/模組/名稱/備註/訪談)group > card-grid > req-cardinterview-tag + 日期 CSS class(如 interview-0313)filter-btn,點擊 toggleFilter(dateCode) 切換顯示/隱藏| 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. ...
【訪談記錄】
> (訪談時填寫)
請為本專案建立需求總表 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 樣板npx claudepluginhub chrishong325/claude-skill-requirements-prototyping --plugin requirements-prototypingGenerates structured FRD markdown documents with section templates, numbering conventions (FR-XXX, TR-XXX, US-XXX), and platform-specific additions. Use after requirements gathering.
Transforms vague goals into structured requirements via systematic interview. Three phases: Interview, Extract, Cross-check. Outputs requirements.md consumed by /blueprint.
Conducts structured PRD interviews across 8 categories including problem context, users, features, tech, business, UX, risks, and testing to build actionable documents with Mermaid diagrams. For features, bug fixes, products, and /prd-builder commands.