关于 import
用于在 Subframe 中复现现有视觉系统的工作流技能,面向设计人员。它涵盖源资产盘点、依赖顺序导入,以及对照源内容检查结果。
主要功能
- 01盘点源样式与资产
- 02映射源令牌到 Subframe
- 03导入字体、图标、主题和组件
- 04验证导入后的视觉状态
- 05报告缺项与导入数量
适用场景
- 01在 Subframe 中复现网页页面
- 02将设计系统迁移到 Subframe
- 03按依赖导入组件库
安装
复制下面的命令,在终端中运行。
npx skills add https:/ / github.com/ subframeapp/ subframe --skill import安装后在 Claude Code 中输入/import确认已加载。
详细介绍
使用此工作流在 Subframe 中复现现有视觉系统。单页复现请使用 design,将 Subframe 设计转为代码请使用 develop。
步骤
- 导入前,先盘点所请求的源内容。阅读 Tailwind 配置、全局 CSS、令牌模块、字体声明、图标资源、可复用组件及其使用示例。对于网站,请使用宿主的浏览工具检查已渲染状态、无障碍样式和资源。仅凭截图无法确定完整的令牌系统或组件库;请区分观察到的值与推断出的值。
- 将盘点结果与目标主题、字体、图标和组件进行比较。维护源名称到 Subframe 名称和 ID 的映射。开始前先定义所请求的完整盘点清单,以便按 N / M 报告进度,而不是说“几个组件”。如果只能部分访问源内容,请说明盘点并不完整。
- 先导入所需字体,再导入主题;先导入所需图标,再导入组件。请求导入组件时,请在其视觉基础就绪后,按依赖顺序重建组件。尽早验证一个有代表性的组件,以发现系统性转换错误,然后继续处理完整的请求清单。
- 将导入结果与源内容进行比较。检查浅色和深色外观、排版、尺寸、图标形状,以及所请求的变体和状态。扩展有问题的模式之前,先修正差异。
- 分别报告令牌、字体、图标和组件的数量,并在名称发生变化时提供源到目标的映射。列出失败项、不支持的细节、近似处理和剩余项目。除非遇到阻碍,否则请继续完成请求范围;首批导入成功并不代表整个库已导入完成。
字体和图标
上传前,请使用 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 检查有代表性的现有页面用法。仅当组件确实存在时,才将其计为已导入;对于无法进行视觉验证的内容,应单独说明。遇到含义不明的失败后,重试前先检查目标,以避免重复创建。