把疑似洩漏的 Claude Design prompt，逆向成四個好用的 Skill

Claude Design 的 system prompt 疑似被洩漏了，在 GitHub 上流傳。我花了點時間把裡面很有價值的地方，拆成 4 個可以直接用的 skill — 適用於 Claude Chat / Cowork，或是 Codex 等地方。

但真正值錢的不是那份 prompt 本身，而是它隱含的「如何把設計工作結構化給 AI 做」的方法論。

Prompt 的來源與為什麼值得拆開來看

先說明一下 prompt 的來源，它來自 GitHub 上一個叫 CL4R1T4S 的 repo，作者 pliny 是圈內知名的 prompt 研究者（他之前洩漏的 Claude 4 system prompt 被 Simon Willison、GIGAZINE 等媒體引用分析過，有一定程度的可信度）。

Anthropic 官方沒證實這份 Claude Design prompt，但這不重要 — 重要的是內容本身非常專業，把「如何將設計工作結構化給 AI 做」講得很完整，單就學習價值來說值得一讀。

事情是這樣的。Claude Design 是個跑在網頁端的產品，有 iframe 預覽、有互動式的微調面板、有背景執行的驗證 agent。這些在 Claude Code 的 terminal 環境裡沒有，所以整包 prompt 移植到 Claude Code 是做不到的。

但 prompt 裡真正值錢的，不是那些 tool — 是方法論本身：

怎麼問對問題、怎麼定義設計系統、怎麼避開 AI 感、怎麼驗證成品。這些是 prompt engineering 層面的知識，很值得學習。

這就是為什麼我選擇拆開來做，從中擷取了下面四個 Skill 出來。

1. DeckBuilder — 產出有紀律的 HTML 簡報

首先做一個 Skill 學習 Claude Design 產出 HTML 簡報。

使用 Claude Design 時候，會覺得他可以產一份能用鍵盤翻頁、能 full screen 投影、能印成 PDF 的 HTML 簡報，而且設計品質穩定，所以想把這件事做成可以使用的 skill。

Claude Design 有個現成的做法，是一個叫 <deck-stage> 的 web component，處理了 1920×1080 固定畫布、自動縮放、鍵盤導航這些事。

把它重寫乾淨，再加上一份 content-guidelines.md（字級 24px 底、配色最多兩色、反 AI slop）讓 Claude 每次產出都有紀律。

附加的 PPTX 匯出可以用 Playwright 截圖打包，視覺 100% 忠實但文字不能改 — 適合「寄給客戶看、不是給同事接著改」的情境。

2. AntiSlopReview — 把「AI 生成感」變成可檢核的東西

AI 生成的 UI 常常有一種洗不掉的味道 — 過度漸層、圓角加左邊彩色邊條的卡片、預設用 Inter 字型、所有東西置中、copy 裡塞滿「revolutionary」「seamless」「cutting-edge」。你看得出來，但很難具體指出在哪裡。

Prompt 裡剛好有一段叫「Avoid AI slop tropes」，把這些問題條列得很完整。

所以把它寫成 regex-based 的 checker + 15 條 trope catalog 的深度 reference，丟一個資料夾進去，幾秒內告訴你哪幾行有 slop 問題。

結果會像是：

🚫 Anti-slop review: my-deck/index.html ── Critical ── (0) ── Warning ── (0, after fix) • Fixed: CTA label was 22px, below the 24px deck floor → bumped to 24px. ── Nit ── (0) ── Notes ── • Slide 4 timeline (Install/Go live/Report) is adjacent to the three-up benefit-card trope — acceptable as a sequential timeline; don't add icons. ✓ No remaining slop detected.

對我來說最實用的場景是「AI 做完、交稿前跑一次」，像 code review 一樣但是審美學。

3. DesignContextImport — 自動讀 codebase 建品牌設計系統

每次要做新的 marketing 素材、簡報、或 landing，你是否都得重新跟 AI 解釋一次我們的品牌色、字型、component 在哪 — 而且解釋得不完整，產出就會走味。

Claude Design 最招牌的功能就是 onboarding 時讀你的 codebase 自動建 design system。

把這個邏輯寫成一支 Python script，優先抓 Tailwind config，再 fallback CSS variables、SCSS vars、最後用頻率統計兜底。輸出 design-tokens.json + DESIGN_SYSTEM.md 兩份檔案。

下次再叫 Claude 做東西就把這份餵進去當 context。一次抓、重複用。對多產品 team 的工作流省下來的時間很可觀。

4. FrontendVerify — 讓 AI 產的網頁真的跑過一次再交

AI 寫的 HTML 看起來沒問題、用眼睛掃也沒問題，但打開來可能 console 全是紅字、圖片 404、文字被切掉、手機版直接爆版。

靜態分析抓不到這些 — 只有真的用瀏覽器跑過才會發現。

這個 skill 用 Playwright 跑一個 headless Chromium，提供 check（7 項自動檢查）、probe（執行任意 JS 探查）、screenshot（單張截圖）、responsive（四個尺寸批次截圖），成為交稿前最後一道關卡。

特別對 DeckBuilder 有針對性 — 會自動驗 <deck-stage> 有註冊、slides 數量對、counter 顯示正確。

心得：方法論才是核心

這個過程的心得：prompt 是表象，方法論才是核心。把方法論抽出來配上自己的執行環境，反而比思考如何整包移植過來更實用。

PS

Claude Design 現在用量很有限，我這週額度早就用滿了。所以把簡報 Skill 搬到 Chat/Cowork 裡面以後，還可以繼續接著用。