# 影片筆記：我逆向了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 等。

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

3.  **應用場景與價值**：
    *   **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、動畫）。
    *   設定參數（如動畫時長、格式）。

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

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

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

5.  **用戶反饋與最終交付**：
    *   根據用戶反饋進行調整（如更換主視覺）。
    *   交付最終成果（網頁版演示、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 上的活躍度如何？是否有持續的更新與維護？