mcpField
I
import

import

github.com/subframeapp设计与 UI452249 次安装今天更新
代码仓库

关于 import

用于在 Subframe 中复现现有视觉系统的工作流技能,面向设计人员。它涵盖源资产盘点、依赖顺序导入,以及对照源内容检查结果。

主要功能

  1. 01盘点源样式与资产
  2. 02映射源令牌到 Subframe
  3. 03导入字体、图标、主题和组件
  4. 04验证导入后的视觉状态
  5. 05报告缺项与导入数量

适用场景

  1. 01在 Subframe 中复现网页页面
  2. 02将设计系统迁移到 Subframe
  3. 03按依赖导入组件库

安装

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

$npx skills add https://github.com/subframeapp/subframe --skill import

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

详细介绍

使用此工作流在 Subframe 中复现现有视觉系统。单页复现请使用 design,将 Subframe 设计转为代码请使用 develop。

步骤

  1. 导入前,先盘点所请求的源内容。阅读 Tailwind 配置、全局 CSS、令牌模块、字体声明、图标资源、可复用组件及其使用示例。对于网站,请使用宿主的浏览工具检查已渲染状态、无障碍样式和资源。仅凭截图无法确定完整的令牌系统或组件库;请区分观察到的值与推断出的值。
  2. 将盘点结果与目标主题、字体、图标和组件进行比较。维护源名称到 Subframe 名称和 ID 的映射。开始前先定义所请求的完整盘点清单,以便按 N / M 报告进度,而不是说“几个组件”。如果只能部分访问源内容,请说明盘点并不完整。
  3. 先导入所需字体,再导入主题;先导入所需图标,再导入组件。请求导入组件时,请在其视觉基础就绪后,按依赖顺序重建组件。尽早验证一个有代表性的组件,以发现系统性转换错误,然后继续处理完整的请求清单。
  4. 将导入结果与源内容进行比较。检查浅色和深色外观、排版、尺寸、图标形状,以及所请求的变体和状态。扩展有问题的模式之前,先修正差异。
  5. 分别报告令牌、字体、图标和组件的数量,并在名称发生变化时提供源到目标的映射。列出失败项、不支持的细节、近似处理和剩余项目。除非遇到阻碍,否则请继续完成请求范围;首批导入成功并不代表整个库已导入完成。

字体和图标

上传前,请使用 list_fonts 将源字体系列、字重和样式与现有字体进行匹配。使用 create_asset_upload 暂存缺失文件,通过宿主的文件/网络工具上传,然后使用 add_fonts 或 add_icons 添加。将上传结果与盘点清单关联,避免将上传失败的文件计为已导入。

必要时,从图标组件或精灵图中提取 SVG 图稿。UI 字形请选择可重新着色的图标;品牌图稿则保留其原有颜色。导入前请检查使用不受支持的 SVG 特性的图稿;只有在简化后外观仍能保持时才进行简化,否则请说明此限制。如果无法确定保真度,请通过 get_icon_info 比较已存储的结果。

请审慎处理名称冲突。目标资源完全相同时可重复使用;图稿不同时,请选择不同名称,除非确实要替换现有资源。请在组件引用中使用返回的导入名称,不要假设文件名会成为完全相同的名称。

主题映射

记录源令牌名称、别名、分组和模式值。保留语义关系,不要只采样少数可见颜色。导入完整的所需令牌集,包括参考屏幕上不可见的令牌。

将受支持的 Tailwind CSS 或配置源原样传递给 import_theme。先试运行,检查映射和跳过的声明,再应用更改。对于其他格式,将令牌清单转换为受支持的源或 edit_theme 操作,同时保留源映射。不要为了适配偏好的调色板或字号比例而重新设计值。

重新导入排版前,先解决缺失字体的问题。阅读每一条跳过的声明:不受支持的间距令牌、无法解析的值和缺失字体都是需要处理的缺口,而非成功导入的内容。尽可能在组件样式中保留不受支持的尺寸,并说明它们不是可编辑的主题令牌。

将浅色值映射为基础值,将深色值映射为深色覆盖值;使用 edit_theme 写入覆盖值前,先启用深色模式。检查两种模式下的别名。不要将深色值扁平化到基础调色板中,也不要把单独的品牌主题误认为深色模式。

对于多个源主题,检查 list_themes,并将每个主题映射到明确的目标。不同主题中的共享令牌标识必须具有一致的含义。在受支持的情况下保留颜色分组;对于无法直接表示的其他集合或分组结构,予以说明。使用 get_theme 读回每个受影响的主题,比较值、别名和深色覆盖值。合并等效角色时保留现有令牌引用;删除或替换令牌前,先准备具体映射以供确认。

组件

阅读每个组件的实现、样式、依赖项和典型用法。将源代码作为代码引用传递给 design_component,并说明要保留其视觉结构、变体、插槽和状态样式。若有渲染后的参考内容,也应一并提供;仅有包含未解析导入的代码并不足够。

先构建基础组件,再构建复合组件。在后续引用和说明中使用新导入的 Subframe 组件。如果目标中已存在匹配的组件,先进行比较;若确实需要更新,则使用 edit_component,而不是再创建一个副本。

重建视觉约定,而非运行时逻辑:API 调用和应用状态仍由源应用处理。将视觉状态表示为组件变体或示例。将缺失的行为或不受支持的样式列入导入报告,而不要声称转换无损。

wait_for_jobs 完成后,读回每个组件并检查 screenshot_component。如果导入更改了共享资源或令牌,则使用 screenshot_page 检查有代表性的现有页面用法。仅当组件确实存在时,才将其计为已导入;对于无法进行视觉验证的内容,应单独说明。遇到含义不明的失败后,重试前先检查目标,以避免重复创建。

评论

支持 Markdown