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) 增加首页、帮助页、隐私页，为上架网站做准备

  • 素材区为临时便捷存放，不保证永久保存。可以很方便的保存，下次使用。图片的素材缓存功能是本项目的一大创新

系列