AI导哈

Figma设计转API生成器

一个VS Code扩展，利用AI视觉分析Figma设计并自动生成智能TypeSpec API，支持OpenAPI和MCP规范。

  • by anfibiacreativa
  • TypeScript
  • 本地部署
  • 1 星标
  • 更新于
在 GitHub 查看 anfibiacreativa/typespec-figma-vision

使用说明

TypeSpec Figma AI生成器

使用的VS Code扩展 AI视觉 分析Figma设计，并自动生成智能TypeSpec API 开放API 和 主控程序 规格。

特性

  • AI视觉分析：使用GPT-4o Vision、Ollama或自定义AI模型来理解设计意图
  • Smart Figma导入：直接粘贴完整的Figma URL-无需提取文件ID
  • API智能生成：基于页面类型（目录、购物车、配置文件、仪表板等）创建上下文感知的REST API
  • 双规格输出：从单个TypeSpec源生成OpenAPI（YAML）和MCP（JSON）
  • 自动编译：生成后自动构建规格
  • 交互式用户界面：带AI模型选择的引导式网络视图界面
  • 安全存储：存储在VS代码秘密存储中的令牌

先决条件

安装

  1. 克隆此存储库
  2. 跑 npm install --legacy-peer-deps
  3. 跑 npm run compile
  4. 按F5打开扩展开发主机

用法

交互式导入（推荐）

  1. 打开命令选项板(Cmd+Shift+P / Ctrl+Shift+P)
  2. 跑 TypeSpec: Import from Figma (Interactive)
  3. 在webview表单中：
    • 选择AI模型提供者:
      • 开放人工智能：输入API密钥（使用GPT-4o Vision）
      • 奥拉玛：输入模型名称（默认值： llama3.2-vision，要求Ollama在本地运行）
      • 自定义：输入基本URL、API键和型号名称
    • 粘贴您的Figma URL （完整URL或仅文件ID）：
      • 完整URL: https://www.figma.com/design/n0l5cOMAlgEbbX0M7QuzZm/My-Design
      • 或者只是ID： n0l5cOMAlgEbbX0M7QuzZm
    • 输入Figma令牌
  4. 点击 进口设计

接下来会发生什么

  1. 截图：扩展将Figma设计渲染为PNG
  2. AI分析：AI视觉模型分析屏幕截图并识别：
    • 页面类型（目录、购物车、个人资料、仪表板、表单、详细信息）
    • 数据实体（产品、用户、订单等）
    • 所需的API操作（使用智能参数的GET、POST、PUT、DELETE）
  3. 确认：您将看到一个包含三个选项的对话框：
    This is what I could identify. Is this your intent?

An ecommerce application with:
  - catalog with filters & search
  - pagination support
  - shopping cart
  - checkout process

Service: EcommerceAPI
Entities: Product, CartItem, Order
Operations: 12 endpoints
    • 是，生成TypeSpec -继续发电
    • “不太对，再试一次” -重新运行AI分析
    • 否，取消 -取消导入
  4. 生成：生成完整的TypeSpec项目：
    • main.tsp -TypeSpec型号和操作
    • tspconfig.yaml -双发射极配置（OpenAPI+MCP）
    • package.json -所有TypeSpec依赖项
    • README.md -使用说明
  5. 编译选择：你会被问到“跑步一代？”
    • “是，运行编译” -自动运行 npm install --legacy-peer-deps && npm run build
    • “不，我稍后再做” -跳过自动编译
  6. 输出：在中查找生成的规格 generated/:
    • openapi.yaml -OpenAPI 3.0规范
    • mcp.json -MCP服务器规范

基于命令的导入

跑 TypeSpec: Import Figma Design 用于快速命令调色板工作流。

分析过程中

人工智能分析通常需要 1-10分钟 取决于模型和复杂性：

  • 进度更新 每10秒显示一次经过的时间
  • 随时取消 通过单击进度通知上的X按钮
  • 自动超时 如果分析未完成，10分钟后
  • 重试选项 如果第一次分析不符合你的意图

项目结构

typespec-figma-ai-generator/
├── src/
│   ├── extension.ts                      # Main extension entry point
│   ├── commands/
│   │   ├── importFigma.ts                # AI-powered Figma import
│   │   ├── generateDualSpec.ts           # Compile TypeSpec with dual emitters
│   │   ├── previewOpenAPI.ts             # Swagger UI preview
│   │   └── previewMCP.ts                 # MCP JSON preview
│   ├── utils/
│   │   ├── figmaImageRenderer.ts         # Render Figma designs to PNG
│   │   ├── aiVisionAnalyzer.ts           # AI vision analysis (GPT-4o/Ollama)
│   │   ├── intelligentTypeSpecGenerator.ts # Generate TypeSpec from AI analysis
│   │   ├── projectScaffolder.ts          # Create complete TypeSpec project
│   │   ├── runTypeSpec.ts                # TypeSpec compiler wrapper
│   │   └── fileUtils.ts                  # File system helpers
│   └── webviews/
│       ├── figmaImport.html              # Interactive import UI with AI config
│       ├── openapi.html                  # Swagger UI template
│       └── mcp.html                      # MCP JSON viewer
├── package.json
├── tsconfig.json
└── README.md

运作原理

与依赖于组件名称的传统解析器不同，此扩展使用 AI视觉 真正了解你的设计：

  1. 截图：从Figma Rendering API获取高分辨率PNG
  2. AI视觉：将图像发送到GPT-4o Vision（或Ollama），并给出详细提示
  3. 意图识别：AI识别页面类型并推断逻辑API操作
    • 目录页面 → 带过滤、分页和搜索的GET列表
    • 详细信息页面 → 按ID获取
    • 表单 → POST创建，PUT更新
    • 手推车 → 获取购物车、POST添加商品、DELETE删除、PUT更新数量
    • 仪表盘 → GET分析/指标
  4. TypeSpec生成：使用适当的类型创建惯用的TypeSpec
  5. 双重排放：编译为OpenAPI和MCP规范

AI模型选项

OpenAI（云）

  • 模型：GPT-4o愿景
  • 优点：准确度最高，速度最快
  • 缺点：需要API密钥，每次分析成本约为0.01-0.05美元
  • 设置：从获取API密钥 OpenAI平台

Ollama（当地）

  • 模型：llama3.2-vision（或兼容）
  • 优点：免费，私人，无API费用
  • 缺点：速度较慢（可能需要5-10分钟），需要本地GPU
  • 设置:
    # Install Ollama
brew install ollama  # macOS

# Pull vision model
ollama pull llama3.2-vision

# Start Ollama server
ollama serve
  • 备注：扩展程序在分析之前检查Ollama是否正在运行，如果不可用，则显示有帮助的错误

自定义端点

  • 使用任何与OpenAI兼容的视觉API
  • 配置基本URL、API密钥和型号名称

示例

输入：电子商务产品列表页面的Figma设计

AI分析:

  • 页面类型： catalog
  • 实体： Product （id、名称、价格、图像URL、类别、库存）
  • 操作：
    • GET /products （查询参数：搜索、类别、最小价格、最大价格、页面、限制）
    • GET /products/{id}

生成的TypeSpec:

import "@typespec/http";
import "@typespec/openapi3";
import "typespec-mcp-server-js";

using TypeSpec.Http;
using MCP;

@service({
  title: "Ecommerce API",
})
namespace EcommerceAPI;

model Product {
  id: string;
  name: string;
  price: float64;
  imageUrl: url;
  category: string;
  inStock: boolean;
}

@route("/products")
namespace ProductOperations {
  @get op list(
    @query search?: string,
    @query category?: string,
    @query minPrice?: float64,
    @query maxPrice?: float64,
    @query page?: int32,
    @query limit?: int32
  ): Product[];
  
  @get op get(@path id: string): Product;
}

配置

令牌安全地存储在VS代码密钥存储中：

  • figma-token：您的Figma个人访问令牌
  • openai-key：您的OpenAI API密钥（如果使用OpenAI）

生成的规格默认为 generated/ 文件夹（可在中配置 tspconfig.yaml).

生产大楼

npm run compile
npm run package  # Creates .vsix file

提高AI准确性

看 AI_TRAINING_GUIDE.md 有关以下内容的详细指导：

  • 使用域示例进行微调提示
  • 收集训练数据集
  • 射击学习技巧很少
  • 微调自定义模型

贡献

基于双发射器演示：
https://github.com/anfibiacreativa/typespec-mcp-openapi-dual-output-demo

许可证

麻省理工学院

已知限制

  • 人工智能分析通常需要1-10分钟（10分钟超时）
    • OpenAI（GPT-4o）：约10-30秒
    • Ollama（本地）：约3-10分钟，具体取决于硬件
  • 一次导入一页时，复杂的多页设计效果最佳
  • Olama模型可能不如GPT-4o准确，但正在迅速改进

未来的增强功能

  • [x] AI视觉分析（完成！）
  • 多页分析（分析整个Figma文件）
  • 用户反馈回路，提高准确性
  • 针对特定领域进行微调的自定义模型
  • 客户端SDK生成（TypeScript、Python等）
  • 从TypeSpec+Figma生成React组件

相关 MCP