Super Copy Coder

An AI-powered tool that generates detailed development prompts from UI designs and mockups. Perfect for developers using modern AI coding tools like Cursor, Bolt, and v0.dev.

English | 中文

Preview

Key Capabilities:

1. Upload & Analysis

   • Drag & drop or click to upload UI designs
   • Supports various image formats
   • Real-time visual feedback

2. Smart Generation

   • Structured prompt generation
   • Temperature control for creativity adjustment
   • Real-time streaming output with Markdown formatting

3. Quick Integration

   • Direct access to Bolt, v0.dev, and Cursor
   • One-click copy functionality
   • Seamless workflow integration

Features

• Image Analysis: Upload UI designs, mockups, or application screenshots
• Smart Prompt Generation: Generates detailed, structured prompts optimized for AI coding tools
• Multiple Application Types: Support for web, mobile, and desktop application analysis
• Adjustable AI Parameters: Control the creativity level with temperature adjustment
• Real-time Streaming: See the prompt generation in real-time
• Markdown Support: Generated prompts are formatted in Markdown for better readability
• Quick Access Tools: Direct integration with popular AI development tools
  • Bolt (https://bolt.new)
  • v0.dev
  • Cursor

Tech Stack

• Next.js 15
• TypeScript
• Tailwind CSS
• OpenRouter (Gemini Vision) / DeepSeek API Integration
• React Markdown with GFM Support
• Lucide Icons
• Xterm.js for Terminal Emulation
• Zustand for State Management
• CodeMirror for Code Editing
• Radix UI Components
• Framer Motion for Animations

Getting Started

1. Clone the repository:

git clone https://github.com/yourusername/super-copy-coder.git
cd super-copy-coder

2. Install dependencies:

npm install

3. Set up environment variables: Create a .env file in the root directory with:

# Vision Model Configuration
VISION_BASE_URL=https://openrouter.ai/api/v1
VISION_API_KEY=your_openrouter_api_key
VISION_MODEL=google/gemini-2.0-flash-exp:free

# Vision Model Usage Toggle
USE_VISION_MODEL_CODE=false

# Chat Model Configuration
CHAT_BASE_URL=https://api.deepseek.com/v1
CHAT_API_KEY=your_deepseek_api_key
CHAT_MODEL=deepseek-chat

# 代理, 如果需要代理，请配置代理地址，否则不需要配置
HTTPS_PROXY=http://127.0.0.1:7890

4. Run the development server:

npm run dev

Open http://localhost:3000 to view the application.

Usage

1. Upload an image of your UI design (drag & drop or click to upload)
2. Select the type of application (web/mobile/desktop)
3. Adjust the temperature setting if needed
4. Click "Generate prompt"
5. Copy the generated prompt
6. Use the quick access buttons to open your preferred AI coding tool

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Author

LaoMa XiaoZhang (老码小张)

• WeChat Official Account: 老码小张
• Sharing insights on AI Programming, Full-Stack Development, and Productivity Tools

License

MIT License - feel free to use this project for your own purposes.

Support

If you find this tool helpful, consider supporting the project to help maintain and improve it.

Deployment

Deploy with Docker (Recommended)

1. Clone the repository and navigate to the project directory:

git clone https://github.com/bravekingzhang/copy-coder.git
cd copy-coder

2. Create a .env file from the example:

cp .env.example .env

3. Edit the .env file and add your API keys:

VISION_API_KEY=your_openrouter_api_key
CHAT_API_KEY=your_deepseek_api_key

4. Build and start the application with Docker Compose:

docker compose up -d

The application will be available at http://localhost:3000

To stop the application:

docker compose down

Deploy on Vercel (Alternative)

The easiest way to deploy your own copy of Super Copy Coder is to use the Vercel Deploy Button above. This will:

1. Clone this repository to your GitHub account
2. Set up a new project on Vercel
3. Prompt you to add the required environment variables
4. Deploy the application automatically

After deployment, you'll need to:

1. Set up your VISION_API_KEY and CHAT_API_KEY and other environment variables in the Vercel project settings
2. Configure any additional environment variables if needed

Manual Deployment

You can also deploy the application manually to any platform that supports Next.js applications. Make sure to:

1. Set up the required environment variables
2. Configure the build settings according to your platform
3. Set up any necessary serverless functions support

Follow My WeChat Official Account

Stay updated with the latest AI development tips and tools:

WeChat Official Account: LaoMa XiaoZhang

Scan the QR code to follow and get the latest updates on:

• 🤖 AI Programming Tips & Tricks
• 💻 Full-Stack Development Insights
• 🛠️ Productivity Tools and Workflows
• 🚀 Latest Tech Trends and Reviews