AI导哈

UI到Figma桥接工具

SuperScan v4.4是一款专业工具包，用于桥接本地React/MUI开发与Figma设计，确保从设计系统（如Polaris DS）导入的组件具有原子级精度。

  • by coviyarce
  • JavaScript
  • 本地部署
  • 更新于
在 GitHub 查看 coviyarce/gemini-cli-ui-capture

使用说明

SuperScan UI桥v4.4🚀 — 专业忠诚

高保真UI到Figma桥，用于AI驱动的开发。

SuperScan v4.4是一个专门的工具包，旨在弥合本地React/MUI开发和Figma之间的差距。它确保了设计系统中的组件，如 北极星DS 以原子精度进口。

💎 高保真逻辑清单（v4.4）

为确保专业效果，执行以下架构规则：

1.SVG和图标精度

  • 按比例重新缩放： 图标从不拉伸。我们计算最小比例因子，以便在CSS容器内自然地拟合向量。
  • 仅矢量重新着色： 为了避免“方形框”错误（在MUI中很常见），颜色样式仅应用于 VECTOR 和 BOOLEAN_OPERATION 节点。不可见的交互容器保持透明。
  • viewBox感知： 插件尊重原生 viewBox SVG的初始解析，确保几何完整性。

2.排版与布局

  • 垂直居中： 所有文本节点默认为 textAlignVertical: "CENTER"，匹配专业UI组件（按钮、输入）的行为。
  • 对齐映射： CSS逻辑属性的自动翻译(start, end, justify)前往Figma LEFT, RIGHT, CENTER.
  • 降噪： 小于2px的元素（波纹、阴影、装饰性伪影）会被自动过滤掉，以保持Figma图层面板的清洁。

3.环境兼容性

  • ES5+安全： 避免像Optional Chaining这样的现代语法(?.)以确保插件在所有Figma环境中运行而不会出现转译错误。

🛠 设置和安装

  1. 安装依赖项：

    npm install

  2. 安装Figma插件：

    • 打开Figma。
    • 首选 Plugins > Development > Import plugin from manifest....
    • 选择 figma-plugin/manifest.json.

🚀 工作流程

  1. 跑步捕捉：
    npm run capture
  2. 同步插件：
    npm run update-plugin
  3. 在Figma导入： 打开SuperScan插件并单击捕获的工作区。

建于❤️ 通过 路易斯·科维拉(Coviarce). 根据 MIT许可证.

相关 MCP