AIプログラミング：ラバブルの上手な使い方

現在、私の最高のAIプログラミングのパートナーは 愛すべき 歌で応える カーソル ...ボルトニューとウィンドサーフ、どちらも素晴らしい。

ラバブルのウェブサイト

https://lovable.dev/

愛すべき人だ。 ボルト.newには名前がついていて、特にコードの書き方を知らない人には試してみることを勧める。私はlovableで40のプロジェクトを作った。

今日の記事の大部分は、XとLovableのプロンプトのベスト・プラクティスに関するドキュメントから引用したものである。元記事を直接読みたい方はこちら：

https://x.com/lovable_dev/status/1873078129469821044

本文はこう始まる。

コンテキストの利用

より多くの背景情報を提供する必要がある。例

私たちは、チームがタスクを追跡できるようにするプロジェクト管理ツールを作っています。

そのツールは以下のような機能を備えている必要がある：

• ユーザー認証
• プロジェクト作成
• タスク
• レポート作成

さて、最初の仕事は、プロジェクトが作成したユーザー・インターフェースを作成することである。

ここでは、私がやろうとしていることに文脈を与えるために、.cursorrulesのようなものだ。しかし、最後に明確にしていることを忘れないでほしい。最初のタスクは何なのか、それは後で説明するが、一歩ずつ進めていくことであり、AIが我々の期待から大きく外れないようにすることなのだ。もうひとつの例。

Supabaseと統合し、安全な認証プロセスを持つCRM（顧客関係管理）アプリケーションが必要です。バックエンドの構築から始めてください。

私たちは、環境に優しい製品に焦点を当てたeコマースプラットフォームを開発しています。カテゴリーと価格のフィルターを備えた商品一覧ページを作成する必要があります。

情報の文脈化、そして具体的なタスクの明確化である。

タスクの内訳

AIプログラミングに挑戦する際に多くの人が挙げる条件のひとつが、天気予報アプリの開発や2048ゲームの開発だ。これもそのとおりで、私たちはここから始めて見事な結果を得ることができる。

しかし、AIに必要なものを推測させることなく、本当の仕事を始めよう。

対照的だ：

そんなことはない：

すべての機能を備えたCRMシステムを構築する

このように

1. "バックエンドの設定"

2. "認証プロセスの追加"

3. "エクスポート機能の追加"

これは、後の「複合機能プランニング」や「デバッグプロセス」を含めて、タスクの分解であり、非常に重要である：

複雑な機能計画

思考の打破：認証取得のための計画を立てよう：

1. 必要なコンポーネント
2. ユーザーインターフェース
3. 安全対策

デバッグ作業：

この構成に従ってください：

1. 何が問題だったのかを説明する
2. 期待される行動を説明する
3. 共有コンソールエラー

画像の使用

これは重要なテクニックで、スクリーンショットをアップロードすることができます。特にプログラミングを知らないユーザーのために、「正確に記述する」ことができません。例えば、ウェブページのレイアウト、ナビゲーションバー、ヘッダー、フッター、これらは基本で、もっと複雑な専門用語があります。

さらに良いのは、それを説明する方法を学ぶことだ。次善の策は、例えば直接参考になる写真をあげることだ：

列間のドラッグ＆ドロップに対応したカンバンボードを作成します。Pangea dndを使用して、列間のカードの移動を実装します。

スクリーンショットはご想像にお任せします。これは、問題を提起するだけでなく、解決策の方向を指し示す要件を提示する非常に専門的な方法です。プログラミングという仕事には、長年蓄積されてきたベストプラクティスがたくさんある。プログラミングを知らなくても、いくつかの語彙の意味を知っていれば問題ない。これはAIをプログラミングする際に非常に役に立つ。

例えば私の場合、バウハウス、メンフィス、モンドリアン、これまでは気にも留めていなかったし、AIを使って仕事を手伝ってもらうようになってからは、TAに明確な指示を出す必要があるし、勉強も必要だ。それぞれの専門分野には、猫とネズミのように、まず把握できる概念の体系がある。

ここでもうひとつのトリックは、AIが私たちよりも深く知っていることが多いということだ。私たちがどう質問していいかわからなければ、AIに聞けばいい。

効果的なフィードバック

私たちが要求するとき。もっとよくしてください」と言う代わりに、「ログインフォームは機能するが、Eメール認証とパスワードが一致しない場合のエラーメッセージをもっとよくする必要がある」と言おう。

本質的には、やはりAIにいかに明確なフィードバックを与えるかということだ。モデルとのコミュニケーションでは、抽象的なものには抽象的に、具体的なものには具体的に。本当に何を聞けばいいのかわからないときがあります。インタラクションをもっと良くしよう、ビジョンをもっと良くしよう、と言ってもいいのですが、このとき、今やっていることのコンテクストをもう一度明確にすることが重要です。コンテクストのキーワードを通して、モデルは少なくとも平均以上のレベルまで相関を出すことができますし、おそらく方向性もわかっているはずです。

制約の設定とUIの更新

明確な境界線の定義ToDoリストアプリケーションを作成してください。現在のデザインシステムを維持しながら、追加/編集/削除機能を含めること。"

別の例を挙げよう。ビジュアル・デザインのみが更新されました。すべての機能とAPIコールはそのままに。モバイルレイアウトの改善に重点を置く。"見た目の改善 "を強調する一方で、"変える必要のないもの "を明確にする必要がある。などなど。

アクセシビリティ要件

必要性を明示する："ARIAラベル、キーボード・ナビゲーション、適切なフォーカス管理を備えたログイン・フォームの生成「知っていることはいい。知っているか知らないかの違いだ。

AIプログラミングの時代には、好奇心や探究心はもう少し重要でなければならない。

クソに溺れるダオ、AIを使った仕事はシンプルに、本来はこういった能力を派手に書いて、まるで自分が実力以上であるかのように書きたかったのですが、たくさん使えば使うほど、経験を積めば積むほど、シンプルに、ありのままを提示して、皆さんのお役に立てればいいと思っています。

ラバブルにすべての仕事を期待する必要はないし、上記のことを試してもラバブルが改善できそうにないときは、カーソルの出番だ。