mkdir figma-analyzer-extension
cd figma-analyzer-extension
npm init -y

- `@crxjs/vite-plugin`：专为 Chrome 扩展优化的 Vite 插件（**开发 Chrome extension 的神器！**）
- `@types/chrome`：Chrome 扩展 API 的 TypeScript 类型定义
- `react-json-pretty`：用来美化显示 JSON 结果，方便我们直接在插件里浏览 AI 生成的 JSON，这个 JSON-pretty 足够 **轻量美观**

figma-analyzer-extension/
├── src/
│   ├── components/          # React 组件
│   │   └── FigmaAnalyzer.tsx
│   ├── manifest.json        # Chrome 扩展配置文件（重要！）
│   ├── popup.html          # 扩展弹窗的 HTML
│   ├── popup.tsx           # React 应用入口
│   ├── popup.css           # 样式文件
│   ├── background.ts       # Service Worker（后台脚本）
│   ├── types.ts            # TypeScript 类型定义
│   ├── constants.ts        # 常量定义
│   ├── prompts.ts          # AI 提示词模板
│   ├── figmaApi.ts         # Figma API 服务
│   └── vite-env.d.ts       # Vite 环境类型定义
├── package.json
├── tsconfig.json
├── tsconfig.node.json
├── vite.config.ts
└── README.md

// 程序员的内心独白
const aiServices = {
  openai: { price: '💰💰💰', quality: '🌟🌟🌟🌟🌟', speed: '🚀🚀🚀' },
  claude: { price: '💰💰', quality: '🌟🌟🌟🌟🌟', speed: '🚀🚀' },
  deepseek: { price: '💰', quality: '🌟🌟🌟🌟', speed: '🚀🚀🚀' },
  ollama: { price: '🆓', quality: '🌟🌟🌟', speed: '🐌' },
};

// 最后决定：小孩才做选择，成年人表示，我全都要！
const solution = '让用户自己选择，我们都支持';

// 支持多种 AI 服务的统一接口
const callAI = async (prompt, provider) => {
  switch (provider) {
    case 'openai':
      return await callOpenAI(prompt);
    case 'deepseek':
      return await callDeepSeek(prompt);
    // ... 其他服务
  }
};

function buildPrompt(request: AIAnalysisRequest): string {
  const { operation, figmaData, projectDescription, targetLanguage } = request;

  if (operation === 'translate') {
    // 纯翻译模式
    const textsToTranslate = figmaData.texts.map((t) => t.text).join('\n');
    const targetLang = getLanguageName(targetLanguage || 'en');
    const additionalInstruction = `\n\n**最终提醒**：以上共 ${figmaData.texts.length} 行文案，每行输出格式必须是：英文原文：${targetLang}译文`;

    return (
      TRANSLATION_PROMPT_TEMPLATE.replace(/\{targetLanguage\}/g, targetLang).replace(
        '{textsToTranslate}',
        textsToTranslate
      ) + additionalInstruction
    );
  } else if (operation === 'translate-and-structure') {
    // 翻译 + 结构化模式
    const allTextsFormatted = figmaData.texts
      .map((text, index) => `${index + 1}. "${text.text}"`)
      .join('\n');

    const projectDesc = projectDescription || '网页界面设计项目';
    const targetLang = getLanguageName(targetLanguage || 'en');
    const strictReminder = `\n\n**再次强调**：请确保 JSON 中只包含上述 ${figmaData.totalTextCount} 条提取文案的翻译版本，不要添加任何额外内容！`;

    return (
      TRANSLATE_AND_STRUCTURE_PROMPT_TEMPLATE.replace(/\{targetLanguage\}/g, targetLang)
        .replace('{textCount}', figmaData.totalTextCount.toString())
        .replace('{allTexts}', allTextsFormatted)
        .replace('{projectDescription}', projectDesc) + strictReminder
    );
  } else {
    // 结构化 JSON 生成模式
    const allTextsFormatted = figmaData.texts.map((text) => text.text).join('\n');
    const projectDesc = projectDescription || '网页界面设计项目';
    const strictReminder = `\n\n**再次强调**：请确保 JSON 中只包含上述 ${figmaData.totalTextCount} 条提取的文案，不要添加任何额外内容！`;

    return (
      ANALYSIS_PROMPT_TEMPLATE.replace('{textCount}', figmaData.totalTextCount.toString())
        .replace('{allTexts}', allTextsFormatted)
        .replace('{projectDescription}', projectDesc) + strictReminder
    );
  }
}

// DeepSeek API 调用实现
async function callDeepSeekAPI(prompt: string, apiKey: string): Promise<string> {
  const requestBody = {
    model: 'deepseek-chat',
    messages: [{ role: 'user', content: prompt }],
    temperature: 0.2, // 降低温度提高一致性
    max_tokens: 2000,
  };

  console.log('🚀 发送到 DeepSeek 的请求:', requestBody);

  const response = await fetch('https://api.deepseek.com/v1/chat/completions', {
    method: 'POST',
    headers: {
      Authorization: `Bearer ${apiKey}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(requestBody),
  });

  if (!response.ok) {
    const errorText = await response.text();
    console.error('DeepSeek API Error:', errorText);
    throw new Error(`DeepSeek API 错误: ${response.status}`);
  }

  const data = await response.json();
  const content = data.choices[0]?.message?.content;

  if (!content) {
    throw new Error('DeepSeek API 返回空内容');
  }

  return content;
}

macOS 上：
launchctl setenv OLLAMA_ORIGINS "*"

// 早期的注入脚本方案（已弃用）
function getSelectedElements() {
  // 直接访问 Figma 的内部 API
  const selection = figma.currentPage.selection;
  return selection.map((node) => ({
    id: node.id,
    name: node.name,
    text: node.characters,
  }));
}

export class FigmaApiService {
  private apiToken: string;
  private baseUrl = 'https://api.figma.com/v1';

  constructor(apiToken: string) {
    this.apiToken = apiToken;
  }

  // 获取 Figma 文件数据
  async getFile(fileId: string): Promise<FigmaFileResponse> {
    const response = await fetch(`${this.baseUrl}/files/${fileId}`, {
      headers: {
        'X-Figma-Token': this.apiToken,
      },
    });

    if (!response.ok) {
      const errorText = await response.text();
      throw new Error(`Figma API 错误 (${response.status}): ${errorText}`);
    }

    return (await response.json()) as FigmaFileResponse;
  }
}

// 从 Figma URL 中提取文件 ID
static extractFileIdFromUrl(url: string): string | null {
  const patterns = [
    // 匹配 /file/ 或 /design/ 路径
    /(?:www\.)?figma\.com\/(?:file|design)\/([a-zA-Z0-9-_]+)/,
    // 备用模式：更宽松的匹配
    /figma\.com\/[^/]+\/([a-zA-Z0-9-_]+)/,
  ];

  for (const pattern of patterns) {
    const match = url.match(pattern);
    if (match && match[1]) {
      return match[1];
    }
  }
  return null;
}

// 从 URL 中提取节点 ID（当用户选中元素时）
static extractNodeIdFromUrl(url: string): string | null {
  const nodeIdMatch = url.match(/[?&]node-id=([^&]+)/);
  if (nodeIdMatch) {
    let nodeId = decodeURIComponent(nodeIdMatch[1]);
    nodeId = nodeId.replace('%3A', ':').replace('-', ':');
    return nodeId;
  }
  return null;
}

// 递归提取节点中的所有文案
private extractTextsFromNode(node: FigmaNode, texts: FigmaTextInfo[] = []): FigmaTextInfo[] {
  try {
    // 如果是文本节点且有文案内容
    if (node.type === 'TEXT' && node.characters) {
      const boundingBox = node.absoluteBoundingBox || { x: 0, y: 0, width: 0, height: 0 };

      texts.push({
        id: node.id,
        name: node.name,
        text: node.characters,
        fontSize: node.style?.fontSize || 16,
        fontFamily: node.style?.fontFamily || 'Unknown',
        x: boundingBox.x,
        y: boundingBox.y,
        width: boundingBox.width,
        height: boundingBox.height,
      });
    }

    // 递归处理子节点
    if (node.children && node.children.length > 0) {
      for (const child of node.children) {
        this.extractTextsFromNode(child, texts);
      }
    }
  } catch (error) {
    console.warn('提取节点文案时出错:', error, node);
  }

  return texts;
}

请分析以下文案并生成 JSON 格式的结果：
{文案内容}

export const ANALYSIS_PROMPT_TEMPLATE = `
你是一个专业的 UI/UX 文案分析师，请分析以下 {textCount} 条从设计稿中提取的文案内容。

项目描述：{projectDescription}

需要分析的文案：
{allTexts}

请严格按照以下要求输出 JSON 格式的分析结果：

1. 必须是有效的 JSON 格式，不要包含任何其他文字说明
2. 只分析上述提取的 {textCount} 条文案，不要添加额外内容
3. 结构化输出，包含页面标题、描述、建议等字段

输出格式示例：
{
  "__page_title": "页面标题",
  "button_text": "按钮文案",
  "description": "描述文案",
  "title": "主标题"
}

**再次强调**：请确保 JSON 中只包含上述 {textCount} 条提取的文案，不要添加任何额外内容！
`;

graph TD
    A["用户在Figma中选择元素"] --> B["Chrome扩展Popup界面"]
    B --> C{"配置AI服务"}
    C --> D["DeepSeek API"]
    C --> E["OpenAI API"]
    C --> F["Claude API"]
    C --> G["Ollama本地模型"]

    B --> H["提取Figma数据"]
    H --> I["Figma REST API"]
    I --> J{"智能检测模式"}
    J --> K["从URL提取节点ID"]
    J --> L["获取整个文件"]
    K --> M["获取特定元素文案"]
    L --> N["获取全部文案"]

    M --> O["Background Script处理"]
    N --> O
    O --> P["AI分析处理"]
    P --> Q["文案翻译"]
    P --> R["结构化JSON生成"]
    P --> S["文案分析"]

    Q --> T["返回结果到Popup"]
    R --> T
    S --> T
    T --> U["用户查看结果"]

graph TD
    A["开发挑战"] --> B["Chrome扩展架构设计"]
    B --> C["Manifest V3配置"]
    B --> D["React前端UI设计"]
    B --> E["Background Service Worker"]

    F["数据获取方案"] --> G["注入脚本方案(弃用)"]
    F --> H["Figma REST API方案"]
    H --> I["API Token验证"]
    H --> J["文件ID提取"]
    H --> K["节点ID智能检测"]

    L["AI服务集成"] --> M["DeepSeek API"]
    L --> N["OpenAI API"]
    L --> O["Claude API"]
    L --> P["Ollama本地服务"]

    Q["核心功能实现"] --> R["文案智能提取"]
    Q --> S["多语言翻译"]
    Q --> T["结构化JSON生成"]
    Q --> U["结果展示优化"]

    V["用户体验优化"] --> W["智能检测选中元素"]
    V --> X["简化操作流程"]
    V --> Y["错误处理机制"]
    V --> Z["性能优化"]

graph TB
    subgraph "用户环境"
        A["Figma设计稿"] --> B["用户选择元素"]
        B --> C["Chrome浏览器"]
    end

    subgraph "Chrome扩展"
        D["Popup界面<br/>(React + TypeScript)"]
        E["Background Service Worker<br/>(消息处理 + API调用)"]
        F["Chrome Storage API<br/>(配置存储)"]

        D <--> E
        D <--> F
    end

    subgraph "外部服务"
        G["Figma REST API<br/>(文件数据获取)"]
        H["DeepSeek API<br/>(AI分析)"]
        I["OpenAI API<br/>(GPT模型)"]
        J["Claude API<br/>(Anthropic)"]
        K["Ollama服务<br/>(本地AI模型)"]
    end

    subgraph "数据流"
        L["URL解析<br/>(文件ID + 节点ID)"]
        M["文案提取<br/>(递归遍历节点)"]
        N["AI处理<br/>(分析/翻译/结构化)"]
        O["结果展示<br/>(JSON美化 + 复制)"]
    end

    C --> D
    E --> G
    E --> H
    E --> I
    E --> J
    E --> K

    G --> L
    L --> M
    M --> N
    N --> O
    O --> D

    style A fill:#e1f5fe
    style D fill:#f3e5f5
    style E fill:#fff3e0
    style G fill:#e8f5e8
    style H fill:#fff8e1
    style I fill:#f1f8e9
    style J fill:#e3f2fd
    style K fill:#fce4ec