Cursor實踐專案-14-用Cursor快速開發社交媒體圖片工具：從構思到上線全流程指南(二)-基礎圖片處理、剪貼簿圖片便捷處理

專案說明

cursor專案實踐-14-用Cursor快速開發社交媒體圖片工具：從構思到上線全流程指南(二)-基礎圖片處理功能、剪貼簿圖片便捷處理

耗費時間：約8小時

Cursor使用次數：30次左右

🔥 震撼登場！ 這不是普通的圖片工具教學，這是一場顛覆性的開發體驗！目標是將圖片處理的便捷性做到極致。歡迎大家持續提出需求(後續會上評論板塊)。

💥 想像一下： 你正在熬夜趕稿，突然需要處理一張截圖。傳統方式？儲存→上傳→等待→編輯，足足浪費2分鐘！而我們的解決方案？Ctrl+V一鍵搞定！ 直接從剪貼簿貼上圖片，瞬間進入編輯模式，效率暴增1000%！

🚀 這是一個極簡的神奇工具： 當別人還在為圖片處理而抓狂時，你已經在幾秒鐘內完成了專業級的圖片編輯。不需要Photoshop，不需要複雜軟體，只需要一個瀏覽器！

WebTools 旨在成為一個純前端的極簡圖片處理工具，為全球用戶提供快速、直觀、免費的在線圖片處理服務。

成果展示

- **極簡主義**: 介面簡潔清爽，功能直觀易用
- **即用即走**: 無需註冊登入，打開即用
- **全球化**: 從架構設計開始就考慮多語言支援
- **隱私保護**: 純前端處理，圖片不上傳伺服器

网站展示

pixtoolkits.com

pixtoolkits.com

pixtoolkits.com

pixtoolkits.com

  • 已實現功能：

    1. 實現基礎的圖片處理功能（裁剪、縮放、濾鏡等）
    2. 建立三段式佈局的核心互動介面
    3. 支援多種圖片輸入方式（上傳、拖拽、貼上）
    4. 擴展高級圖片處理功能（馬賽克、塗鴉、文字、貼紙）
    5. 支援剪貼簿圖片貼上，極大提升用戶體驗
    6. 實現圖片匯出、儲存、分享等功能
    7. 支援多語言國際化，覆蓋中、英、日、韓、西等主要語言

  • 網站展示

    • 三段式佈局：左側素材面板、中央畫布、右側工具面板 基礎功能展示
    • 多語言支援：支援中文、英文、日文、韓文、西班牙文等多種語言 基礎功能展示
    • 基礎功能展示 基礎功能展示
    基礎功能展示

前置準備

  • Cursor

  • Gemini CLI

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

  • 整體流程

    • 設定cursor規則->設定專案規則(project-rules)->和LLM溝通需求->cursor編碼->調試輸出

問題記錄

  1. 問題1：不會描述網站風格怎麼辦？詳見以下步驟一
    • 找到參考的網站，讓模型給你分析並形成專案規則。截圖扔給模型，要求解析並形成cursor rules文件。

使用心得

  1. 不會描述網站風格,找到參考的網站，讓模型給你分析並形成專案規則。截圖扔給模型分析即可。
  2. 功能編寫一定要提醒cursor遵循最小必要原則和敏捷開發原則。
  3. vibe編程，和傳統的編程方式不一樣。 在約定好基礎規則之後，盡快推出第一個版本，然後再進行微調，
  4. 如果你想做一個多語言的網站，從一開始就寫入到需求或者規則中。

專案詳細步驟

  1. 創建網站統一規則：先找一個喜歡的網站進行截圖，要求模型分析出風格並形成專案規則

    生成專案文件索引 生成專案文件索引

  2. 編寫需求，提供要點：編寫需求文件，明確提出要支援國際化、最小必要和敏捷開發的要求。

根據專案規則，針對 @requirement.md 進行設計和第一步的實現。
設計和第一步的實現

  1. 生成專案文件和索引 ：cursor生成專案文件索引。開始編寫實現第一步的內容

    生成專案文件索引
    • 其中多次觸發userinput。修正了一些錯誤。節省些次數。

  2. 基本框架完成：4次cursor請求，基礎框架完成，三段式佈局，可以上傳圖片，剪貼簿複製圖片。同時支援圖片的下載儲存

    基礎框架完成，三段式佈局
    • 還有很多問題：多語言支援異常、右側功能沒有實現，有些按鈕並沒有必要。
    • 但是整體框架已經完成，顯示效果基本滿意。根據第一版功能繼續完善

  3. 測試及完善：測試驗證基本功能、收集問題、整理後續功能、做好清單，統一修正。

1. 多語言支援異常，很多地方沒有翻譯，而且支援語言很少。請修正
2. 改造右側工具欄。編輯工具上，增加畫布設定。畫布長寬比(顯示6種常用的)可選擇
3. 畫布上面匯出按鈕旁邊，增加一個  「轉為素材」按鈕。點擊後將畫布的內容記錄到素材中。
step-5 
1. 畫布設定獨立於編輯工具上面。畫布比例不要下拉框，也類似下面工具按鈕，直接點擊選擇，按鈕上方顯示寬度和高度輸入框(同一行)，點擊比例按鈕後，上面輸入框跟著改變。
2. 滑鼠左鍵按住，可以拖動畫布。
3. 基礎工具 替換為 幾何圖形(矩形和原型，可選顏色)、表情(emoji圖標)、箭頭、畫筆、馬賽克、剪裁、文字、濾鏡。
step-5
  1. 修正問題，完善功能：cursor修正問題，完善功能。增加了畫布設定、素材轉化、滑鼠拖動等功能
  • 現在整體功能已經基本完成，後續可以繼續增加更多的功能。
  • 右側工具欄的編輯工具上，增加了畫布設定。畫布長寬比(顯示6種常用的)可選擇
  • 畫布上面匯出按鈕旁邊，增加一個 「轉為素材」按鈕。點擊後將畫布的內容記錄到素材中。
step-5
  1. 階段性儲存，提交git：將當前代碼提交到本地git，儲存階段性成果。
完成WebTools圖像編輯器核心功能
- ✅ 實現極簡現代工具風格設計
- ✅ 完成三欄式佈局：素材面板+畫布+工具面板
- ✅ 實現圖片載入、拖拽、縮放、匯出功能
- ✅ 添加幾何圖形、表情、箭頭、畫筆等繪製工具
- ✅ 實現對象選擇、移動、縮放、刪除功能
- ✅ 支援多語言國際化（中英日韓西）
- ✅ 修復畫布拖動、坐標計算、性能優化等關鍵問題
- ✅ 實現21:9超寬比例支援，圖片保持原始比例
- ✅ 優化渲染性能，避免無限刷新問題
step-5
  1. 第一階段完成

系列