Cursor Practice Project-14: Rapid Development of Social Media Image Tools with Cursor - A Complete Guide from Concept to Launch (Part 2) - Basic Image Processing and Convenient Clipboard Image Handling

Project Description

Cursor practice project-14: Rapid development of social media image tools with Cursor - A complete guide from concept to launch (Part 2) - Basic image processing features and convenient clipboard image handling

Time spent: Approximately 8 hours

Cursor usage count: Around 30 times

🔥 Spectacular debut! This isn't your ordinary image tool tutorial - it's a revolutionary development experience! Our goal is to maximize the convenience of image processing. We welcome ongoing feature requests (comment section coming soon).

💥 Imagine this: You're working late on a document and suddenly need to process a screenshot. The traditional way? Save → Upload → Wait → Edit - wasting a full 2 minutes! Our solution? Ctrl+V one-click processing! Paste directly from clipboard and instantly enter edit mode - boosting efficiency by 1000%!

🚀 This is a minimalist magic tool: While others struggle with image processing, you'll complete professional-level image editing in seconds. No Photoshop needed, no complex software - just a browser!

WebTools aims to be a pure frontend minimalist image processing tool, providing global users with fast, intuitive, free online image processing services.

Results Showcase

- **Minimalism**: Clean, simple interface with intuitive functionality
- **Ready-to-use**: No registration or login required - open and use immediately
- **Globalization**: Multilingual support built into the architecture from the start
- **Privacy Protection**: Pure frontend processing - images never uploaded to servers

网站展示

pixtoolkits.com

pixtoolkits.com

pixtoolkits.com

pixtoolkits.com

  • Implemented features:

    1. Basic image processing (cropping, scaling, filters, etc.)
    2. Core three-panel interactive interface
    3. Multiple image input methods (upload, drag-and-drop, paste)
    4. Advanced image processing features (mosaic, drawing, text, stickers)
    5. Clipboard image paste for dramatically improved UX
    6. Image export, save, and share functionality
    7. Multilingual internationalization support (Chinese, English, Japanese, Korean, Spanish, etc.)

  • Website preview:

    • Three-panel layout: Left material panel, center canvas, right tool panel Basic features showcase
    • Multilingual support: Chinese, English, Japanese, Korean, Spanish, etc. Basic features showcase
    • Basic features demonstration Basic features showcase
    Basic features showcase

Prerequisites

  • Cursor

  • Gemini CLI

    • Version: 0.1.16
    • Installation: npm install -g @gemini-cli/gemini
    • Usage: gemini --help

  • Overall process

    • Set cursor rules → Set project rules → Communicate requirements with LLM → Cursor coding → Debug output

Issue Log

  1. Issue 1: How to describe website style? See Step 1 below
    • Find reference websites, have the model analyze them and create project rules. Screenshot and ask the model to analyze and create cursor rules documentation.

Lessons Learned

  1. When unsure how to describe website style, find reference sites for the model to analyze and create project rules. Just screenshot and ask the model to analyze.
  2. When coding features, always remind cursor to follow the Minimum Viable Product principle and agile development principles.
  3. Vibe programming differs from traditional programming methods. After establishing basic rules, quickly release the first version, then make adjustments.
  4. If you want to create a multilingual website, include this requirement in the initial specifications or rules.

Detailed Project Steps

  1. Create unified website rules: First find a preferred website to screenshot, ask the model to analyze the style and create project rules

    Generate project documentation index Generate project documentation index

  2. Write requirements, provide key points: Write requirements document, explicitly stating needs for internationalization, MVP, and agile development.

According to project rules, design and implement the first step based on @requirement.md.
Design and first step implementation

  1. Generate project documentation and index: Cursor generates project documentation index. Begin coding the first implementation.

    Generate project documentation index
    • Multiple user inputs triggered during this step. Fixed some errors to save usage counts.

  2. Basic framework completed: 4 cursor requests to complete basic framework, three-panel layout, image upload, clipboard image paste. Also supports image download/save.

    Basic framework completed, three-panel layout
    • Several remaining issues: Multilingual support anomalies, right panel features not fully implemented, some unnecessary buttons.
    • But overall framework complete, display effect generally satisfactory. Continue improving based on first version.

  3. Testing and refinement: Test basic functionality, collect issues, organize future features, create checklist for unified fixes.

1. Fix multilingual support anomalies - many untranslated areas and limited language options
2. Redesign right toolbar. Add canvas settings to editing tools. Canvas aspect ratio (show 6 common options) selectable
3. Add "Convert to Material" button next to export button on canvas. Clicking saves canvas content to materials.
step-5 
1. Make canvas settings independent from editing tools. Don't use dropdown for aspect ratio - use button selection like the tool buttons below. Show width/height input fields above (same row). Aspect ratio buttons update input fields.
2. Left mouse drag to move canvas.
3. Replace basic tools with: geometric shapes (rectangle/circle with color selection), emoji icons, arrows, brush, mosaic, crop, text, filters.
step-5
  1. Fix issues, complete features: Cursor fixes issues and completes features. Added canvas settings, material conversion, canvas dragging, etc.
  • Core functionality now basically complete. Can continue adding more features later.
  • Right toolbar editing tools now include canvas settings. Canvas aspect ratio (6 common options) selectable.
  • Added "Convert to Material" button next to export button. Clicking saves canvas content to materials.
step-5
  1. Stage commit to git: Commit current code to local git, save stage progress.
Completed WebTools image editor core features
- ✅ Implemented minimalist modern tool style design
- ✅ Completed three-column layout: materials panel + canvas + tools panel
- ✅ Implemented image loading, drag-and-drop, scaling, export
- ✅ Added geometric shapes, emoji, arrows, brush and other drawing tools
- ✅ Implemented object selection, movement, scaling, deletion
- ✅ Multilingual internationalization support (Chinese, English, Japanese, Korean, Spanish)
- ✅ Fixed canvas dragging, coordinate calculation, performance optimization
- ✅ Added 21:9 ultrawide ratio support while maintaining original proportions
- ✅ Optimized rendering performance to prevent infinite refresh issues
step-5
  1. Phase 1 completed

Series