esthersjw/esther-design-system

© 2026 ESTHER不二 (esthersjw) | CC BY-NC-SA 4.0 使用本 Skill 需署名原作者，禁止商用，修改后须以相同协议分享。

触发条件：当用户要求制作 HTML 網頁、個人頁面、教學頁面、介紹型頁面、Landing Page、活動頁面、App 型頁面、作品集等任何前端設計相關任務時觸發。也在用戶說「做圖文」、「圖文卡片」、「小紅書圖文」、「文章轉卡片」、「轉成圖文」、「做卡片」時觸發。

使用方式（7 步工作流程）

Step 1: 釐清需求

向用戶確認 5 個問題：

1. 類型 — 教學/介紹/科普？活動頁/Landing？App 型/功能型？圖文卡片？ 公眾號排版？
2. 受眾 — 給誰看的？技術水平？
3. Section 數 — 大概幾屏內容？
4. 素材 — 有哪些文案/圖片/數據？
5. 硬約束 — 必須包含什麼？有沒有合作品牌色？

Step 2: 讀取規範

1. 必讀 brand-dna.md — 確認品牌底層規範
2. 根據類型選讀場景文件：
   • 教學型/介紹型/科普型 → references/scene-tutorial.md
   • 活動頁/分享會/Landing → references/scene-landing.md
   • App 型/功能型（看板/書架/Canvas） → references/scene-app.md
   • 圖文卡片/小紅書圖文/文章轉卡片 → references/scene-cards.md
   • 公眾號排版/做分發 → references/scene-wechat.md

Step 3: 拷貝模板

從 assets/ 選擇對應模板作為起點：

• 教學型 → assets/template-tutorial.html
• 活動頁/Landing → assets/template-landing.html
• App 型/功能型 → assets/template-app.html
• 圖文卡片 → assets/template-cards.html

從模板開始改，不從零寫。

Step 4: 選擇佈局組合

從 references/layouts.md 中選取 3~5 種佈局模式，為每個 section 分配不同佈局。

每個 section 佈局必須不同。

（圖文卡片模式：參考 scene-cards.md 中的推薦排版手法，為每頁選擇不同手法。）

Step 5: 選取元件填充

從 references/components.md 中選取元件填入各 section。

硬規則：禁止使用任何 HTML 預設樣式。 所有引用區塊、列表、表格、卡片必須從 components.md 裡選用對應元件的程式碼。不允許使用預設 <blockquote>、預設 border-left 引用、無樣式 <ul>/<ol>、預設 <table>。如果在 components.md 裡找不到合適的，自己設計一個符合 brand-dna 規範的，但絕不能用瀏覽器預設樣式。

Step 6: 自行檢查

對照 references/checklist.md 逐條檢查：

• P0 必須全過 — 任何一條不過就要改
• P1 應過 — 盡量滿足
• P2 加分 — 錦上添花

（圖文卡片模式：額外對照 scene-cards.md 底部的 Checklist；公眾號模式：額外對照 scene-wechat.md 底部的 Checklist，逐項檢查標題是否發生非語義斷行或英文斷詞。）

Step 7: 交付

輸出最終 HTML 檔案，確保可直接在瀏覽器開啟。

場景類型速查

類型	場景文件	模板
教學型/介紹型/科普型	references/scene-tutorial.md	assets/template-tutorial.html
活動頁/分享會/Landing	references/scene-landing.md	assets/template-landing.html
App 型/功能型	references/scene-app.md	assets/template-app.html
圖文卡片/小紅書圖文	references/scene-cards.md	assets/template-cards.html
公眾號排版	references/scene-wechat.md	assets/template-wechat.html

關鍵原則

• 從模板開始改，不從零寫 — 模板已內建品牌變數與基礎結構
• 每個 section 佈局必須不同 — 避免單調重複，從 layouts.md 選不同模式
• 做完必須跑 checklist — P0 全過才能交付

禁忌

嚴格遵守 brand-dna.md 的禁忌清單，不在此重複。核心底線：截圖發 Twitter 不會被說「又是 AI 做的」。