---
name: website-workflow
description: 從「一句需求＋參考圖」做到「已驗證上線、影片已交付」的網站製作流程。給 AI 程式代理讀的可攜技能檔；每一步都要有證據才往下走。
---

# 網站製作流程（可攜版）

作者：Ray Tsai（蔡秉叡）。這是我自己工作流程的公開整理版，可以自由複製、改寫成你的版本。
這份檔案不含任何私人路徑、帳號、金鑰或頻道識別資料；需要的地方請換成你自己的。

## 原則

1. **一份產物只有一位 writer。** 其他代理只審查，不同時改同一份檔案。
2. **有證據才算完成。** 截圖、測試報告、檔案雜湊、線上讀回、送達收據；不接受「我做完了」。
3. **不捏造。** 經歷、數字、見證、合作都要有來源；查不到就留空或不顯示。
4. **人做決定，代理做執行。** 需求、取捨、驗收、對外發布與發送由人授權。
5. **安全界線。** 不付費、不建新帳號、不對外發訊息、不把私人素材交給第三方生成服務，除非得到明確授權。

## 流程與閘門

| # | 階段 | 閘門（沒過不能往下） | 產物 |
|---|---|---|---|
| 1 | 需求＋參考 | 原話照錄；參考已實際下載並逐格看過 | 參考影格表、效果對照表 |
| 2 | Brief | 成功條件、禁止事項、驗收方式寫清楚，並經人確認 | brief |
| 3 | 指派 writer | 只有一位 writer；收到接單回覆與工作目錄 | 接單紀錄 |
| 4 | 設計與開發 | 內容集中在一個設定檔；素材原創或已授權 | 原始碼 commit |
| 5 | 手機適配 | 360／375／390／414 無溢出、無裁切 | 截圖 |
| 6 | 自動 QA | 見下方清單全部通過 | QA 報告 |
| 7 | 錄影＋對比 | 電腦版、手機版（標明模擬）、與參考並排 | 3 支影片 |
| 8 | 凍結與審查 | 固定 commit＋乾淨 build＋逐檔 SHA-256；審查者看同一版本 | manifest、審查結果 |
| 9 | 發布與讀回 | 由唯一部署者發布；匿名讀回首頁、資產雜湊、關鍵文字 | 線上驗證紀錄 |
| 10 | 交付 | 影片與摘要送到指定頻道；先查是否已送過；讀回附件名稱與大小 | 送達收據 |
| 11 | 迭代 | 回饋交給同一位 writer，回到第 4–10 步 | 修正紀錄 |

## 參考拆解（第 1 步）

- 把參考影片每 0.5 秒抽一張成影格表，寫出：構圖、運動方式、節奏、哪些元素在前／後。
- 做一張「效果 → 本站內容」對照表：學什麼、不學什麼、哪裡換成自己的資料。
- 不直接放參考的原始檔；配色、字體、圖示、數字都換成自己的。

## 內容與多版本

- 文案、連結、事實只放一個設定檔（例如 `content.ts`），每條事實旁邊寫來源。
- 需要兩個用途不同的版本（例如作品集和履歷）時，用同一份內容加上「版本差異」設定產生，不複製兩套內容。
- 每個版本有自己的 canonical 網址與語言切換連結，不要互相連錯。

## 動效

- 進入畫面才播放、離開畫面就暫停；分頁切到背景也停。
- 一定要有 `prefers-reduced-motion`、無 JavaScript、不支援 3D／WebGL 的靜態版本，內容完整可讀。
- 旋轉或捲動中的數字，旁邊要有一份固定、可讀的文字清單。
- 鍵盤可暫停／切換；觸控可拖曳；按鈕至少 44px。

## 自動 QA 清單（第 6 步）

- 寬度 360、375、390、414、820、1440：`scrollWidth === clientWidth`，沒有元素超出右緣。
- console 與網路錯誤為 0。
- 每個外部連結實際打開（記錄狀態碼；社群網站的反爬回應另外標註）。
- 文字對比 ≥ 4.5:1。
- 鍵盤：skip link、焦點框、Tab 順序。
- reduced-motion 與停用 JS：所有文字可見。
- 建置產物中沒有內部字樣、測試網址、假資料。
- 影片：可播放、長度與大小在預期內、`preload="none"`＋poster，不拖慢首屏。
- 隱私：公開檔案中沒有本機路徑、帳號 ID、金鑰、私人頻道或訊息識別碼。

## 錄影（第 7 步）

- 用 headless Chrome 真實時間錄製（例如 CDP screencast 依時間戳組影片），不要逐格合成假裝流暢。
- 電腦 1440×900；手機 390 寬＋行動版 UA，**清楚標明是模擬，不是真機**。
- 對比影片：左邊參考、右邊成品，同高度並排，各加標籤；附上參考來源連結。
- 每支影片 ≤ 10 MB；用 `-movflags +faststart` 讓網頁能邊下載邊播放。

## 凍結、發布、讀回（第 8–9 步）

```sh
# 逐檔 manifest：用 LC_ALL=C 排序，結果可重現
cd dist && LC_ALL=C find . -type f | LC_ALL=C sort | sed 's#^\./##' \
  | while read f; do printf '%s  %s\n' "$(shasum -a 256 "$f" | cut -d' ' -f1)" "$f"; done > ../manifest.txt
```

- 重新 build 一次，manifest 雜湊要一樣。
- 只指定一位部署者，避免重複發布。
- 發布後用沒有登入的請求讀回首頁與資產，逐檔比對雜湊。

## 交付到聊天頻道（第 10 步）

- 發送前先查同一份內容是否已經送過（保留上一次的收據）。
- 一次送出：簡短摘要＋三支影片（注意頻道的附件大小上限）。
- 送出後讀回訊息，比對附件名稱與大小，存成收據。
- 公開文件只描述機制，不放私人頻道或訊息 ID。

## Prompt 範本

### Prompt 1：從需求到可驗收的網站

```
你是這個網站的唯一 writer。
需求：<一段話>
參考：<連結>——先下載並逐格拆解，列出要學的效果和不學的部分。
素材與事實：只能用 <資料夾或文件>；查不到就留空，不要編。

請完成：
1. 寫 brief：成功條件、禁止事項、驗收方式。
2. 實作：文案和事實集中在一個設定檔；中英兩版；動效要有減少動態與無 JS 的靜態版本。
3. QA：360／375／390／414／820／1440 都沒有溢出；console 0 錯誤；連結實際打開；鍵盤和觸控可用。
4. 錄影：電腦 1440、手機 390（標明是模擬）、與參考並排對比。
5. 交付收據：改了什麼、每個事實的來源、QA 結果、還沒完成的事。

限制：不部署、不付費、不對外發訊息。
```

### Prompt 2：修改、發布、交付

```
依下面的回饋修改同一個網站（你仍是唯一 writer）：
<回饋清單>

1. 每一項改完都附截圖或測試證據；重跑完整 QA 與錄影。
2. 凍結：commit、乾淨 build、逐檔 SHA-256 清單（LC_ALL=C 排序）。
3. 交給審查者對同一個版本互審；通過後由唯一的部署者發布。
4. 發布後匿名讀回：中英首頁、資產雜湊、關鍵文字。
5. 把電腦、手機、參考對比三支影片送到 <頻道>，讀回附件名稱與大小留存收據；送之前先確認沒有送過。

回報：commit、manifest、測試數、影片路徑、還沒驗證的事。
```

## 延伸

- 多代理分工、交接與驗收的完整做法：https://github.com/rick-ray-wldd/orca-coordination-handbook （MIT，社群教材）。