design-system

適用於網頁與行動端的UI/UX設計智慧。包含50多種樣式、161組色彩調色盤、57組字體搭配、161種產品類型、99條UX指南，以及橫跨10個技術棧（React、Next.js、Vue、Svelte、SwiftUI、React Native、Flutter、Tailwind、shadcn/ui 與 HTML/CSS）的25種圖表類型。操作功能：規劃、建置、建立、設計、實作、審查、修正、改善、最佳化、增強、重構及檢查UI/UX程式碼。專案類型：網站、登陸頁面、儀表板、管理後台、電子商務、SaaS、作品集、部落格等。

Token 架構、元件規格與投影片生成。三層 Token（原始→語意→元件）、CSS 變數、間距/字型比例、元件規格、策略性投影片製作。適用於設計 Token、系統化設計、符合品牌規範的簡報。

全方位設計技能：品牌識別、設計標記、UI樣式、標誌生成（55種風格，Gemini AI）、企業識別方案（50項交付物，CIP模擬圖）、HTML簡報（Chart.js）、橫幅設計（22種風格，社群/廣告/網頁/印刷）、圖示設計（15種風格，SVG，Gemini 3.1 Pro）、社群照片（HTML→截圖，多平台）。動作：設計標誌、建立CIP、生成模擬圖、製作投影片、設計橫幅、生成圖示、建立社群照片、社群媒體圖片、品牌...

使用 shadcn/ui 元件（基於 Radix UI + Tailwind 建構）、Tailwind CSS 工具優先樣式及基於畫布的視覺設計，打造美觀且無障礙的使用者介面。適用於建構使用者介面、實作設計系統、建立響應式版面、新增無障礙元件（對話框、下拉選單、表單、表格）、自訂主題與色彩、實作深色模式、產生視覺設計與海報，或在應用程式中建立一致的樣式模式。

品牌語調、視覺識別、訊息框架、資產管理、品牌一致性。適用於品牌內容、語氣、行銷素材、品牌合規、風格指南。

使用 Chart.js、設計標記、響應式佈局、文案撰寫公式及情境式投影片策略，建立具策略性的 HTML 簡報。

為社交媒體、廣告、網站主視覺、創意素材及印刷品設計橫幅。提供多種藝術方向選項，搭配AI生成視覺效果。動作：設計、創作、生成橫幅。平台：Facebook、Twitter/X、LinkedIn、YouTube、Instagram、Google Display、網站主視覺、印刷品。風格：極簡、漸層、粗體字型、照片式、插畫風、幾何、復古、玻璃擬態、3D、霓虹、雙色調、編輯式、拼貼。使用ui-ux-pro-max、frontend-design、ai-artist、ai-multimodal技能。

We need to translate the given text from English to Traditional Chinese. The instruction says to preserve product names, protocol names, URLs, numbers, and technical terms. The name "design" is to be preserved only if it appears in the source text. It does appear: "Comprehensive design skill" and later "design logo", etc. So we keep "design" as is. Also preserve "Gemini AI", "Chart.js", "Gemini 3.1 Pro", "SVG", "HTML", "CIP", "UI styling", "brand identity", "design tokens", etc. Numbers like 55, 50, 22, 15 should be preserved. The text inside <text> is the only thing to translate. No extra labels. Output only the translation. Let's translate carefully: "Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini AI), corporate identity program (50 deliverables, CIP mockups), HTML presentations (Chart.js), banner design (22 styles, social/ads/web/print),