Claude最不想讓你用的天才設計系統，被人改造成了開源skill
整理版優先睇
Anthropic隱藏喺Claude Code嘅設計系統，開源後被改造成skill，令Claude做到像素級品牌克隆同完整設計SOP。
Anthropic喺Claude Code入面收埋咗一套完整嘅設計系統，但3月31號npm包配置失誤，51.2萬行源碼全部洩漏。開發者ZeroZ-lab從入面抽取出嚟，改造成開源skill cc-design。呢件工具嘅核心價值，係令Claude由以往靠模糊印象「大概似」嘅設計，變成精準按品牌規範「係」嘅設計。
cc-design內置68+品牌嘅設計令牌，包括Stripe、Vercel、Notion等知名公司，仲支援混合品牌。每次設計前，Claude要先回答6個設計意圖問題，確保理解焦點、情感基調、視覺流等；設計完成後跑三階段驗證（結構、視覺、設計卓越性），唔達標就回退修正。呢套SOP保證咗輸出質量。
另外，cc-design嘅工程架構好聰明：核心定義壓縮到113行，技術文檔按需加載，唔會浪費上下文窗口。仲有Tweaks系統，一個HTML入面嵌入設計控制面板，實時切換顏色、字體、佈局等，唔使生成多個版本。導出亦好方便，自然語言講「導出成PPTX」就得。
- Anthropic隱藏設計系統因npm洩漏被公開，開源community改造成cc-design skill，令Claude做設計水平大提升。
- 內置68+品牌令牌（Stripe、Vercel等），可像素級克隆品牌風格，甚至混合多個品牌元素。
- 設計前要答6個設計意圖問題，設計後行三階段驗證（結構、視覺、卓越性），確保質量。
- 採用漸進式文檔加載，只加載任務所需內容，平衡上下文開銷與覆蓋度。
- Tweaks系統喺單一HTML嵌入控制面板，實時調整設計參數並持久化，方便產出多個變體。
cc-design GitHub 倉庫
開源skill，包含安裝指引同源碼
cc-design 效果展示
示範頁面，展示手繪風格等設計輸出
洩漏源碼變開源神器
Anthropic 喺 Claude Code 入面收埋咗一套設計系統，但 3月31號 npm 包設定錯誤，51.2 萬行源碼全部流出。社區睇完發現，入面有完整嘅設計 SOP：寫 code 前要答6個設計意圖問題，寫完要跑三階段驗證，仲內置68個品牌嘅設計令牌。
Anthropic 出咗8100份 DMCA 通知，管得住代碼複製，管唔住知識傳播。開發者 ZeroZ-lab 將呢套系統抽取出嚟，改造成開源 skill cc-design，裝咗之後 Claude 就會自動用呢套 SOP 做設計。
智能工程架構與品牌克隆
Anthropic 原始嘅設計 prompt 散落喺上千個檔案，cc-design 將核心定義壓縮到 113行，12個技術文檔放喺 references/ 目錄按需加載。路由表會根據用戶意圖（幻燈片、着陸頁、品牌克隆等）自動選擇要加載嘅文檔，避免浪費上下文。
cc-design 內置 68+ 品牌設計令牌，包括 Stripe、Vercel、Notion、Apple 等。你淨係講品牌名，佢就自動加載完整設計系統。仲可以混合品牌，例如 「Vercel 極簡主義混 Linear 紫色強調色」，直接組合輸出。
另一個亮點係 Tweaks 系統：喺單個 HTML 檔案入面嵌入設計控制面板，顏色、字體大小、佈局方向、圓角、間距密度全部實時可調，設定透過 localStorage 持久化。一個檔案就可以產出 多個設計變體，唔使不斷複製貼上。
三階段驗證與自然語言導出
cc-design 嘅驗證機制分 三個階段，逐級通過：<numbered_list items={["結構驗證：零控制枱錯誤、無404、佈局完整", "視覺驗證：排版對比度、間距一致性、無佔位符殘留", "設計卓越性：層次清晰度、色彩和諧度、情感適配度"]}/>任何一關唔達標，Claude 會自動回退修正，最後截圖確認渲染正確先交付。
導出方面，cc-design 支援 三種方式，全部用自然語言觸發：<bullet_list items={["導出PPTX：講「導出成PPTX」，自動用 pptxgenjs 生成，可選可編輯文字或像素級截圖", "導出PDF：講「導出成PDF」，經 Playwright 渲染打印", "打包單檔案：講「打包成單檔案」，所有 CSS/JS/圖片內聯到一個 HTML，直接分享"]}/>唔需要手動打命令，講人話就得。
安裝簡單，用自然語言就得
安裝 cc-design 好簡單，得兩步：<numbered_list items={["從 GitHub 下載項目，放入 skills 目錄（Claude Code 用 ~/.claude/skills/cc-design；WorkBuddy 用 ~/.workbuddy/skills/cc-design）", "安裝依賴：cd ~/.workbuddy/skills/cc-design/scripts && npm install"]}/>裝完就自動生效。
用法就係 直接講人話：例如「幫我做一個 Stripe 風格嘅定價頁」→ 品牌克隆，自動加載 Stripe 令牌；「為 Q3 董事會做 8 頁演示文稿」→ 幻燈片模式，1920×1080 固定畫布。導出都係直接講「導出成PPTX」「導出成PDF」「打包成單檔案」。
如果你用 Claude 旗艦模型，設計審美會遠超平庸設計，做到天才級水準。
Anthropic 喺 Claude Code 入面收埋咗一套設計系統。
3月31號，Claude Code嘅 npm 包因為 .npmignore 配置出錯，51.2 萬行原始碼全部洩漏曬。社區睇完啲代碼之後發現，Anthropic 為 Claude 設計咗一套完整嘅設計 SOP。
寫代碼之前一定要答 6 個設計意圖問題，寫完之後行三階段質量驗證，入面內置咗 68 個品牌嘅設計令牌。呢啲唔係公開文件，係 Anthropic 內部用嘅。
Anthropic 發出咗 8100 幾份 DMCA，管得住代碼複製，但管唔住知識傳播。GitHub 開發者 ZeroZ-lab 將呢套設計系統從洩漏嘅原始碼入面抽咗出嚟，改做成一個開源 skill：cc-design。
裝咗之後，你喺類似 WorkBuddy 嘅環境入面遇到任何設計請求都會自動激活。幻燈片、着陸頁、交互原型、UI Mockup、動畫——全部輸出都係可以直接喺瀏覽器打開嘅 HTML。
冇 cc-design，Claude 做設計係咩水平
你話「做一個 Stripe 風格嘅定價頁」，Claude 俾你一個紫色背景白色卡片嘅頁面。睇落好似 Stripe，但實際上 Stripe 嘅主色係 #635bff、字體是 SF Pro Display、按鈕漸變係 linear-gradient(135deg, #635bff, #7c3aed)、圓角嚴格係 4px。
呢啲參數，Claude 唔裝 cc-design 根本唔知。佢只能靠訓練數據入面嘅模糊印象估一個「大概似」嘅頁面。
實測截圖：手繪風格資訊圖
裝咗 cc-design，行為鏈變成四步：
偵測到品牌關鍵詞「Stripe」→ 從 68+ 品牌令牌庫加載完整設計系統 寫代碼前，先答 6 個設計意圖問題：焦點喺邊、情感基調、視覺流方向、間距策略、顏色策略、排版層次 寫完代碼，行三階段驗證：結構（零控制枱錯誤、冇 404）→ 視覺（排版對比度、間距一致性）→ 設計卓越性（層次清晰度、色彩和諧度） 任何階段唔達標，就回退修正
「似」同「係」嘅分別，就係呢套 SOP 嘅價值。
實例2：小紅書風格資訊圖
cc-design 嘅工程架構值得講兩句
Anthropic 嘅原始設計 prompt 散落喺洩漏嘅原始碼入面，零散分佈喺上千個文件入面。cc-design 嘅工程改造係：核心定義只保留 113 行，12 個技術文檔拆到 references/ 目錄按需要加載。
路由表根據用戶意圖——幻燈片、着陸頁、品牌克隆、交互原型——自動匹配需要加載嘅文檔同模板。做幻燈片淨係加載幻燈片相關文檔，做品牌克隆淨係加載品牌令牌文檔。加載太多文檔會佔用上下文窗口，加載太少又覆蓋唔夠，呢個漸進式加載方案就係喺兩者之間揾平衡。
68 個品牌嘅像素級克隆
內置 68+ 品牌設計令牌：Stripe、Vercel、Notion、Apple、Tesla、Linear、GitHub 等。你講品牌名，佢自動加載對應設計系統。
多個品牌仲可以混合——「Vercel 嘅極簡主義溝 Linear 嘅紫色強調色」，直接組合。
一次構建，實時切換多種設計變體
Tweaks 系統喺單個 HTML 文件入面嵌入設計控制面板。顏色、字體大小、佈局方向、圓角、間距密度——全部實時可以調校，設置通過 localStorage 持久化。一個文件產出多個設計方向，唔需要複製粘貼生成多個版本。
三階段驗證，唔達標唔交付
通過 Playwright MCP 整合瀏覽器截圖、控制枱檢查、可訪問性樹審查：
- 結構驗證：
零控制枱錯誤、冇 404、佈局完整 - 視覺驗證：
排版對比度、間距一致性、冇佔位符殘留 - 設計卓越性：
層次清晰度、色彩和諧度、情感適配度
逐級通過，唔達標回退修正，交付前截圖確認渲染正確。
導出：HTML 可以變成任何格式
三種導出方式，全部喺 Claude Code 入面用自然語言觸發：
- 導出 PPTX：
話「將呢個幻燈片導出成 PPTX」，自動調用 pptxgenjs生成。支援可編輯文本同像素級截圖兩種模式 - 導出 PDF：
話「將呢個頁面導出成 PDF」，通過 Playwright 渲染打印 - 打包單文件：
話「將所有資源打包成一個文件」，CSS/JS/圖片全部內聯到一個 HTML 入面，俾人可以直接打開
唔需要手動行命令，自然語言觸發。
安裝：兩步搞掂
第一步，從 GitHub 下載項目，放到 skills 目錄下面。
如果用 Claude Code，放到 ~/.claude/skills/cc-design；如果用 WorkBuddy，放到 ~/.workbuddy/skills/cc-design。
第二步，安裝依賴：
cd ~/.workbuddy/skills/cc-design/scripts
npm install
裝完就用得。
點用：直接講人話
安裝之後，喺 Claude Code 入面正常用自然語言提出需求就得：
「幫我做一個 Stripe 風格嘅定價頁」→ 品牌克隆，自動加載 Stripe 設計令牌 「為 Q3 董事會做 8 頁演示文稿」→ 幻燈片，1920×1080 固定畫布，支援鍵盤翻頁 「做一個電商結賬流程嘅交互原型」→ 交互原型，嵌入 React + Babel，多頁面導航 「俾呢個着陸頁出 3 個視覺方向」→ Tweaks 面板實時切換，一個文件多種方案
導出都係一樣，直接話「導出成 PPTX」「導出成 PDF」「打包成單文件」。
嚟兩個實例截圖，以下係我用 NVIDIA step-3.5-flash 生成嘅，模型比較低智，生成嘅 html 效果都會差啲，如果使用 Claude 而家嘅旗艦模型，咁設計審美就唔止高一星半點，係天才設計同平庸設計嘅分別。
睇嚇開發者嘅同樣手繪風格截圖
GitHub：
https://github.com/ZeroZ-lab/cc-design
效果展示：
https://cc-design-demo.vercel.app/
Anthropic 在 Claude Code 裏藏了一套設計系統。
3 月 31 日，Claude Code的 npm 包因為 .npmignore 配置失誤，51.2 萬行源碼全部泄露。社區翻完代碼發現，Anthropic 給 Claude 設計了一套完整的設計 SOP。
寫代碼前必須回答 6 個設計意圖問題，寫完後跑三階段質量驗證，內置 68 個品牌的設計令牌。這些不是公開文檔，是 Anthropic 內部用的。
Anthropic 發了 8100 多份 DMCA，管得住代碼複製，管不住知識傳播。GitHub 開發者 ZeroZ-lab 把這套設計系統從泄露源碼中提取出來，改造成了一個開源 skill：cc-design。
裝上之後，你在類似workbuddy中遇到任何設計請求自動激活。幻燈片、着陸頁、交互原型、UI Mockup、動畫——全部輸出可在瀏覽器直接打開的 HTML。
沒有cc-design，Claude做設計是什麼水平
你說"做一個 Stripe 風格的定價頁"，Claude 給你一個紫色背景白色卡片的頁面。看起來像 Stripe，實際上 Stripe 的主色是 #635bff、字體是 SF Pro Display、按鈕漸變是 linear-gradient(135deg, #635bff, #7c3aed)、圓角嚴格 4px。
這些參數，Claude不裝cc-design 根本不知道。它只能靠訓練數據裏的模糊印象猜一個"大概像"的頁面。
實測截圖：手繪風格信息圖
裝了cc-design，行為鏈變成四步：
檢測到品牌關鍵詞 "Stripe" → 從 68+ 品牌令牌庫加載完整設計系統 寫代碼前，先回答 6 個設計意圖問題：焦點在哪、情感基調、視覺流方向、間距策略、顏色策略、排版層次 寫完代碼，跑三階段驗證：結構（零控制枱錯誤、無 404）→ 視覺（排版對比度、間距一致性）→ 設計卓越性（層次清晰度、色彩和諧度） 任何階段不達標，回退修正
"像"和"是"的區別，就是這套 SOP 的價值。
實例2：小紅書風格信息圖
cc-design的工程架構值得說兩句
Anthropic 的原始設計 prompt 散落在泄露的源碼裏，零散分佈在上千個文件中。cc-design 的工程改造是：核心定義只保留 113 行，12 個技術文檔拆到 references/ 目錄按需加載。
路由表根據用戶意圖——幻燈片、着陸頁、品牌克隆、交互原型——自動匹配需要加載的文檔和模板。做幻燈片只加載幻燈片相關文檔，做品牌克隆只加載品牌令牌文檔。加載太多文檔會佔用上下文窗口，加載太少又覆蓋不夠，這個漸進式加載的方案就是在兩者之間找平衡。
68個品牌的像素級克隆
內置 68+ 品牌設計令牌：Stripe、Vercel、Notion、Apple、Tesla、Linear、GitHub 等。你說品牌名，它自動加載對應設計系統。
多個品牌還能混合——"Vercel 的極簡主義混 Linear 的紫色強調色"，直接組合。
一次構建，實時切換多種設計變體
Tweaks 系統在單個 HTML 文件內嵌入設計控制面板。顏色、字體大小、佈局方向、圓角、間距密度——全部實時可調，設置通過 localStorage 持久化。一個文件產出多個設計方向，不需要複製粘貼生成多個版本。
三階段驗證，不達標不交付
通過 Playwright MCP 集成瀏覽器截圖、控制枱檢查、可訪問性樹審查：
- 結構驗證：
零控制枱錯誤、無 404、佈局完整 - 視覺驗證：
排版對比度、間距一致性、無佔位符殘留 - 設計卓越性：
層次清晰度、色彩和諧度、情感適配度
逐級通過，不達標回退修正，交付前截圖確認渲染正確。
導出：HTML 可以變成任何格式
三種導出方式，全部在 Claude Code 裏用自然語言觸發：
- 導出 PPTX：
說"把這個幻燈片導出成 PPTX"，自動調用 pptxgenjs生成。支持可編輯文本和像素級截圖兩種模式 - 導出 PDF：
說"把這個頁面導出成 PDF"，通過 Playwright 渲染打印 - 打包單文件：
說"把所有資源打包成一個文件"，CSS/JS/圖片全部內聯到一個 HTML 裏，發給別人直接打開
不需要手動跑命令，自然語言觸發。
安裝：兩步搞定
第一步，從 GitHub 下載項目，放到 skills 目錄下。
如果用 Claude Code，放到 ~/.claude/skills/cc-design；如果用 WorkBuddy，放到 ~/.workbuddy/skills/cc-design。
第二步，安裝依賴：
cd ~/.workbuddy/skills/cc-design/scripts
npm install
裝完就能用。
怎麼用：直接說人話
安裝後，在 Claude Code 里正常用自然語言提需求即可：
"幫我做一個 Stripe 風格的定價頁" → 品牌克隆，自動加載 Stripe 設計令牌 "為 Q3 董事會做 8 頁演示文稿" → 幻燈片，1920×1080 固定畫布，支持鍵盤翻頁 "做一個電商結賬流程的交互原型" → 交互原型，嵌入 React + Babel，多頁面導航 "給這個着陸頁出 3 個視覺方向" → Tweaks 面板實時切換，一個文件多種方案
導出也一樣，直接說"導出成 PPTX""導出成 PDF""打包成單文件"。
來兩個實例截圖，以下是我使用英偉達step-3.5-flash生成的，模型比較低智，生成的html效果也會差一點，如果使用Claude現在的旗艦模型，那設計審美就不是高一星半點，是天才設計與平庸設計的區別。
看看開發者的同樣手繪風格截圖
GitHub：
https://github.com/ZeroZ-lab/cc-design
效果展示：
https://cc-design-demo.vercel.app/