跳转到使用指南
design作者 nextlevelbuilder

Design Skill.

Claude Code 和 Codex 的品牌与设计系统 skill:品牌识别、设计 token、UI 样式、标志生成和企业形象系统。

  • Brand & Design Systems
nextlevelbuilder/ui-ux-pro-max-skill · .claude/skills/design/SKILL.mdSKILL.md
--- name: design description: Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini, Atlas Cloud, or MuAPI 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, … --- ## When to Use ## Sub-skill Routing ## Script Paths ## Logo Design (Built-in) ## CIP Design (Built-in) ## Slides (Built-in)
从上游文件读取的前言和章节标题,2026-09-14 · 完整 13,348 字符

01 功能说明

设计 Skill 在 Claude Code 和 Codex 中的作用

摘要、工作流与产物,均读自该 skill 的 SKILL.md。

来自 SKILL.md读取于 2026-09-14 · 非实际运行记录

以 skill 自身的术语

统一的设计 skill,涵盖品牌识别、design token、基于 shadcn/ui 与 Tailwind 的 UI 样式设计、logo 生成(通过 Gemini、Atlas Cloud 或 MuAPI 提供 55 种风格)、包含 50 项交付物的企业形象识别(CIP)方案、使用 Chart.js 的 HTML 演示文稿、横幅设计(社交、广告、网页、印刷共 22 种艺术指导风格)、图标设计(15 种风格,通过 Gemini 3.1 Pro 输出 SVG),以及涵盖 Facebook、Twitter、LinkedIn、YouTube、Instagram、Pinterest、TikTok 与 Threads 的社交媒体图片设计。它会路由到外部子 skill 以处理品牌、design-system 与 ui-styling,同时内置 logo、CIP、幻灯片、横幅、图标与社交图片的工作流,并配合 Python 脚本、AI 生成与 HTML 转截图导出功能。

它产出什么

  • 通过 chrome-devtools 导出的、按精确平台尺寸生成的横幅 PNG 截图
  • 15 种风格的 SVG 图标文件,支持可选的多尺寸导出和批量变体
  • 按平台特定尺寸生成并存放在有序资源目录中的社交媒体图片
查看示例提示词 ↗

工作方式

  1. 01
    按任务类型路由

    该 skill 将品牌识别与语调分派给 brand 子 skill,将 token 和规格分派给 design-system,将 shadcn/ui 和 Tailwind 代码分派给 ui-styling,同时通过内置工作流处理 Logo、企业形象方案、演示文稿、横幅、图标和社交图片。

  2. 02
    使用 AI 提供方生成 Logo

    运行 Python 脚本,检索 55 种风格、30 种配色方案和 25 个行业指南,然后通过 Gemini Nano Banana、Atlas Cloud 或 MuAPI 生成白底 Logo。

  3. 03
    通过样机创建企业形象方案交付物

    使用 Gemini Flash 或 Pro 模型为 50 项交付物生成企业形象方案样机,可选叠加 Logo,然后渲染输出内容的 HTML 演示文稿。

  4. 04
    构建策略性 HTML 演示文稿

    通过加载幻灯片创建工作流参考,利用 Chart.js 集成、design token 和文案公式创建演示文稿。

  5. 05
    用 HTML/CSS 设计横幅

    收集需求,通过 ui-ux-pro-max 在 Pinterest 上调研,使用 frontend-design 设计 HTML/CSS 横幅,并用 ai-artist/ai-multimodal 生成视觉素材,然后通过 chrome-devtools 按精确尺寸导出。

  6. 06
    导出并验证截图

    使用 chrome-devtools 或 Playwright 以 2x 设备缩放比例按精确像素尺寸截图设计稿,在最终导出前目测检查并修复布局问题。

02 找到适合场景

何时使用 design Skill

当工作是此类品牌与设计系统工作时,在 Claude Code 或 Codex 中使用 design skill。下方的适用范围和限制取自该 skill 自己的文件。

适合场景

  • 创建包含标志、企业形象产物和融资路演文稿的品牌标识包
  • 为 Instagram、Facebook、LinkedIn、Twitter、Pinterest 和 TikTok 设计多平台社交媒体图片
  • 生成用于社交媒体封面、广告活动、网站头图和印刷材料的横幅
  • 使用语义化 token、Tailwind 配置和 shadcn/ui 组件构建设计系统

了解边界

  • 图标生成器仅输出 SVG 文本,不生成栅格图像文件

需要提供的信息

  • Gemini API key通过 Google AI Studio 生成标志、CIP 和图标所需的必填环境变量
  • MuAPI API key(可选)可选环境变量,用于将 MuAPI 作为标志生成的替代图像生成服务商
  • CIP 用的标志文件路径生成企业形象产物模型时,用于叠加在其上的现有标志 PNG 文件的路径
  • 通过 AskUserQuestion 收集横幅需求在设计横幅之前交互式收集用途、平台、内容、品牌规范、艺术指导风格和数量
  • 社交图片的品牌上下文来自品牌子 skill 的品牌规范和来自 design-system 的 design token,用于在社交媒体图片间保持一致性

03 Skill 内部

该设计 skill 赋予 Claude Code 和 Codex 的规则

SKILL.md 为 Agent 设定的 8 条具体指令、默认值与限制——文件中真正改变结果的部分。

  1. 始终生成白色背景的标志

    标志生成在所有情况下都必须输出白色背景的图像。

  2. 脚本路径相对于 skill 目录

    该 skill 及其 references 文件夹中的脚本路径是相对于包含 SKILL.md 的目录的,而不是项目根目录。

  3. 标志生成后询问用户是否需要 HTML 预览

    生成标志后,始终通过 AskUserQuestion 询问用户是否需要 HTML 预览画廊,如果需要,则调用 ui-ux-pro-max skill 来创建它。

  4. 直接修复失败的脚本

    当 Python 脚本执行失败时,应直接尝试修复,而不是仅报告错误。

  5. 在 CIP 中使用推荐的 Logo 叠加方式

    生成 CIP 样张时,使用 --logo 标志指定现有 Logo 文件是推荐做法。

  6. 广告 Banner 文字占比须低于 20%

    对于广告 Banner,将文字覆盖率控制在总面积的 20% 以内,因为 Meta 平台会对文字过多的广告进行降权。

  7. 在 Windows 上使用 Python 而非 Python3

    在 Windows 系统中,将该 skill 所有命令示例中的 python3 替换为 python。

  8. Banner 关键内容置于中央安全区

    将所有关键 Banner 内容放置在中央 70-80% 的安全区内,以确保在各平台上的可见性。

04 投入使用

在 Claude Code 或 Codex 中安装 design

一条 npx skills add 命令,然后在你的 Agent 中执行第一个任务和对结果的清单检查。

将 design 添加到 Claude Code、Codex 或你的 Agent

在你的项目中运行;安装程序会询问要把它添加到哪个 Agent。

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

通用 skills CLI 形式,用于 .claude/skills/design/SKILL.md;具体仓库可能有自己的路径说明。

为 Skill 分配第一个品牌和 design-system 工作任务

按 skill 自身的术语撰写;把括号中的部分换成你的内容。

Starter prompt
Design a complete brand package for [TechFlow], a B2B SaaS startup in the fintech space. Create a minimalist logo with tech-appropriate colors, generate a full corporate identity program including business cards, letterhead, and email signature, then build a 10-slide pitch deck presentation with our Q4 metrics [revenue chart data] and competitive positioning [market analysis]. Export everything with consistent design tokens.

来源:依据 SKILL.md,按 skill 自身的术语撰写。

检查首次结果

SKILL.md 本身如何描述正确的结果:

  • 确认 Banner CTA 满足最小 44px 高度要求,且位于右下角
  • 确保印刷 Banner 使用 300 DPI、CMYK 色彩模式,并预留 3-5mm 出血位

在 OpenDesign 中通过其 SKILL.md 链接导入设计:Plugins → Add → Skill → Import from link,然后在顶部栏中选择它。

05 开源、可追溯

来源、许可与验证

本页面事实的来源,以及最后检查时间。

Skill 文件
.claude/skills/design/SKILL.md 内容校验和已在验证时记录;commit 7f69fed
License
MIT 来自 LICENSE;SKILL.md 显示"MIT"。
仓库星标数
127,450 GitHub 快照拍摄于 2026-09-14,针对整个 nextlevelbuilder/ui-ux-pro-max-skill 仓库,该仓库在此目录中包含 7 个 skill。这不是 design 的评分或使用计数。
已由 OpenDesign 验证
2026-09-14 已检查源文件、路径、许可文本和 star 数量。未内置在 OpenDesign 主程序(检查日期 2026-08-28);本页面未记录实际运行。

SKILL.md 内部

  1. 适用场景列出使用场景:品牌形象、design token、UI 样式、Logo、CIP、演示文稿、Banner、社交图片、图标
  2. 子 Skill 路由将任务路由到外部 brand/design-system/ui-styling skills,或内置的 logo/CIP/slides/banner/social/icon 工作流
  3. 脚本路径说明脚本路径是相对于 skill 目录,而非项目根目录
  4. Logo 设计(内置)用于搜索 55 种风格,并通过 Gemini、Atlas Cloud 或 MuAPI 生成白底 Logo 的命令
  5. CIP 设计(内置)用于搜索 50 种交付物,并通过 Flash 或 Pro 模型生成企业形象样张的命令
  6. 幻灯片(内置)参考使用 Chart.js 和文案公式创建策略性 HTML 演示文稿的方法
  7. Banner 设计(内置)使用 frontend-design、ai-artist 和 chrome-devtools 进行导出,设计 22 种艺术指导风格的工作流
  8. 图标设计(内置)使用 Gemini 3.1 Pro 纯文本输出生成 15 种风格 SVG 图标的命令
  9. 社交图片(内置)从 HTML 到截图导出并附带验证的多平台社交图片设计工作流
  10. 工作流跨子 skill 完成完整品牌套件与全新设计系统创建的流程序列
  11. 前置条件Python 要求,包含 Windows 下 python 与 python3 命令的专门说明
  12. 设置Gemini 和 MuAPI API key 的环境变量,以及 Python 包安装
Skill 自身的描述
"综合设计 skill:品牌识别、design tokens、UI 样式、logo 生成(55 种风格,Gemini、Atlas Cloud 或 MuAPI AI)、企业识别系统(50 项交付物、CIP 样机)、HTML 演示文稿(Chart.js)、横幅设计(22 种风格,社交/广告/网页/印刷)、图标设计(15 种风格、SVG、Gemini 3.1 Pro)、社交照片(HTML→截图,多平台)。操作:设计 logo、创建 CIP、生成样机、构建幻灯片、设计横幅、生成图标、创建社交照片、社交媒体图像、品牌识别、设计系统。平台:Facebook、Twitter、LinkedIn、YouTube、Instagram、Pinterest、TikTok、Threads、Google Ads。"

来自 SKILL.md 的前置元数据描述。完整文件约 13,348 个字符。在 GitHub 上阅读完整文件。

06 安装之前

关于 design skill 的常见问题

以下回答来自 2026-09-14 读取到的 SKILL.md,而非某次实际运行的记录。

如何在 Windows 上运行 Python 脚本?

在所有命令示例中将 python3 替换为 python。例如,使用 python scripts/logo/search.py 而不是 python3 scripts/logo/search.py。pip 命令同理,可能需要使用 python -m pip install。

Design

在真实的品牌与设计系统工作任务上运行 design。

下载 OpenDesign,从其 SKILL.md 链接导入 design,粘贴上述提示,并在结果前阅读计划。

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

OpenDesign 桌面客户端

一套设计系统,让每一次创作都保持品牌一致

在完整的 Vibe Design Workspace 中,用同一套品牌规则生成网页、PPT、可交互原型、数据看板、图像与 HTML 视频。连接本地 Codex、Claude Code、Cursor 等编程助手,即可免费创作。

  • 覆盖网页、PPT、原型、数据看板、图像与视频
  • 140+ 设计系统,以及完整模板与技能库
  • 连接本地 Codex 与 21+ 款编程助手 · 免费使用
免费下载

支持 macOS 与 Windows