ワンクリックで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