影片筆記：我逆向了Claude Design！一句话帮你生成任何出色设计，开源后狂揽GitHub 1.6万+stars！【B站AI创造公开赛】

一句話總結

影片介紹並實戰演示了一個名為「Enthopic Cloud Design」的逆向開源 Skill，該項目將原本僅限 Cloud 訂閱用戶使用的設計工具逆向，轉化為可在多種 Coding Agent（如 Cursor、Codex 等）中使用的開源項目，並通過 PPT 製作、個人主頁設計、iOS App 原型及宣傳動畫四個案例，展示其從需求確認、視覺提取到自動修復的完整設計生成流程。

核心重點

1. 逆向開源背景：

• 原始工具為 Enthopic 發布的 Cloud Design，僅限 Cloud 訂閱用戶使用。
• 原工具存在消耗量大、訂閱用戶易耗盡額度、生成設計美感不足（「太爛、太難看」）等痛點。
• 逆向後的 Skill 已開源，在 GitHub 獲得 16,000+ Stars。
• 兼容多種 Coding Agent，包括 Cloud Code、Cursor、Codex、Hermes、Tray、Qcloud、Workbody 等。

1. 自動化設計流程：

• 涵蓋需求確認、風格選擇、自動檢查修復、最終導出等完整環節。
• 具備自我驗證與修改機制（如通過截圖代碼進行自我驗證）。
• 支持從真實素材（圖片、Logo、品牌色）中提取視覺語言並應用於設計。

1. 應用場景與價值：

• PPT 製作：針對非技術白領講解 Coding Agent，生成可編輯的網頁版及 PDF/PPT 文件。
• 個人主頁：通過上傳照片提取色系與風格，生成符合個人風格的網頁，質感良好。
• iOS App 原型：快速生成可交互原型，便於運營或產品人員與研發團隊對接溝通，快速驗證想法。
• 宣傳動畫：抓取真實品牌素材生成動畫，展示「全流程的一鍵成片」能力。

詳細大綱

I. 背景與工具介紹

• 來源：Enthopic 發布的 Cloud Design 工具。
• 逆向成果：製作成開源 Skill，GitHub 獲得 16,000 Star。
• 解決痛點：
• 原工具僅限 Cloud 訂閱用戶使用。
• 原工具消耗量大，訂閱用戶易耗盡額度。
• 原工具生成的網頁/APP 設計美感不足（「太爛、太難看」）。
• 兼容性：可安裝於多種 Coding Agent，包括 Cloud Code、Cursor、Codex、Hermes、Tray、Qcloud、Workbody 等。

II. 實際演示案例 1：PPT 製作

• 需求場景：為非技術白領講解「什麼是 Coding Agent」及「Cloud Code」，時長約半小時。
• 工作流程：

1. 需求確認：選擇聽眾背景、講解目標、視覺風格、輸出物類型。
2. 信息收集：AI 自行調查相關知識與產品配色、介紹。
3. 樣稿確認：先生成兩頁樣稿供用戶參考風格。
4. 自動檢查與修復：AI 自動檢查頁面問題並修復。
5. 最終交付：生成網頁版（可演示）及 PDF/PPT 格式文件。

• 效果評估：約 80 分水平，格式維持良好，內容可編輯。

III. 實際演示案例 2：個人主頁設計

• 需求場景：製作個人主頁，用於社交場合分享，展示身份、工作內容及聯繫渠道。
• 特殊視覺輸入：
• 上傳一張在飲料店拍攝的照片。
• 要求 AI 提取該照片的色系與風格，而非使用推薦模板。
• 工作流程：

1. 視覺語言提取：寫腳本抽取具體色值。
2. 規範文檔生成：生成名為 BranderSpec 的文檔，固化品牌要求（色系、字形、簽名細節、禁區、核心數據）。
3. 頁面生成與驗證：基於文檔設計頁面，並通過截圖代碼進行自我驗證與修改。
4. 用戶反饋與調整：AI 建議將主視覺換為真人照片，用戶同意後更新效果。

• 效果評估：質感不錯，充分運用了照片中的藍色與抹茶綠色調。

IV. 實際演示案例 3：iOS App 原型製作

• 需求場景：根據「高效能人士的 7 個習慣」理念，製作管理個人「土度」的 iOS App。
• 工作流程：

1. 功能與視覺選擇：選擇視覺氣質與功能深度。
2. 交互原型生成：生成可交互原型。
3. Bug 修復：AI 自行修復運行中的問題。

• 價值主張：
• 快速驗證產品想法的價值。
• 便於運營或產品人員與研發團隊對接溝通。
• 改變工作流，快速實現想法交流。

V. 實際演示案例 4：宣傳動畫製作

• 需求場景：為 B 站新推出的 AI 視頻產品「花生」製作宣傳動畫。
• 工作流程：

1. 信息確認：確認產品存在性及性質。
2. 素材抓取：抓取官網 Logo 及品牌色等真實素材，獲取「花生 AI」的品牌 DNA。
3. 參數設定：動畫時長 15-20 秒，格式 16:9，突出「全流程的一鍵成片」功能。
4. 視覺基調選擇：確定視覺風格。

• 效果評估：約 70 分水平。

工具 / 模型 / 名詞整理

• 開源項目/Skill：
• Enthopic Cloud Design（逆向後的 Skill）
• 花束底賽（疑點：聽寫錯誤，可能指代該 Skill 的中文譯名或口誤）
• 花束 design（疑點：同上，聽寫錯誤）
• 滑鼠底（疑點：聽寫錯誤，可能指代該 Skill）
• 平台/產品：
• GitHub
• Cloud Code
• Cursor
• Codex
• 龍蝦 Hermes（疑點：聽寫錯誤，可能指代某款工具或模型）
• Tray（疑點：國內工具名稱，需查證）
• Qcloud（疑點：國內工具名稱，需查證）
• Workbody（疑點：國內工具名稱，需查證）
• B 站（Bilibili）
• 花生（B 站新推出的 AI 視頻產品）
• 概念/術語：
• AI coding
• Web coding
• Coding Agent
• PPT
• PDF
• iOS App
• 高效能人士的 7 個習慣
• 個人土度（疑點：聽寫錯誤，需查證）
• BranderSpec（文檔名稱）
• 影響圈 / 關注圈
• 舉證（疑點：聽寫錯誤，可能指「矩陣」或「分類」）

操作流程整理

1. 需求確認階段：

• 確定聽眾背景、講解目標或產品性質。
• 選擇視覺風格、輸出物類型（網頁、PDF、PPT、App、動畫）。
• 設定參數（如動畫時長、格式）。

1. 信息收集與素材抓取：

• AI 自行調查相關知識與產品配色。
• 上傳真實素材（如飲料店照片、官網 Logo），提取色系、品牌色、Logo 等「品牌 DNA」。
• 寫腳本抽取具體色值。

1. 設計生成與規範固化：

• 生成規範文檔（如 BranderSpec），固化品牌要求（色系、字形、簽名細節、禁區、核心數據）。
• 生成樣稿（如 PPT 的前兩頁）供用戶確認風格。
• 生成最終設計（網頁、App 原型、動畫）。

1. 自動檢查與修復：

• AI 自動檢查頁面問題並修復。
• 通過截圖代碼進行自我驗證與修改。
• 修復運行中的 Bug。

1. 用戶反饋與最終交付：

• 根據用戶反饋進行調整（如更換主視覺）。
• 交付最終成果（網頁版演示、PDF/PPT 文件、可交互原型、動畫視頻）。

值得注意的限制或風險

1. 設計美感限制：原工具生成的網頁/APP 設計被評價為「太爛、太難看」，逆向後的 Skill 在部分案例中（如宣傳動畫）評分約為 70 分，PPT 製作約為 80 分，顯示其設計能力仍有提升空間。
2. 資源消耗：原工具消耗量大，訂閱用戶易耗盡額度，逆向後的 Skill 雖為開源，但仍需依賴 Coding Agent 的運行環境。
3. 兼容性依賴：該 Skill 需安裝於特定的 Coding Agent（如 Cursor、Codex 等）中才能使用，對用戶的開發環境有一定要求。
4. 自我驗證的局限性：雖然 AI 具備自我驗證與修改機制，但最終效果仍需用戶反饋與調整，並非完全自動化且完美無缺。

逐字稿辨識疑點

• 花束底賽 / 花束 design / 滑鼠底：逐字稿中多次出現這些詞彙指代該 Skill，與開頭提到的 "Enthopic Cloud Design" 發音或字形差異較大，疑似聽寫錯誤或特定暱稱，無法確定實際名稱。
• 龍蝦 Hermes：「龍蝦」可能是某款工具或模型的誤聽，需查證。
• Tray / Qcloud / Workbody：這些被描述為「國內」的 Coding Agent 或相關工具，名稱可能為聽寫錯誤或較小眾產品，需查證正確名稱。
• 個人土度：在「管理個人土度」一詞中，「土度」語意不明，疑似「頭度」、「態度」或特定術語的聽寫錯誤。
• 舉證：在「分配到不同的舉證里」一詞中，「舉證」語意不通，疑似「矩陣」（如艾森豪矩陣）或「分類」的聽寫錯誤。
• Claw 的風格：描述 PPT 風格時提到「非常 Claw 的風格」，疑為「Cloud」的聽寫錯誤。

可延伸追問

1. 逆向後的 Skill 具體如何安裝到不同的 Coding Agent（如 Cursor、Codex）中？是否有詳細的安裝文檔？
2. BranderSpec 文檔的具體結構是什麼？如何確保 AI 嚴格遵循其中的品牌規範？
3. 該 Skill 在處理複雜交互邏輯（如 iOS App 中的多頁面跳轉）時的準確性如何？
4. 對於非技術背景的用戶，如何通過該 Skill 快速上手並獲得滿意的設計結果？
5. 該開源項目在 GitHub 上的活躍度如何？是否有持續的更新與維護？