mcpField
V
visual-assets

visual-assets

github.com/dralgorhythm设计与 UI12863 次安装14 周前更新
代码仓库

关于 visual-assets

用于选择、整理和优化视觉资源的设计参考，涵盖图标、图像与图形格式，以及响应式交付和性能实践。

主要功能

  1. 01图标、图像与图形格式指南
  2. 02图像压缩命令
  3. 03响应式图像实践
  4. 04使用 SVGO 优化 SVG
  5. 05资源整理与性能建议

适用场景

  1. 01为视觉资源选择格式
  2. 02压缩图像以便交付
  3. 03整理资源目录与版本
  4. 04改善图像加载性能

安装

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

$npx skills add https://github.com/dralgorhythm/claude-agentic-framework --skill visual-assets

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

详细介绍

视觉素材

素材类型

图标
  • SVG：可缩放、文件体积小、支持 CSS 样式
  • 图标字体：易于使用，样式选择有限
  • PNG 雪碧图：较为过时，文件体积较大
图片
  • JPEG：照片、复杂图像
  • PNG：透明图像、屏幕截图
  • WebP：现代格式，文件体积更小
  • AVIF：最新格式，压缩效果最佳
图形
  • SVG：插图、徽标、图表
  • Lottie：动画、复杂动效

优化

图片压缩
# WebP conversion
cwebp -q 80 input.png -o output.webp

# AVIF conversion
avifenc input.png output.avif

# PNG optimization
pngquant --quality=65-80 input.png
响应式图片
<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description"
       srcset="image-400.jpg 400w,
               image-800.jpg 800w,
               image-1200.jpg 1200w"
       sizes="(max-width: 600px) 100vw, 50vw">
</picture>
SVG 优化
# SVGO optimization
svgo input.svg -o output.svg

图标指南

  • 笔画宽度保持一致
  • 尺寸保持一致（24x24、20x20）
  • 视觉上对齐
  • 在小尺寸下清晰可辨

文件组织

assets/
├── icons/
│   ├── ui/
│   └── brand/
├── images/
│   ├── originals/
│   └── optimized/
└── illustrations/

性能提示

  1. 对首屏以下的图片进行懒加载
  2. 根据内容使用合适的格式
  3. 提供适配不同尺寸的图片
  4. 考虑通过 CDN 分发
  5. 设置缓存标头

评论

支持 Markdown