Sloth D2C Figma 插件

设计稿转代码工具 - Figma 插件

📖 简介

Sloth D2C 设计稿转代码插件，面向前端开发与设计团队的智能化工具，支持设计稿快速转生产级HTML/React代码，及文本/图片+Prompt输入AI生成目标风格页面并转译至Figma节点。

核心能力

① 高保真还原，样式布局精准匹配设计稿，降低编码与走查成本；

② 代码贴近人工编写，支持TailwindCSS、Flex自动布局、行列分组等技术特性；

③ 支持生成代码在线二次编辑（图片编组、源码调整等）；

④ 深度协同Sloth D2C MCP，通过配置拦截及数据推送突破RESTful API限制，最大化还原度。

🚀 安装

方式一：从 Figma 社区安装（推荐）

1. 访问 Figma 社区页面
2. 点击 "Install" 安装插件
3. 在 Figma 中打开任意设计稿，通过 Plugins 菜单找到 "Sloth D2C 设计稿转代码"

方式二：本地开发安装

1. 克隆项目并安装依赖：

# 克隆项目
git clone <repository-url>
cd ai/apps/figma

# 安装依赖（需要在根目录执行）
cd ../..
pnpm install

2. 构建插件：

# 开发模式（支持热更新）
pnpm dev:figma

# 生产构建
pnpm build:figma

3. 在 Figma 中加载本地插件：
   • 打开 Figma Desktop 应用
   • 进入 Plugins → Development → Import plugin from manifest
   • 选择 apps/figma/manifest.json 文件

💡 快速开始

基础使用流程

1. 打开插件

   • 在 Figma 中选择需要转换的设计稿或图层
   • 通过 Plugins 菜单启动 "Sloth D2C 设计稿转代码"

2. 选择元素

   • 插件会自动识别当前选中的图层
   • 也可以手动框选需要转换的区域

3. 配置转换选项

   • 选择目标代码框架（HTML/Vue/React 等）
   • 配置样式处理方式
   • 设置资源处理策略

4. 生成代码

   • 点击生成按钮，AI 将智能分析设计稿
   • 实时预览生成的代码效果
   • 一键复制或导出代码

🛠️ 开发指南

项目结构

apps/figma/
├── src/
│   ├── code.ts              # 插件主入口
│   ├── ui.tsx               # UI 界面入口
│   ├── ui.html              # UI HTML 模板
│   ├── types.ts             # 类型定义
│   ├── figma/               # Figma 相关逻辑
│   │   ├── index.ts         # Figma 逻辑入口
│   │   ├── main.ts          # 主流程控制
│   │   ├── layer.ts         # 图层处理
│   │   ├── node.ts          # 节点操作
│   │   ├── storage.ts       # 本地存储
│   │   ├── event.ts         # 事件系统
│   │   └── core/            # 核心算法
│   │       ├── core.ts      # 核心转换逻辑
│   │       ├── convert.ts   # 元素转换
│   │       ├── extract-style.ts  # 样式提取
│   │       ├── filter-blank.ts   # 空白节点过滤
│   │       ├── text-style.ts     # 文本样式处理
│   │       └── util.ts      # 工具函数
│   └── utils/               # 工具函数
├── manifest.json            # 插件配置文件
├── package.json
├── webpack.config.js        # Webpack 配置
├── webpack.cjs.config.js    # CommonJS 构建配置
└── tsconfig.json

依赖共享包：
├── @sloth-d2c/web          # 核心转码库
├── @sloth-d2c/history      # 历史记录管理
└── @sloth-d2c/shared-types # 类型定义

本地开发

1. 启动开发模式

# 在项目根目录
pnpm dev:figma

# 或只启动插件开发
cd apps/figma
pnpm dev:plugin

# 同时启动 Web 开发服务器（用于调试 UI）
pnpm dev:web

2. 热更新

开发模式下，修改代码会自动重新构建。在 Figma 中需要手动重新运行插件以加载最新代码。

3. 调试技巧

// 在插件代码中使用 console.log
console.log('Debug info:', data)

// 在 UI 代码中，日志会显示在浏览器控制台
// Figma Desktop: 右键插件窗口 → Inspect

构建和打包

# 构建
pnpm build

# Node.js 库构建（用于 MCP 服务）
pnpm build:lib:node

Sloth D2C Figma 插件 - 让设计稿转代码变得简单高效 🚀