技能 ckm:design-system
📦

ckm:design-system

低風險 ⚙️ 外部命令📁 檔案系統存取🌐 網路存取🔑 環境變數⚡ 包含腳本

產生設計權杖、驗證使用方式,並建立品牌投影片

設計系統常因權杖在基礎層、語意層和元件層之間未一致套用而崩壞。此技能可從 JSON 權杖定義產生 CSS 變數、驗證程式碼中的權杖使用情況,並透過 Chart.js 整合建立符合品牌規範的投影片簡報。

支援: Claude Codex Code(CC)
🥉 72 青銅
1

下載技能 ZIP

2

在 Claude 中上傳

前往 設定 → 功能 → 技能 → 上傳技能

3

開啟並開始使用

測試它

正在使用「ckm:design-system」。 從我的 tokens.json 產生 CSS 設計權杖,並為我的 Next.js 專案建立 Tailwind 設定。

預期結果:

  • CSS 輸出包含三層權杖結構,以 :root 區塊組織,包括基礎層、語意權杖和元件權杖
  • Tailwind 設定檔包含引用 CSS 變數的顏色對應,可供 tailwind.config.js 使用

正在使用「ckm:design-system」。 為一家金融科技新創公司建立一份 5 頁的提案簡報,包含營收圖表。

預期結果:

  • HTML 檔案包含品牌投影片組,包括標題頁、問題頁、含卡片式說明的解決方案頁、營收成長長條圖頁和行動呼籲頁
  • CSS 引用所有顏色、字型和間距的設計權杖,以確保品牌合規

正在使用「ckm:design-system」。 找出最能呈現四個產品線季度營收成長的圖表類型。

預期結果:

  • 圖表建議:分組長條圖,適合比較多個產品線在不同季度的表現
  • 依情境提供的使用時機、應避免的情況以及 Chart.js 實作注意事項

安全審計

低風險
v1 • 5/26/2026

Static analysis flagged 561 potential issues (risk score 100/100), but AI evaluation confirms nearly all are false positives. Over 400 'Weak cryptographic algorithm' detections are hex color codes in design token CSV data and CSS examples (e.g. #2563EB). Over 150 'Shell backtick execution' detections are shell command examples in Markdown documentation and legitimate build tool invocations. The only true positive is subprocess.run in slide-token-validator.py which delegates to an internal validation script with low risk. The skill is a legitimate design system toolkit with no malicious intent, no credential exfiltration, and no command injection vulnerabilities.

26
已掃描檔案
4,805
分析行數
14
發現項
1
審計總數
低風險問題 (9)
Hex color values in design token data flagged as cryptographic algorithms
FALSE POSITIVE: Over 400 'Weak cryptographic algorithm' detections. The static analyzer matched hex color codes (e.g. #2563EB, #F59E0B, #0D0D0D) in CSV design data files and CSS documentation examples. These are design token color values, not cryptographic material. Design system data and CSS documentation legitimately contain hex color codes for brand colors, UI colors, and CSS examples.
Shell command examples in Markdown documentation
FALSE POSITIVE: Over 150 'Ruby/shell backtick execution' detections in Markdown reference files. These are code examples showing users how to run commands like 'node scripts/generate-tokens.cjs' or 'python scripts/search-slides.py'. They are documentation, not executable code being injected at runtime. No dynamic command construction from user input.
Hardcoded image URLs in fetch-background.py
FALSE POSITIVE: Curated Pexels stock photo URLs hardcoded in fetch-background.py. These are pre-selected, free-to-use images for slide backgrounds. URLs point to images.pexels.com, a legitimate stock photography platform. No credential exfiltration or malicious network activity.
subprocess.run delegation in slide-token-validator.py
TRUE POSITIVE (low risk): Script uses subprocess.run to delegate validation to html-token-validator.py with sys.argv[1:] forwarded as arguments. This is a standard wrapper pattern. Risk is low because it only calls a known internal validator script.
Path traversal sequence in generate-slide.py
FALSE POSITIVE: The string '../../../assets/design-tokens.css' on line 632 is a computed relative path from the slide output directory to the shared design tokens CSS file. This is a hardcoded constant, not user-controlled input. No path traversal vulnerability exists.
Standard filesystem operations in build and validation scripts
FALSE POSITIVE: Node.js fs operations detected in embed-tokens.cjs, generate-tokens.cjs, and validate-tokens.cjs. These are standard file I/O operations for reading design token files, writing CSS output, and scanning codebases for token compliance. All operations are local to the project directory.
Chart.js CDN URL in SKILL.md
FALSE POSITIVE: Hardcoded URL 'https://cdn.jsdelivr.net/npm/chart.js@4.4.1/...' in SKILL.md line 190. This is a legitimate CDN URL for the Chart.js library used in slide HTML generation. It is a static reference, not dynamically constructed.
Dynamic import pattern in search-slides.py
FALSE POSITIVE: 'Dynamic import() expression' detected at line 10. This is actually a standard Python 'from slide_search_core import ...' statement. The static analyzer misidentified the Python import syntax as a dynamic JavaScript import expression.
Heuristic dangerous combination warning
FALSE POSITIVE: The heuristic analyzer flagged a 'dangerous combination' of code execution, network, and credential access across the codebase. Evaluation confirms all operations are legitimate: subprocess calls run internal build tools, network requests go to stock photo CDNs and Chart.js CDN, and 'credential' matches are false positives on CSV config lookups and hardcoded hex colors. No data exfiltration path exists.

風險因素

⚙️ 外部命令 (201)
references/component-specs.md:40-46 references/component-specs.md:46-83 references/component-specs.md:83-89 references/component-specs.md:89-106 references/component-specs.md:106-119 references/component-specs.md:119-168 references/component-specs.md:168-173 references/component-specs.md:173-191 references/component-specs.md:191-204 references/component-tokens.md:7-47 references/component-tokens.md:47-51 references/component-tokens.md:51-79 references/component-tokens.md:79-83 references/component-tokens.md:83-102 references/component-tokens.md:102-106 references/component-tokens.md:106-130 references/component-tokens.md:130-134 references/component-tokens.md:134-149 references/component-tokens.md:149-153 references/component-tokens.md:153-169 references/component-tokens.md:169-173 references/component-tokens.md:173-191 references/component-tokens.md:191-195 references/component-tokens.md:195-214 references/primitive-tokens.md:9-23 references/primitive-tokens.md:23-27 references/primitive-tokens.md:27-40 references/primitive-tokens.md:40-44 references/primitive-tokens.md:44-61 references/primitive-tokens.md:61-67 references/primitive-tokens.md:67-91 references/primitive-tokens.md:91-95 references/primitive-tokens.md:95-129 references/primitive-tokens.md:129-133 references/primitive-tokens.md:133-145 references/primitive-tokens.md:145-149 references/primitive-tokens.md:149-164 references/primitive-tokens.md:164-168 references/primitive-tokens.md:168-184 references/primitive-tokens.md:184-188 references/primitive-tokens.md:188-203 references/semantic-tokens.md:9-23 references/semantic-tokens.md:23-27 references/semantic-tokens.md:27-34 references/semantic-tokens.md:34-38 references/semantic-tokens.md:38-44 references/semantic-tokens.md:44-48 references/semantic-tokens.md:48-53 references/semantic-tokens.md:53-57 references/semantic-tokens.md:57-62 references/semantic-tokens.md:62-66 references/semantic-tokens.md:66-72 references/semantic-tokens.md:72-76 references/semantic-tokens.md:76-90 references/semantic-tokens.md:90-94 references/semantic-tokens.md:94-100 references/semantic-tokens.md:100-104 references/semantic-tokens.md:104-121 references/semantic-tokens.md:121-125 references/semantic-tokens.md:125-141 references/semantic-tokens.md:141-145 references/semantic-tokens.md:145-160 references/semantic-tokens.md:160-164 references/semantic-tokens.md:164-187 references/semantic-tokens.md:187-193 references/semantic-tokens.md:193-206 references/semantic-tokens.md:206-212 references/semantic-tokens.md:212-215 references/states-and-variants.md:31-38 references/states-and-variants.md:38-52 references/states-and-variants.md:52-59 references/states-and-variants.md:59-70 references/states-and-variants.md:70-75 references/states-and-variants.md:75-81 references/states-and-variants.md:81-87 references/states-and-variants.md:87-99 references/states-and-variants.md:99-100 references/states-and-variants.md:100-116 references/states-and-variants.md:116-130 references/states-and-variants.md:130-136 references/states-and-variants.md:136-146 references/states-and-variants.md:146-166 references/states-and-variants.md:166-184 references/states-and-variants.md:184-188 references/states-and-variants.md:188-207 references/states-and-variants.md:207-229 references/states-and-variants.md:229-241 references/tailwind-integration.md:9-57 references/tailwind-integration.md:57-63 references/tailwind-integration.md:63-113 references/tailwind-integration.md:113-119 references/tailwind-integration.md:119-126 references/tailwind-integration.md:126-132 references/tailwind-integration.md:132-172 references/tailwind-integration.md:172-176 references/tailwind-integration.md:176-187 references/tailwind-integration.md:187-191 references/tailwind-integration.md:191-216 references/tailwind-integration.md:216-220 references/tailwind-integration.md:220-230 references/tailwind-integration.md:230-239 references/tailwind-integration.md:239-243 references/tailwind-integration.md:243-249 references/token-architecture.md:7-18 references/token-architecture.md:18-32 references/token-architecture.md:32-60 references/token-architecture.md:60-66 references/token-architecture.md:66-92 references/token-architecture.md:92-98 references/token-architecture.md:98-121 references/token-architecture.md:121-127 references/token-architecture.md:127-135 references/token-architecture.md:135-139 references/token-architecture.md:139-147 references/token-architecture.md:147-162 references/token-architecture.md:162-168 references/token-architecture.md:168-172 references/token-architecture.md:172-184 references/token-architecture.md:184-189 references/token-architecture.md:189-192 references/token-architecture.md:192-195 references/token-architecture.md:195-207 references/token-architecture.md:207-213 references/token-architecture.md:213-224 scripts/embed-tokens.cjs:77 scripts/embed-tokens.cjs:90 scripts/embed-tokens.cjs:92 scripts/embed-tokens.cjs:97 scripts/generate-tokens.cjs:32-40 scripts/generate-tokens.cjs:109-114 scripts/generate-tokens.cjs:114-119 scripts/generate-tokens.cjs:119-124 scripts/generate-tokens.cjs:124-126 scripts/generate-tokens.cjs:129-132 scripts/generate-tokens.cjs:132-134 scripts/generate-tokens.cjs:151 scripts/generate-tokens.cjs:155-161 scripts/generate-tokens.cjs:179 scripts/generate-tokens.cjs:199 scripts/slide-token-validator.py:30 scripts/validate-tokens.cjs:33-46 scripts/validate-tokens.cjs:180 scripts/validate-tokens.cjs:190 scripts/validate-tokens.cjs:192 scripts/validate-tokens.cjs:193 scripts/validate-tokens.cjs:194 scripts/validate-tokens.cjs:195 scripts/validate-tokens.cjs:205 scripts/validate-tokens.cjs:207 scripts/validate-tokens.cjs:227 scripts/validate-tokens.cjs:231 SKILL.md:27 SKILL.md:31-37 SKILL.md:37-40 SKILL.md:40-49 SKILL.md:49-54 SKILL.md:54-56 SKILL.md:56-59 SKILL.md:59-61 SKILL.md:61-67 SKILL.md:67-68 SKILL.md:68-69 SKILL.md:69-70 SKILL.md:70-71 SKILL.md:71-72 SKILL.md:72-73 SKILL.md:73-88 SKILL.md:88-89 SKILL.md:89-90 SKILL.md:90-91 SKILL.md:91-92 SKILL.md:92-98 SKILL.md:98-116 SKILL.md:116-117 SKILL.md:117-118 SKILL.md:118-119 SKILL.md:119-123 SKILL.md:123-134 SKILL.md:134-140 SKILL.md:140-141 SKILL.md:141-142 SKILL.md:142-143 SKILL.md:143-144 SKILL.md:144-145 SKILL.md:145-146 SKILL.md:146-147 SKILL.md:147-151 SKILL.md:151-166 SKILL.md:166-171 SKILL.md:171-173 SKILL.md:173-180 SKILL.md:180-181 SKILL.md:181 SKILL.md:181-189 SKILL.md:189-208 SKILL.md:208-212 SKILL.md:212-222 SKILL.md:222-227 SKILL.md:227-229 SKILL.md:229-233 SKILL.md:233-235
📁 檔案系統存取 (17)
🌐 網路存取 (28)
🔑 環境變數 (7)
⚡ 包含腳本 (1)
審計者: claude

品質評分

68
架構
100
可維護性
87
內容
34
社群
72
安全
74
規範符合性

你能建構什麼

前端開發人員建立設計系統

前端開發人員需要為新專案建立一致的設計權杖系統。此技能可從 JSON 權杖定義產生 CSS 變數、驗證元件是否使用權杖而非硬編碼值,並產出 Tailwind 設定以便整合。

設計師建立品牌簡報

設計師需要建立一份符合品牌指南的提案簡報。此技能可產生使用設計權杖來設定顏色、排版和間距的 HTML 投影片,並透過 Chart.js 提供圖表選項及 Pexels 的精選背景圖片。

DevOps 工程師自動化設計權杖管線

DevOps 工程師在 CI 管線中設定自動化的權杖產生與驗證。此技能提供 CLI 腳本用於產生 CSS、驗證程式碼庫是否遵循權杖使用規則,以及將權杖嵌入獨立的 HTML 檔案中。

試試這些提示

從 JSON 設定產生權杖
從我的 tokens.json 檔案使用三層結構產生 CSS 設計權杖。採用從基礎層到語意層再到元件層的模式。
驗證程式碼庫中的權杖使用情況
驗證我的 src/ 目錄中是否有硬編碼的十六進位色碼和像素值。回報所有違規情況,並建議應使用哪些設計權杖來替代。
建立含圖表的提案簡報
為一個 SaaS 分析平台建立一份 8 頁的投資者提案簡報。包含標題頁、問題頁、含功能網格的解決方案頁、指標頁、營收圖表頁、見證頁、比較表格頁以及結尾行動呼籲頁。使用我們的品牌設計權杖。
套用 Duarte sparkline 技巧
使用 Duarte sparkline 敘事結構建立一份 9 頁簡報。在「現況是什麼」(挫折)與「未來可能是什麼」(希望)之間交替切換。在第 3 和第 6 位置使用模式打破技巧。搜尋「投資者提案」的投影片策略,並為每張投影片推薦版面配置。

最佳實務

  • 先以原始值定義基礎權杖,再透過語意權杖進行對應,最後才轉為元件專用權杖,以達到最大的靈活度與主題切換能力。
  • 在分享之前,務必使用權杖驗證器檢查所產生的 HTML 投影片,找出硬編碼的顏色或字型。
  • 善用包含投影片位置和情緒參數的語境搜尋功能,建立具有模式打破和情緒對比的簡報,以提升觀眾參與度。

避免

  • 不要在元件 CSS 檔案中使用原始十六進位色碼。請一律透過 var() 引用設計權杖以維持主題一致性。
  • 不要在不匯入 design-tokens.css 檔案的情況下建立投影片。所有視覺屬性都必須使用權杖變數。
  • 不要跳過語意權杖層。將元件直接對應到基礎權杖會讓主題切換和維護變得更加困難。

常見問題

設計權杖 JSON 需要遵循什麼檔案格式?
JSON 應遵循三層結構:基礎層(原始顏色、間距、排版值)、語意層(基於用途的別名,如 --color-primary)和元件層(元件專用權杖,如 --button-bg)。每個權杖都有 $value 和 $type 欄位。
此技能可以產生 PowerPoint 或 Google Slides 檔案嗎?
不行。此技能會產生內嵌 CSS 設計權杖的 HTML 投影片。輸出為自包含的 HTML 檔案,可在任何瀏覽器中開啟,但無法直接匯入 PowerPoint 或 Google Slides。
如何為我的投影片加入新的背景圖片?
背景圖片取自一組按投影片類型(主視覺、團隊、見證等)分類的精選免費 Pexels 照片。你可以在 scripts/fetch-background.py 的 CURATED_IMAGES 字典中擴充更多 Pexels 圖片網址。
權杖驗證器會檢查哪些項目?
驗證器會掃描 CSS、JSX、TSX 及其他原始檔,尋找硬編碼的十六進位色碼、RGB 顏色、像素值和 rem 值。它會建議改用 var() 引用設計權杖來替代,並會跳過權杖定義檔案和常見的例外情況。
如何從我的設計權杖建立 Tailwind 主題?
使用 generate-tokens.cjs 腳本並帶上 --format tailwind 旗標。這會產生一個顏色設定物件,透過 CSS 變數引用將你的語意顏色權杖對應到 Tailwind 顏色名稱。
投影片產生功能支援動畫效果嗎?
是的。投影片系統包含 CSS 動畫類別,如 animate-fade-up、animate-stagger、animate-scale、animate-chart、animate-count 和 animate-pulse。語境搜尋會根據投影片目標和情緒推薦動畫類別。