Menu
CIS (Corporate Identity System) 設計規範建立與維護。前端專案的色彩、字型、間距、元件用途統一定義。新專案建立時或前端修改時自動觸發，確保設計一致性。
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with AI-generated visuals. Actions: design, create, generate banner. Platforms: Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, website hero, print. Styles: minimalist, gradient, bold typography, photo-based, illustrated, geometric, retro, glassmorphism, 3D, neon, duotone, editorial, collage. Uses ui-ux-pro-max, frontend-design, ai-artist, ai-multimodal skills.
Brand voice, visual identity, messaging frameworks, asset management, brand consistency. Activate for branded content, tone of voice, marketing assets, brand compliance, style guides.
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), icon design (15 styles, SVG, Gemini 3.1 Pro), social photos (HTML→screenshot, multi-platform). Actions: design logo, create CIP, generate mockups, build slides, design banner, generate icon, create social photos, social media images, brand identity, design system. Platforms: Facebook, Twitter, LinkedIn, YouTube, Instagram, Pinterest, TikTok, Threads, Google Ads.
Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component specs, strategic slide creation. Use for design tokens, systematic design, brand-compliant presentations.
Create strategic HTML presentations with Chart.js, design tokens, responsive layouts, copywriting formulas, and contextual slide strategies.
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.
| name | cis-design-system |
| description | CIS (Corporate Identity System) 設計規範建立與維護。前端專案的色彩、字型、間距、元件用途統一定義。新專案建立時或前端修改時自動觸發，確保設計一致性。 |
| source | 自建 |
| updated | "2026-04-04T00:00:00.000Z" |
自動觸發（hook 強制）：
.css / .tsx / .vue / .scss / tailwind 相關檔案時手動觸發：
/cis-design-system — 建立或更新 CIS 文件每個前端專案必須有：wireframes/cis-design-tokens.html
1. 讀取 globals.css / tailwind config 萃取所有 CSS 變數
2. 讀取 package.json 確認 UI 框架（shadcn/PrimeVue）
3. 讀取字型設定（layout.tsx / fonts）
4. 生成 cis-design-tokens.html，包含以下區塊：
1. 偵測修改了哪些前端檔案
2. 檢查修改內容是否涉及色彩/字型/間距/元件
3. 若涉及 → 比對 CIS 文件是否需更新
4. 若不一致 → block 並提示更新 CIS
每個區塊有固定編號，方便討論時引用（如「調整 C1.3 的深色值」）。
| 編號 | 內容 |
|---|---|
| C1.1 | 品牌色（primary / accent，雙主題） |
| C1.2 | 背景色（background / card / muted / input） |
| C1.3 | 文字色（foreground / muted-foreground / dim） |
| C1.4 | 邊框色（border / ring） |
| C1.5 | 語意色（destructive / success / warning） |
| C1.6 | 領域專用色（如運勢等級、特殊日、七曜） |
每個色必須列：Token 名 / Light 值 / Dark 值 / 用途說明
| 編號 | 內容 |
|---|---|
| C2.1 | 字型家族定義（serif / sans / mono） |
| C2.2 | 字級表（名稱 / 大小 / 字重 / 用途） |
| C2.3 | 行高規則 |
| 編號 | 內容 |
|---|---|
| C3.1 | 基數定義（如 4px） |
| C3.2 | 間距階梯（gap-sm / gap-md / gap-lg） |
| C3.3 | 元件內距（card padding / page padding） |
| 編號 | 內容 |
|---|---|
| C4.1 | 圓角階梯（radius-sm / radius / radius-lg / radius-xl） |
| C4.2 | 特殊圓角（pill / circle） |
| 編號 | 內容 |
|---|---|
| C5.1 | 每個 UI 元件該用哪個 token |
| C5.2 | Badge 色彩規則（bg 透明度 + text 實色） |
| C5.3 | 卡片色彩規則 |
| C5.4 | 互動狀態（hover / active / focus） |
| 編號 | 內容 |
|---|---|
| C6.1 | 禁用 hardcode hex/rgb |
| C6.2 | 禁用非原典術語（專案特定） |
| C6.3 | 禁用 emoji |
| C6.4 | 其他專案特定禁止項 |
| 編號 | 內容 |
|---|---|
| C7.x | 由專案自行定義的領域色彩、術語色彩等 |
修改前端檔案時，hook 檢查以下項目：
# 萃取現有專案的設計 token
/cis-design-system
# 步驟：
# 1. 掃描 globals.css → 萃取所有 CSS 變數
# 2. 掃描 components.json → 確認 UI 框架設定
# 3. 掃描 layout.tsx → 確認字型
# 4. 掃描 tailwind config → 確認客製化設定
# 5. 生成 wireframes/cis-design-tokens.html
# 6. 輸出變更摘要
用戶: 「C1.6 的甘露日金色太亮了，深色模式要暗一點」
Claude: 調整 C1.6 kanro dark 從 #d4af37 → #b8941f，同步更新 globals.css + CIS 文件
用戶: 「C5.2 的 badge 透明度統一改 15%」
Claude: 更新所有 badge bg 從 12% → 15%，影響 C1.5/C1.6 所有 -bg token