390 技能
📦

frontend-design

安全 73

建立突出且與眾不同的前端介面

由 pbakaus

一般 AI 生成的程式碼只會產生平淡無奇、模板化的設計。此技能教導大膽的美學方向和生產級的實作,創造令人難忘的使用者體驗。

Claude Codex Code(CC)
安裝
📦

delight

安全 70

透過愉悅的微互動改造介面

由 pbakaus

功能性介面通常給人冰冷且機械化的感覺。此技能添加了策略性的歡樂與人格特質,讓使用者在保持可用性的同時露出微笑。

Claude Codex Code(CC)
安裝
🎨

critique

安全 66

設計審查

由 pbakaus

獲得專業的 UX 設計回饋,識別 AI 生成的圖樣、視覺層級問題,以及可操作的改進建議,提升您的介面品質。

Claude Codex Code(CC)
安裝
🎨

colorize

安全 69

為您的設計添加策略性色彩

由 pbakaus

將灰色、無生氣的介面轉換為溫暖、吸引人的體驗。此技能應用有目的性的色彩理論來改善視覺層次和使用者愉悅感。

Claude Codex Code(CC)
安裝
📦

clarify

安全 70

改善不明確的 UX 文案與錯誤訊息

由 pbakaus

令人困惑的介面文字會讓使用者感到沮喪並增加支援成本。此技能將行話、模糊標籤和不佳的錯誤訊息轉換為清晰、友善的人類語言,有效引導使用者。

Claude Codex Code(CC)
安裝
🎨

bolder

安全 69

將沉悶設計轉化為大膽體驗

由 pbakaus

停止將就通用、容易被遺忘的介面。這項技能幫助 Claude 創造視覺上引人注目的設計,在保持可用性和無障礙標準的同時吸引使用者。

Claude Codex Code(CC)
安裝
📦

audit

安全 69

審計介面品質

由 pbakaus

不良的介面品質會損害使用者體驗,並使身心障礙使用者被排除在外。此技能提供跨無障礙設計、效能、主題化和響應式設計的系統性審計,以在問題進入生產環境前予以識別。

Claude Codex Code(CC)
安裝
📐

arrange

安全 69

以有意義的間距與節奏轉換版面配置

由 pbakaus

消除單調的網格和隨意的間距。此技能提供系統化的方法,透過有意義的間距、多樣的節奏和結構化的版面配置來建立視覺層次,引導視線聚焦於重要內容。

Claude Codex Code(CC)
安裝

animate

安全 69

新增有意義的動畫與微互動

由 pbakaus

靜態介面會讓人感覺未完成,並錯失引導使用者的機會。此技能可協助您策略性地新增動畫,提供回饋、改善理解,並創造愉悅的體驗,而不會讓使用者感到負擔過重。

Claude Codex Code(CC)
安裝
📦

adapt

安全 69

為任何螢幕或平台調整設計

由 pbakaus

苦惱於讓您的設計在手機、平板電腦、桌面、列印或電子郵件上都能正常運作嗎?此技能提供專業指導,幫助您在不同的環境中調整設計,同時保持一致性和可用性。

Claude Codex Code(CC)
安裝
📦

liquid-glass

安全 70

為 SwiftUI 應用程式添加 Liquid Glass 效果

由 patrickserrano

建構現代 iOS 介面需要實作進階的視覺效果。本技能提供使用 iOS 26+ Liquid Glass API 在 SwiftUI 中建立模糊、反射和互動式玻璃表面的指南和程式碼範例。

Claude Codex Code(CC)
安裝
📱

app-store-screenshots

安全 70

Generate App Store Screenshots with Claude

由 ParthJadhav

建立專業的 App Store 螢幕截圖既繁瑣又耗時。此技能使用 Next.js 和 html-to-image 生成符合蘋果所需解析度的行銷優化 iOS 螢幕截圖。

Claude Codex Code(CC)
安裝
🎨

mulerouter

安全 81

使用 MuleRouter 生成 AI 圖片和影片

由 openmule

建立專業的 AI 生成媒體需要複雜的 API 整合和模型管理。MuleRouter 技能透過提供統一的介面來簡化這個過程,使用最先进的 AI 模型生成圖片和影片。

Claude Codex Code(CC)
安裝
📦

ckm:design

中風險 68

使用 AI 設計標誌、品牌識別與社群媒體視覺素材

由 nextlevelbuilder

專業設計通常需要聘請設計師或學習複雜的軟體。此技能可透過 AI 直接根據您的描述,生成標誌、品牌識別文件、社群媒體圖片、橫幅、圖示及簡報。

Claude Codex Code(CC)
安裝
📦

ckm:design-system

低風險 72

產生設計權杖、驗證使用方式,並建立品牌投影片

由 nextlevelbuilder

設計系統常因權杖在基礎層、語意層和元件層之間未一致套用而崩壞。此技能可從 JSON 權杖定義產生 CSS 變數、驗證程式碼中的權杖使用情況,並透過 Chart.js 整合建立符合品牌規範的投影片簡報。

Claude Codex Code(CC)
安裝
📦

gif-sticker-maker

中風險 68

將照片製作成動畫 GIF 貼紙

由 MiniMax-AI

將任何照片轉換為一組四張具有獨特 Funko Pop 3D 公仔風格的動畫貼紙。此技能處理從影像生成到動畫製作再到最終 GIF 輸出的完整工作流程,只需一張來源照片和一個 MiniMax API 金鑰即可。

Claude Codex Code(CC)
安裝
🎨

design-style-skill

安全 70

將視覺設計系統套用至 PPT 投影片

由 MiniMax-AI

不一致的樣式會讓簡報投影片看起來不專業且分散注意力。此技能提供四種預設設計風格配方,包含精確的圓角與間距數值,讓每張投影片都遵循統一的視覺系統。

Claude Codex Code(CC)
安裝
📦

color-font-skill

安全 71

為簡報新增色彩調色盤與字型配對

由 MiniMax-AI

為簡報選擇色彩和字型通常耗時且容易導致設計不一致。此技能提供經過精選、符合品牌安全的色彩調色盤與字型配對,針對 PowerPoint 簡報進行最佳化。

Claude Codex Code(CC)
安裝
🎨

design-an-interface

安全 74

使用平行子代理設計更好的介面

由 mattpocock

設計師往往在沒有探索替代方案的情況下就接受了第一個介面想法。此技能採用「設計兩次」(Design It Twice) 方法論,使用平行子代理生成截然不同的介面設計以進行比較和綜合。

Claude Codex Code(CC)
安裝
🖼️

nano-image-generator

安全 76

使用 Gemini 3 Pro 搭配風格參考圖生成圖片

由 lxfater

為專案建立視覺資產通常需要昂貴的設計工具或手動插圖。此技能可透過 Google Gemini 3 Pro Preview API 立即生成圖片,並支援參考圖片以在多個資產中保持一致的風格和角色外觀。

Claude Codex Code(CC)
安裝