设计资源生成

技能简介

该技能提供一套完整的设计资源制作流程，覆盖应用图标、网站收藏夹图标、配色系统及日常图片处理需求。基于 macOS 原生工具与开源方案组合，支持从单张源图自动生成多平台所需的全套尺寸规格。

业务背景

解决设计团队重复性图标与配色制作痛点，将多平台适配工作从数小时压缩至分钟级。通过自动化生成 iOS/Android/macOS 全规格图标及网站 favicon，确保品牌视觉一致性；HSL 色板系统则让产品、运营快速建立统一的色彩规范，降低跨部门沟通成本。

落地案例：某产品团队准备上线新 App，设计师只需提供一张 1024×1024 的源图，即可自动生成 20 余种尺寸的图标文件，覆盖应用商店、手机桌面、通知栏等全部场景；同时输入主品牌色的色相值，一键输出 11 级渐变色板供 UI 规范文档直接使用，无需手动调试每个色阶。

能做什么

• 一键生成 iOS/macOS/Android 全规格应用图标（20+ 种尺寸）
• 制作网站 favicon 全套文件及配套 HTML/Manifest 代码
• 基于 HSL 色彩模型生成完整的 11 级色板系统
• 执行图片缩放、格式转换、圆角、叠加文字等常见处理
• 批量处理多张图片的统一尺寸调整

使用说明

安装准备

该技能依赖以下工具，需提前安装：

• sips：macOS 系统自带，无需额外安装
• ImageMagick：通过 Homebrew 安装 brew install imagemagick
• nano-banana-pro：AI 图像生成服务（按需配置）

典型工作流

1. 准备 1024×1024 像素的源图（PNG 格式）
2. 运行对应平台的图标生成脚本，自动输出全部尺寸
3. 如需 favicon，执行脚本后复制生成的 HTML 代码到网页头部
4. 图片处理任务根据复杂度选择 sips（简单快速）或 ImageMagick（复杂效果）

输入与输出

见下方输入与输出表格。

风险提示

• sips 为 macOS 独占工具，Windows/Linux 用户需改用 ImageMagick 替代
• ICO 文件生成必须依赖 ImageMagick，单独使用 sips 无法完成
• AI 图像生成涉及外部服务调用，注意检查使用配额与内容合规
• 批量处理前建议备份原图，避免覆盖操作导致数据丢失

来源信息

原始链接：https://github.com/openclaw/skills/tree/main/skills/cmanfre7/design-assets/SKILL.md
来源类型：GitHub 仓库