前言¶

給客戶做方案演示時，常見的做法是打開 PPT 套模板，改配色、調對齊，最後導出 PDF 發過去。結果是文件打不開、動畫全丟、字體變了樣。前端工程師手裏有更順手的工具：直接產出一份 HTML 幻燈片，瀏覽器打開就能放映，動畫、交互、響應式都由代碼控制。

問題是，讓模型”寫一個 HTML 演示文稿”得到的往往是一份粗陋的靜態頁面：沒有統一的色彩和間距規範，元素隨意擺放，也沒有逐頁動畫。Frontend Slides 就是來解決這件事的 Skill，它把演示文稿的設計約束固化成可執行的規則，讓模型輸出可直接交付的成品。

這是什麼¶

Frontend Slides 是一個基於通用 SKILL.md 格式的前端製作 Skill，由 ken0122 發佈，上游倉庫在 ClawHub，版本 2.0.2，歸類爲 office-efficiency，當前評分 100000，下載量 28078，安裝 336。

它解決的問題是：用模型生成演示文稿時，視覺質量不穩定、風格不統一、PPT 內容無法直接複用。Skill 提供了一套風格預設、設計約束和參考文件，讓輸出從”能看”變成”能交付”。不需要 API Key。

核心功能¶

1、從零創建動畫 HTML 演示文稿。輸出是零依賴的單文件 HTML，完全在瀏覽器裏運行，不需要構建步驟。

2、從 PowerPoint 文件轉換。把現有 PPT 的內容提取出來，重新生成 HTML 版本，用於售前、客戶提案等已有素材的場景。

3、內置五種視覺風格預設。每種風格有明確的色彩、材質和適用場景：

• Future & Depth：磨砂玻璃加暗色模式，適合科技產品發佈、前沿探索。
• Efficiency & Speed：扁平風格加 Bento UI，適合工具、數據看板。
• Trust & Professional：瑞士極簡，靠排版和嚴格柵格，適合金融、企業方案。
• Care & Resonance：低飽和自然色加極端圓角，適合人文、品牌故事。
• Immersion & Expression：擬物材質加高對比情緒色，適合創意提案。

Skill 還給出風格選擇規則：方案演示走 Trust & Professional 或 Efficiency & Speed，產品發佈走 Future & Depth，品牌故事走 Care & Resonance，營銷創意走 Immersion & Expression。

4、強制設計系統約束。所有決策映射到一組有限的變量，不允許出現隨機值：

• 間距走 8 點柵格，只能是 8、12、16、20、24、32、40。
• 圓角默認從 rounded-[12px] 起，Care 風格可用 rounded-[24px] 或 rounded-full。
• 最小點擊熱區 44px，最小可讀字號 12px，正文 14px 或 16px，標題用 clamp() 做響應式縮放。
• 陰影必須用彌散光，形如 shadow-[0_10px_30px_rgba(0,0,0,0.08)]，禁止生硬陰影。
• 色彩由主色、互補色、鄰近色三者構成，不允許任意取色。

5、靜態頁面也要呈現完整交互狀態。這是最容易踩的坑：輸出雖然是靜態 HTML，但處理列表、導航、卡片組這類重複組件時，要把不同狀態直接寫進同一份 DOM，而不是依賴 Tailwind 的 hover 僞類。做法是給第一個卡片用默認狀態，第二個用 bg-white/10 模擬懸停，第三個用 border-cyan-400 模擬選中，這樣靜態截圖裏也能看到組件的全生命週期。

6、內置 2026 年的設計趨勢參考。四類趨勢可按內容主題選一到兩個融入設計：Ghostly Agency（透明預測式界面）、The Grain of Truth（噪點紋理與有機排版）、Liminal Multimodality（聲波與空間透視動效）、Emotional Sovereignty。Skill 頁面爲每個趨勢附了可直接使用的 CSS keyframes 示例。

安裝與啓用¶

上游倉庫提供的安裝命令如下。這是 ClawHub 側的寫法：

npx skills
openclaw skills install @ken0122/frontend-slides

SkillHub 側的座標是 @clawhub_ken0122/frontend-slides，對應頁面爲 https://www.skillhub.cn/skills/clawhub_ken0122/frontend-slides。

Cursor、Codex CLI、Claude Code 三類環境的安裝命令差異，在抓取到的官方頁面裏沒有分別說明，這裏不猜測。裝好後把 SKILL.md 交給模型，讓它按需讀取 reference/ 目錄下的參考文件即可。

典型用法¶

Skill 明確要求：生成 CSS、圖片處理、PPT 提取、HTML 結構、編輯按鈕或動畫代碼時，先讀 reference/ 下對應的文件，並配合 STYLE_PRESETS.md 取預設、查 CSS 注意事項，這樣輸出才完整正確。實際操作按這個順序走：

1、先把 PPT 或大綱內容交給模型，明確主題和目標受衆，讓它選風格。方案類內容就指定 Swiss Modern 或 Bento UI。

2、模型讀取 STYLE_PRESETS.md 拿到對應的配色、間距、圓角、陰影變量。

3、生成單文件 HTML。標題用 clamp() 縮放，正文 leading 設 1.5 或 1.6，正文 14px 或 16px，卡片類組件按”默認、懸停、選中”三態硬編碼。

4、加逐頁進入動畫和導航按鈕。動畫代碼參考 reference/ 裏的 animation 文件。

5、瀏覽器打開檢查一遍：截圖裏看三態是否都可見、間距是否符合 8 點柵格、有沒有出現任意色值。

一個可復現的最小場景：把一份產品發佈 PPT 交給 Skill，指定 Future & Depth 風格，輸出就是暗色磨砂玻璃質感的 HTML，帶逐頁 reveal 動畫，直接在瀏覽器放映。

適用場景與注意¶

適合這些場景：售前與銷售演示、客戶提案、產品發佈、技術分享、教學講義、內部彙報。尤其適合前端團隊直接交付，因爲產物就是 HTML，可以塞進任意部署管道。

需要留意的限制：

• 產出是單文件 HTML，不含可編輯的源文件概念。客戶若要繼續在 PPT 裏改，得把 HTML 當交付物而不是源文件。
• 風格選擇依賴模型判斷，給的輸入越具體（受衆、場合、品牌色）結果越準，只丟一句”做個演示文稿”容易在風格上搖擺。
• 動畫和交互狀態是硬編碼進 DOM 的，這是爲了讓靜態截圖也能展示完整狀態。如果改成純 CSS hover 方案，視覺在截圖裏會缺一態。
• 文件體積會隨頁數增長，單頁內容過多時要考慮拆分。
• PPT 轉換的質量取決於原文件結構，複雜的母版和動畫無法一一映射，轉換後需要人工過一遍。

結尾¶

Frontend Slides 的價值在於把”模型寫個幻燈片”這件事拉到了可交付的水準：風格預設、設計約束、參考文件都備齊了，產出是零依賴的 HTML，瀏覽器打開就能放映。對於常做方案演示、又不想把時間花在調樣式上的團隊，值得裝一個試試。

官方地址：https://api.skillhub.cn/org-k6bcf2fv/frontend-slides