npm package: @iflow-mcp/darrenpig-cursor-talk-to-figma-mcp
Description: Cursor Talk to Figma MCP
Latest version: 0.3.2

# 🎨 RanJok AI创作平台

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![Node.js Version](https://img.shields.io/badge/node-%3E%3D18.0.0-brightgreen.svg)](https://nodejs.org/)
[![TypeScript](https://img.shields.io/badge/TypeScript-4.9+-blue.svg)](https://www.typescriptlang.org/)
[![Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black.svg)](https://vercel.com/)

> 🚀 **老阮独立站** - 集成AI驱动的海报设计、视频剪辑、变现引擎的一站式创作平台

## 📖 项目概述

RanJok AI创作平台是一个现代化的全栈创作工具集，专为内容创作者、设计师和独立开发者打造。平台整合了多个AI驱动的创作工具，提供从设计到变现的完整解决方案。

### ✨ 核心特色

- 🎨 **AI海报设计器** - 智能生成专业级海报，支持多种风格模板
- 🎬 **智能视频编辑** - 集成剪映MCP，自动化视频剪辑和后期处理
- 💰 **变现引擎** - 多平台内容分发和收益优化系统
- 🎭 **艺术创作MCP** - 与Figma深度集成的设计工具
- 📊 **飞书多维表格** - 数据管理和协作插件
- 🌐 **独立站门户** - 现代化的Web界面和API服务

## 🏗️ 项目架构

```
RanJok AI创作平台/
├── 🎨 前端界面 (Frontend)
│   ├── src/
│   │   ├── index.html              # 主页面
│   │   ├── poster_design.html      # 海报设计页面
│   │   ├── video_editing.html      # 视频编辑页面
│   │   ├── monetization_engine.html # 变现引擎页面
│   │   └── lao_ruan_interface.html # 老阮界面
│   └── 核心模块 (Core Modules)
│       ├── ranjok_poster_designer.ts    # 海报设计引擎
│       ├── ranjok_video_editor.ts       # 视频编辑引擎
│       ├── ranjok_monetization_engine.ts # 变现引擎
│       ├── artistic_creation_mcp.ts     # 艺术创作MCP
│       └── independent_station_portal.ts # 独立站门户
├── 🔌 MCP集成 (MCP Integrations)
│   ├── src/talk_to_figma_mcp/      # Figma MCP服务器
│   │   ├── server.ts               # MCP服务器主文件
│   │   ├── package.json            # MCP依赖配置
│   │   └── tsconfig.json           # TypeScript配置
│   └── jianying-mcp/               # 剪映MCP集成
│       ├── jianyingdraft/          # 剪映草稿处理
│       ├── pyJianYingDraft/        # Python剪映SDK
│       ├── material/               # 素材库
│       └── pyproject.toml          # Python项目配置
├── 📊 飞书集成 (Feishu Integration)
│   └── feishu-bitable/
│       ├── record-view-plugin/     # 记录视图插件
│       └── app.json                # 飞书应用配置
├── 🌐 后端服务 (Backend Services)
│   ├── api/
│   │   └── index.js                # Vercel API函数
│   └── 测试文件 (Test Files)
│       ├── test_poster.ts          # 海报功能测试
│       ├── test_video.ts           # 视频功能测试
│       └── test_monetization.ts    # 变现功能测试
└── 🚀 部署配置 (Deployment)
    ├── vercel.json                 # Vercel部署配置
    ├── Dockerfile                  # Docker容器配置
    └── package.json                # 项目依赖和脚本
```

## 🛠️ 技术栈

### 前端技术
- **HTML5/CSS3** - 现代化响应式界面
- **TypeScript** - 类型安全的JavaScript超集
- **WebSocket** - 实时通信支持
- **UUID** - 唯一标识符生成

### 后端技术
- **Node.js** - JavaScript运行时环境
- **Express.js** - Web应用框架
- **Bun** - 高性能JavaScript运行时
- **WebSocket (ws)** - WebSocket服务器实现

### MCP集成
- **@modelcontextprotocol/sdk** - MCP协议SDK
- **Figma Plugin API** - Figma插件开发
- **Python** - 剪映MCP后端服务
- **Zod** - TypeScript模式验证

### 部署平台
- **Vercel** - 无服务器部署平台
- **Docker** - 容器化部署
- **飞书开放平台** - 企业协作集成

## 🚀 快速开始

### 环境要求

- Node.js >= 18.0.0
- Bun >= 1.0.0 (推荐)
- Python >= 3.8 (剪映MCP)
- Git

### 安装步骤

1. **克隆项目**
```bash
git clone https://github.com/your-username/cursor-talk-to-figma-mcp.git
cd cursor-talk-to-figma-mcp
```

2. **安装依赖**
```bash
# 使用Bun (推荐)
bun install

# 或使用npm
npm install
```

3. **配置环境变量**
```bash
cp .env.example .env
# 编辑.env文件，填入必要的API密钥
```

4. **启动开发服务器**
```bash
# 启动前端开发服务器
bun run dev

# 启动MCP服务器
bun run mcp:start

# 启动API服务器
bun run api:start
```

5. **访问应用**
- 前端界面: http://localhost:3000
- API服务: http://localhost:3055
- MCP服务: WebSocket连接

## 🎯 核心功能

### 🎨 AI海报设计器

**特性:**
- 智能模板选择和自动布局
- 品牌色彩自动适配
- 多种设计风格支持
- Figma集成和实时预览

**使用示例:**
```typescript
import { RanJokPosterDesigner } from './src/ranjok_poster_designer';

const designer = new RanJokPosterDesigner();
const config = {
  title: '新品发布',
  brandColors: ['#667eea', '#764ba2'],
  style: 'modern'
};

const result = await designer.generatePoster(config);
console.log('Figma命令:', result.figmaCommands);
```

### 🎬 智能视频编辑

**特性:**
- 自动剪辑和场景识别
- 智能配乐和字幕生成
- 多种视频风格模板
- 剪映MCP深度集成

**使用示例:**
```typescript
import { RanJokVideoEditor } from './src/ranjok_video_editor';

const editor = new RanJokVideoEditor();
const config = {
  title: '产品介绍视频',
  style: 'business',
  targetDuration: 60,
  aspectRatio: '16:9',
  sourceClips: ['video1.mp4', 'video2.mp4']
};

const result = await editor.generateVideo(config);
console.log('剪映命令:', result.jianYingCommands);
```

### 💰 变现引擎

**特性:**
- 多平台自动分发
- 智能定价策略
- 收益分析和优化
- 自动化营销工具

**支持平台:**
- 小红书、抖音、微信视频号
- 哔哩哔哩、快手、知乎
- 淘宝、天猫等电商平台

## 📡 API文档

### 基础API

#### 健康检查
```http
GET /api/health
```

**响应:**
```json
{
  "status": "ok",
  "timestamp": "2024-01-01T00:00:00.000Z",
  "version": "1.0.0"
}
```

#### 海报生成
```http
POST /api/poster/generate
Content-Type: application/json

{
  "title": "海报标题",
  "style": "modern",
  "brandColors": ["#667eea", "#764ba2"]
}
```

#### 视频处理
```http
POST /api/video/process
Content-Type: application/json

{
  "title": "视频标题",
  "style": "business",
  "sourceClips": ["video1.mp4"]
}
```

### MCP工具

#### Figma集成工具
- `get_document_info` - 获取文档信息
- `get_selection` - 获取当前选择
- `create_rectangle` - 创建矩形
- `create_text` - 创建文本
- `set_fill_color` - 设置填充颜色

#### 剪映集成工具
- `create_project` - 创建项目
- `add_video_clip` - 添加视频片段
- `add_audio_track` - 添加音频轨道
- `apply_transition` - 应用转场效果

## 🚀 部署指南

### Vercel部署

1. **连接GitHub仓库**
```bash
vercel --prod
```

2. **配置环境变量**
在Vercel控制台中设置:
- `FIGMA_API_KEY`
- `OPENAI_API_KEY`
- `FEISHU_APP_ID`
- `FEISHU_APP_SECRET`

3. **自动部署**
推送到main分支将自动触发部署

### Docker部署

1. **构建镜像**
```bash
docker build -t ranjok-platform .
```

2. **运行容器**
```bash
docker run -p 3055:3055 -e NODE_ENV=production ranjok-platform
```

### 本地开发部署

```bash
# 构建项目
bun run build

# 启动生产服务器
bun run start
```

## 🔧 配置说明

### 环境变量

```env
# API配置
NODE_ENV=development
PORT=3055

# Figma集成
FIGMA_API_KEY=your_figma_api_key
FIGMA_FILE_ID=your_figma_file_id

# AI服务
OPENAI_API_KEY=your_openai_api_key

# 飞书集成
FEISHU_APP_ID=your_feishu_app_id
FEISHU_APP_SECRET=your_feishu_app_secret

# 数据库 (可选)
DATABASE_URL=your_database_url
```

### Vercel配置

`vercel.json`文件配置了:
- 构建命令和输出目录
- API路由重写规则
- 静态文件缓存策略
- 页面重定向规则

## 🧪 测试

### 运行测试

```bash
# 运行所有测试
bun test

# 运行特定模块测试
bun run test:poster
bun run test:video
bun run test:monetization

# 运行集成测试
bun run test:integration
```

### 测试覆盖率

```bash
bun run test:coverage
```

## 🤝 贡献指南

### 开发流程

1. **Fork项目**
2. **创建功能分支**
```bash
git checkout -b feature/amazing-feature
```

3. **提交更改**
```bash
git commit -m 'Add some amazing feature'
```

4. **推送分支**
```bash
git push origin feature/amazing-feature
```

5. **创建Pull Request**

### 代码规范

- 使用TypeScript进行类型检查
- 遵循ESLint配置规则
- 编写单元测试覆盖新功能
- 更新相关文档

### 提交规范

使用[Conventional Commits](https://www.conventionalcommits.org/)规范:

```
feat: 添加新功能
fix: 修复bug
docs: 更新文档
style: 代码格式调整
refactor: 代码重构
test: 添加测试
chore: 构建过程或辅助工具的变动
```

## 📄 许可证

本项目采用 [MIT License](LICENSE) 许可证。

## 🙏 致谢

- [Figma](https://www.figma.com/) - 设计工具集成
- [剪映](https://www.capcut.com/) - 视频编辑能力
- [飞书](https://www.feishu.cn/) - 协作平台支持
- [Vercel](https://vercel.com/) - 部署平台
- [OpenAI](https://openai.com/) - AI能力支持

## 📞 联系我们

- 📧 邮箱: contact@ranjok.com
- 🐛 问题反馈: [GitHub Issues](https://github.com/your-username/cursor-talk-to-figma-mcp/issues)
- 💬 讨论: [GitHub Discussions](https://github.com/your-username/cursor-talk-to-figma-mcp/discussions)

---

<div align="center">
  <p>🎨 <strong>让创作更简单，让变现更高效</strong> 🚀</p>
  <p>Made with ❤️ by RanJok Team</p>
</div>