Design Assets

核心功能

本技能提供完整的图形设计资产开发工作流，主要面向移动/Web应用开发者与设计师。

核心用法

应用图标生成：通过单一1024×1024源文件，自动生成iOS/macOS所需的20种标准尺寸（16-1024px），以及Android 5种密度等级（mdpi至xxxhdpi）的自适应图标。

网站Favicon套件：生成16×16至512×512的PNG图标，并合并输出ICO多分辨率格式，附带完整的HTML meta标签与Web Manifest配置模板。

配色系统生成：基于HSL色彩模型，从单一主色生成50-950的11级色阶，支持饱和度参数化调整。

图像处理：整合三层工具链——sips（macOS原生，极速简单操作）、ImageMagick（复杂合成/特效/批处理）、SVG（矢量图标与Logo）。

显著优势

• 工具链原生集成：优先使用macOS内置sips与screencapture，零依赖部署
• 批量自动化：Shell脚本驱动，20+尺寸一键生成
• 多平台覆盖：同时满足iOS/macOS/Android/Web的图标规范
• 可扩展性：HSL生成器易于移植至CSS/JS/Swift等开发环境

潜在局限

• 平台锁定：sips为macOS独占，跨平台需替换为ImageMagick或cwebp等工具
• AI生成依赖：nano-banana-pro需外部API接入，未提供备选方案
• 矢量编辑缺失：SVG章节仅提及格式优势，无实际路径操作代码
• ICO生成依赖ImageMagick：单一功能引入重型依赖

适用人群

• 独立开发者需快速产出应用商店素材
• 前端工程师处理响应式图片与favicon
• UI设计师建立系统化色彩规范

风险提示

• 脚本未包含源文件尺寸校验，非1024×1024输入可能导致非预期拉伸
• ImageMagick操作涉及复杂命令行参数，误用可能覆盖原图（建议先用副本测试）
• AI生成图像存在版权与内容安全合规风险

核心用法

本Skill为纯Markdown文档型设计资源指南，涵盖四大核心场景：

1. 应用图标生成：提供完整Bash脚本，从单张1024×1024源图自动生成iOS/macOS（20种尺寸）及Android（5种密度）全套图标规格，基于macOS原生sips工具实现零依赖批量处理。

2. Favicon制作：包含从PNG生成多尺寸favicon的完整工作流，覆盖16×16至512×512的网页标准尺寸，并提供对应的HTML meta标签模板及site.webmanifest示例。

3. 色彩系统工具：内置基于HSL算法的JavaScript调色板生成器，可依据主色自动生成50-950的完整色阶，适用于设计系统搭建。

4. 图像处理命令参考：整理ImageMagick与macOS sips的常用操作速查，包括缩放、格式转换、圆角、叠加、批量处理等场景。

显著优点

• 纯文档零风险：无实际可执行代码，仅提供代码示例与教学说明
• 原生工具优先：推荐sips等系统内置工具，避免第三方依赖
• 生产级覆盖：图标尺寸严格遵循Apple/Android官方设计规范
• 即查即用：命令片段可直接复制修改，无需额外理解成本

局限性与潜在缺点

• 平台绑定：sips仅限macOS，Linux/Windows用户需改用ImageMagick
• 无可视化反馈：纯文本交互，无法预览生成效果
• AI生成依赖：文档提及nano-banana-pro但未提供详细调用指南
• 无版本管理：建议备份源文件，脚本会直接覆盖输出

适合人群

• macOS平台的前端/移动端开发者
• 需要快速产出应用图标资源的独立开发者
• 希望建立标准化设计系统的技术团队
• 学习ImageMagick/sips命令行的设计工程师

常规风险

• 命令误用风险：直接执行脚本前需确认输入路径，避免误删文件
• 工具未安装：ImageMagick需单独安装，系统可能缺失magick命令
• 色彩空间差异：sips与ImageMagick处理色彩配置可能产生细微偏差，建议关键场景下统一工具链