🧸

AIと効率的に作りたいフロント開発

に公開
Cursor
zennfes2025ai
zennfes2025free
フルスクラッチ開発
tech

AIと効率的に作りたいフロント開発

Cursor × ChatGPT × Figmaの使い方メモ

フロント実装をAIと協働して進めたときの気づきをまとめました！
今回は Cursor Pro（Agent / Ask） と ChatGPT Pro を活用しました。

🧠 Memo

  • 開発では、VS Codeはほとんど使わず、Cursor Proを中心に進行。
  • 部分的な実装単位では、CursorよりもChatGPTの方が分かりやすい説明をしてくれた。
    • GPTのPros：構造の説明が丁寧
    • GPTのCons：全ファイルを参照していないため、他部分と衝突するリスクあり
  • 基本方針：Cursor Pro（Agent）でコードを生成し、詰まった箇所はCursor Pro（Ask）またはChatGPT Proに相談。

🧩 Environment

Frontend (フルスクラッチ開発の場合)

  • HTML：index.html
  • CSS：style.css, reset.css
  • JavaScript：script.js, test.js

AI Agent

  • Cursor Pro（メイン）
  • ChatGPT Pro（補助・壁打ち）

UI

  • Figma：画像書き出し（解像度2推奨）
    　→ WebP形式にすると軽量化できるが、画質劣化に注意

⚙️ Step-by-Step Workflow

① Figmaデザインを受け取ったら

まずは「画像で実装する部分」と「機能として実装する部分」を見極める。

  • 機能で実装するもの：
    ヘッダー、フッター、ボタン、スライダー、ラジオボタンなど
  • 画像で実装するもの：
    ロゴ、静的画像など
  • アニメーション：
    • ホバーアニメーションは簡単でおすすめ

② GPTで壁打ち → Prompt設計

いきなりCursorに投げる前に、ChatGPTで「どう伝えるか」整理する。
→ どの要素を実装すべきか明確になり、無駄な生成が減る。

③ 必要な要素を絞って英語でCursorに指示

  • Promptをシンプルに整理して渡し、全ての機能を実装してみる。
  • 実装で納得がいかない部分があったときは、前の指示のところにある矢印ボタンを押して、指示前の状態に戻る。
  • 不要なコード改変を防ぐため、細かい変更は一度 Ask 機能で相談 → 問題なければ Agent へ実装指示

④ CSS調整はブラウザ検証ツールで

Inspect → Elements → Styles
でリアルタイムに要素のpaddingやmarginを試せる。
レスポンシブ対応時に特に便利。

🔍 まとめ

  1. Prompt設計が割と重要
    　→ いきなりAIに任せず、まず「何を求めているか」を整理してみる。
  2. Cursorの指示は日本語より英語で
    　→ 英語の方が精度が高いらしいです。
  3. script.js導入前にtest.jsで動作確認
    　→ 小さなテストファイルで挙動を把握。
  4. Cursor Askも活用してみる
    　→ 直接Agentに投げると、無関係な部分まで変更されるかもしれない時はAskで確認。
    　→ Askで機能検索をすると、Command + F では見つからない関数名も広範囲で探索可能。

🧸 最後に

AIを使ったフロント開発では、
「どんなプロンプトを渡すか」をあらかじめ考えることが、完成度の精密さを高めるうえで重要だと感じました。あくまでもこれは実装を進める段階で意識すべきことであり、コードが複雑になるにつれて、そのプロンプトの内容がより重要になっていくと思いました！

  • Cursor Pro（Agent）：実装・生成
  • Cursor Pro（Ask）：検索・相談
  • ChatGPT Pro：設計・壁打ち・説明補助

Discussion