Agent Skills Finder
N

ckm:design

作者 nextlevelbuilder

統一化的設計技能，用於品牌識別、design tokens、UI 風格設定、Logo 與 icon 產生、企業識別（CIP）情境圖、HTML 簡報、Banner，以及各大平台的社群視覺照片。

Stars0
收藏0
評論0
分類UI/UX 設計
安裝指令
npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill design
UI/UXUI 設計Figma前端开发者受众幻灯片Marketing
總覽

概觀

什麼是 ckm:design？

ckm:design 是一個以設計為核心的統一技能，協助你的 agent 規劃並產出覆蓋整體品牌體驗的視覺素材。它是為 UI/UX 與品牌工作流程而打造，而不只是用來輸出程式碼，並透過結構化的參考資料與可選用的本機腳本，支援：

  • 品牌識別與視覺方向
  • Design tokens 與 design system 規格
  • shadcn/ui 與 Tailwind 的 UI 風格指引
  • Logo 設計與 AI Logo 產生（55 種風格）
  • Corporate Identity Program（CIP）成果物與情境圖
  • 以 HTML 為基礎的簡報與提案投影片（含 Chart.js）
  • 社群、廣告、網站與印刷用 Banner 設計（22 種風格、完整尺寸矩陣）
  • 使用 AI 產生 SVG 的 icon 設計（15 種風格）
  • 主要平台的社群照片與行銷圖像

此技能內建大量參考資料與資料表，讓 agent 可以直接給出具體且可實作的建議，你不用再自己去查尺寸表或品牌規範。

ckm:design 適合誰？

如果你是以下角色，ckm:design 會很適合：

  • UI/UX 設計師：希望有一個能以流程、元件、tokens 與美術風格來溝通的助手。
  • 前端工程師：需要精準的 Banner 尺寸、icon 規格或投影片 HTML 結構，並確保程式碼與設計保持一致。
  • 品牌或行銷負責人：在規劃 Logo、CIP 導入、社群活動與提案簡報。
  • 創業者或小型團隊：需要從頭到尾的品牌與 UI 指引，但沒有完整的設計部門。

如果你只需要純程式碼產生、不在乎設計理由，較輕量的工程導向技能可能更適合。ckm:design 是為那些重視視覺品質、一致性與品牌契合度的情境而設計。

ckm:design 解決哪些問題？

透過隨附的參考資料與數據，ckm:design 能幫你的 agent：

  • 標準化品牌輸出 —— 讓 Logo、Banner、社群照片與 CIP 素材在同一套一致的視覺系統下運作。
  • 一次就把尺寸與格式做好 —— 使用針對社群平台、Google Display Network、網站 hero 區與印刷的專用尺寸表。
  • 擴大量產企業識別系統 —— 對應產業、風格與成果物，規劃大型 CIP 套件。
  • 串接設計與實作 —— 把品牌決策具體連結到 design tokens、CSS variables、shadcn/ui 與 Tailwind 的用法。
  • 快速原型 —— 利用 HTML 簡報模板與 CIP 情境圖，在完整 design system 成形前就先進行審查。

使用方式

1. 安裝 ckm:design 技能

你可以從上游 repository，把 ckm:design 安裝到支援 Claude 的 skills 設定中：

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill design

這會從 nextlevelbuilder/ui-ux-pro-max-skill repository 拉取 design skill，放到你本機的 ~/.claude/skills/design 目錄（或是你環境對應的路徑）。

安裝完成後，你應該會看到：

  • SKILL.md – 技能總覽與路由說明。
  • data/ – CIP、Logo 與 icon 風格的 CSV 資料集。
  • references/ – 設計任務的主要知識庫。
  • scripts/ – 用於 CIP 與 icon 產生的選用 Python 工具。

2. 理解 design 路由模型

ckm:design 是設計工作的入口，並依照 references/design-routing.md 與 SKILL.md 中的說明，把工作路由給專注的子技能。

主要設計領域如下：

  • Brand identity → 通常由獨立的 brand skill 處理。
  • Design systems 與 tokens → 透過 design-system skill。
  • UI 實作（shadcn/ui、Tailwind）→ 透過 ui-styling skill。
  • Logo 製作 → 內建 Logo 設計參考資料。
  • CIP 設計 → 企業識別成果物與情境圖。
  • Slides → 使用 Chart.js 的 HTML 簡報。
  • Banner 設計 → 社群、廣告、網站與印刷用 Banner。
  • Icon 設計 → 透過腳本產生 SVG icons。

在提示中，你可以透過 skill 的 argument-hint pattern 指出設計類型：

ckm:design [design-type] [context]

範例：

  • ckm:design logo fintech SaaS brand for B2B dashboards
  • ckm:design cip rebrand for hospitality hotel chain
  • ckm:design banner LinkedIn company cover product launch

3. 使用參考資料做 UI/UX 與品牌決策

ckm:design 的強項在於其結構化的參考檔案。當你向 agent 詢問規格時，請把這些檔案當作權威來源。

UI/UX 與 design system 規劃

實際執行可能會由 design-system 或 ui-styling 處理，但你可以用 ckm:design 來：

  • 在設計層級討論 tokens 與規格（色彩、字體、間距、狀態）。
  • 把品牌顏色與字體對應到 CSS variables 與 Tailwind config。
  • 在實作前先規劃元件行為與狀態。

Agent 可以把 ckm:design 的高階設計意圖與以程式碼為主的技能結合，完成實作。

針對活動與 UI Banner，請依賴 references/banner-sizes-and-styles.md：

  • 選出各平台正確的 尺寸（Facebook、Twitter/X、LinkedIn、YouTube、Instagram、Pinterest、Google Display Network、網站、Email 與印刷格式）。
  • 從 22 種視覺風格 中選擇（例如：Minimalist、Corporate Minimal、Luxury Premium、Modern Tech、Warm Organic、Bold Dynamic）。
  • 請 agent 把訊息與版面配置對應到具體版位，例如：
    • Facebook cover vs event cover
    • LinkedIn company cover vs 個人 Banner
    • GDN billboard vs medium rectangle
    • Website hero vs blog header

活動規劃提示範例：

Using ckm:design, plan a full banner set for a modern tech SaaS launch, including LinkedIn company cover, Twitter header, Instagram post, and a Google Display billboard. Use Modern Tech art direction and map each asset to the correct pixel size.

Corporate Identity Program（CIP）導入

CIP 支援主要涵蓋在：

  • references/cip-deliverable-guide.md – 完整識別系統應該包含什麼。
  • references/cip-design.md – 資料與腳本如何支援 50+ 成果物、20 種風格與 20 個產業。
  • references/cip-style-guide.md – 詳細風格原型（Corporate Minimal、Modern Tech、Luxury Premium、Classic Traditional、Warm Organic、Bold Dynamic 等）。
  • references/cip-prompt-engineering.md – 用於生成情境圖的提示結構。

你可以利用這些檔案來：

  • 定義改造品牌的 涵蓋範圍（名片、招牌、車身、服飾、數位素材、活動等）。
  • 讓每個成果物都對應到 適合該產業的風格指南。
  • 產生高度結構化的情境圖提示，讓 Gemini 或其他影像模型能穩定解讀。

高階提示範例：

Use ckm:design to create a CIP plan for a premium hospitality brand. Choose a suitable style from the CIP style guide and list all recommended deliverables, from stationery to vehicle branding and trade show assets.

4. 使用腳本產生 CIP 簡報與情境圖（選用）

如果你想超越概念規劃，實際使用內建 Python 腳本來產生 CIP 情境圖，請依照 references/cip-design.md 操作。

請先確定已安裝 Python 3，並依照你的工具鏈說明，取得可用的 Gemini 模型存取權限。

4.1. 搜尋 CIP 資料並建立簡報 Brief

使用 BM25 搜尋腳本來探索成果物、風格與產業，並生成起始 Brief：

python3 ~/.claude/skills/design/scripts/cip/search.py "tech startup" --cip-brief -b "BrandName"

你也可以針對特定領域搜尋：

# Deliverables
python3 ~/.claude/skills/design/scripts/cip/search.py "business card letterhead" --domain deliverable

# Design styles
python3 ~/.claude/skills/design/scripts/cip/search.py "luxury premium elegant" --domain style

# Industry guidelines
python3 ~/.claude/skills/design/scripts/cip/search.py "hospitality hotel" --domain industry

# Mockup contexts
python3 ~/.claude/skills/design/scripts/cip/search.py "office reception" --domain mockup

data/cip/ 下的 CSV 檔案存放此搜尋工具所使用的成果物、產業、風格與情境資料。

4.2. 產生 CIP 情境圖

references/cip-design.md 提供使用 scripts/cip/generate.py 進行 Gemini-based 情境圖產生的指令範例：

# 含 Logo 的單一成果物情境圖
python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --deliverable "business card" --industry "consulting"

# 含 Logo 的完整 CIP 套組
python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --industry "consulting" --set

請依你的環境設定 model keys 與相關參數；ckm:design 提供的是資料結構、提示骨架與腳本入口點，本身不包含模型。

4.3. 將 CIP 結果輸出為 HTML 簡報

在取得情境圖資料後，你可以透過下列指令產生 HTML 簡報：

python3 ~/.claude/skills/design/scripts/cip/render-html.py

這會產生一個 HTML 總覽頁，方便你分享給利害關係人，作為完整識別系統的視覺摘要。

5. 使用 AI 協助設計 Logo 與 icons

ckm:design 也包含專注於 Logo 與 icon 的指引與腳本。

5.1. Logo 規劃與提示工程

可參考：

  • references/logo-design.md – Logo 構成基礎觀念。
  • references/logo-color-psychology.md – 依品牌個性與產業選擇色彩。
  • references/logo-style-guide.md – 如何在 55 種可用 Logo 風格中做選擇。
  • references/logo-prompt-engineering.md – 基於 Gemini 的 Logo 產生建議提示結構。

在向 agent 下指令時，可利用這些參考來：

  • 定義 Logo system（主 Logo、直式/橫式版本、僅 icon 版、單色版）。
  • 選擇符合 品牌策略 的色彩與字體。
  • 擬定足夠具體的 AI 提示，產出可用的 Logo 候選方案。

內建的 Logo 能力設計上是要與 CIP 與 Banner 工具搭配，確保品牌識別在所有接觸點都維持一致。

5.2. 產生 SVG 輸出的 icon 設計

references/icon-design.md 說明如何使用 scripts/icon/generate.py 與 Gemini 3.1 Pro Preview 產生 AI 驅動的 SVG icons。

指令範例：

# 基本 icons
python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "settings gear" --style outlined
python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "shopping cart" --style filled --color "#6366F1"

# 具有名稱與分類的 icon
python3 ~/.claude/skills/design/scripts/icon/generate.py --name "dashboard" --category navigation --style duotone

# 批次產生
python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "cloud upload" --batch 4 --output-dir ./icons

# 多種尺寸
python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "user profile" --sizes "16,24,32,48" --output-dir ./icons

# 查看可用風格與分類
python3 ~/.claude/skills/design/scripts/icon/generate.py --list-styles
python3 ~/.claude/skills/design/scripts/icon/generate.py --list-categories

這對需要一整套風格一致 icon，並希望與 Logo 與 CIP 視覺語言對齊的 UI/UX 團隊尤其實用。

6. 建立行銷用 HTML 投影片與視覺素材

ckm:design 內建完整的投影片設計參考集合，非常適合產品 Demo、Sales Deck 與內部簡報：

  • references/slides.md – 投影片系統概觀。
  • references/slides-create.md – 如何從大綱發展成完整 Deck。
  • references/slides-layout-patterns.md – 常見頁面版型。
  • references/slides-copywriting-formulas.md – 提升說服與清晰度的文案框架。
  • references/slides-strategies.md – 敘事結構策略。
  • references/slides-html-template.md – 投影片基礎 HTML 範本（含 Chart.js 整合）。

你可以利用這些資料來：

  • 請 agent 建立 投影片大綱，並把各段落對應到版型模式。
  • 產生符合品牌 tokens 與色彩的 HTML 投影片 Deck。
  • 為數據頁加入 Chart.js 圖表，呈現指標與 Dashboard。

提示範例：

Using ckm:design, draft a 12-slide product launch deck for a B2B SaaS. Use the HTML slide template and suggest appropriate Chart.js charts for the metrics slides.

7. 社群照片與多平台活動

references/social-photos-design.md 提供設計社群照片與多平台素材的指引。

此設計技能可以協助你：

  • 在 Facebook、Twitter/X、LinkedIn、YouTube、Instagram、Pinterest、TikTok、Threads、Google Ads 等平台上，協調 個人/企業頭像、封面圖 與 貼文模板。
  • 使用 HTML-to-screenshot 工作流程，快速迭代社群視覺，同時維持字體與版面的一致性。
  • 讓每一個社群素材都能回扣到核心品牌與 CIP 系統。

常見問題（FAQ）

什麼時候適合使用 ckm:design？

在以下情境，ckm:design 特別適合：

  • 你需要涵蓋 UI/UX、品牌、CIP 與行銷的 端到端視覺方向。
  • 希望 agent 以 design tokens、美術風格與品牌系統 的語言來對話，而不只是輸出 CSS 片段。
  • 正在規劃 品牌重塑、新產品發表或 design system 導入，想要一套有參考依據的、一致性方法。
  • 想結合 AI 圖像產生（Logo、icons、CIP 情境圖、社群照片）與人工設計判斷。

什麼時候 ckm:design 不是理想選擇？

以下狀況可能不那麼適合：

  • 你只需要 後端或演算法協助，完全沒有設計面向。
  • 你想要的是 一鍵式 Logo 產生器，不考慮更廣泛的品牌系統。
  • 你沒有能力或興趣執行選用的 Python 工具（即使不跑腳本，此技能仍可提供指引，但你會改用自己的影像產生工具）。

ckm:design 是否一定要搭配 Figma 或特定設計軟體？

不需要。ckm:design 與工具無關，它提供的是你可以套用在各種環境中的結構與指引，例如：

  • Figma 或類似工具，用於 UI/UX 排版與原型。
  • 使用 shadcn/ui 與 Tailwind 的前端程式碼庫。
  • 簡報工具或原生 HTML 投影片。
  • 任何能消化這些提示與規格的影像編輯器或 AI 產生流程。

你可以維持既有的設計工具組；這個技能扮演的是在其上方的決策與規格層。

不跑 Python 腳本也能使用 ckm:design 嗎？

可以。ckm:design 的 核心價值 在於結構化的參考檔與資料檔：

  • 你可以完全透過 agent 使用 references/*.md 與 data/*.csv 來做規劃與規格定義。
  • scripts/cip/ 與 scripts/icon/ 的腳本是選用的加速器，給想要自動化情境圖與 SVG 產生的團隊用。

即使不執行腳本，你仍然會得到：

  • 正確的尺寸、風格與成果物清單。
  • 可套用在你 自家 AI 影像工具 的提示框架。
  • 在品牌、UI 與行銷之間保持一致性的指引。

ckm:design 如何與其他設計技能搭配？

此 repository 被設計成一組互相協作的設計技能。ckm:design 的角色是：

  • 作為視覺任務的 路由與協調層。
  • 將深入的品牌識別工作交給 brand。
  • 將 token 架構與元件規格交給 design-system。
  • 將實作細節（shadcn/ui、Tailwind classes）交給 ui-styling。

實際使用時，你通常會：

  1. 先用 ckm:design 來界定視覺問題，並選出適合的子技能。
  2. 使用對應的專精技能來執行細節。
  3. 再回到 ckm:design，確認所有輸出都與整體品牌與 CIP 規劃一致。

安裝好 ckm:design 之後，應該先看哪些內容？

如果想快速但完整地上手：

  1. 開啟 SKILL.md，了解整體範圍與主要工作流程。
  2. 查看 references/design-routing.md，理解各項任務如何分配到不同設計技能。
  3. 依照當前需求，瀏覽以下重點參考檔案：
    • references/banner-sizes-and-styles.md – 活動與 Banner 用。
    • references/cip-deliverable-guide.md 與 references/cip-style-guide.md – 規劃企業識別系統。
    • references/logo-design.md 與 references/logo-color-psychology.md – Logo 專案。
    • references/slides.md 與 references/slides-html-template.md – Deck 與簡報製作。
    • references/social-photos-design.md – 社群活動與多平台素材。

閱讀這些內容後，你就能判斷要如何在 UI/UX、品牌或行銷工作流程中導入 ckm:design，再視需要進一步使用選用腳本。

評分與評論

尚無評分
分享你的評論
登入後即可為這項技能評分並留言。
G
0/10000
最新評論
儲存中...