Communitygithub.com

danielmiessler/LifeOS

透過三條路徑設計並整合網頁介面：DirectDesign（遵循 Anthropic 前端設計理念直接撰寫設計，為預設主力）、原生命令 /design + /design-sync（用於程式碼整合與設計系統同步，為首選）、或 ClaudeDesign（透過 Interceptor 驅動 claude.ai/design，為實驗性視覺審查備用）。適用時機：網頁設計、UI 設計、建立原型、設計系統、設計同步、網站重新設計、模擬圖、登陸頁面、儀表板設計、從設計到程式碼、前端設計、UI 優化、設計審計、粗獷/編輯/復古 UI。不適用：插圖/Logo（請使用 Art 技能）或影片（請使用 Remotion 技能）。

LifeOS 是什麼？

danielmiessler/LifeOS 是一個專門設計與整合網頁介面的 AI 代理技能，提供三條明確路徑以因應不同情境。首先，DirectDesign 是其預設且最成熟的路徑，代理會直接參考內建於 `References/FrontendDesignPhilosophy.md` 中的 Anthropic 開源前端設計理念，直接在程式碼中產生設計，無需瀏覽器或外部依賴。第二條路徑是原生的 Claude Design CLI（/design 與 /design-sync），適合需要與實際程式碼庫進行雙向設計系統同步的任務，這是官方推薦用於程式碼綁定工作的方式。第三條路徑則是透過 Interceptor 技能驅動 claude.ai/design 網頁畫布進行視覺審查，目前屬實驗性質且尚未完整驗證。此技能核心優勢在於能根據使用者意圖自動路由到最適合的路徑，並能無縫整合至現有專案，輸出為針對既有程式碼庫的差異或修補程式，而非獨立的 HTML 檔案。此外，它支援透過 `~/.claude/LIFEOS/USER/CUSTOMIZATIONS/SKILLS/Webdesign/` 目錄進行個人化設計偏好設定，並遵循設計系統優先的原則以提升效率與一致性。

相容平台✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/danielmiessler/LifeOS/tree/HEAD/LifeOS/install/skills/Webdesign
查看原文→瀏覽所有技能

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

說明文件

語音通知（必要首要動作）

curl -s -X POST http://localhost:31337/notify \
  -H "Content-Type: application/json" \
  -d '{"message": "正在執行 Webdesign 技能", "voice_enabled": true}' > /dev/null

功能說明

透過兩條路徑設計並整合網頁介面。ClaudeDesign 驅動 Anthropic 的 claude.ai/design 產品（經由 Interceptor 技能），然後將結果整合至你的程式碼庫。DirectDesign 則使用從本地參考載入的 Anthropic 開源前端設計理念，直接撰寫設計。預設路由策略：簡短、臨時、在現有程式碼庫內的工作使用 DirectDesign；多頁面或可共享的原型則使用 ClaudeDesign。

問題

產出優質的網頁 UI 通常意味著：要不是使用一個無法觸及真實程式碼庫的視覺工具，就是從頭手寫程式碼，卻每次都落入相同的通用預設樣式。這兩種失敗模式方向相反：視覺優先的工具能提供精美外觀，但存在交接斷層；直接撰寫程式碼則能確保整合性，但美學表現平庸。此技能將兩條路線整合在同一屋簷下——當需要視覺審查時，可透過 claude.ai/design 進行視覺往返；當需要速度與在程式碼庫內疊代時，則可載入真正美學理念直接進行內嵌設計——並根據需求自動路由至最合適的路徑。

運作方式

Webdesign 涵蓋三條產生網頁 UI 的路徑。請選擇最適合的路徑；當意圖不明確時，依名稱列出選項供選擇。 我們始終驅動最新版本的 Claude Design——沒有需要固定使用的版本。

路徑 1 — DirectDesign（預設主力；{{DA_NAME}} 直接內嵌撰寫設計）

{{DA_NAME}} 直接使用已內嵌載入的 Anthropic 開源 frontend-design 美學理念來撰寫設計。主要的提示內容從 github.com/anthropics/skills/tree/main/skills/frontend-design（MIT 授權）鏡像至 References/FrontendDesignPhilosophy.md——包含註冊清單、反預設規則、字型搭配食譜、動詞詞彙、色彩紀律。此路徑完全自足：無執行時期依賴、無需瀏覽器、無需認證。此技能所產出的每一個真實設計都是透過這條路徑完成的。工作流程：DirectDesign。

路徑 2 — 原生 Claude Design CLI（首選：程式碼整合 + 設計系統同步）

Anthropic 已在 Claude Code 中推出第一方的 /design 和 /design-sync 命令（2026 年 6 月，在 Pro/Max/Team/Enterprise 方案中全面可用——官方文件：support.claude.com/en/articles/14604416）。/design-sync 將程式碼庫的真實設計系統拉入 Claude Design，並將變更推回；/design 則從終端機建立和編輯設計。這是確定性、第一方、用於取代手動 Interceptor 交接套件機制的方案——對於任何程式碼綁定工作，請優先使用此路徑。工作流程：NativeDesignSync。

路徑 3 — 透過 Interceptor 使用 ClaudeDesign（實驗性視覺審查備用）

⚠️ 未經驗證且目前無法運作。此路徑透過 Interceptor 技能驅動 claude.ai/design 網頁畫布，用於視覺優先的審查。它需要在 interceptor-test Chrome 設定檔中有一個已認證的 claude.ai 工作階段，但此設定檔目前尚未登入，而且此路徑從未被端到端執行過（此技能每一次真實執行都是使用 DirectDesign）。僅在你明確需要視覺網頁畫布 並且 已設定好登入狀態時才使用。工作流程：CreatePrototype、ExtractDesignSystem、RefinePrototype、WebsiteToRedesign、ExportToCode、IntegrateIntoApp、DeployDesign。工具：DriveClaudeDesign.ts。

路由規則

當使用者要求「一個好看的設計」/「設計一些東西」但未指定路徑時：

  • 預設使用 DirectDesign 進行簡短、臨時、在程式碼庫內的工作——著重速度與情境內疊代。
  • 使用原生 CLI（/design-sync） 當任務是同步真實程式碼庫的設計系統或進行程式碼綁定的設計工作，且命令可用時。
  • 僅在明確需要視覺網頁畫布審查時才考慮使用 ClaudeDesign（路徑 3），並記住它需要一次性的登入且未經驗證。

整合感知操作（關鍵）

此技能經常作為較大型網站工作的子步驟被調用——例如撰寫部落格文章、建置管理儀表板、上線行銷頁面。當從上層情境中被調用時，此技能會：

  • 接受現有專案情境作為輸入：框架、套牌檔案、元件目錄、部署目標。
  • 將輸出產生為針對現有應用程式的差異或修補程式，而非獨立的 HTML 檔案。
  • 尊重現有的設計套牌與元件模式——除非使用者要求完全重新設計，否則不覆蓋它們。
  • 透過 Workflows/IntegrateIntoApp.md 路由整合工作。

當為全新設計獨立調用時，此技能會產生一個自足的原型，並可選擇性地建立一個新的應用程式腳手架。

客製化

使用者特定的設計偏好（色彩調色盤、字體排印、間距網格、動畫時間、框架預設值）位於：

~/.claude/LIFEOS/USER/CUSTOMIZATIONS/SKILLS/Webdesign/
├── PREFERENCES.md     # 設計套牌、偏好的框架
├── README.md
└── EXTEND.yaml

如果存在 PREFERENCES.md，技能會讀取它，並將這些套牌傳入 Claude Design 的簡報以及任何後續的交接套件。如果沒有客製化層，技能則預設使用 Claude Design 自己的系統萃取輸出。

工作流程路由

當執行一個工作流程時，輸出此通知：

正在 **Webdesign** 中執行 **WorkflowName**...
工作流程觸發條件檔案
DirectDesign (路徑 1 — 預設，{{DA_NAME}} 內嵌撰寫)"做一個好看的設計"、"直接設計這個"、"你自己設計"、"設計一些酷東西"、"前端美學"、"粗獷/編輯/復古/極繁 UI"，任何簡短、臨時的設計要求，不包含 "prototype" / "mockup" / "claude design"Workflows/DirectDesign.md
NativeDesignSync (路徑 2 — 程式碼工作的首選)"/design"、"/design-sync"、"設計同步"、"同步設計系統"、"將設計系統拉入 Claude Design"、"將程式碼推回 Claude Design"、"原生設計命令"Workflows/NativeDesignSync.md
CreatePrototype (路徑 3 — 實驗性，驅動 claude.ai/design)"設計一個原型"、"建立原型"、"mockup"、"建立一個設計"、"claude design"、"使用 claude.ai/design"Workflows/CreatePrototype.md
ExtractDesignSystem (路徑 3)"萃取設計系統"、"從...提取套牌"、"萃取品牌"Workflows/ExtractDesignSystem.md
RefinePrototype (路徑 3)"疊代"、"改進"、"調整間距"、"更改顏色"Workflows/RefinePrototype.md
WebsiteToRedesign (路徑 3)"重新設計這個網站"、"重建這個 URL"、"現代化"Workflows/WebsiteToRedesign.md
ExportToCode (路徑 3 備用 — 優先使用 /design-sync)"匯出成程式碼"、"交付給程式碼"、"發送給 Claude Code"、"處理交接"Workflows/ExportToCode.md
IntegrateIntoApp (路徑 3 備用 — 優先使用 /design-sync)"將此整合進"、"修補進應用程式"、"落地到現有程式碼庫"Workflows/IntegrateIntoApp.md
DeployDesign (路徑 3)"部署設計"、"發佈到正式環境"Workflows/DeployDesign.md

對於程式碼綁定的工作（匯出、整合、設計系統萃取/同步），請優先使用路徑 2（NativeDesignSync → /design-sync）。上述的路徑 3 套件工作流程保留作為文件化的備用方案，適用於從網頁畫布工作的情況，但它們未經驗證且需要測試設定檔的登入。

先決條件（執行前檢查）

路徑 1（DirectDesign）不需要任何東西——無需瀏覽器，無需認證。路徑 2（原生 CLI）僅需要一個包含 Claude Design 的 Claude 訂閱方案以及最新版本的 Claude Code（如果命令沒出現，請執行 /update）。以下檢查僅適用於路徑 3（透過 Interceptor 使用 ClaudeDesign）：

  1. Interceptor 技能可用 — which interceptor 回傳一個路徑。如果沒有，指示使用者先執行 Skill("Interceptor") 設定。
  2. 已認證的 claude.ai 工作階段 — interceptor-test Chrome 設定檔必須已登入 claude.ai。請在執行時檢查（未認證的設定檔會碰到行銷頁面，而非應用程式）；如果未登入，則需要進行一次性的有頭瀏覽器登入，之後才能執行任何路徑 3 的工作流程。
  3. Claude Design 存取權限 — Claude 訂閱方案必須包含 Claude Design（Pro、Max、Team 或 Enterprise 且經管理員啟用）。
  4. 對於 IntegrateIntoApp：需要在情境中傳入上層專案路徑 + 框架識別符（next、astro、vitepress、vite-react、vue、vanilla）。

缺少先決條件 → 暫停並提供明確的補救步驟。永遠不要默默地降級。

注意事項

在此累積經驗教訓。注意事項是資訊密度最高的地方。

  • 兩條路徑，一個技能。 ClaudeDesign（CreatePrototype 等）驅動 claude.ai/design；DirectDesign 則讓 {{DA_NAME}} 使用 References/FrontendDesignPhilosophy.md 直接內嵌撰寫設計。請勿混淆。當使用者的意圖不明確時，應將兩者作為命名的選項列出，讓他們選擇——永遠不要默默地路由。
  • 原生優先——程式碼和套牌是真相來源，Figma 不是依賴。 透過連結儲存庫（Claude Design 從程式碼讀取真實的元件和套牌）或上傳套牌/元件檔案來匯入設計系統，絕不使用 .fig 匯出檔。在任一方向上（設計 → .fig，或程式碼 → 可編輯的 Figma 畫面）都不要加入 Figma 往返。其核心理念是設計存在於程式碼庫中，而非外部交換檔案。如果未來出現無儲存庫的視覺審查需求，應透過 URL/螢幕截圖分享來解決，而不是將技能與 Figma 耦合。
  • DirectDesign 是自足的。 美學理念位於 References/FrontendDesignPhilosophy.md（從 anthropics/skills 的 MIT 原始碼鏡像）。無需依賴上游 frontend-design Claude Code 外掛是否安裝——DirectDesign 在任何 LifeOS 環境中都能運作。
  • 原生命令 /design + /design-sync 現在是程式碼綁定的路徑（已確認）。 Anthropic 的官方文件（support.claude.com/en/articles/14604416）記載了這兩個命令，自 2026 年 6 月起在 Pro/Max/Team/Enterprise 方案中全面可用。/design-sync 進行雙向的程式碼庫↔設計系統同步——對於任何程式碼綁定工作，請使用它來取代 Interceptor 交接套件機制。目前仍無公開 REST API 或 MCP 伺服器；CLI 命令即為程式化操作界面。如果它們沒有出現，請執行 /update。
  • ClaudeDesign/Interceptor 路徑（路徑 3）未經驗證且目前受阻。 它從未被端到端執行過——此技能每一次真實執行都是使用 DirectDesign。interceptor-test 設定檔未登入 claude.ai，因此 DriveClaudeDesign.ts 會碰到行銷頁面，而非應用程式。該工具目標透過無障礙樹啟發式方法控制（composer 使用 role=textbox/contenteditable，發送使用 /send|submit/，匯出使用 /export/），因此按鈕移動並非障礙所在——真正的障礙是缺少認證以及已被原生 CLI 取代。在信任路徑 3 之前：請先將測試設定檔登入 claude.ai 一次，然後進行一次有監督的執行。
  • 需要真正的 Chrome。 使用 Interceptor 技能——它是 LifeOS 中唯一經授權的瀏覽器自動化工具。Claude Design 的 UI 依賴於 claude.ai 的完整工作階段狀態；基於 CDP 的自動化會觸發機器人偵測並丟棄工作階段 Cookie。
  • 交接套件是目錄，而非單一檔案。 一個套件包含 PROMPT.md、可選的 tokens.json、components/、assets/ 以及特定框架的腳手架。請將整個目錄視為一個單位。
  • frontend-design 外掛會自動啟用。 當交接套件被餵給 Claude Code 時，該外掛（已在官方市集中安裝）會自動接手前端工作——請不要手動調用它。
  • Claude Design 的設計系統萃取在上手期間執行。 對於一個你希望 Claude Design 理解的新程式碼庫，請在 CreatePrototype 之前先執行 ExtractDesignSystem——否則 Claude Design 會使用通用預設值並覆蓋你的套牌。
  • 整合 ≠ 覆蓋。 IntegrateIntoApp 在現有程式碼之上產生差異。如果使用者想要一個完全重新設計、取代現有 UI，請明確標記此點並取得確認。
  • Canva 匯出是可編輯的。 如果使用者希望非開發者（行銷人員、創辦人）來改進設計，請透過 Workflows/ExportToCode.md 並使用 --format canva 路由。
  • 無即時協作。 Claude Design 不支援像 Figma 那樣的多玩家編輯。請透過 URL 匯出進行非同步審查分享。
  • 企業閘門。 企業帳戶需要管理員在組織設定中啟用 Claude Design，之後調色盤圖示才會出現在 claude.ai 中。
  • 工作階段配額。 Claude Design 的生成相當消耗 Token。根據 2026 年 6 月的更新，其使用量與 claude.ai 對話、Claude Code 和 Cowork 共享同一個資源池——不再有獨立的配額。對於持續性的設計工作，Pro 方案較為吃緊；建議使用 Max 方案。
  • 設計系統優先即是解決 Token 問題的關鍵。 最大的 Token 消耗來源是在每次生成時重新推斷你的品牌，然後再進行修正。請執行 ExtractDesignSystem 一次，使系統成為一個固定的可重複使用參考；之後的每一次生成都會重複使用它，而不是猜測。更少的修正循環 = 在專案生命週期中顯著減少 Token 消耗。這是對抗配額耗盡最具槓桿效益的單一行動。
  • 輸出保真度 ≠ 可上線品質。 Claude Design 產生精美的視覺效果，但交接後的程式碼通常需要驗證和無障礙性檢查。請在整合後執行 Tools/VerifyDesign.ts。
  • Vision 不會猜測。 如果提示中未指定響應式斷點、對比度要求或深色模式行為，Claude Design 會選取可能不符合目標應用程式的預設值。請在簡報中明確指定。

範例

範例 1：從簡報建立一個原型

使用者：「為一個 AI 安全新創公司設計一個定價頁面——編輯美學，僅限深色模式」
→ 調用 CreatePrototype 工作流程
→ 執行前檢查：Interceptor + 已認證的 claude.ai 工作階段
→ 組成包含明確美學、限制條件、差異化的簡報
→ 透過 Tools 驅動 claude.ai/design

…

[為翻譯而截斷]

相關技能

steipete/video-frames

Extract frames or short clips from videos using ffmpeg.

community

steipete/summarize

Summarize or transcribe URLs, YouTube/videos, podcasts, articles, transcripts, PDFs, and local files.

community

openclaw/openclaw

Use when testing, fixing, or extending the OpenClaw Control UI GUI with Vitest + Playwright end-to-end checks, mocked Gateway WebSocket flows, mocked dashboard runs, screenshots/videos, or agent-verifiable browser proof.

community

obra/superpowers

Obra superpowers agent skills.

community

affaan-m/ECC

See, Understand, Act on video and audio. See- ingest from local files, URLs, RTSP/live feeds, or live record desktop; return realtime context and playable stream links. Understand- extract frames, build visual/semantic/temporal indexes, and search moments with timestamps and auto-clips. Act- transcode and normalize (codec, fps, resolution, aspect ratio), perform timeline edits (subtitles, text/image overlays, branding, audio overlays, dubbing, translation), generate media assets (image, audio...

community

affaan-m/everything-claude-code

End-to-end marketing campaign planning and execution. Covers audience research, positioning, campaign angle definition, landing page copy, email sequences, social posts, ad copy, short-form video scripts, and content calendars. Use as the orchestration layer for multi-channel product launches. Use when planning or executing a multi-channel product launch, or producing landing page, email, social, or ad copy.

community