Cursor實踐項目-15-用Cursor快速開發社交媒體圖片工具：從構思到上線全流程指南(三) — 照片牆佈局、圖片拼接

項目說明

本篇聚焦一個高頻需求：照片牆生成(即圖片拼接）

目標：保持「極簡可用」的第一版本，優先打通完整鏈路，再逐步增強體驗與性能。實現圖片的佈局生成和圖片拼圖功能，提供多種模板快速操作。

過程中，結合多工具和模型使用，同時也碰到了很多問題，佈局的自動生成，切割與拼接的精度控制等。cursor處理一直不好，來來回回浪費了很多時間

耗費時間：約20小時

Cursor使用次數：約80次

成果展示

網站已上架：pixtoolkits.com

pixtoolkits.com

前置準備

  • Cursor

  • 可選：Gemini CLI

    • 安裝：npm install -g @gemini-cli/gemini
    • 使用：gemini --help

  • 整體流程

    • 設置cursor規則 → 設置項目規則(project-rules) → 和LLM溝通需求 → Cursor編碼 → 調試輸出 → 小步快跑迭代

使用心得

  1. 不會描述風格就用「參考站點+截圖+讓模型產出規則」，把話說清楚即可。
  2. 功能編寫堅持「最小必要」和「敏捷開發」，先直達可用，再補體驗。
  3. vibe編程：先跑通鏈路，再按感覺細摳 UI 與交互。
  4. 從一開始就把國際化寫進需求，避免後期大改。
  5. 圖片或者樣式交互，感覺不好描述，就用畫圖來說明，推薦使用excalidraw

項目詳細步驟

1) Gemini CLI編寫局部算法及樣例

  • 通過Gemini CLI編寫局部算法，生成照片牆佈局和圖片拼接功能的核心代碼片段。輸出樣例進行不斷的調整，完成佈局的自動生成和圖片拼接下載的功能demo
  • 對話驗證過程：原型（單文件、網格分割）→ 更精細與魯棒（細網格、最小塊約束）→ 絕對定位與迭代補全 → 增加交互（拖拽 resizer）→ 模塊化與功能完備（v9：上傳/導出/手動切割/下載合成圖）→ 算法與樣式的終版收斂（final/ultimate、流體分割、風格變體）。
geminicli驗證算法，實現單頁面核心功能
  • 實現結果，基本功能完成，可自動生成佈局，可導出保存，照片上傳，圖片拼接下載。 實現結果

2) 將gemini驗證過的單頁面整合到之前的網站中。另外生成一個菜單頁，圖片拼接

  • 將之前的照片牆頁面整合到Cursor項目中，作為一個獨立的頁面。

頁面整合

3) 右邊欄修正，使用excalidraw圖片來進行交互

  • 在excalidraw.com中進行圖片交互設計，簡易描述自己想要的效果 使用excalidraw圖片和cursor進行樣式交互

  • 要求cursor根據這個樣式進行處理 要求cursor根據這個樣式進行處理

  • 處理效果，整體效果不錯。

4) 提交git作為階段性版本。

5) 持續優化，各種細節調整

  • 這一步相當耗費時間和次數，反覆調試與驗證，最終達成預期效果。

6) 整合左邊欄素材區，圖片編輯和圖片拼接通用，保存到本地

  • 素材區為臨時便捷存放，不保證永久保存。可以很方便的保存，下次使用。圖片的素材緩存功能是本項目的一大創新

7) 增加首頁、幫助頁、隱私頁，為上架網站做準備

  • 素材區為臨時便捷存放，不保證永久保存。可以很方便的保存，下次使用。圖片的素材緩存功能是本項目的一大創新

系列