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 将智能分析设计稿
   • 实时预览生成的代码效果
   • 一键复制或导出代码

🛠️ 开发指南

本地开发

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 插件 - 让设计稿转代码变得简单高效 🚀