placeholder-images

用途：在 HTML 原型、线框与布局开发中生成 SVG 占位图，替代真实图片。主要能力：三种类型——simple（灰底加对角叉）、labeled（灰底加文字标签）、brand（读取设计令牌颜色，适合成品度较高的原型）；内置尺寸预设 avatar-sm 48x48、avatar-lg 128x128、thumbnail 150x150、product 400x400、card 400x225、hero 1200x400、og 1200x630，也支持 WxH 自定义尺寸如 800x600。brand 类型会自动在 src/styles/main.css、src/styles/_tokens.css、.assets/styles/main.css、.claude/styles/main.css 等路径查找 CSS 并提取颜色令牌，映射规则为背景取 --background-alt、--background-main、--surface-color，描边取 --border-color、--border-light，文字取 --text-muted、--text-color，强调色取 --primary-color、--primary、--accent-color，强调文字取 --text-inverted、--primary-text。使用方式：通过 node scripts/quality/generate-placeholder.js 命令行生成，例如 --type simple --size 400x400；带标签用 --type labeled --label "Hero Image" --size 1200x400；品牌图用 --type brand --label "Product" --preset product，可用 --tokens 指定 CSS 文件，用 --output 指定输出路径，用 --inline 生成内联 data URI。文件建议统一放在 .assets/images/placeholder/ 目录，命名格式为 {type}-{width}x{height}.svg。无障碍要求：SVG 必须包含 role="img"、aria-label，且 <title> 作为首个子元素，img 元素需提供有意义的 alt 文本。常见标签示例包括 Hero Image、Product Shot、Team Photo、Thumbnail、Logo、Icon、Banner、Card Image、Gallery、Avatar。限制：需 Node.js 运行环境与相应脚本文件；brand 类型的自动令牌检测依赖上述 CSS 路径，路径不匹配时需手动指定；资料未提供安装命令、许可证与具体错误处理说明。