/mochi-redesign
一個引導式的重新設計工作流程。它不是套用一個固定的外觀。它套用一個固定的流程：了解使用者、找到設計概念、建立一個小型設計系統、將所有重要內容放在首屏的卡片中、將細節移至豐富的彈出視窗和專屬頁面、撰寫誠實文案，並在展示之前於真實螢幕尺寸上驗證每一次更改。
此流程源自一個真實的作品集網站，該網站歷經多輪業主反饋，從一個樸素的單欄模板演變成日式便當盒 (bento) 風格網站。這些輪次中的經驗教訓（哪些有效、哪些被拒絕、哪些出了問題）都已編碼在下方以及 references/ 目錄中。
輸出結果絕不能看起來像這個技能所源自的網站。相同的準則，不同的身份：新的概念、新的字體、新的顏色、新的標誌性細節。如果你發現自己因為「這是這個技能的做法」而想要使用金盞花筆觸、吉祥物或便當盒網格，請停下來，回到第一階段。
如何執行
參數為可選的自由文字，例如 /mochi-redesign 客戶端/ 或 /mochi-redesign 只改首頁，保持部落格原樣。
按順序完成各個階段。每個階段都應在一個閘門處結束：向業主展示結果（螢幕截圖，而非描述），並在繼續前等待他們的反應。當多個未經審查的決策堆疊在一起時，重新設計就可能失敗。
| 階段 | 優先閱讀 | 閘門 |
|---|---|---|
| 0. 接收與審核 | references/01-intake-audit.md | 業主確認目標、受眾、範圍、哪些不能更改 |
| 1. 概念與系統 | references/02-concept-system.md | 業主選擇一個方向；記錄設計權杖 |
| 2. 內容真確性 | references/03-content.md | 業主批准聲明（不過度宣稱） |
| 3. 首屏 | references/04-layout.md | 在所有目標尺寸下，內容都能放入一個筆電螢幕 |
| 4. 細節層 | references/05-interaction.md | 彈出視窗在內部滾動、鎖定頁面、無佈局偏移 |
| 5. 次要頁面 | references/06-content-pages.md | 列表頁與閱讀頁符合設計系統 |
| 6. 媒體（可選） | references/07-media.md | 真實操作影片、已壓縮、僅在視口中播放 |
| 7. 打磨與品質保證 | references/08-qa.md | 片段檢查通過、兩種主題、行動端、Lint、建置 |
| 8. 移交 | references/09-feedback-and-handoff.md | 乾淨的差異對比、設計文件已更新、業主決定提交 |
references/10-anti-patterns.md 是第一次犯錯的清單。在階段 1 之前閱讀一次，並在階段 7 之前再次閱讀。
不可妥協的原則
- 先看再改。 閱讀現有程式碼、執行網站、在目標尺寸下截取螢幕截圖。切勿僅憑程式碼就重新設計。
- 每個網站一個身份。 概念來自於主題（該人物或產品的真實本質），而非來自於潮流或本技能的起源。
- 所有重要內容放在首屏。 訪客應能在不滾動的情況下看到「誰」、「做什麼」以及「證明」（最佳作品）。細節距離一次點擊，而非五個螢幕之遠。
- 誠實文案。 避免業主無法在面試中為其背書的聲明。寧可使用「練習過」、「做過」、「在適合的地方」，而不是「每一個」、「總是」、「所有」。用數字（數據、已發佈的項目）來證明，而非形容詞。
- 在實際尺寸下驗證，而非憑空想像。 每次視覺變更後都應執行片段檢查（
scripts/clip-check.mjs）並至少截取一張螢幕截圖。切勿報告你尚未親眼看過的變更為「完成」。 - 小步、可逆的變更。 一次只改一件事、展示它、聆聽反饋。如果業主兩次拒絕某個想法，請停止猜測：提供 2-3 個具體選項並附上預覽，讓他們選擇。如果他們要求還原，請準確恢復到先前的版本，而不是一個「差不多」的重建版本。
- 不要破壞線上版本。 保持舊路由正常運作、不觸碰無關頁面、不格式化你無需更改的檔案（格式化器的變動會隱藏真正的修改）、未經要求不要提交或推送。
- 無障礙基本門檻。 鍵盤可及、可見的焦點指示、使用真正的按鈕和連結、尊重
prefers-reduced-motion、在兩種主題下檢查對比度、任何重要資訊都不能僅靠懸浮來傳達。
「完成」的樣貌
- 一個首屏，可以放入一個筆電螢幕（1280×720 到 1920×1080），無內容被裁切、無橫向滾動條、有清晰的視覺焦點。
- 一個小型、書面化的設計系統（權杖、字體、圓角、動畫規則），每個新元件都遵循此系統。
- 卡片可以打開豐富的細節（對話框或頁面），而非長篇滾動。
- 業主逐行簽署批准的文案。
- 次要頁面（列表、閱讀頁、案例研究）感覺像是同一個網站。
- 倉庫中有一個設計文件（
DESIGN.md或類似），記錄了系統和決策，以便下一個人（或 AI Agent）能保持一致性。
此技能包含的檔案
SKILL.md 此檔案：工作流程、閘門、規則
references/01-intake-audit.md 需提問的問題、如何審核當前網站
references/02-concept-system.md 尋找概念；權杖、字體、標誌性細節
references/03-content.md 撰寫真實、可掃讀、帶重點標示的文案
references/04-layout.md 首屏便當盒佈局與卡片配方
references/05-interaction.md 對話框、懸浮效果、動畫、小巧思
references/06-content-pages.md 能讓使用者持續閱讀的部落格/列表/閱讀頁
references/07-media.md 錄製真實工作的操作影片與預告片
references/08-qa.md 視埠矩陣、片段檢查、主題、無障礙
references/09-feedback-and-handoff.md 與業主迭代；乾淨收尾
references/10-anti-patterns.md 第一次出錯的地方，以及修正方法
scripts/clip-check.mjs CDP 腳本：裁切卡片、溢位、折疊適應
scripts/shots.mjs CDP 腳本：每個視埠與主題的螢幕截圖
templates/ 框架無關的程式碼片段（React + Tailwind）