AIエージェント活用事例
Views —

AIエージェント活用事例

今日の新着

44すべて 189件

全189件中 1〜20件

販促・制作

説明だけで招待状ウェブページを作る

Cursorに希望するデザインを説明して招待状ページとアニメーションを作成しました。最後のメッセージや余白は自分でコードを修正しました。

Cursor

使い方

  1. 最初のリクエストでフロントエンドだけで作る招待状という目的を書きました。アニメーション、画像とメッセージ、画面間を移動するボタンまで希望する構成を説明しました。
  2. 封筒が開くアニメーションでつまずきました。言葉で修正を繰り返し頼んでも改善せず、HTML・JavaScriptの例を自分で探して、色を変えたコードをプロンプトに貼り付けてベースとして使わせました。
  3. アニメーションが動いた後、ボタンやフォント、画面構成を追加しました。別の画面を作る時は、前に使ったリクエストを再利用しました。共通スタイルと明記しないと現在の画面だけに反映される問題がありました。
  4. ページが90～95％ほど完成した段階からは自分でコードを修正しました。メッセージや内側・外側の余白など細かい調整は手作業で仕上げる方が早かったそうです。

結果

作成者は2～3時間で招待状サイトを完成させました。普段のやり方で自作した場合は4～8時間ほどかかっただろうという本人の推測も添えられています。

補足

漠然と修正を頼むより参考例を見せる方が役立ったそうです。最後の細かい調整には手作業が必要でした。

出典

DEV Community 原文 ↗

プロンプト例 · Cursor

スマートフォンとPCで見られるイベント招待状ウェブページを実装してください。

入力：イベント名［名前］、日時［日付・時間］、場所［住所］、案内文［内容］、使用する画像［ファイル］、参考画面［資料］。不足している情報をまず確認し、フロントエンドだけで実装できる範囲を決めてください。

最初の画面に招待状と本文、イベント情報、場所・連絡先リンクを構成してください。封筒を開くようなアニメーションは提供された参考動作を基準に作り、モーション軽減設定では内容がすぐ読めるようにしてください。複数画面でフォント・色・ボタン・余白を共通スタイルで管理してください。

希望する動作がうまく出ない場合は、漠然と繰り返し修正を頼まず、現在の結果と参考例の違いを説明した上で該当部分を修正してください。例のコードを受け取ったら既存の画面に合うように必要な部分だけ使ってください。

成果物：実行可能なページとプレビュー、メッセージ・画像の差し替え案内。スマートフォンで横スクロールが発生しないか、日付や住所が正しいか、ボタン・リンク・キーボード操作が動作するか確認してください。