ui-demo
作者 affaan-mui-demo 可幫你用 Playwright、可見游標移動與自然節奏，錄製更精緻的網頁應用程式示範影片。適合用於操作導覽、上手教學、功能巡覽與教學式錄製。請依照「探索 → 演練 → 錄製」的工作流程操作，特別適合原型與快速變動的 UI，以獲得更穩定可靠的結果。
這個技能評分為 68/100，代表它可用，但對目錄使用者來說還算有些限制。它明確對準一個真實工作流程——用 Playwright 錄製精緻的 UI 示範影片——而且提供了足夠的分步指引來減少摸索；不過，從 repo 證據來看，它偏向示範用途，缺少支援腳本、參考資料或安裝指令，因此建議使用者在採用前先仔細閱讀 SKILL.md。
- 對示範影片、操作導覽、螢幕錄製與教學內容有明確的適用性。
- 具備清楚的操作指引，以 Discover → Rehearse → Record 三階段流程串起工作步驟。
- 技能內容充實，包含具體的 Playwright 指引與程式碼範例。
- 被標示為 demo/experimental，且含有 placeholder 標記，因此可能不如成熟技能那樣適合直接投入正式環境。
- 未提供支援檔案或安裝指令，會降低導入信心，也不利於快速上手。
ui-demo 技能總覽
ui-demo 的用途
ui-demo 技能可讓你用 Playwright 錄製更精緻的網頁應用示範影片，包含可見的游標移動、有節奏的互動，以及比單純螢幕錄影更自然的操作導覽感。它特別適合產品示範、上手教學、功能導覽，以及以教學為主的影片，目標是清楚呈現一個可運作的 UI。
誰適合使用
如果你需要一套可重複執行的方法，把粗略的產品流程轉成可直接對外展示的錄影，ui-demo 技能就很適合。它適用於開發者、產品團隊，以及能啟動瀏覽器、檢查頁面並執行腳本互動的代理，且不必走完整的影片剪輯流程。
它為什麼有價值
它的核心價值在於流程紀律：這個技能會先逼你實際探索 UI，再排練流程，最後才錄製。這能降低因為 selector 用錯、控制項隱藏，或節奏不真實而導致的示範失敗。如果你在找 ui-demo for Prototypes，這點尤其重要，因為原型 UI 變動很快，錄影前需要快速驗證。
如何使用 ui-demo 技能
安裝並界定任務範圍
執行 ui-demo install 時，先從 repo 安裝這個技能，然後只套用在單一流程上，不要一次涵蓋整個 app。典型的安裝指令如下：
npx skills add affaan-m/everything-claude-code --skill ui-demo
開始之前，先明確定義錄影結果：是哪個頁面、哪段使用者旅程、觀眾應該學到什麼，以及這支片段是要放文件、銷售，還是內部審閱。
先做探索，再開始錄影
ui-demo usage 的工作流程，關鍵在於先理解真實的 UI。先打開目標頁面，檢查可見的輸入框、按鈕、選單與彈出視窗，並注意那些不像標準 HTML 元素的自訂控制項。這個 repo 的指引很明確：先探索、再排練、最後錄製。
好的輸入範例：
- “錄一支 60 秒的導覽，內容是建立新專案、加入一個任務，然後分享出去。”
- “示範 staging 上的設定流程，重點放在主題切換與邀請連結。”
較弱的輸入範例：
- “幫這個 app 做一支示範影片。”
先讀對的檔案
做 ui-demo guide 時，請先從 SKILL.md 開始讀，並查看任何會影響瀏覽器設定或錄影限制的 repo 說明。在這個 repo 裡，SKILL.md 是主要來源，也沒有其他支援資料夾可以依賴，所以重點是仔細閱讀流程章節，再依你的 app 調整。
使用排練過的腳本
把示範內容寫成一連串使用者意圖步驟，而不是單純的點擊清單。要包含起始狀態、操作路徑，以及預期的結束狀態。如果流程中有風險較高的環節，例如檔案上傳、非同步儲存或 modal 視窗，請先排練這些步驟，避免正式錄製時出現卡頓。
ui-demo 技能常見問題
ui-demo 比一般提示詞更好嗎？
是，當你的目標是做出可信的錄影，而不只是解釋功能時尤其如此。一般提示詞也許只能產生粗略清單，但 ui-demo skill 提供的流程能降低 selector 出錯、節奏不順，以及互動不合理的問題。
ui-demo 只適合正式上線的產品嗎？
不是。這個技能同樣適用於原型、staging build 和內部工具，這也是 ui-demo for Prototypes 會是實際用途的原因。主要條件是 UI 必須有足夠的互動性，能穩定探索並錄下來。
什麼情況會讓結果變差？
最大的阻礙是介面不穩定、目標旅程不清楚，以及對頁面結構的假設過多。如果 app 變動很頻繁，請提供目前路由、穩定的測試資料，以及精確的 UI 路徑，避免錄影內容跑偏。
新手也能用嗎？
可以，只要你能清楚描述使用者旅程。你不需要影片剪輯知識，但你需要足夠的產品背景，知道這支示範要證明什麼、又該省略什麼。
如何改進 ui-demo 技能
把需求寫得更精準
最好的 ui-demo usage 輸入會說清楚受眾、長度與成功標準。例如：“做一支 45 秒的利害關係人示範，內容是管理者如何檢視報表並匯出 CSV，不要出現錯誤狀態或設定畫面。” 這比泛泛的導覽更有力，因為它把節奏與範圍都定義出來了。
提供穩定的 UI 上下文
如果介面有動態資料、登入驗證，或依角色不同而變動的畫面，請把精確的起始條件一併提供。包括帳號類型、路由、測試資料名稱，以及任何預載狀態。這很重要，因為 ui-demo skill 在瀏覽器狀態可預測時，效果最好。
完成第一版錄影後再迭代
先檢查第一版的節奏、游標清晰度，以及觀眾是否不用旁白也能看懂故事。接著再精修腳本：刪掉多餘點擊、縮短空白時間，並把含糊的轉場改成明確的 UI 步驟。要讓 ui-demo install 真正發揮價值，就要把第一次執行當成排練資料，而不是最終成品。
留意常見失敗模式
最常見的錯誤包括流程太長、selector 未驗證，以及示範腳本一次想涵蓋太多功能。如果影片看起來很雜，就把旅程收斂到單一結果，並讓每一步都服務於那個結果。