我拆解了花叔自建的skill之後,發現瞭如何寫好skill的真相

作者:飛叔AI沉思錄
日期:2026年4月24日 上午12:32
來源:WeChat 原文

整理版優先睇

速讀 5 個重點 高亮

寫好Skill嘅關鍵唔係Markdown,而係建構一個可執行嘅系統;花叔嘅設計哲學揭示咗5層架構同7步法則。

整理版摘要

呢篇文章係作者分析花叔嘅Skill設計哲學之後,整理出嘅一套寫好Skill嘅框架。花叔係一個擅長用HTML做設計嘅設計師,佢嘅Skill之所以出色,唔係因為佢識寫Markdown,而係因為佢理解咗Skill嘅底層邏輯——一個頂級Skill本質上係一個可執行嘅程序,有輸入、輸出、檢查點、異常處理同優先級規則。作者想解決嘅問題係:點樣寫出真正有用嘅Skill,而唔係普通嘅知識庫或者提示詞模板。

整體結論係:寫好Skill需要掌握5層架構模型——觸發層、角色層、原則層、流程層同資源層,同埋一套7步轉化法則,由定義領域邊界開始,到最後寫觸發詞同描述。花叔嘅做法揭示咗幾個關鍵:畀AI一個具體嘅職業身份同關係定位、用「反例」同檢查點防止常見錯誤、將工作流程拆成可執行步驟,同埋透過真實踩坑迭代升級。呢篇文章唔單止提供理論,仲有一個通用Skill模板同實操作法,適合任何想提升AI協作效率嘅人。

透過拆解花叔嘅設計工作流(例如10步標準流程、8階段Fallback模式、5步品牌資產協議),作者歸納出一個可複用嘅框架,強調原則要有優先級、流程要有檢查點、資源要模組化。文章仲指出,寫Skill最常見嘅陷阱係將佢當成知識庫,而忽略咗「AI係實習生」呢個本質,所以要透過角色定義、反AI slop清單同異常處理嚟補足AI嘅弱點。最後,作者提供咗一個極簡Skill模板,方便讀者快速套用。

  • 頂級Skill本質係可執行程序,唔係知識庫或提示詞模板;必須有輸入、輸出、檢查點、異常處理同優先級規則。
  • 寫Skill嘅5層架構模型:觸發層(精準識別場景)、角色層(定義身份關係)、原則層(優先級排序)、流程層(可執行步驟)、資源層(可複用組件)。
  • 花叔嘅設計哲學強調「AI係實習生唔係專家」、「預設值係陷阱」、「流程即產品」,透過角色定位同反AI slop清單提升輸出品質。
  • 從需求到Skill嘅7步法則:定義領域邊界、給予職業身份、提煉核心原則、設計工作流程、預設異常處理、準備資源庫、寫觸發詞描述。
  • Skill要持續升級,基於真實踩坑迭代;用數字量化成本(例如WebSearch 10秒 vs 返工2小時),令原則可執行。
值得記低
Prompt

極簡Skill模板

一個通用嘅Skill模板,包含description、角色設定、核心原則、工作流程、異常處理表格同資源庫結構,適合任何領域快速開始寫Skill。

整理重點

Skill嘅本質:可執行程序

花叔嘅Skill之所以出色,核心原因係佢理解咗Skill嘅底層邏輯:Skill = 你的專業知識 + 對AI行為嘅精確控制 + 可複用嘅工作系統。

頂級Skill本質上係一個可執行嘅程序——有輸入、有輸出、有檢查點、有異常處理、有優先級規則。

呢個認知係整篇文章嘅基礎,亦解釋咗點解花叔嘅Skill可以持續產出令人驚喜嘅設計作品。

AI係實習生,唔係專家

預設值係陷阱

流程即產品

整理重點

花叔嘅設計哲學拆解

花叔喺SKILL.md開頭就定義角色,唔係泛泛而談「你係一個助手」,而係具體嘅「你係一位用HTML工作嘅設計師,用戶係你嘅manager」。呢種關係定位令AI明白自己嘅水平同責任。

畀AI一個具體嘅職業身份同關係定位

  • AI係實習生,唔係專家:角色定位要具體,唔好只係叫助手。
  • 預設值係陷阱:明確話畀AI唔好做乜,比話佢做乜更重要;花叔寫咗長長嘅反AI slop清單。
  • 流程即產品:將成個工作流程拆成10步標準流程、8階段Fallback模式、5步品牌資產協議,每個步驟都有檢查點同異常處理。

成本對比WebSearch 10秒 << 返工2小時

整理重點

5層架構模型:由觸發到資源

5層架構模型 text
Layer 5: 觸發層 (Trigger) → 什麼時候加載呢個Skill?
Layer 4: 角色層 (Persona) → AI應該扮演誰?和誰的關係是什麼?
Layer 3: 原則層 (Principles) → 不可違反的核心規則(按優先級排序)
Layer 2: 流程層 (Workflow) → 具體怎麼做?步驟、檢查點、異常處理
Layer 1: 資源層 (Assets) → 組件、模板、參考文檔、腳本工具

花叔喺每一層都有具體實踐:觸發層窮盡觸發詞、角色層定義身份關係、原則層用優先級排序加反例、流程層拆成10步檢查點、資源層整理可複用組件同參考文檔。呢個模型可以套用到任何領域嘅Skill寫作。

原則必須有編號同優先級

每條原則配觸發條件同反例

流程層要有明確輸入、輸出、檢查點

資源層分assets、references、scripts

整理重點

7步轉化法則 + 極簡模板

基於花叔嘅分析,作者總結咗7步實操方法,由定義領域邊界到寫觸發詞描述,每一步都有具體指引。

  1. 1 Step 1: 定義領域邊界——問清楚呢個Skill解決咩問題、唔解決咩問題、用戶幾時需要。
  2. 2 Step 2: 畀AI一個職業身份——用公式:身份 + 關係 + 能力邊界 + 動態角色。
  3. 3 Step 3: 提煉核心原則——從真實踩坑提煉3-7條不可違反原則,按優先級排序,配反例。
  4. 4 Step 4: 設計工作流程——將心智模型變成可執行步驟,每個步驟有輸入、輸出、檢查點。
  5. 5 Step 5: 預設異常處理——準備6-7種常見異常(需求模糊、技術難題等)嘅處理動作。
  6. 6 Step 6: 準備資源庫——將可複用組件、模板、參考文檔、腳本工具分類整理。
  7. 7 Step 7: 寫觸發詞同描述——描述要包含能力概述、觸發詞列表、主幹能力、Fallback同可選功能。

壞寫法:先了解需求,然後做設計,最後交付。好寫法:分10步,每步有檢查點

極簡Skill模板 yaml
name: your-skill-name
version: "1.0.0"
description: |
 一句話描述你的Skill解決什麼問題。
 觸發詞:關鍵詞1、關鍵詞2、關鍵詞3...
 主幹能力:能力1、能力2、能力3...
 需求模糊時的Fallback:怎麼處理模糊需求...
 交付後可選:增值服務...
---
你的Skill名稱
你是一位[具體身份],不是[容易混淆的身份]。
用戶是你的[關係]。
使用前提
適用場景
 場景1
 場景2
不適用場景
 排除1
 排除2
核心原則(按優先級)
 0 最高優先級原則
 >一句話定義
 觸發條件:什麼時候執行
 硬流程:1.步驟1 2.步驟2 3.步驟3
 反例(真實踩過的坑):
 場景:...
 錯誤做法:...
 後果:...
 正確做法:...
 1 第二條原則...
工作流程
 標準流程
 1.步驟1-具體動作-檢查點:停下等用戶確認
 2.步驟2-具體動作
 3.步驟3-具體動作
 異常處理
 | 場景 | 觸發條件 | 處理動作 |
 | 異常1 | 什麼時候發生 | 怎麼做 |
 | 異常2 | 什麼時候發生 | 怎麼做 |
資源庫
 組件、參考、腳本...

Skill唔係展示知識,係解決具體問題

迭代思維:每個版本基於真實踩坑升級

整理重點

花叔嘅秘密武器:領域深度同迭代思維

花叔之所以寫得好,仲有幾個底層能力支持:

  • 領域深度:佢對 PentagramField.ioKenya Hara 等20種設計哲學有深入理解,寫得出有品位嘅約束。
  • 對AI弱點嘅認知:知道AI會憑記憶做斷言、產出AI slop、悶頭做到底,所以要求WebSearch驗證、寫反Slop清單、設檢查點。
  • 迭代思維:Skill有版本歷史,每個版本基於真實踩坑升級,例如DJI Pocket4事件觸發「核心資產協議」升級。
  • 量化思維:用數字令原則可執行,例如「5-10-2-8原則」、「成本對比:WebSearch 10秒 << 返工2小時」。

領域深度令佢寫得出有品位嘅約束

用數字量化成本,令原則可執行

>花叔嘅各種Skill之所以咁出色,唔係因為佢識寫Markdown,而係因為佢理解咗Skill嘅底層邏輯。

---

圖片

核心洞察:Skill嘅本質係咩?

Skill = 你嘅專業知識 + 對AI行為嘅精確控制 + 可複用嘅工作系統

好多人寫Skill嘅問題在於:當咗佢係知識庫,或者簡單嘅提示詞模板。但真正頂級嘅Skill,本質上係一個可執行嘅程序——有輸入、有輸出、有檢查點、有異常處理、有優先級規則。

---

一、花叔嘅Skill設計哲學(從佢身上學到嘅)

圖片

1. 「AI係實習生,唔係專家」

花叔喺SKILL.md開頭就定義咗角色:

>「你係一位用HTML工作嘅設計師,唔係程序員。用戶係你嘅manager...」
訣竅:畀AI一個具體嘅身份同關係定位,而唔係泛泛嘅「你係一個助手」。

2. 「默認值係陷阱」

花叔花咗大量篇幅定義反AI slop清單——因為AI嘅默認輸出就係訓練語料嘅「最大公約數」,平庸而且冇品牌識別度。

訣竅:明確話畀AI唔好做啲咩,比起話畀佢知做什麼更加重要。

3. 「流程即產品」

花叔成個設計工作流程拆解成:

  • 10步標準流程(包含4個檢查點)
  • 8階段Fallback模式
  • 5步品牌資產協議
  • 異常處理表
訣竅:Skill唔係知識庫,係可執行嘅程序

---

二、Skill寫作嘅5層架構模型

圖片

基於對huashu-design嘅分析,我總結咗一個可複用嘅框架:

```

┌─────────────────────────────────────────┐

│ Layer 5: 觸發層 (Trigger) │

│ → 幾時會載入呢個Skill? │

├─────────────────────────────────────────┤

│ Layer 4: 角色層 (Persona) │

│ → AI應該扮演邊個?同邊個嘅關係係點? │

├─────────────────────────────────────────┤

│ Layer 3: 原則層 (Principles) │

│ → 唔可以違反嘅核心規則(按優先級排序) │

├─────────────────────────────────────────┤

│ Layer 2: 流程層 (Workflow) │

│ → 具體點樣做?步驟、檢查點、異常處理 │

├─────────────────────────────────────────┤

│ Layer 1: 資源層 (Assets) │

│ → 組件、模板、參考文檔、腳本工具 │

└─────────────────────────────────────────┘

```

---

三、逐層拆解:花叔係點樣做

Layer 5: 觸發層 —— 精準識別場景

花叔嘅做法:

```

喺description裏面窮盡觸發詞

觸發詞:做原型、設計Demo、交互原型、HTML演示、動畫Demo、

設計變體、hi-fi設計、UI mockup、prototype、設計探索、

做個HTML頁面、做個可視化、app原型、iOS原型...

```

關鍵技巧:

  • 列出所有用戶可能會用嘅表達方式
  • 區分主幹觸發詞同邊緣觸發詞
  • 明確唔適用嘅場景(例如「生產級Web App」就唔應該觸發)

---

Layer 4: 角色層 —— 定義身份同關係

花叔嘅做法:

>「你係一位用HTML工作嘅設計師,唔係程序員」

>

>「用戶係你嘅manager,你要產出深思熟慮、做工精良嘅設計作品」

>

>「根據任務embody對應領域嘅專家:動畫師/UX設計師/幻燈片設計師/原型師」

關鍵技巧:

  • 畀AI一個具體嘅職業身份(唔係「助手」)
  • 定義同用戶嘅權力關係(上下級/合作伙伴/顧問)
  • 明確能力邊界(唔係乜都做到)

---

Layer 3: 原則層 —— 優先級排序

花叔嘅6條核心哲學(按優先級):

圖片

```

0 事實驗證先於假設(最高優先級)

1 從existing context出發,唔好憑空畫

2 Junior Designer模式:先展示假設,再執行

3 畀variations,唔好畀「最終答案」

4 Placeholder > 爛實現

5 系統優先,唔好填充

6 反AI slop

```

關鍵技巧:

  • 原則一定要有編號同優先級
  • 每條原則配觸發條件(幾時執行)
  • 每條原則配反例(真實踩過嘅坑)
  • 用檢查點強制暫停

花叔嘅反例寫法(非常有效):

```

反例(2026-04-20 真實踩過嘅坑):

-用戶:「畀大疆Pocket 4做發佈動畫」
-我:憑記憶話「Pocket 4仲未發佈,我哋做概念demo」
-真相:Pocket 4已經喺4日前發佈
-後果:返工1-2個鐘
-成本對比:WebSearch 10秒 << 返工2個鐘

```

---

Layer 2: 流程層 —— 可執行嘅程序

花叔嘅標準流程(10步):

```

1. 理解需求(包含事實驗證)

2. 探索資源 + 抽核心資產

3. 先答四問,再規劃系統

4. 構建文件夾結構

5. Junior pass(assumptions + placeholders)

6. Full pass(填placeholder,做variations)

7. 驗證(Playwright截圖)

8. 總結(極簡,只講caveats同next steps)

9. 導出視頻(默認帶SFX + BGM)

10. 可選:專家評審

```

每個步驟配:

  • 檢查點(一定要停低等用戶確認)
  • 具體動作(唔係模糊嘅建議)
  • 異常處理(如果X發生,做Y)

異常處理表(花叔嘅寫法):

| 場景 | 觸發條件 | 處理動作 |

| 需求模糊 | 用戶話「隨便做個設計」 | 設計方向顧問模式 |

| 技術難點 | 超過現有資源能力 | Junior Designer模式,展示假設 |

---

Layer 1: 資源層 —— 可複用嘅組件

花叔嘅資源組織:

```

assets/ 可複用組件

├── ios_frame.jsx iPhone設備框

├── animations.jsx 動畫引擎

├── deck_stage.js 幻燈片組件

├── sfx/ 37個預製音效

└── showcases/ 24個預製樣例

references/ 參考文檔

├── workflow.md 工作流程

├── design-styles.md 20種設計哲學

├── animation-pitfalls.md 14條動畫避坑

└── ...

scripts/ 工具腳本

├── render-video.js 視頻渲染

├── export_deck_pptx.mjs PPT導出

└── verify.py 驗證腳本

```

---

四、快速轉化需求嘅7步法則

基於以上分析,呢度係由需求到Skill嘅實操方法:

Step 1: 定義你嘅「領域邊界」

問自己:

  • 呢個Skill解決乜嘢問題?
  • 乜嘢問題佢唔解決?(明確排除)
  • 用戶通常喺乜嘢場景下需要佢?

花叔嘅例子:

>「專為『用HTML做視覺產出』嘅場景設計,唔係畀任何HTML任務用嘅萬能勺」
>適用:交互原型、幻燈片、動畫、信息圖
>唔適用:生產級Web App、SEO網站、需要後端嘅系統

---

Step 2: 畀AI一個「職業身份」

唔好寫:

>你係一個幫助用戶做設計嘅助手。

要寫:

>你係一位用HTML工作嘅設計師,唔係程序員。
>用戶係你嘅manager,你要產出深思熟慮、做工精良嘅設計作品。
>根據任務embody對應領域嘅專家:動畫師/UX設計師/幻燈片設計師/原型師。
公式:身份+ 關係 + 能力邊界 + 動態角色

---

Step 3: 提煉你嘅「核心原則」

從你嘅經驗入面提煉3-7條唔可以違反嘅原則,按優先級排序。

花叔嘅原則來源:

  • 真實踩過嘅坑(DJI Pocket 4事件)
  • 行業最佳實踐(設計方向顧問模式)
  • 對AI弱點嘅認知(反AI slop)

你嘅做法:

  • 回顧你做呢個任務時最常犯嘅錯誤
  • 回顧用戶最常唔滿意嘅地方
  • 將呢啲變成「原則 + 反例」

---

Step 4: 設計「工作流程」

將你嘅心智模型變成可執行嘅步驟。

差嘅寫法:

>先了解需求,然後做設計,最後交付。

好嘅寫法(花叔):

>「1. 理解需求(含事實驗證)→ 2. 探索資源 → 3. 答四問再規劃系統
→ 4. 構建文件夾 → 5. Junior pass(寫assumptions+placeholders)
→ 6. Full pass → 7. 驗證 → 8. 總結 → 9. 導出 → 10. 評審」
關鍵:每個步驟要有明確嘅輸入、輸出、檢查點。

---

Step 5: 預設「異常處理」

花叔嘅Skill有7種異常處理。你要問自己:

  • 需求模糊時點算?
  • 技術難題時點算?
  • 用戶反饋唔好時點算?
  • 超出能力範圍時點算?
  • 資源缺失時點算?
  • 時間唔夠時點算?
  • 出現錯誤時點算?

---

Step 6: 準備「資源庫」

將可複用嘅嘢抽出嚟:

| 類別 | 內容 | 例子 |

| 組件 | 可複用嘅代碼片段 | React組件、Python函數、CSS類 |

| 模板 | 標準化嘅文檔格式 | 報告模板、電郵模板、代碼模板 |

| 參考 | 知識庫同最佳實踐 | 設計規範、編碼規範、FAQ |

| 工具 | 自動化腳本 | 渲染腳本、驗證腳本、導出腳本 |

---

Step 7: 寫「觸發詞」同「描述」

描述(description)要包含:
  • 能力概述(一句話)
  • 觸發詞列表(窮盡)
  • 主幹能力(3-5個核心功能)
  • Fallback機制(需求模糊時點算)
  • 可選功能(交付後嘅增值服務)

花叔嘅描述結構:

>花叔Design——用HTML做高保真原型、交互Demo、幻燈片、動畫、設計變體探索+設計方向顧問+專家評審嘅一體化設計能力。
>觸發詞:做原型、設計Demo、交互原型...
>主幹能力:Junior Designer工作流、反AI slop清單、React+Babel最佳實踐、Tweaks變體切換、Playwright驗證、HTML動畫→MP4/GIF導出...
>需求模糊時嘅Fallback:設計方向顧問模式——由5流派×20種設計哲學推薦3個差異化方向...
>交付後可選:專家級5維度評審...

---

五、一個極簡嘅Skill模板

基於以上分析,我幫你寫咗一個通用模板:

```

name: your-skill-name

version: "1.0.0"

description: |

一句話描述你嘅Skill解決乜嘢問題。

觸發詞:關鍵詞1、關鍵詞2、關鍵詞3...

主幹能力:能力1、能力2、能力3...

需求模糊時嘅Fallback:點樣處理模糊需求...

交付後可選:增值服務...

---

你嘅Skill名稱

你係一位[具體身份],唔係[容易混淆嘅身份]。
用戶係你嘅[關係]。

使用前提

適用場景

  • 場景1
  • 場景2

唔適用場景

  • 排除1
  • 排除2

核心原則(按優先級)

0 最高優先級原則

>一句話定義
觸發條件:幾時執行
硬流程
1.步驟1
2.步驟2
3.步驟3
反例(真實踩過嘅坑):
  • 場景:...
  • 錯誤做法:...
  • 後果:...
  • 正確做法:...

1 第二條原則

...

工作流程

標準流程

1.步驟1
-具體動作
-檢查點:停低等用戶確認
2.步驟2
-具體動作
3.步驟3
-具體動作

異常處理

| 場景 | 觸發條件 | 處理動作 |

| 異常1 | 幾時發生 | 點樣做 |

| 異常2 | 幾時發生 | 點樣做 |

資源庫

Starter Components

| 文件 | 幾時用 | 提供 |

| 組件1 | 場景 | 功能 |

References

| 任務 | 讀 |

| 場景1 | 對應文檔 |

核心提醒

  • 提醒1
  • 提醒2
  • 提醒3

```

---

六、花叔嘅「秘密武器」

最後,花叔之所以可以將Skill寫得咁好,仲有幾個底層能力:

1. 領域深度

佢唔係「識少少設計」,而係對Pentagram、Field.io、Kenya Hara等20種設計哲學有深入理解。呢個令佢寫得出有品味嘅約束。

2. 對AI弱點嘅認知

佢知道AI會:

  • 憑記憶做斷言(所以要WebSearch驗證)
  • 產出AI slop(所以要寫反slop清單)
  • 悶頭做到尾(所以要設檢查點強制暫停)

3. 迭代思維

佢嘅Skill有版本歷史(v1 → v1.1),每個版本都係基於真實踩坑升級。DJI Pocket 4事件直接觸發「核心資產協議」嘅升級。

4. 量化思維

「5-10-2-8原則」、「成本對比:WebSearch 10秒 << 返工2個鐘」——用數字令原則可執行。

---

總結:Skill寫作嘅心法

好嘅Skill唔係「話畀AI做乜」,而係「構建一個令AI冇辦法做錯嘅系統」。

---

寫在最後
其實,我第一次寫Skill嘅時候,同而家嘅你一樣——唔知由邊度開始,唔知點樣組織內容,寫出嚟自己都唔敢用。
後來我發現,唔係我唔識寫,而係我將Skill諗複雜咗。Skill就好似一個工具,佢唔係用嚟展示你嘅知識有幾淵博,而係用嚟「解決一個具體問題」。
當你想清楚個問題,Skill自然就會清晰。
呢篇文章,就係我想將呢個認知傳遞畀你。
如果你都寫好咗第一個Skill,歡迎喺評論區話我知,我會為每一個認真回覆嘅人點讚。
---
呢篇文章,對你有幫助嗎?
如果覺得有用,㩒個「讚」,等我知道呢類內容你鍾意
如果想收藏備用,㩒個「收藏」,下次揾嘅時候唔會唔見
如果想第一時間睇到新內容,㩒上面嘅「關注」

>花叔的各種Skill之所以出色,不是因為他會寫 Markdown,而是因為他理解了 Skill 的底層邏輯。

---

圖片

核心洞察:Skill 的本質是什麼?

Skill = 你的專業知識 + 對 AI 行為的精確控制 + 可複用的工作系統

很多人寫Skill 的問題在於:把它當成了知識庫,或者簡單的提示詞模板。但真正頂級的 Skill,本質上是一個可執行的程序——有輸入、有輸出、有檢查點、有異常處理、有優先級規則。

---

一、花叔的 Skill 設計哲學(從他身上學到的)

圖片

1. "AI 是實習生,不是專家"

花叔在 SKILL.md 開頭就定義了角色:

>"你是一位用HTML工作的設計師,不是程序員。用戶是你的manager..."
訣竅:給AI 一個具體的身份和關係定位,而不是泛泛的"你是一個助手"。

2. "默認值是陷阱"

花叔花了大量篇幅定義反 AI slop 清單——因為 AI 的默認輸出就是訓練語料的"最大公約數",平庸且沒有品牌識別度。

訣竅:明確告訴AI不要做什麼,比告訴它做什麼更重要。

3. "流程即產品"

花叔把整個設計工作流拆解成:

  • 10 步標準流程(含 4 個檢查點 )
  • 8 階段 Fallback 模式
  • 5 步品牌資產協議
  • 異常處理表
訣竅:Skill 不是知識庫,是可執行的程序

---

二、Skill 寫作的 5 層架構模型

圖片

基於對 huashu-design 的分析,我總結出一個可複用的框架:

```

┌─────────────────────────────────────────┐

│ Layer 5: 觸發層 (Trigger) │

│ → 什麼時候加載這個 Skill? │

├─────────────────────────────────────────┤

│ Layer 4: 角色層 (Persona) │

│ → AI 應該扮演誰?和誰的關係是什麼? │

├─────────────────────────────────────────┤

│ Layer 3: 原則層 (Principles) │

│ → 不可違反的核心規則(按優先級排序) │

├─────────────────────────────────────────┤

│ Layer 2: 流程層 (Workflow) │

│ → 具體怎麼做?步驟、檢查點、異常處理 │

├─────────────────────────────────────────┤

│ Layer 1: 資源層 (Assets) │

│ → 組件、模板、參考文檔、腳本工具 │

└─────────────────────────────────────────┘

```

---

三、逐層拆解:花叔是怎麼做的

Layer 5: 觸發層 —— 精準識別場景

花叔的做法:

```

在 description 裏窮盡觸發詞

觸發詞:做原型、設計Demo、交互原型、HTML演示、動畫Demo、

設計變體、hi-fi設計、UI mockup、prototype、設計探索、

做個HTML頁面、做個可視化、app原型、iOS原型...

```

關鍵技巧:

  • 列出所有用戶可能用的表達方式
  • 區分主幹觸發詞和邊緣觸發詞
  • 明確不適用場景(如"生產級 Web App"就不該觸發)

---

Layer 4: 角色層 —— 定義身份和關係

花叔的做法:

>"你是一位用HTML工作的設計師,不是程序員"

>

>"用戶是你的manager,你產出深思熟慮、做工精良的設計作品"

>

>"根據任務 embody 對應領域的專家:動畫師/UX設計師/幻燈片設計師/原型師"

關鍵技巧:

  • 給 AI 一個具體的職業身份(不是"助手")
  • 定義與用戶的權力關係(上下級/合作伙伴/顧問)
  • 明確能力邊界(不是什麼都能做)

---

Layer 3: 原則層 —— 優先級排序

花叔的 6 條核心哲學(按優先級):

圖片

```

0 事實驗證先於假設(最高優先級)

1 從 existing context 出發,不要憑空畫

2 Junior Designer 模式:先展示假設,再執行

3 給 variations,不給「最終答案」

4 Placeholder > 爛實現

5 系統優先,不要填充

6 反 AI slop

```

關鍵技巧:

  • 原則必須有編號和優先級
  • 每條原則配觸發條件(什麼時候執行)
  • 每條原則配反例(真實踩過的坑)
  • 用檢查點強制暫停

花叔的反例寫法(非常有效):

```

反例(2026-04-20 真實踩過的坑):

-用戶:"給大疆 Pocket 4 做發佈動畫"
-我:憑記憶說"Pocket 4 還沒發佈,我們做概念 demo"
-真相:Pocket 4 已在 4 天前發佈
-後果:返工1-2 小時
-成本對比:WebSearch 10 秒 << 返工 2 小時

```

---

Layer 2: 流程層 —— 可執行的程序

花叔的標準流程(10 步):

```

1. 理解需求(含事實驗證)

2. 探索資源 + 抽核心資產

3. 先答四問,再規劃系統

4. 構建文件夾結構

5. Junior pass(assumptions + placeholders)

6. Full pass(填 placeholder,做 variations)

7. 驗證(Playwright 截圖)

8. 總結(極簡,只說 caveats 和 next steps)

9. 導出視頻(默認帶 SFX + BGM)

10. 可選:專家評審

```

每個步驟配:

  • 檢查點(必須停下等用戶確認)
  • 具體動作(不是模糊的建議)
  • 異常處理(如果 X 發生,做 Y)

異常處理表(花叔的寫法):

|    場景    |        觸發條件          |              處理動作                  |

| 需求模糊 | 用戶說"隨便做個設計" |        設計方向顧問模式             |

| 技術難點 |    超過現有資源能力   | Junior Designer 模式,展示假設 |

---

Layer 1: 資源層 —— 可複用的組件

花叔的資源組織:

```

assets/ 可複用組件

├── ios_frame.jsx iPhone 設備框

├── animations.jsx 動畫引擎

├── deck_stage.js 幻燈片組件

├── sfx/ 37個預製音效

└── showcases/ 24個預製樣例

references/ 參考文檔

├── workflow.md 工作流程

├── design-styles.md 20種設計哲學

├── animation-pitfalls.md 14條動畫避坑

└── ...

scripts/ 工具腳本

├── render-video.js 視頻渲染

├── export_deck_pptx.mjs PPT導出

└── verify.py 驗證腳本

```

---

四、快速轉化需求的 7 步法則

基於以上分析,這裏是從需求到 Skill 的實操方法:

Step 1: 定義你的"領域邊界"

問自己:

  • 這個 Skill 解決什麼問題?
  • 什麼問題它不解決?(明確排除)
  • 用戶通常在什麼場景下需要它?

花叔的例子:

>"專為「用HTML做視覺產出」的場景設計,不是給任何HTML任務用的萬能勺"
>適用:交互原型、幻燈片、動畫、信息圖
>不適用:生產級Web App、SEO 網站、需要後端的系統

---

Step 2: 給 AI 一個"職業身份"

不要寫:

>你是一個幫助用戶做設計的助手。

要寫:

>你是一位用HTML工作的設計師,不是程序員。
>用戶是你的manager,你產出深思熟慮、做工精良的設計作品。
>根據任務embody 對應領域的專家:動畫師/UX設計師/幻燈片設計師/原型師。
公式:身份+ 關係 + 能力邊界 + 動態角色

---

Step 3: 提煉你的"核心原則"

從你的經驗中提煉 3-7 條不可違反的原則,按優先級排序。

花叔的原則來源:

  • 真實踩過的坑(DJI Pocket 4 事件)
  • 行業最佳實踐(設計方向顧問模式)
  • 對 AI 弱點的認知(反 AI slop)

你的做法:

  • 回顧你做這個任務時最常犯的錯誤
  • 回顧用戶最常不滿意的地方
  • 把這些變成"原則 + 反例"

---

Step 4: 設計"工作流程"

把你的心智模型變成可執行的步驟。

壞寫法:

>先了解需求,然後做設計,最後交付。

好寫法(花叔):

>"1. 理解需求(含事實驗證)→ 2. 探索資源 → 3. 答四問再規劃系統
→ 4. 構建文件夾 → 5. Junior pass(寫assumptions+placeholders)
→ 6. Full pass → 7. 驗證 → 8. 總結 → 9. 導出 → 10. 評審"
關鍵:每個步驟要有明確的輸入、輸出、檢查點。

---

Step 5: 預設"異常處理"

花叔的 Skill 有 7 種異常處理。你要問自己:

  • 需求模糊時怎麼辦?
  • 技術難題時怎麼辦?
  • 用戶反饋不好時怎麼辦?
  • 超出能力範圍時怎麼辦?
  • 資源缺失時怎麼辦?
  • 時間不夠時怎麼辦?
  • 出現錯誤時怎麼辦?

---

Step 6: 準備"資源庫"

把可複用的東西提取出來:

| 類別 |          內容         |                    例子                   |

| 組件 | 可複用的代碼片段 | React組件、Python函數、CSS類 |

| 模板 | 標準化的文檔格式 | 報告模板、郵件模板、代碼模板    |

| 參考 | 知識庫和最佳實踐 |      設計規範、編碼規範、FAQ     |

| 工具 |      自動化腳本    |  渲染腳本、驗證腳本、導出腳本    |

---

Step 7: 寫"觸發詞"和"描述"

描述(description)要包含:
  • 能力概述(一句話)
  • 觸發詞列表(窮盡)
  • 主幹能力(3-5 個核心功能)
  • Fallback 機制(需求模糊時怎麼辦)
  • 可選功能(交付後的增值服務)

花叔的描述結構:

>花叔Design——用HTML做高保真原型、交互Demo、幻燈片、動畫、設計變體探索+設計方向顧問+專家評審的一體化設計能力。
>觸發詞:做原型、設計Demo、交互原型...
>主幹能力:Junior Designer工作流、反AI slop清單、React+Babel最佳實踐、Tweaks變體切換、Playwright驗證、HTML動畫→MP4/GIF導出...
>需求模糊時的Fallback:設計方向顧問模式——從5流派×20種設計哲學推薦3個差異化方向...
>交付後可選:專家級5維度評審...

---

五、一個極簡的 Skill 模板

基於以上分析,我為你寫了一個通用模板:

```

name: your-skill-name

version: "1.0.0"

description: |

一句話描述你的Skill解決什麼問題。

觸發詞:關鍵詞1、關鍵詞2、關鍵詞3...

主幹能力:能力1、能力2、能力3...

需求模糊時的Fallback:怎麼處理模糊需求...

交付後可選:增值服務...

---

你的Skill名稱

你是一位[具體身份],不是[容易混淆的身份]。
用戶是你的[關係]。

使用前提

適用場景

  • 場景1
  • 場景2

不適用場景

  • 排除1
  • 排除2

核心原則(按優先級)

0 最高優先級原則

>一句話定義
觸發條件:什麼時候執行
硬流程
1.步驟1
2.步驟2
3.步驟3
反例(真實踩過的坑):
  • 場景:...
  • 錯誤做法:...
  • 後果:...
  • 正確做法:...

1 第二條原則

...

工作流程

標準流程

1.步驟1
-具體動作
-檢查點:停下等用戶確認
2.步驟2
-具體動作
3.步驟3
-具體動作

異常處理

|  場景  |    觸發條件   | 處理動作 |

| 異常1 | 什麼時候發生 |  怎麼做   |

| 異常2 | 什麼時候發生 |  怎麼做  |

資源庫

Starter Components

| 文件  | 何時用 | 提供 |

| 組件1 |  場景  | 功能 |

References

| 任務  |     讀     |

| 場景1 | 對應文檔 |

核心提醒

  • 提醒1
  • 提醒2
  • 提醒3

```

---

六、花叔的"秘密武器"

最後,花叔之所以能把 Skill 寫得這麼好,還有幾個底層能力:

1. 領域深度

他不是"懂一點設計",而是對 Pentagram、Field.io、Kenya Hara 等 20 種設計哲學有深入理解。這讓他能寫出有品位的約束。

2. 對 AI 弱點的認知

他知道 AI 會:

  • 憑記憶做斷言(所以要求 WebSearch 驗證)
  • 產出 AI slop(所以寫反 slop 清單)
  • 悶頭做到底(所以設檢查點強制暫停)

3. 迭代思維

他的 Skill 有版本歷史(v1 → v1.1),每個版本都基於真實踩坑升級。DJI Pocket 4 事件直接觸發"核心資產協議"的升級。

4. 量化思維

"5-10-2-8 原則"、"成本對比:WebSearch 10 秒 << 返工 2 小時"——用數字讓原則可執行。

---

總結:Skill 寫作的心法

好的 Skill 不是"告訴 AI 做什麼",而是"構建一個讓 AI 無法做錯的系統"。

---

寫在最後
其實,我第一次寫 Skill 的時候,和現在的你一樣——不知道從哪裏開始,不知道怎麼組織內容,寫出來自己都不敢用。
後來我發現,不是我不會寫,而是我把 Skill 想複雜了。Skill 就像一個工具,它不是用來展示你的知識有多淵博,而是用來“解決一個具體問題”。
當你把問題想清楚,Skill 自然就清晰了。
這篇文章,就是我想把這個認知傳遞給你。
如果你也寫好了第一個 Skill,歡迎在評論區告訴我,我會為每一個認真回覆的人點贊。
---
這篇文章,對你有幫助嗎?
如果覺得有用,點個「贊」,讓我知道這類內容你喜歡
如果想收藏備用,點個「收藏」,下次找的時候不會丟
如果想第一時間看到新內容,點擊上方「關注」