呢條片教非技術用家點用一個 Claude Skill 建立完整品牌 Design System（Design Language System / DLS），然後自動生成 Instagram post、website、同 30 秒品牌影片——三種格式，一個 skill，最少輸入。重點唔係叫 Claude 做設計，而係教 Claude 一個可重複使用嘅系統，之後每次輸出都自動符合品牌規範。
核心重點：
-
Skill vs 普通 Prompt 的分別 Prompt 係「一次性答案」，Skill 係「可重複執行的系統」。Skill 就好似員工入職 SOP——你 onboard 佢一次，之後每次佢都知道要點做、用咩標準、輸出咩格式。Claude Skill 係一個
skill.md文件，用普通英文寫，唔需要 code。 -
系統三個必要文件
- Skills Prompt：根據 Anthropic 官方 33 頁技術文件提煉，定義 skill 名稱、職責、trigger 條件、執行步驟。包含 guard rail：若 brand identity 文件不存在，Claude 唔繼續工作，先要求提供
- Knowledge Folder：
brand-identity.md：品牌名稱、受眾、tone、定位、personalitydls.md（Design Language System）：字型、color palette、spacing rules、component standards、視覺層次。重點：DLS 係給 Claude 讀嘅 instruction set，唔係只係參考文件；同時有一個 HTML 版 DLS 供人類團隊參考
- CLAUDE.md：整個 project 嘅 onboarding 文件，告訴 Claude 項目結構、檔案位置、輸出規範
-
四個工具依賴
- Playwright MCP：讓 Claude 可以瀏覽網頁做設計 research（非必要但有用）
- Nano Banana MCP：圖片生成（需付費 API key），用於生產級圖片資產
- Frontend Design Claude Plugin：免費，生成 HTML 格式嘅 Instagram post、slide deck、landing page components
- Remotion：程式化生成品牌影片（motion graphics、animated posts）；如果品牌需要影片輸出，此工具係必要的
-
三個測試輸出（示範）
- Instagram Post：一個 prompt，Claude 讀取 DLS + brand identity，生成符合品牌調色板、typography、layout 嘅帖子（HTML 格式，生產時換 Nano Banana）
- 單頁 Website：一個 prompt 加 design tokens（確切色碼）+ 頁面結構，Claude 生成完整網頁，色調正確、typography 符合 DLS，勝過人工半天工作
- 30 秒品牌影片（Remotion）：單個 prompt，輸出視覺一致嘅品牌短片，design tokens 全程一致，但若無 pre-built assets + scene brief，細節會較薄
-
關鍵洞察：輸入質量決定輸出上限 「Garbage in, garbage out」——Skill 係固定嘅，但 context 越豐富（詳細 PRD、競爭對手參考、場景設計文件、自定義資產），輸出就越專業。三個示範都係「minimum input」基線，已比多數人手工更好，加埋好 context 可達到專業 studio 水平。
💡 金句： “The skill does not change. The quality of what you give it determines how high you can go.”