SuperAPI AI 工具集

register-asset

设计与创作

查看项目

更新于 10-15 20:07

技能介绍

用途:将设计产物登记进 design-assets.json,并刷新 assets.html 可视化总览。

主要能力:解析参数(位置参数 html-path 必填;--asset 显示名,默认由文件名转 Title Case;--group 取 Type、Colors、Spacing、Components、Brand,默认 Components;--subtitle 简短描述;--status 取 needs-review、approved、changes-requested,默认 needs-review;--auto 静默模式,由 /done 调用,跳过缩略图抓取并复用 .claude/last-preview.png,只输出一行报告)。抓取缩略图:--auto 且 .claude/last-preview.png 存在时用 cp 复用;否则执行 /preview,等待 500ms 后用 mcp__chrome-devtools__take_screenshot 截图,保存到 assets/thumbs/<slug>-<ts>.png(先 mkdir -p assets/thumbs)。读取 design-assets.json,缺失则创建 {"items": []};按 (asset, path) 键做 upsert,存在则更新字段、缩略图并刷新 updated_at,否则追加。写入 2 空格缩进 JSON。重新生成 assets.html:运行 node scripts/make-assets-index.mjs;若未运行 /doctor 且缺少 node,则用 Write 工具以内联 HTML 模板回退生成。最后报告“Registered <asset> in <group>. View at assets.html.”。

assets.html 布局:按 group 分区,每张卡片含缩略图(可点击在新标签打开源 HTML)、加粗资产名、弱化副标题、颜色状态徽章(绿=approved、琥珀=needs-review、红=changes-requested)、更新日期,以及 approve、request-changes、unregister 迷你菜单。页面为静态,无服务器;状态变更由 Claude 完成,例如用户说“approve the button asset”,Claude 会重跑 /register-asset ... --status approved。

适用场景:产物准备评审或需要维护设计资产总览时。限制:依赖 /preview、Chrome DevTools MCP 截图与 node 脚本,缺失时走回退;其余细节资料未提供。