AI导哈

AI设计生成器

Figma AI Designer是一款基于大型语言模型的全栈应用，可将文本提示转换为可编辑的Figma设计，适用于设计师和开发人员快速生成响应式布局。

  • by KrishnaDigarse
  • JavaScript
  • 本地部署
  • 2 星标
  • 更新于
在 GitHub 查看 KrishnaDigarse/Figma-MCP

使用说明

🎨 Figma AI设计师

使用AI将文本提示转化为专业的Figma设计。

Figma AI Designer是一个全栈应用程序，它利用大型语言模型（LLM）从简单的文本描述生成可编辑的、支持自动布局的Figma设计。它由一个用于用户交互的React前端、一个用于AI处理的Flask后端（由Groq提供支持）和一个实时渲染设计的自定义Figma插件组成。

✨ 特性

  • 🤖 人工智能发电：使用最先进的LLM（通过Groq API）将自然语言提示转换为结构化设计命令。
  • 📐 自动布局支持：生成具有嵌套自动布局框架、填充、间隙和对齐的完全响应式设计。
  • ⚡ 实时更新：使用轮询机制将命令从后端直接流式传输到Figma画布。
  • 🎨 上下文感知迭代：可以读取当前的设计状态以进行迭代更新（例如，“主标题应该更大”）。
  • 🖼️ 丰富元素支持：支持框架、文本（使用谷歌字体/Inter）、矩形、椭圆和图像（来自URL）。
  • 🔐 用户认证：安全的登录和注册流程由 职员 身份验证。
  • 💻 现代仪表板：一个时尚的深色模式仪表板，由 反应, 维特，以及 顺风CSS.

🏗️ 建筑

该系统在三层架构中运行：

  1. 前端（React+Vite）:
    • 用户登录并输入设计提示（例如，“创建现代登录卡”）。
    • 通过HTTP POST将提示发送到后端。
  2. 后端（Python+Flask）:
    • 收到提示。
    • 使用系统提示(backend/prompts/system_prompt.txt)和Groq API生成设计的JSON表示。
    • 将命令对象推入内存中的队列。
  3. Figma插件（JavaScript）:
    • 轮询后端(/mcp/figma/next)每1秒。
    • 检索挂起的命令并使用Figma插件API(figma.createFrame, figma.loadFontAsync等等）在画布上绘制元素。

🛠️ 技术栈

前端

  • 框架：React 19（Vite）
  • 样式：顺风CSS v4
  • 认证：职员（@职员/职员反应）
  • 路由：React Router DOM v7
  • 图标：Lucide React

后端

  • 服务器：Flask（Python）
  • AI引擎：Groq SDK（支持以下模型 llama-3, mixtral等等）
  • 排队系统python queue.Queue （内存中）

Figma插件

  • 环境：Figma插件API（清单v1）
  • 逻辑：普通JavaScript（异步/等待）

🚀 入门指南

先决条件

  • Node.js （v18+）
  • python （v3.10+）
  • Figma桌面应用程序
  • Groq API密钥 （用于AI生成）
  • 办事员API钥匙 （前端可发布密钥）

1.后端设置

  1. 导航到 backend 目录：
    cd backend
  2. 创建虚拟环境（可选但推荐）：
    python -m venv venv
# Windows:
.\venv\Scripts\activate
# Mac/Linux:
source venv/bin/activate
  3. 安装依赖项：
    pip install flask flask-cors groq python-dotenv mistralai
  4. 创建一个 .env 文件在 backend 文件夹：
    GROQ_API_KEY=your_groq_api_key_here
  5. 启动服务器：
    python main.py
    服务器将在以下时间运行 http://127.0.0.1:4000

2.前端设置

  1. 导航到 frontend 目录：
    cd frontend
  2. 安装依赖项：
    npm install
  3. 创建一个 .env.local 文件在 frontend 使用您的职员钥匙的文件夹：
    VITE_CLERK_PUBLISHABLE_KEY=pk_test_...
  4. 启动开发服务器：
    npm run dev
    应用程序将在以下时间运行 http://localhost:5173

3.插件设置

  1. 打开 Figma桌面应用程序.
  2. 首选 菜单 > 插件 > 发展 > 从清单导入插件。..
  3. 选择 manifest.json 文件内部 figma-plugin 此项目的文件夹。
  4. 应出现插件“Figma AI Designer”（或清单中定义的类似名称）。

🎮 使用指南

  1. 启动堆栈：确保后端(port 4000)和前端(port 5173)正在奔跑。
  2. 打开Figma：打开新的设计文件。
  3. 运行插件：右键单击画布>插件> Figma AI设计师.
    • 您应该看到一条通知：“MCP Figma插件正在运行…”
  4. 生成设计:
    • 转到Web仪表板(http://localhost:5173).
    • 登录。
    • 输入提示。， 在卡片上画一张联系人表格，上面有姓名、电子邮件输入和提交按钮
    • 点击 生成.
  5. 观看魔术：切换回Figma。使用 跑 如果需要，可以在插件中使用命令（或者如果是自动轮询，它会自动出现）。

📁 项目结构

├── backend/
│   ├── main.py              # Flask Server & AI Logic
│   ├── prompts/             # System prompts for LLM
│   ├── output.txt           # Log of generated commands
│   └── current_design.json  # State of latest design
├── figma-plugin/
│   ├── code.js              # Plugin Logic (Polling & Rendering)
│   ├── manifest.json        # Plugin Configuration
│   └── ui.html              # (Optional) Plugin UI
├── frontend/
│   ├── src/                 # React Source Code
│   ├── components/          # UI Components
│   └── App.jsx              # Main App Routing
└── README.md                # Project Documentation

⚠️ 故障排除

  • 插件未更新？
    • 检查后端服务器是否正在运行。
    • 确保 code.js 指向正确的URL(http://127.0.0.1:4000/mcp/figma/next).
    • 检查Figma控制台（插件>开发>打开控制台）是否有错误。
  • AI返回错误？
    • 验证您的 GROQ_API_KEY 在 backend/.env.
    • 检查 output.txt 在后端文件夹中查看原始JSON响应的样子。

相关 MCP