Requirements Prototyping

Requirements Prototyping — Claude Code Plugin

需求文件產出工具，含互動式 HTML 原型、需求總表、訪談問題表。 可跨專案、跨電腦復用。

功能概覽

產出物	格式	說明
需求總表	index.html	表格+卡片雙視圖、依訪談日期過濾、自動列色
互動式原型	*_prototype.html	Tabbed 頁面、現況/規劃對照、Mock 表單、Mermaid 圖表
訪談問題表	.md	基於系統程式碼分析的確認型+探索型問題

---

新電腦安裝指南（從零開始）

前置條件

1. 安裝 Node.js（v18 以上）

   • 下載：https://nodejs.org/
   • 安裝後確認：node -v

2. 安裝 Claude Code CLI

   npm install -g @anthropic-ai/claude-code
   

   安裝後確認：

   claude --version
   

3. 登入 Claude Code

   claude
   

   首次啟動會引導你登入 Anthropic 帳號（需有效的訂閱方案）。

安裝本 Plugin

在 Claude Code 對話中依序輸入以下指令：

Step 1 — 新增 Marketplace（只需做一次）

/plugin marketplace add chrishong325/claude-skill-requirements-prototyping

預期輸出：

Successfully added marketplace: chrishong325-claude-skill-requirements-prototyping

Step 2 — 安裝 Plugin

/plugin install requirements-prototyping

預期輸出：

✓ Installed requirements-prototyping. Run /reload-plugins to activate.

Step 3 — 啟用

/reload-plugins

預期輸出（plugin 數量 +1）：

Reloaded: 9 plugins · ...

驗證安裝成功

輸入 /skills，應可看到列表中包含：

requirements-prototyping:requirements-prototyping

或直接輸入 /requirements-prototyping 測試叫用。

---

使用方式

安裝完成後，在任何專案的 Claude Code 對話中，有兩種叫用方式：

方式一：直接叫用 Skill

/requirements-prototyping

Claude 會引導你完成需求文件產出流程。

方式二：在 Prompt 中描述需求

Claude 會自動辨識需求文件相關的任務，並套用本 Skill 的規範。

---

範例 Prompt

建立需求總表

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

建立原型頁面

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

產出訪談問題表

請建立 3/20 訪談問題表，涵蓋 UR01~UR03，
請先分析相關程式碼後再設計問題

---

更新 Plugin

方法一：透過 /plugin 指令

/plugin

選擇本插件 → Update

方法二：重載

/reload-plugins

---

樣板檔案

位於 skills/requirements-prototyping/ 目錄下：

檔案	用途	說明
SKILL.md	技能主文件	流程規範、設計規範、叫用範例
prototype-template.html	原型頁面樣板	完整 CSS 變數 + 標準組件 + Tab JS + 互動 JS
index-template.html	需求總表樣板	表格/卡片雙視圖 + 過濾系統 + 自動列色
interview-template.md	訪談問題表樣板	現況摘要 + 確認/探索問題 + 訪談記錄區

---

設計規範

CSS 色系

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

標準 HTML 組件

組件	CSS Class	說明
區塊	.section	icon + title + badge + body
對照表	.compare-table	項目/現況/規劃 三欄
模擬表單	.mock-form	星等、量表(Likert)、單選、文字
資料表格	.data-table	status badge、action link
決策表	.decision-table	# / RS / 決策點 / 確認內容 / 狀態
圖表區	.chart-area	長條圖 + 圓餅圖 mockup
提示框	.note-box	amber 背景側邊框
Mermaid	.mermaid-wrap	flowchart / sequenceDiagram

訪談問題表結構

【現況摘要】← 基於程式碼分析，非通用描述
【確認型問題】← 已知需求的實作細節
【探索型問題】← 開放性擴充方向
【訪談記錄】← 訪談時現場填寫

---

常見問題

Q: 安裝後 /skills 沒看到？

重新啟動 Claude Code（關閉再開），或執行 /reload-plugins。

Q: 可以在不同專案使用嗎？

可以。Plugin 安裝在使用者層級（~/.claude/plugins/），所有專案共用。

Q: 如何解除安裝？

/plugin

選擇本插件 → Uninstall

---

Repo 結構

claude-skill-requirements-prototyping/
├── .claude-plugin/
│   └── marketplace.json              ← Marketplace 設定
├── requirements-prototyping/         ← Plugin 主目錄
│   ├── .claude-plugin/
│   │   └── plugin.json               ← Plugin 設定
│   ├── skills/
│   │   └── requirements-prototyping/
│   │       ├── SKILL.md              ← 技能主文件
│   │       ├── prototype-template.html
│   │       ├── index-template.html
│   │       └── interview-template.md
│   ├── README.md                     ← 本文件
│   └── LICENSE
└── .gitignore

License

MIT