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と要件をコミュニケーション → Coderコーディング → デバッグ出力 → 小刻みにイテレーション

使用心得

  1. スタイルを説明できない場合は「参考サイト+スクリーンショット+モデルにルールを生成させる」を使用し、明確に伝えます。
  2. 機能開発は「最小限の必要性」と「アジャイル開発」を堅持し、まず使える状態にし、その後体験を補完します。
  3. vibeプログラミング：まずプロセスを確立し、その後感覚でUIとインタラクションを調整します。
  4. 最初から国際化を要件に組み込み、後での大幅な変更を避けます。
  5. 画像やスタイルのインタラクションが説明しにくい場合は、図を使用して説明します。excalidrawの使用をお勧めします。

プロジェクト詳細手順

1) Gemini CLIで局所アルゴリズムとサンプルを作成

  • Gemini CLIを使用して局所アルゴリズムを作成し、フォトコレクションレイアウトと画像結合機能のコアコードスニペットを生成します。サンプルを出力して繰り返し調整し、レイアウトの自動生成と画像結合ダウンロードの機能デモを完成させます。
  • 対話検証プロセス：プロトタイプ（単一ファイル、グリッド分割）→ より精密でロバスト（細かいグリッド、最小ブロック制約）→ 絶対位置とイテレーション補完 → インタラクション追加（ドラッグresizer）→ モジュール化と機能の完全性（v9：アップロード/エクスポート/手動カット/合成画像ダウンロード）→ アルゴリズムとスタイルの最終収束（final/ultimate、流体分割、スタイルバリエーション）。
geminicliでアルゴリズムを検証し、単一ページのコア機能を実装
  • 実装結果、基本機能が完成し、自動レイアウト生成、エクスポート保存、写真アップロード、画像結合ダウンロードが可能です。 実装結果

2) geminiで検証済みの単一ページを以前のウェブサイトに統合。さらにメニューページを生成、画像結合

  • 以前のフォトコレクションページをCursorプロジェクトに統合し、独立したページとして配置します。

ページ統合

3) 右サイドバー修正、excalidraw画像を使用してインタラクションを行う

  • excalidraw.comで画像インタラクションデザインを行い、簡単に希望の効果を説明します。 excalidraw画像とcursorを使用してスタイルインタラクションを行う

  • cursorにこのスタイルに基づいて処理するよう要求します。 cursorにこのスタイルに基づいて処理するよう要求

  • 処理効果、全体的な効果は良好です。

4) gitにコミットして段階的なバージョンとする。

5) 継続的な最適化、様々な詳細調整

  • このステップは非常に時間と回数を消費し、繰り返しデバッグと検証を行い、最終的に期待通りの効果を達成します。

6) 左サイドバーの素材エリアを統合、画像編集と画像結合で共通化し、ローカルに保存

  • 素材エリアは一時的な便利な保存場所であり、永続的な保存を保証しません。簡単に保存し、次回使用できます。画像の素材キャッシュ機能はこのプロジェクトの大きなイノベーションです。

7) ホームページ、ヘルプページ、プライバシーページを追加し、ウェブサイト公開の準備を行う

  • 素材エリアは一時的な便利な保存場所であり、永続的な保存を保証しません。簡単に保存し、次回使用できます。画像の素材キャッシュ機能はこのプロジェクトの大きなイノベーションです。

シリーズ