# Prototype

> 建立一次性原型來回答設計問題。當使用者想確認某個狀態模型或邏輯是否合理，或想探索 UI 應該長什麼樣子時使用。

- Skill: `shumingyang-opencode/prototype` (Agent Skill, multi-file: 4 files)
- Install (CLI): `npx skillmds@latest add shumingyang-opencode/prototype`
- Raw SKILL.md: https://api.skillmd.com/api/skills/shumingyang-opencode/prototype/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: shumingyang-opencode (https://skillmd.com/u/shumingyang-opencode)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/shumingyang-opencode/prototype

---


# 原型

一個原型是**回答問題的一次性程式碼**。問題決定了它的形狀。

## 選擇分支

判斷正在回答的是哪個問題——從使用者的提示、周邊程式碼，或在場時直接詢問使用者：

- **「這個邏輯 / 狀態模型合理嗎？」** → [LOGIC.md](LOGIC.md)。建立單一可分享的 HTML 檔案——自由遊玩按鈕加上分頁式引導示範——把狀態機器推向那些在紙上難以推演的案例，讓非開發者也能操作。
- **「這個東西應該長什麼樣子？」** → [UI.md](UI.md)。在單一路由上產生數個截然不同的 UI 變體，可透過 URL 搜尋參數與浮動底欄切換。

兩個分支產出的產物差異很大——選錯分支會浪費整個原型。如果問題真的模稜兩可、又聯絡不上使用者，預設選擇較符合周邊程式碼的分支（後端模組 → 邏輯；頁面或元件 → UI），並在原型頂端寫明這個假設。

## 兩種分支皆適用的規則

1. **從第一天就是一次性，並清楚標示。** 把原型程式碼放在實際使用處附近（在它要服務的模組或頁面旁邊），讓上下文一目了然——但要命名得讓隨意瀏覽的人一看就知道是原型，不是正式程式。對於一次性的 UI 路由，遵循專案既有的路由慣例；不要發明新的頂層結構。
2. **執行成本趨近於零。** UI 原型從專案任務執行器的單一指令開始——`pnpm <name>`、`python <path>`、`bun <path>` 等。邏輯示範是使用者雙擊即可開啟的單一 HTML 檔案。無論哪種方式，啟動它都不需要思考。
3. **預設不持久化。** 狀態存在記憶體中。持久化是原型在_檢驗_的事情，不是它應該依賴的東西。如果問題明確涉及資料庫，就使用一個命名清楚標示「PROTOTYPE——請清除我」的臨時資料庫或本機檔案。
4. **跳過打磨。** 不寫測試，不做超出讓原型_可執行_所需以外的錯誤處理，不做抽象化。重點是快速學到東西。
5. **呈現狀態。** 每次動作之後（邏輯）或每次切換變體時（UI），印出或渲染完整的相關狀態，讓使用者看到改變了什麼。
6. **完成時留存。** 把任何經驗證的決策折疊回正式程式碼，然後把原型本身當成**主要來源**留存：提交到一條一次性分支、不放進 main，並在實作 issue 上留下指向該分支的上下文指標。答案也要留存——結論以及它定案的問題——寫進 issue 或一次 commit。main 分支只保留經過驗證的決策。