Agent Skills Finder
N

ckm:design

作者 nextlevelbuilder

面向品牌形象、design tokens、UI 样式、标志与图标生成、CIP（企业形象识别系统）物料、HTML 演示文稿、横幅以及各大平台社交配图的统一设计技能。

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 是一个“设计优先”的统一技能，帮助你的代理覆盖整个品牌体验的视觉资产规划与产出。它专为 UI/UX 和品牌工作流打造，而不是单纯输出代码；它结合结构化参考资料和可选本地脚本，用于支持：

  • 品牌形象与视觉方向
  • Design tokens 与 design system 规范
  • 针对 shadcn/ui 与 Tailwind 的 UI 样式指导
  • Logo 设计与 AI Logo 生成（55 种风格）
  • 企业形象识别（Corporate Identity Program，CIP）成品与效果图
  • 基于 HTML 的演示文稿与 pitch deck（集成 Chart.js）
  • 社交、广告、网页与印刷用横幅设计（22 种风格，全尺寸矩阵）
  • 使用 AI 生成 SVG 的图标设计（15 种风格）
  • 各大平台的社交配图与营销视觉

该技能内置大量参考资料和数据表，让代理可以给出具体、可落地的实施建议，无需你再去手动查找尺寸表或品牌规范。

谁适合使用 ckm:design？

如果你是：

  • 希望助手能用流程、组件、tokens 和视觉方向等设计语言沟通的 UI/UX 设计师。
  • 需要精确横幅尺寸、图标规格或 HTML 幻灯片结构，同时要保证代码与设计一致的 前端开发者。
  • 负责规划 Logo、CIP 落地、社交媒体活动和 pitch 幻灯片的 品牌/市场负责人。
  • 需要端到端品牌与 UI 指导、但尚未配备完整设计团队的 创业者或小团队。

那么 ckm:design 就非常契合。如果你只需要“纯代码生成”，而不关心设计逻辑，更轻量的工程向技能可能更合适。ckm:design 面向的是那些在乎视觉质量、一致性与品牌契合度的场景。

ckm:design 解决什么问题？

借助内置的参考资料与数据，ckm:design 可以帮助你的代理：

  • 统一品牌输出 —— 将 Logo、横幅、社交配图与 CIP 资产整合到一个连贯的视觉体系之下。
  • 一次到位搞定尺寸与格式 —— 使用针对社交媒体、Google Display Network、网页首屏与印刷的专用尺寸表。
  • 规模化推进企业形象识别项目 —— 通过行业、风格与物料映射，支持大规模 CIP 套系设计。
  • 打通设计与实现 —— 将品牌决策与 design tokens、CSS 变量、shadcn/ui 和 Tailwind 使用关联起来。
  • 快速原型验证 —— 使用 HTML 幻灯片模板与 CIP 效果图，在完整 design system 搭建前就能进行评审与迭代。

使用指南

1. 安装 ckm:design 技能

在支持 Claude 的 skills 环境中，从上游仓库安装 ckm:design：

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

此命令会从 nextlevelbuilder/ui-ux-pro-max-skill 仓库拉取 design skill，并放入本地的 ~/.claude/skills/design 目录（或你环境中的等价路径）。

安装完成后，你应能看到：

  • SKILL.md – 顶层说明与路由指引。
  • data/ – CIP、Logo 与图标风格相关的 CSV 数据集。
  • references/ – 与设计任务相关的主知识库。
  • scripts/ – 用于 CIP 与图标生成的可选 Python 工具脚本。

2. 理解设计路由模型

ckm:design 是设计任务的入口，会按 references/design-routing.md 与 SKILL.md 中的说明，将工作路由到各专门子技能。

主要设计域包括：

  • 品牌形象（Brand identity） → 通常由单独的 brand skill 处理。
  • Design system 与 tokens → 由 design-system skill 负责。
  • UI 实现（shadcn/ui、Tailwind）→ 由 ui-styling skill 负责。
  • Logo 创建 → 内置的 Logo 设计参考。
  • CIP 设计 → 企业形象物料与效果图。
  • 幻灯片 → 基于 HTML 的演示文稿，使用 Chart.js。
  • 横幅设计 → 针对社交媒体、广告、网页与印刷的横幅。
  • 图标设计 → 通过脚本生成 SVG 图标。

在 prompt 中，你可以使用该技能的 argument-hint 模式来提示设计类型：

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 的核心价值在于结构化的参考文件。当你向代理索要规格时，请优先以这些文件为“权威来源”。

UI/UX 与 design system 规划

尽管具体执行可能会路由到 design-system 或 ui-styling，你仍可以用 ckm:design 来：

  • 从设计层面讨论 tokens 与规格（颜色、字体、间距、状态等）。
  • 将品牌色彩与字体映射到 CSS variables 与 Tailwind config。
  • 在实现前规划组件的行为与状态。

代理可以将 ckm:design 中的高层设计意图，与偏代码执行的技能结合，完成落地实现。

横幅与营销创意

对于活动与 UI 横幅，参考 references/banner-sizes-and-styles.md：

  • 为各平台选择正确的 尺寸（Facebook、Twitter/X、LinkedIn、YouTube、Instagram、Pinterest、Google Display Network、网站、邮件与印刷格式）。
  • 在 22 种艺术风格（art direction styles） 中进行选择（如 Minimalist、Corporate Minimal、Luxury Premium、Modern Tech、Warm Organic、Bold Dynamic 等）。
  • 让代理将信息与排版映射到具体投放位，例如：
    • Facebook cover vs event cover
    • LinkedIn company cover vs personal banner
    • GDN billboard vs medium rectangle
    • Website hero vs blog header

活动规划示例 prompt：

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.

企业形象识别（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 – 生成效果图的 prompt 结构。

你可以用它们来：

  • 界定品牌重塑的 范围（名片、标牌、车身、服装、数字资产、活动物料等）。
  • 为每项物料匹配 适合行业的风格指南。
  • 生成高度结构化的效果图 prompt，方便 Gemini 或其他图像引擎稳定解析。

高层级 prompt 示例：

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 生成效果图的命令示例：

# 单个物料效果图（含 Logo）
python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --deliverable "business card" --industry "consulting"

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

你需要根据自身环境配置模型密钥与运行环境；ckm:design 提供的是数据结构、prompt 模板与脚本入口，而不是模型本身。

4.3. 生成 CIP 结果的 HTML 演示稿

当你已有效果图相关数据后，可以通过以下命令生成 HTML 演示文稿：

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

该脚本会生成一个 HTML 概览页面，方便你以视觉形式向相关方汇报整个企业形象系统。

5. 借助 AI 设计 Logo 与图标

ckm:design 也为 Logo 和图标设计提供了专门的指导与脚本。

5.1. Logo 规划与 prompt 设计

重点参考：

  • references/logo-design.md – Logo 结构与构成基础。
  • references/logo-color-psychology.md – 按品牌个性与行业选择色彩。
  • references/logo-style-guide.md – 如何在 55 种 Logo 风格中做选择。
  • references/logo-prompt-engineering.md – 面向 Gemini 的 Logo 生成 prompt 结构建议。

在向代理提需求时，你可以利用这些参考来：

  • 定义一个 Logo 系统（主标、横排/竖排、图标版、单色版等）。
  • 选定与 品牌战略 一致的配色与字体。
  • 拟定足够详细的 AI prompt，以便产出可用的 Logo 备选方案。

内置的 Logo 功能与 CIP 和横幅工具紧密配合，确保品牌主标在各接触点保持一致。

5.2. 生成 SVG 图标

references/icon-design.md 说明了如何使用 scripts/icon/generate.py 与 Gemini 3.1 Pro Preview 生成 AI SVG 图标。

命令示例：

# 简单图标
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"

# 指定名称与类别的图标
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

对于需要成体系图标、并希望图标与 Logo 及 CIP 物料共享同一视觉语言的 UI/UX 团队，这一能力非常实用。

6. 搭建用于营销的 HTML 幻灯片与视觉资产

ckm:design 包含完整的幻灯片设计参考，适合产品演示、销售 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）。

利用这些资料，你可以：

  • 让代理创建 幻灯片大纲 并将各部分映射到布局模式。
  • 生成符合品牌 tokens 与色彩的 HTML 幻灯片 deck。
  • 为指标与数据页添加 Chart.js 可视化图表。

示例 prompt：

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 提供了社交配图与多平台资产设计的指导。

这个设计 skill 可以帮助你：

  • 统筹各平台的 头像、封面图 与 内容模板，覆盖 Facebook、Twitter/X、LinkedIn、YouTube、Instagram、Pinterest、TikTok、Threads 与 Google Ads 等。
  • 使用 HTML-to-screenshot 工作流，高效迭代社交视觉，同时保持排版与字体系统一。
  • 将所有社交资产统一纳入核心品牌与 CIP 体系中。

常见问题（FAQ）

在什么情况下适合使用 ckm:design？

ckm:design 特别适合以下场景：

  • 你需要跨 UI/UX、品牌、CIP 与营销 的端到端视觉方向。
  • 希望代理围绕 design tokens、艺术指导（art direction）与品牌系统 展开，而不只是抛出零散 CSS 片段。
  • 正在规划 品牌重塑、新产品发布或 design system 推出，需要一套有参考依据的统一方法论。
  • 希望将 AI 图像生成（Logo、图标、CIP 效果图、社交配图）与人工设计审阅结合使用。

什么时候 ckm:design 不是理想选择？

在以下情况，它可能不太合适：

  • 你只需要 纯后端或算法支持，完全不涉及设计。
  • 你想要的是 “一键出 Logo” 的生成器，不考虑更广泛的品牌系统。
  • 你暂时不想或无法运行可选的 Python 工具（即使不用脚本，此技能仍可提供指导，但图像生成需依赖你自有的工具链）。

ckm:design 是否要求使用 Figma 或特定设计软件？

不需要。ckm:design 对工具完全中立，它提供的是一套可在各种环境中应用的结构与指导：

  • 用于 UI/UX 布局与原型的 Figma 或类似工具。
  • 使用 shadcn/ui 与 Tailwind 的前端代码库。
  • 用于幻灯片的演示工具或原生 HTML。
  • 任何能够消费这些 prompt 与规格的图片编辑器或 AI 生成管线。

你可以继续使用现有设计栈，ckm:design 作为其上的“决策与规格层”。

不运行 Python 脚本也能用 ckm:design 吗？

可以。ckm:design 的 核心价值 在于结构化参考资料和数据文件：

  • 你可以完全通过代理调用 references/*.md 与 data/*.csv 来完成规划与规格制定。
  • scripts/cip/ 与 scripts/icon/ 中的脚本只是为想要自动化效果图与 SVG 生成的团队提供加速选项。

即便不运行脚本，你仍然可以获得：

  • 正确的尺寸、风格与物料清单。
  • 可直接用于 自有 AI 图像工具 的 prompt 框架。
  • 针对品牌、UI 与营销对齐的一致性指导。

ckm:design 如何与其他设计技能协同？

该仓库以协同工作的一组设计技能构成。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 – 用于活动与横幅设计。
    • 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
最新评论
保存中...