🎨 RanJok AI创作平台

🚀 老阮独立站 - 集成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. 克隆项目

git clone https://github.com/your-username/cursor-talk-to-figma-mcp.git
cd cursor-talk-to-figma-mcp

2. 安装依赖

# 使用Bun (推荐)
bun install

# 或使用npm
npm install

3. 配置环境变量

cp .env.example .env
# 编辑.env文件，填入必要的API密钥

4. 启动开发服务器

# 启动前端开发服务器
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集成和实时预览

使用示例:

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深度集成

使用示例:

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

健康检查

GET /api/health

响应:

{
  "status": "ok",
  "timestamp": "2024-01-01T00:00:00.000Z",
  "version": "1.0.0"
}

海报生成

POST /api/poster/generate
Content-Type: application/json

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

视频处理

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仓库

vercel --prod

2. 配置环境变量 在Vercel控制台中设置:

• FIGMA_API_KEY
• OPENAI_API_KEY
• FEISHU_APP_ID
• FEISHU_APP_SECRET

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

Docker部署

1. 构建镜像

docker build -t ranjok-platform .

2. 运行容器

docker run -p 3055:3055 -e NODE_ENV=production ranjok-platform

本地开发部署

# 构建项目
bun run build

# 启动生产服务器
bun run start

🔧 配置说明

环境变量

# 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路由重写规则
• 静态文件缓存策略
• 页面重定向规则

🧪 测试

运行测试

# 运行所有测试
bun test

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

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

测试覆盖率

bun run test:coverage

🤝 贡献指南

开发流程

1. Fork项目
2. 创建功能分支

git checkout -b feature/amazing-feature

3. 提交更改

git commit -m 'Add some amazing feature'

4. 推送分支

git push origin feature/amazing-feature

5. 创建Pull Request

代码规范

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

提交规范

使用Conventional Commits规范:

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

📄 许可证

本项目采用 MIT License 许可证。

🙏 致谢

• Figma - 设计工具集成
• 剪映 - 视频编辑能力
• 飞书 - 协作平台支持
• Vercel - 部署平台
• OpenAI - AI能力支持

📞 联系我们

• 📧 邮箱: [email protected]
• 🐛 问题反馈: GitHub Issues
• 💬 讨论: GitHub Discussions