Cursor Practice Project-15: Rapid Development of Social Media Image Tools with Cursor - From Concept to Launch (Part 3) — Photo Wall Layout and Image Stitching

Project Description

This installment focuses on a high-frequency requirement: photo wall generation (i.e., image stitching).

Goal: Maintain a "minimally viable" first version, prioritizing the completion of the full workflow before gradually enhancing the experience and performance. Implement image layout generation and stitching functionality, offering multiple templates for quick operations.

During the process, multiple tools and models were utilized, and several challenges were encountered, such as automatic layout generation and precision control in cutting and stitching. Cursor's handling was inconsistent, resulting in significant time wastage.

Time spent: Approximately 20 hours

Cursor usage count: Approximately 80 times

Results Showcase

Website now live: pixtoolkits.com

pixtoolkits.com

Prerequisites

  • Cursor

  • Optional: Gemini CLI

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

  • Overall Workflow

    • Set Cursor rules → Set project rules (project-rules) → Communicate requirements with LLM → Cursor coding → Debug output → Iterate rapidly

Key Takeaways

  1. If unsure how to describe a style, use "reference sites + screenshots + let the model generate rules." Clarity is key.
  2. Adhere to the "minimum necessary" and "agile development" principles when coding features—achieve usability first, then refine the experience.
  3. Vibe programming: First, get the workflow running, then fine-tune the UI and interactions based on feel.
  4. Incorporate internationalization into requirements from the start to avoid major revisions later.
  5. For images or style interactions that are hard to describe, use drawings. Excalidraw is recommended.

Detailed Project Steps

1) Gemini CLI for Local Algorithm and Sample Code

  • Use Gemini CLI to write local algorithms, generating core code snippets for photo wall layout and image stitching. Continuously adjust output samples to complete the demo for automatic layout generation and image stitching/download functionality.
  • Validation process: Prototype (single file, grid splitting) → More refined and robust (fine grid, minimum block constraints) → Absolute positioning and iterative completion → Add interactions (drag-and-drop resizer) → Modularization and functional completeness (v9: upload/export/manual cutting/download composite images) → Final algorithm and style convergence (final/ultimate, fluid splitting, style variants).
Gemini CLI validates algorithms to implement single-page core functionality
  • Implementation result: Basic functionality completed, including automatic layout generation, export/save, photo upload, and image stitching/download. Implementation result

2) Integrate the Gemini-validated single page into the existing website. Also generate a menu page for image stitching.

  • Integrate the photo wall page into the Cursor project as a standalone page.

Page integration

3) Revise the right sidebar using Excalidraw for interaction design.

  • Design the interaction in excalidraw.com, briefly describing the desired effect. Use Excalidraw images with Cursor for style interaction

  • Instruct Cursor to process based on this style. Instruct Cursor to process based on this style

  • Processing effect: Overall result is satisfactory.

4) Commit to Git as a milestone version.

5) Continuous optimization and fine-tuning.

  • This step is time-consuming and iterative, involving repeated debugging and validation to achieve the desired outcome.

6) Integrate the left sidebar material area for shared use between image editing and stitching, with local saving.

  • The material area is for temporary convenience storage and does not guarantee permanent retention. The image material caching feature is a major innovation of this project.

7) Add homepage, help page, and privacy page in preparation for website launch.

  • The material area is for temporary convenience storage and does not guarantee permanent retention. The image material caching feature is a major innovation of this project.

Series