design-assets

🎨 一站式多平台设计资产生成

基于 macOS 原生工具的设计资产生成指南,提供图标、favicon、调色板等一站式视觉资源制作方案,适合开发者快速产出多平台适配素材。

收藏
7.7k
安装
2k
版本
v1.0.0
CLS 安全性认证2026-05-04
点击查看完整报告 >

使用说明

核心用法

design-assets 是一款面向开发者的设计资产生成技能,专注于解决移动应用和网站开发中的视觉资源制作需求。其核心功能涵盖三大场景:App 图标生成(支持 iOS/macOS 全尺寸规格及 Android 自适应图标)、网站 Favicon 制作(含多尺寸 PNG 和 ICO 格式)、以及设计系统调色板生成(基于 HSL 色彩模型的 11 级色阶)。

该技能采用"工具选型表+即用脚本"的文档架构,用户可根据任务类型选择合适工具:AI 图像生成调用 nano-banana-pro,基础尺寸调整使用 macOS 原生 sips,复杂合成则依赖 ImageMagick。所有脚本均以 Bash 模板形式提供,支持从单张 1024×1024 源图批量输出 20+ 种平台规格,大幅降低多尺寸适配的手动操作成本。

显著优点

平台覆盖全面:一次性解决 iOS、macOS、Android、Web 四大平台的图标规格需求,避免开发者查阅各平台人机界面指南的时间消耗。工具链轻量:优先使用 macOS 内置的 sips 和 screencapture,无需额外安装即可处理 80% 的常见任务;进阶需求通过 ImageMagick 扩展,形成低门槛到高灵活的梯度方案。代码即文档:所有操作均以可执行的 Bash 脚本呈现,配合详细注释,开发者可直接复制使用或按需修改,学习成本极低。色彩系统科学:基于 HSL 的调色板生成逻辑符合现代设计系统规范,输出的 50-950 色阶可直接映射至 Tailwind CSS 等主流框架。

潜在缺点与局限性

平台锁定明显:sips 为 macOS 独占工具,Linux 和 Windows 用户必须完全依赖 ImageMagick,而脚本中大量 sips 调用需要手动替换为 magick 命令,增加了跨平台使用的摩擦成本。无自动化集成:所有脚本均为离线模板,需用户手动复制到终端执行,无法直接嵌入 CI/CD 流水线或构建脚本中实现自动化。AI 生成工具未开源:nano-banana-pro 作为外部依赖,其服务稳定性、定价策略及数据隐私条款未在文档中说明,存在供应商锁定风险。缺乏视觉预览:纯文本脚本无法提供生成效果的实时预览,尺寸错误或比例失调需执行后才能发现,迭代效率受限。

适合的目标群体

独立开发者与小型团队:资源有限、无专职设计师,需要快速产出符合平台规范的图标和素材。前端/全栈工程师:在原型开发或 side project 阶段,希望自助完成基础视觉资产而不依赖设计协作流程。技术型产品经理:需要向团队演示多平台适配方案,或生成用于 PRD 的规格参考。设计系统初学者:通过 HSL 调色板生成逻辑理解色彩层级构建原理,作为学习 Tailwind、Material Design 等系统的辅助工具。

使用风险

环境依赖风险:sips 和 ImageMagick 的版本差异可能导致脚本行为不一致,特别是 ImageMagick 6 与 7 的命令语法变更(convert vs magick)。文件覆盖风险:批处理脚本默认使用固定命名规则,若输出目录已存在同名文件将被静默覆盖,建议始终指定独立输出目录。色彩空间风险:sips 在格式转换时可能丢失 ICC 色彩配置文件,对色彩准确性要求高的品牌物料需额外校验。AI 服务可用性:nano-banana-pro 作为外部服务,其持续运营状态未在文档中承诺,关键项目应准备替代生成方案。

安全解读

核心用法

本 Skill 为开发者提供一站式设计资产生成的技术文档与代码参考,覆盖四大核心场景:

1. App 图标生成:基于 macOS 原生 sips 工具,从单张 1024×1024 源图批量导出 iOS/macOS(20 个尺寸)及 Android 自适应图标(5 种密度),支持 bash 脚本自动化。

2. Favicon 套件:生成标准 web favicon(16×16、32×32)、Apple Touch Icon(180×180)、Android Chrome 图标(192×192、512×512)及多尺寸 ICO 文件,附带完整的 HTML meta 标签和 site.webmanifest 配置模板。

3. 配色系统生成:提供基于 HSL 算法的 JavaScript 调色板函数,从单一主色自动生成 50-950 共 11 级色阶,适用于设计系统主题配置。

4. 图像处理速查:整合 sips(macOS 原生)与 ImageMagick(跨平台高级处理)的双工具链,覆盖缩放、格式转换、圆角、合成、批处理、文字叠加等常见操作。

显著优点

  • 工具链务实:优先推荐 sips(macOS 内置,零依赖)处理基础任务,复杂场景 fallback 至 ImageMagick,避免过度依赖重型工具
  • 即开即用:所有代码块均为可直接运行的示例脚本,参数化设计($1$2 输入)便于集成到 CI/CD 流程
  • 平台覆盖全:同时覆盖 iOS/macOS、Android、Web 三端图标规范,减少跨平台开发时的重复研究成本
  • 零外部依赖:纯本地工具调用,无需联网或 API key

潜在局限

  • macOS 限定sipsscreencapture 为 macOS 独占工具,Linux/Windows 用户需自行替换为 ImageMagick 或对应平台工具
  • 无可视化能力:仅提供命令行和代码方案,不集成图形界面或预览功能
  • AI 生成依赖外部nano-banana-pro 仅列于工具选择表,无具体调用示例或配置说明

适合人群

前端开发者、独立开发者、需快速产出应用商店素材的技术型产品经理、追求自动化设计资产工作流的 DevOps 工程师

常规风险

  • 误用风险:ImageMagick 的 mogrify 等命令会原地修改文件,建议先在副本上测试
  • 色彩管理sips 默认不处理色彩空间转换,印刷级色彩准确性需求需额外校验
  • ICO 格式依赖:生成 .ico 文件必须安装 ImageMagick,纯 sips 方案无法完成

design-assets 内容

手动下载zip · 2.1 kB
SKILL.mdtext/markdown
请选择文件