設計示範 (展示原型 UI)

請先載入 design-lean。 其方向、工藝規則、設計代碼和組件關卡在此同樣適用；此技能則新增產品截圖所需的元素。示範工作在 Build 步驟 5 中，當頁面需要產品預覽時進行，或獨立執行，當整個任務就是一個示範時。

示範執行的關卡

關卡	通過條件	留下的證據	上限	失敗時的上限處理
D1 規劃	在撰寫程式碼之前，必須寫下位置、焦點物件、動作、成果以及省略了什麼	規劃文件	—	—
D2 框架	在指定的寬度以及 390px 寬度下，至少有一個靜止畫面不是空的、平淡的或像個方框	兩個靜止畫面	2 次重新構圖	指出框架的缺陷，然後交接
D3 排練	設定好海報框架；在兩種寬度下的連續拍攝畫面中，沒有出現結尾清單所列的任何缺陷	連續拍攝畫面	3 輪拍攝	列出剩餘缺陷，然後交接
D4 主機關卡	`gate.js` 在宿主頁面的自身控制項（包含暫停功能）下測試通過	關卡總分	每個檢查項目最多 2 次修正嘗試	回報為未解決問題

設定 (請擷取，不要重新輸入；基礎目錄會在各技能載入時顯示)

mkdir -p .design && for f in "<design-lean 基礎目錄>/SKILL.md" "<design-demo 基礎目錄>/SKILL.md"; do python3 - "$f" <<'PY'
import re, sys
for name, code in re.findall(r"`{3}js\n// file: (\S+)\n(.*?)`{3}", open(sys.argv[1]).read(), re.S):
    open(".design/" + name, "w").write("// file: " + name + "\n" + code); print("wrote .design/" + name)
PY
done

微型產品 UI

一個令人信服的介面，在其空間內構圖，可以是單一靜止畫面，或是一個短動畫，其中只發生一件事。觀看者能識別出螢幕，並看到這件事發生。這些是作者創作的插圖，不是瀏覽器自動化：腳本繪製游標按下動作並改變場景。來自 design-lean 的工藝規則和設計代碼仍然有效；此部分則新增產品截圖所需的元素，並在必要時覆蓋 design-lean 的動畫規則。

一個核心概念： 它看起來像一個真實的產品，簡化到只呈現觀看者需要的部分，經過意圖明確的構圖，並且每個動畫都有其因果關係。

五種失敗方式：

過於複雜。 每一行都有真實文字，到處都是數字，塞得滿滿當當。細節越多，看起來就越像生成的。
線框感。 兩個灰色團塊和一個按鈕。建構得太小，或剝奪了讓它可識別的元素。
方框感。 整個視窗縮小成一個邊距均勻的卡片：就像貼上去的螢幕截圖，而不是產品截圖。
平淡無奇。 每個物件在相同的邊框卡片中具有相同的權重。視線無處可落。
單調乏味。 一個灰色的視窗加上一個游標，不管設計簡報怎麼說。簡報中所追求的風格和活力（如藍圖、玻璃疊色、動態島、吉祥物）才是重點；根據這些規則，建構簡報要求的內容。

修正方法：一個完整、結構化的螢幕，使用安靜的灰色調，只有故事相關的部分才使用真實文字，其餘部分使用佔位條，預留呼吸空間，並進行裁切，讓視線集中在故事所在之處。簡化文字，而非簡化上下文。一個空角落、列表下方的空白、拉開以填滿窗格的行、漂浮在底板上的視窗：這些是未完成，而非平靜。

施力的程度

要像打造一個會被嚴格評判的發布頁面那樣來建構它。然後，以你所認識最嚴苛的設計師的角度來審視這個框架，那位會截圖一個錯誤並回傳「這是什麼？」的設計師：一個偏離頭像的圓點、獨自成行的單位、碰到卡片的文字。如果你能想像出那張截圖，你就找到了下一個要修正的地方。

The Stageshow 工具包

當它可用時，請使用它：React 元件（Stage、Window、Phone、Row、Bar、Text、Roll、Count、Collapse、Fly、Connector 等，以及一個 Act 腳本 API），約 70 個優質範例和產品研究，以及 scripts/film.mjs，它可以拍攝連續畫面並標記框架和動畫缺陷。請在專案中尋找 stageshow 技能資料夾或包含 stageshow.css 的 kit/ 目錄。否則，在網路可用的情況下，安裝它（npx skills add benjitaylor/skills --skill stageshow）或複製 https://github.com/benjitaylor/skills 並從 stageshow/ 目錄開始工作。然後，它的 SKILL.md、references/ 和最近的優質範例就是詳細規則；此部分只是摘要。安裝它會執行該倉庫自身的套件腳本，沙箱可能會阻止此操作。如果沒有這個工具包，請使用純 React 或 HTML 和 CSS 按照以下規則建構，並使用「在沒有工具包的情況下拍攝」中的腳本進行拍攝。

執行

大部分的品質在編寫任何程式碼之前就決定了。請先撰寫規劃：位置、焦點物件、動作、成果，以及可以省略的部分。

媒介和位置。 靜止或動畫（循環、進入視野時播放一次、或懸停時播放）。頁面、其背景、其寬度。以最終觀看尺寸進行設計，並以 1:1 比例顯示：約 720 × 340 用於旁邊有說明的英雄區塊，900 到 1100 寬用於全寬英雄區塊，400 × 300 用於卡片。用於示範的尺寸絕不小於約 320 寬；bento 磁貼或衛星卡片可能更小。任何可以放在手機欄位中的內容，都需要在 358 寬度下進行緊湊設計：重新設計（更緊密的裁切、移除或堆疊衛星元素），而不是單純壓縮。
外觀。 如果有產品的程式碼或網站，請從中取得真實的設計代碼、圖示、瀏覽器 chrome 和文字。如果沒有，則執行 design-lean 的「方向」步驟來生成。選擇一個擬真度：極簡（全部使用佔位條）、標準（在有意義的地方使用文字，其他地方用佔位條，這是預設值）、逼真（到處都是真實內容；適用於英雄區塊規模、指名道姓的真實產品、或主題是列表或頁面的靜止畫面）。如果設計簡報指定了某種風格（如可愛風、紙質風、海報色調），則需完全採用該風格，但仍需遵循這些規則建構。
故事。 根據產品的價值來選擇其形式：使用感受（游標執行一個令人滿意的動作，結果出現在其下方）、一個流程（少數幾個畫面以一個連續物件呈現，最後一個畫面呈現成果）、或系統所做的事情（結果發生在其他地方，但連結是可見的，通常沒有游標）。三到五個節拍和一個成果，持續 10 到 16 秒。如果在一個更豐富的故事和一個更平靜的框架之間選擇，請選擇框架。
從一個優質範例開始，然後進行構圖。 如果有工具包，請拍攝最接近的優質範例，並複製其資料夾作為起點；保留其舞台大小、裁切、行和文字大小、間距和節拍，然後將其外觀和內容替換為設計簡報中的產品。只更改名稱的複製是不夠的。如果沒有工具包，請從下表選擇一個版面配置，並以同樣的方式嚴格遵循。在任何動畫之前先進行構圖：在兩種寬度下各拍攝一個靜止畫面；如果它比預期的更空、更平或更像一個方框，請先修正框架。
螢幕。 計算真實的字串數量，通常為 3 到 7 個：這是文字預算，而非元素預算。在文字移動之前，確保每個控制項的文字都能容納得下。測量游標觸及的 DOM 元素位置；切勿硬編碼位置。
編排動畫。 保持已掛載元素的狀態，並切換其顯示以觸發退出動畫。為關係製作動畫，而不僅僅是物件：一個新的行會帶動其下方的行；一個調整大小的表面不應拉伸其文字。節拍重疊、群組錯開、成果畫面停留、循環在開始處結束或由一個可見的原因觸發重置。
排練。 首先設定海報框架：這個節拍本身就能訴說故事，絕不能是捕捉到一半的變化，且結果應留在畫面上。然後拍攝整個循環，而不僅僅是靜止畫面：在顯示的寬度和 390 寬度下各拍一張連續拍攝畫面，並逐幀檢查每一次按下、選單、變形和循環接縫。靜止畫面無法顯示彈出內容。先修正最大的可見缺陷（框架，然後是層級，然後是動畫，然後是打磨）並重新拍攝。上限：三輪拍攝；之後，列出剩餘的缺陷並交接。請問：視線首先落在哪裡，它是結果嗎？是否有一個視窗、磁貼或裝置明顯主導？任何「不是」就是最大的缺陷。通過腳本是必要條件，而非充分條件。交接時附上一段簡短說明：你從哪個優質範例或版面配置開始，你做了哪些更改，以及你沒有檢查什麼。

構圖

一個主要物件，最多一或兩個衛星（如收據、手機、細節卡片）來傳達重點。保留能識別產品的元素：標題、真實的瀏覽器 chrome、為動作提供理由的行。標誌和導航可選。
只裁切填充物。 成果、動作、游標觸及的元素以及所有真實文字都應保持完整。如果裁切會切到佔位動作，則移除該動作，而非進行裁切。被舞台邊緣切到的按鈕、晶片或陰影是常見的缺陷。
將主要物件的 10% 到 40% 裁切到舞台之外。 視窗或手機至少佔舞台寬度的三分之二，並延伸出邊緣。舞台遮罩所有內容 (overflow: hidden)。
頁面是背景。 在白色或深色頁面上，視窗後面不要有底板，也不要讓視窗完整顯示並四面留空；那樣看起來會像漂浮。只有當開發人員要求時，才採用無框架（完整、置中、與四周邊距至少等於陰影深度）的呈現方式。
一個統一的間距值， 在最終裁切中測量：每個邊距都應與之匹配，要麼是一個完整的間距，要麼遠大於它。與此值相差不到 24px 或只差幾個像素都是錯誤。
衛星元件應跨越主要物件的邊緣，約一半在外，並位於瀏覽器 chrome（側邊欄、頁首、邊距）之上，切勿覆蓋內容。兩個衛星元件應為兩種不同類型和尺寸（例如一個卡片和一個真實大小的通知），絕不能是兩個相同卡片疊在一起。錨定 UI（彈出視窗、選單、提示）不是衛星元件：它應位於產品自身放置的位置。
視窗應保持其裝置的形狀： 寬高比為 1.25:1 或更寬時應完整顯示；當有出血時，顯示的部分至少應接近正方形。透過裁切修正，絕不透過擠壓。
故事展開的內容應保持在框架內，在每一幀中都與每個邊緣保持一個間距；放置觸發器時，要為疊加層預留空間。無論是靜止還是循環中的任何位置，都不要有死角。
從平面和正面開始。 透過陰影、z 軸順序、縮放和不透明度來創造深度；只有在必要時才使用傾斜（例如一疊鬆散的紙張），只有在要求時才使用透視。
手機： 衛星手機的起點應為視窗可見寬度的 40%，且至少 220px；寧可讓它超出底部，也不要縮小。通知應保持真實 iOS 的比例，絕不能裁剪。從頂部裁切的手機會同時失去其狀態列和導航欄。切勿手動繪製狀態列或主頁指示器；請從工具包或真實參考資料中獲取框架。

版面配置	主要物件	使用場景
固定於底部出血	距離左、右、上邊界 8–12%；底部超出 15–35%	功能卡片和 bento 磁貼
角落出血	距離上和左邊界 10%；右和底部超出 15–35%；衛星在左側或底部邊緣	旁邊有說明的英雄區塊
帶有間距的舞台	在有顏色的舞台上，每邊內縮 8–20%，超出底部	品牌時刻
衛星焦點	主要物件裁切較多；一個大衛星（主要物件寬度的 30–40%）承載故事	小物件：通知、收據、差異比較
寬英雄區塊	900–1100px 寬的視窗，1:1 比例，超出底部；逼真擬真度	全寬首頁英雄區塊
裝置配對	桌面 75–80% 寬，超出底部；手機跨越右邊緣，三分之一在外	跨裝置故事
多個相同物件	一個物件的網格，每邊都超出邊緣；其中一個磁貼透過深度成為焦點，且是唯一有文字的	以重複展示規模
漸變裁切	視窗內縮頂部和側邊，最後三分之一遮罩消失，僅在漸變下方裁切填充物	當邊緣會任意切斷視窗時
特寫	整個視窗放大 1.3–1.6 倍，包含瀏覽器 chrome，主題行完整	關於單一控制項的卡片
產品上的面板	設定面板位於產品邊距上方，一個中性引導元素指向它所做的更改	設定及其效果
對角角落	文字在左下角；產品懸掛在右上角	附有一行文字的 Bento 磁貼

bento 網格是一個集合：一個主要磁貼，然後是一個視窗、一個統計數據、一個物件和一張圖表，每個類型都不同；在任何磁貼開始前先規劃好網格。

靜止畫面

克制。 真實字串僅用於標題、被操作的對象、輸入的內容和結果；其餘部分使用佔位條。佔位條是邊緣的填充物；視線落點處的佔位條看起來像是未完成。當故事涉及列表時，只使用兩或三行真實內容。在小面積中，一行就是一行：頭像、名稱、數值。佔位條寬度應在不同行之間變化（60、45、70、52）。標籤和數值應匹配：要嘛都是文字，要嘛都是佔位條。只有一個數字可以很大。每個功能信號只說一次，不要在頁首、衛星和每一行都重複。
保留領域特有的標誌性內容： 專輯封面、縮圖、頭像（每個命名的頭像使用不同顏色）。如果替換掉，就會變成一個通用列表。
不要為虛構名稱使用標題，除非設計簡報依賴於此且真實產品會在那裡顯示，否則不要在畫面上顯示產品名稱。偽應用程式的標題應使用 div，而非 h1 到 h6：示範存在於其他人的頁面結構中。
字體： 使用真實的 11 到 15px 的 UI 字體大小，根據舞台縮放，永遠不要使用 7px。小字體的行高至少為 1.3。等寬字體僅用於程式碼、識別碼和對齊的數字。
間距： 文字與任何視窗、卡片、面板或懸停行的邊緣保持至少 12px 的內邊距（絕不小於 8）；佔位條可以溢出，但文字不行。行內邊距為 12px，密集列表為 8px。標題與其副標題之間的距離為 4 到 6px。按鈕與其上方欄位保持至少 8px 的距離。無接近相切：距離在 1 到 3px 之間的邊緣看起來像意外；要嘛完全對齊，要嘛至少相距 8px。
光學置中： 在膠囊、按鈕和頭像中，將標籤在其字母上置中（使用 text-box: trim-both cap alphabetic）。置中的金額應將其數字置中，貨幣符號懸掛在外部，使用 right: 100%。
圖示必須來自一組圖示集，而非自行繪製： 優先使用產品自身的圖示包，否則有目的地選擇一套（SF-style 用於 Apple 風格，Material Symbols 用於 Android，或者 Phosphor、Iconoir、Radix、Tabler、Heroicons、Lucide），每個場景使用一致的大小（14–16px）和筆畫寬度，14px 及以下使用填充樣式。Emoji 是內容，不是圖示。其他產品的標誌應使用其原始比例的真實標記，切勿使用近似圖案。
AI 功能： 不要使用閃光、魔杖或星星圖示，也不要使用紫色作為 AI 的顏色；展示 AI 實際做的事情（發送的問題、思考過程、答案串流顯示及其高度、最後是來源）。即使產品自身的圖示是閃光，也可以使用。
不要發明...（原始內容被截斷，此處保持忠實）

設計示範 (設計展示原型 UI)