원클릭으로 Manus에서 모든 스킬 실행

시작하기

cis-design-system

스타1

포크0

업데이트2026년 4월 5일 02:11

CIS (Corporate Identity System) 設計規範建立與維護。前端專案的色彩、字型、間距、元件用途統一定義。新專案建立時或前端修改時自動觸發，確保設計一致性。

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

Manus에서 실행

출처

seikaikyo

seikaikyo/dash-skills

GitHub 저장소 열기 Creator 저장소 보기

다운로드

Manus에서 실행

CIS Design System

When to Use

自動觸發（hook 強制）：

編輯 .css / .tsx / .vue / .scss / tailwind 相關檔案時
新增/修改 UI 元件時
修改色彩、字型、間距時

手動觸發：

/cis-design-system — 建立或更新 CIS 文件
新專案初始化時

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，包含以下區塊：

前端修改時（hook 觸發）

1. 偵測修改了哪些前端檔案
2. 檢查修改內容是否涉及色彩/字型/間距/元件
3. 若涉及 → 比對 CIS 文件是否需更新
4. 若不一致 → block 並提示更新 CIS

CIS 文件必須包含的區塊（附編號）

每個區塊有固定編號，方便討論時引用（如「調整 C1.3 的深色值」）。

C1 — 色彩系統

編號	內容
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 — 字型系統

編號	內容
C2.1	字型家族定義（serif / sans / mono）
C2.2	字級表（名稱 / 大小 / 字重 / 用途）
C2.3	行高規則

C3 — 間距系統

編號	內容
C3.1	基數定義（如 4px）
C3.2	間距階梯（gap-sm / gap-md / gap-lg）
C3.3	元件內距（card padding / page padding）

C4 — 圓角系統

編號	內容
C4.1	圓角階梯（radius-sm / radius / radius-lg / radius-xl）
C4.2	特殊圓角（pill / circle）

C5 — 元件色彩對照

編號	內容
C5.1	每個 UI 元件該用哪個 token
C5.2	Badge 色彩規則（bg 透明度 + text 實色）
C5.3	卡片色彩規則
C5.4	互動狀態（hover / active / focus）

C6 — 禁止事項

編號	內容
C6.1	禁用 hardcode hex/rgb
C6.2	禁用非原典術語（專案特定）
C6.3	禁用 emoji
C6.4	其他專案特定禁止項

C7 — 專案特定定義

編號	內容
C7.x	由專案自行定義的領域色彩、術語色彩等

比對規則

修改前端檔案時，hook 檢查以下項目：

新增顏色 — 是否在 CIS C1 中有定義？
修改 CSS 變數 — CIS 文件是否同步更新？
新增元件 — C5 元件對照是否更新？
修改字型 — C2 是否同步？
修改間距 — C3 是否同步？

生成指令

# 萃取現有專案的設計 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

이 저장소의 다른 Skills

같은 저장소

banner-design

seikaikyo/dash-skills

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.

2026-06-251

brand

seikaikyo/dash-skills

Brand voice, visual identity, messaging frameworks, asset management, brand consistency. Activate for branded content, tone of voice, marketing assets, brand compliance, style guides.

2026-06-251

design

seikaikyo/dash-skills

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.

2026-06-251

design-system

seikaikyo/dash-skills

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.

2026-06-251

slides

seikaikyo/dash-skills

Create strategic HTML presentations with Chart.js, design tokens, responsive layouts, copywriting formulas, and contextual slide strategies.

2026-06-251

ui-styling

seikaikyo/dash-skills

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.

2026-06-251

name	cis-design-system
description	CIS (Corporate Identity System) 設計規範建立與維護。前端專案的色彩、字型、間距、元件用途統一定義。新專案建立時或前端修改時自動觸發，確保設計一致性。
source	自建
updated	"2026-04-04T00:00:00.000Z"

CIS Design System

When to Use

自動觸發（hook 強制）：

編輯 .css / .tsx / .vue / .scss / tailwind 相關檔案時
新增/修改 UI 元件時
修改色彩、字型、間距時

手動觸發：

/cis-design-system — 建立或更新 CIS 文件
新專案初始化時

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，包含以下區塊：

前端修改時（hook 觸發）

1. 偵測修改了哪些前端檔案
2. 檢查修改內容是否涉及色彩/字型/間距/元件
3. 若涉及 → 比對 CIS 文件是否需更新
4. 若不一致 → block 並提示更新 CIS

CIS 文件必須包含的區塊（附編號）

每個區塊有固定編號，方便討論時引用（如「調整 C1.3 的深色值」）。

C1 — 色彩系統

編號	內容
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 — 字型系統

編號	內容
C2.1	字型家族定義（serif / sans / mono）
C2.2	字級表（名稱 / 大小 / 字重 / 用途）
C2.3	行高規則

C3 — 間距系統

編號	內容
C3.1	基數定義（如 4px）
C3.2	間距階梯（gap-sm / gap-md / gap-lg）
C3.3	元件內距（card padding / page padding）

C4 — 圓角系統

編號	內容
C4.1	圓角階梯（radius-sm / radius / radius-lg / radius-xl）
C4.2	特殊圓角（pill / circle）

C5 — 元件色彩對照

編號	內容
C5.1	每個 UI 元件該用哪個 token
C5.2	Badge 色彩規則（bg 透明度 + text 實色）
C5.3	卡片色彩規則
C5.4	互動狀態（hover / active / focus）

C6 — 禁止事項

編號	內容
C6.1	禁用 hardcode hex/rgb
C6.2	禁用非原典術語（專案特定）
C6.3	禁用 emoji
C6.4	其他專案特定禁止項

C7 — 專案特定定義

編號	內容
C7.x	由專案自行定義的領域色彩、術語色彩等

比對規則

修改前端檔案時，hook 檢查以下項目：

新增顏色 — 是否在 CIS C1 中有定義？
修改 CSS 變數 — CIS 文件是否同步更新？
新增元件 — C5 元件對照是否更新？
修改字型 — C2 是否同步？
修改間距 — C3 是否同步？

生成指令

# 萃取現有專案的設計 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