前言¶
做演示文稿的人通常有兩條路：在 PowerPoint 裏拼，或者用前端技術寫網頁幻燈片。前者排版自由但動效和跨設備顯示受限，後者效果好但要寫大量 CSS，非設計師很難上手。Frontend Slides 這個 Skill 做的是第三條路：用自然語言描述需求，讓模型按一套既定的設計規範直接產出零依賴、動畫豐富的 HTML 演示文稿，既能從零創建，也能把 PPT 轉換過來。
這是什麼¶
Frontend Slides 是一個基於通用 SKILL.md 格式的 Agent Skill，座標 @ken0122/frontend-slides，發佈者 ken0122，上游倉庫位於 ClawHub（https://clawhub.ai/ken0122/frontend-slides），當前版本 2.0.2，分類 office-efficiency。它解決的問題是：讓沒有設計背景的人也能產出排版、配色、動效都達標的網頁演示文稿，並通過”看圖選風格”而不是填問卷的方式確定美學方向。
核心能力¶
下面是已覈實的功能點，均來自上游倉庫的 SKILL.md 說明。
- 兩條輸入路徑：從零創建演示文稿，或從 PowerPoint 文件轉換生成。
- 零依賴：產出的 HTML 完全在瀏覽器中運行，不依賴外部運行時或構建工具。
- 動畫豐富：內置 reveal 分級進場、懸浮、光暈脈衝等動效，並給出可直接使用的 CSS 片段。
- 風格預設：內置五類風格定位——Future & Depth（毛玻璃暗色）、Efficiency & Speed（扁平 + Bento UI）、Trust & Professional（瑞士極簡）、Care & Resonance（低飽和自然色 + 大圓角）、Immersion & Expression（擬物 + 高對比）。風格選擇規則寫在 SKILL.md 中，例如售前方案對應 Trust & Professional 或 Efficiency & Speed，產品發佈對應 Future & Depth。
- 視覺探索式美學確定：核心理念是 “show, don’t tell”，先讓用戶看到不同風格的效果，而不是用抽象問題詢問偏好。
- 系統完整性約束：顏色、間距（8 點網格：8/12/16/20/24/32/40）、圓角、最小點擊區域 44px、最小可讀字號 12px、正文 14px/16px、陰影類型都有明確取值範圍，不允許隨機值。
- 靜態可讀的交互狀態：因爲是靜態 HTML，要求在同一容器內硬編碼渲染組件的不同狀態（默認、hover、選中），而不是依賴 Tailwind 的
hover:僞類，保證截圖中能看到完整生命週期。 - 參考文件體系：生成 CSS、圖片處理、PPT 提取、HTML 結構、編輯按鈕或動畫代碼時，需要先讀取
reference/目錄下對應的文件，以及STYLE_PRESETS.md（預設與 CSS 注意事項），保證輸出完整正確。 - 2026 設計趨勢整合：SKILL.md 收錄 Ghostly Agency（預測式呈現、透明懸浮）、The Grain of Truth（噪點紋理、有機排版）、Liminal Multimodality（聲波、3D 透視）、Emotional Sovereignty 四類趨勢，要求根據內容主題選擇 1-2 個主導趨勢融入設計。
安裝與啓用¶
上游倉庫給出的安裝方式是通過 ClawHub 的 skills CLI：
openclaw skills install @ken0122/frontend-slides
頁面同時提示可通過 npx skills 使用 CLI 安裝。安裝後在支持 SKILL.md 的 Agent 環境（如 Cursor、Codex CLI、Claude Code 等）中按 Skill 座標調用即可。該 Skill 標籤爲 requires_api_key=false，不需要額外配置 API Key。
典型用法¶
以下是上游資料中可復現的用法，按”先定風格，再生成，最後校驗”的順序。
-
明確用途，觸發對應風格規則。例如用戶說”幫我做一份售前方案演示”，按 SKILL.md 的規則應選擇 Trust & Professional（Swiss Modern）或 Efficiency & Speed（Bento UI）。
-
讓 Agent 生成演示文稿。用戶只需給出主題、受衆和頁數要求，Agent 會先讀取
reference/下的對應文件與STYLE_PRESETS.md，再產出完整的 HTML 文件。 -
處理 PPT 輸入。用戶提供 .pptx 文件時，Skill 走 PPT 提取流程，從原文件中提取內容後按同一套設計規範重新排版。
-
校驗產出。檢查是否滿足系統約束：間距取值是否在 8 點網格內、圓角是否按風格預設、陰影是否爲柔和漫射光、交互狀態是否硬編碼可見。
SKILL.md 中給出的字體與動效約束可直接作爲驗收標準：
/* 懸浮動效（Ghostly Float 示例） */
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.ghostly-card { background: rgba(255,255,255,0.06); backdrop-filter: blur(12px); animation: float 4s ease-in-out infinite; }
/* 柔和漫射陰影（系統約束） */
shadow-[0_10px_30px_rgba(0,0,0,0.08)]
適用場景與注意¶
適合誰：銷售、售前、客戶提案等需要頻繁產出演示文稿但非設計崗位的人；教學、會議演講、內部彙報的製作者；想把已有 PPT 升級爲網頁格式的用戶。
限制與坑：
- 產出是靜態 HTML，交互狀態必須硬編碼，不能依賴
hover:僞類，否則截圖中看不到交互效果。 - 風格選擇受 SKILL.md 規則約束，不適合需要完全自定義、打破網格的創意設計。
- 顏色、間距、圓角都有取值範圍，超出範圍的”隨機感”設計不在該 Skill 的設計哲學內。
- 完整版演講表達工作流套件不在開源 Skill 中，官方說明需通過淘寶搜索「AI靈匣」店鋪獲取。
結尾¶
Frontend Slides 的價值在於把演示文稿的設計規範固化進 Skill，讓非設計師也能穩定產出排版、配色、動效達標的網頁幻燈片，同時保留從 PPT 遷移的入口。如果你需要的是零依賴、瀏覽器直開、風格可控的 HTML 演示文稿，這個 Skill 值得一試。
官方地址：https://clawhub.ai/ken0122/frontend-slides
分發地址：https://api.skillhub.cn/org-b6kzcl68/frontend-slides
