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代码秘密存储中的令牌

先决条件

• Node.js >= 18
• VS Code >= 1.85.0
• Figma个人访问令牌 (在这里买一个)
• AI模型 （其中之一）：

- OpenAI API密钥(到达这里) - Ollama在当地跑步(在此处安装) - 自定义OpenAI兼容端点

安装

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令牌

1. 点击 进口设计

接下来会发生什么

1. 截图：扩展将Figma设计渲染为PNG
2. AI分析：AI视觉模型分析屏幕截图并识别：

- 页面类型（目录、购物车、个人资料、仪表板、表单、详细信息） - 数据实体（产品、用户、订单等） - 所需的API操作（使用智能参数的GET、POST、PUT、DELETE）

1. 确认：您将看到一个包含三个选项的对话框：

   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分析 - 否，取消 -取消导入

1. 生成：生成完整的TypeSpec项目：

- main.tsp -TypeSpec型号和操作 - tspconfig.yaml -双发射极配置（OpenAPI+MCP） - package.json -所有TypeSpec依赖项 - README.md -使用说明

1. 编译选择：你会被问到“跑步一代？”

- “是，运行编译” -自动运行 npm install --legacy-peer-deps && npm run build - “不，我稍后再做” -跳过自动编译

1. 输出：在中查找生成的规格 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分析/指标

1. TypeSpec生成：使用适当的类型创建惯用的TypeSpec
2. 双重排放：编译为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组件