mcpField
R
register-asset

register-asset

github.com/bluzir设计与 UI10747 次安装27 周前更新
代码仓库

关于 register-asset

用于将设计产物登记到 design-assets.json 并更新静态 assets.html 视觉索引的工作流技能。支持填写产物信息、审核状态和缩略图。

主要功能

  1. 01登记并更新产物条目
  2. 02设置分组与审核状态
  3. 03捕获或复用缩略图
  4. 04重新生成静态 assets.html 索引

适用场景

  1. 01整理已完成的设计产物
  2. 02跟踪产物审核与批准状态
  3. 03更新可浏览的视觉总览

安装

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

$npx skills add https://github.com/bluzir/claude-code-design --skill register-asset

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

详细介绍

注册资源

将一个产物添加到 design-assets.json，并刷新 assets.html 中的视觉概览。

参数解析

从 $ARGUMENTS 中解析：

  • 位置参数 0：html-path（必填）
  • --asset "<name>"：显示名称（默认：根据文件名生成，采用标题式大小写）
  • --group <X>：Type、Colors、Spacing、Components、Brand 之一（默认：Components）
  • --subtitle "<text>"：简短描述
  • --status <X>：needs-review | approved | changes-requested（默认：needs-review）
  • --auto：由 /done 调用的静默模式——跳过缩略图捕获（复用 .claude/last-preview.png），不显示确认提示，仅输出一行报告

步骤

  1. 捕获缩略图：

    • 如果启用了 --auto 且 .claude/last-preview.png 存在：Bash(cp .claude/last-preview.png assets/thumbs/<slug>-<ts>.png) — 复用现有缩略图
    • 否则：/preview <html-path> → 等待 500ms → mcp__chrome-devtools__take_screenshot → 保存到 assets/thumbs/<slug>-<ts>.png（先运行 Bash(mkdir -p assets/thumbs)）

  2. 读取现有的 design-assets.json：

    • 如果文件不存在 → 创建为 {"items": []}

  3. 新增或更新条目：

    • 以 (asset, path) 组合为键
    • 如果已存在 → 更新字段和缩略图，并更新 updated_at
    • 如果是新条目 → 追加

    架构：

    {
  "items": [
    {
      "asset": "Primary button",
      "path": "artifacts/button.html",
      "group": "Components",
      "status": "approved",
      "subtitle": "Filled variant with hover state",
      "thumbnail": "assets/thumbs/button-20260420T120000Z.png",
      "registered_at": "2026-04-20T12:00:00Z",
      "updated_at": "2026-04-20T12:00:00Z"
    }
  ]
}

  4. 写入 design-assets.json，使用格式化的 JSON（缩进 2 个空格）。

  5. 重新生成 assets.html：

    • Bash(node scripts/make-assets-index.mjs) — 参见下方脚本
    • 如果用户没有运行 /doctor 且缺少 node，则使用 Write 工具通过内联生成方式套用 HTML 模板

  6. 报告：“已在 <group> 中注册 <asset>。请访问 assets.html 查看。”

assets.html 布局

按组划分区块。每张卡片显示：

  • 缩略图（可点击 → 在新标签页中打开源 HTML）
  • 资源名称（粗体）
  • 副标题（弱化显示）
  • 状态徽章（按颜色区分：绿色=approved，琥珀色=needs-review，红色=changes-requested）
  • 更新日期
  • 迷你菜单：approve、request-changes、unregister

HTML 为静态页面——无需服务端。状态变更通过 Claude 完成（用户说“批准按钮资源” → Claude 重新运行 /register-asset ... --status approved）。

评论

支持 Markdown