創建符合 Slack 大小限制的動態 GIF。使用可組合的基本動畫效果如搖晃、彈跳、旋轉、脈動、淡化、縮放和爆炸來構建動畫。驗證表情符號和訊息 GIF 的檔案大小和尺寸。

圖片在壓縮或編輯過程中經常會損失品質。此技能可提升解析度、銳利度和清晰度，同時保留原始檔。非常適合從任何圖片創建專業視覺效果。

建立視覺資產需要專業工具和設計技能。此技能透過 OpenRouter 支援 AI 驅動的影像生成和編輯，支援 FLUX 和 Gemini 模型，可用於建立照片、插圖、藝術品和視覺概念。

一般 AI 生成的前端程式碼通常缺乏創意視野和令人難忘的美感。本技能指導 Claude 創建生產級的、視覺上引人注目的介面，具有大膽的設計選擇、獨特的排版和連貫的美學方向。

使用者難以創作出精緻、博物館級的視覺設計。此技能提供了一套結構化的設計理念方法，指導創作原創的藝術視覺作品，支援 PNG 或 PDF 格式。

使用 Anthropic 的品牌識別創建專業文件和簡報。此技能提供官方顏色和字體指南,確保所有文件的視覺樣式保持一致。

網頁無障礙問題可能會使身心障礙使用者無法訪問您的網站。此技能提供全面的指導,協助實作 WCAG 2.1 標準、ARIA 屬性和鍵盤導航,為所有使用者創造包容性的體驗。

手動從截圖和模型中提取設計標記既耗時又容易出錯。此技能使用 7 遍 AI 流程系統化地提取顏色、字體、間距、元件和無障礙詳細資料，生成符合 W3C DTCG 標準的 JSON 格式，準備用於程式碼生成。

通用字體會讓設計看起來業餘。此技能提供專業的排版指南,使用精選的字體推薦來創建視覺上引人注目且專業的文字佈局。

AI 助理通常會生成平庸、視覺上乏味的前端介面,被用戶稱為「AI 垃圾」。此技能提供字體排版、配色方案、動態效果和背景的設計指導,以創建獨特、精緻且脫穎而出的介面。

Figma MCP 產生的程式碼包含專有變數(如 var(--spacing-4)),會造成維護問題。此技能提供清晰的轉換規則,將這些變數轉換為標準 Tailwind CSS 類別,產生更乾淨、更易於維護的前端程式碼。

網頁動畫常常無法通過無障礙測試並影響效能。這個技能提供生產環境就緒的 GSAP 模式，能尊重使用者偏好並保持 60fps。

使用專業策劃的配色方案和字體搭配，建立視覺上一致的簡報。透過套用現成的主題來節省時間，而非從頭開始設計。

由於嚴格的大小限制和格式要求，為 Slack 建立動畫 GIF 具有挑戰性。此技能提供驗證器來檢查 Slack 限制、可組合的動畫原語，以及用於建立符合平台規範的專業動畫 GIF 和表情符號的實用工具。

使用者難以向 AI 助理傳達複雜的視覺設計概念。此技能提供結構化的設計哲學框架,將抽象想法轉化為精緻的 PNG 或 PDF 格式視覺藝術。

在不影響性能或無障礙性的情況下,為登陸頁面和演示添加精緻的動畫。Visual Engine Skill 自動處理時間控制、緩動函數和安全的動效模式。

行銷團隊在將創意轉化為影片製作計畫時常遇困難。此技能提供結構化框架,涵蓋吸睛開場、腳本、鏡頭清單,以及針對 YouTube、TikTok、Instagram 和 LinkedIn 的平台專屬指南。

產生符合設計系統規範的一致且可存取的 UI 元件。確保每個元件具有視覺獨特性、品牌一致性和可存取性合規性。

為 React 應用程式建立一致且具響應性的樣式需要理解多種 CSS 方法。此技能提供可立即使用的 Tailwind CSS、CSS Modules 和元件變體模式,以提升開發速度。

不再需要從零開始手動編寫 UI 元件。此技能使用 shadcn/ui 和現代最佳實踐，生成無障礙、響應式的 UI 元件和意見回饋表單。