asset-manager

Name: asset-manager
Author: oakoss

github.com/oakoss设计与 UI20119 次安装11 周前更新

关于 asset-manager

Asset Manager 是用于跨项目整理、优化和追踪设计资源的工作流指南，面向管理项目素材的团队。内容涵盖目录与命名规范、图片和字体处理、品牌资源库及版本追踪。

复制下面的命令，在终端中运行。

$npx skills add https://github.com/oakoss/agent-skills --skill asset-manager

安装后在 Claude Code 中输入/asset-manager确认已加载。

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/

best-practices.md

brand-library.md

font-management.md

image-optimization.md

organization.md

version-control.md

管理各项目中的设计资源：目录整理、命名规范、图像和字体优化、品牌资源库及版本控制。适用于需要整理、压缩、转换为现代格式或在各个版本中跟踪的资源。不适用于运行时图像转换或路径前缀之外的 CDN 配置。

任务	工具 / 方法	要点
图像优化	Sharp	调整大小、压缩、转换为 WebP/AVIF/JPEG/PNG
SVG 优化	SVGO (v4+)	v4 中默认关闭 `removeViewBox` 和 `removeTitle`
字体转换	`woff2_compress`、`sfnt2woff`	TTF/OTF 转为 WOFF2（主要格式）+ WOFF（备用格式）
字体子集化	Glyphhanger	移除未使用的字形，根据抓取的页面自动检测
响应式图像	Sharp 断点	生成移动端（640）、平板（768）、桌面端（1920）版本
资源版本管理	SHA-256 哈希跟踪	使用 `asset-versions.json` 清单检测变更
git 中的大文件	Git LFS	跟踪 PSD、AI、Sketch、Figma、MP4、MOV 文件
品牌资源	类型化清单	使用包含徽标、颜色和排版的 `BrandAssets` 接口

目录	内容
`assets/images/{category}/`	产品、团队、营销和 UI 图像
`assets/icons/svg/`	SVG 图标文件
`assets/fonts/{family}/`	WOFF2 + WOFF 字体文件
`assets/videos/`	视频资源
`assets/logos/svg/`、`png/`、`variants/`	徽标格式和颜色变体
`brand/`	颜色 JSON、排版 JSON、指南

资源类型	模式	示例
图像	`{category}-{description}-{size}.{format}`	`product-hero-1920x1080.jpg`
图标	`{icon-name}-{variant}.svg`	`home-outline.svg`
字体	`{font-family}-{weight}.{format}`	`Inter-Regular.woff2`
徽标	`logo-{variant}.{format}`	`logo-full.svg`、`logo-white.svg`

步骤	操作
整理	按照命名规则将未分类的资源整理到目录中
优化图片	调整尺寸、压缩图片，并生成 WebP/AVIF 变体
响应式图片	生成适用于手机/平板/桌面断点的尺寸
优化字体	将 TTF/OTF 转换为 WOFF2 + WOFF
版本管理	使用 `asset-versions.json` 进行基于哈希的跟踪

错误	修正
将原始设计文件提交到 git	对 PSD、AI、Sketch、Figma、视频文件使用 Git LFS
提供原始尺寸的图片	在各个断点生成响应式变体
只使用 JPEG/PNG	生成 WebP + AVIF，并提供回退格式
未对字体进行子集化	使用 Glyphhanger 子集化未使用的字形
未设置 `font-display: swap`	始终在 `@font-face` 中设置，以避免 FOIT
资源未使用 CDN	使用 `CDN_URL` 环境变量为资源路径添加前缀
在新项目中使用 imagemin	直接使用 Sharp；imagemin 已停止维护
在 SVGO v4 中使用 SVGO v3 插件配置	v4 中默认关闭 `removeViewBox` 和 `removeTitle`

支持 Markdown