CursorとtldrawでAI開発環境を作る方法

TL;DR

CursorにUI SketcherとHTML Previewを導入し、OpenAI APIキーを設定すれば、ラフなUIやスクリーンショットからHTMLを生成して、その場で表示を確認できる。生成されない場合は、新規ファイルをHTMLなどの適切な形式で保存してからMake Realを実行する。

Transcript

えこれをですねこんな感じで選択してです ねえ実行を押すと左側に出てるように こんな感じでえリアルタイムでコードが 書き出されますこれめちゃくちゃすごく ないです かはいこんにちはケトですえ今回はですね えこちらの画面に出ているような感じの 右側にラフのスケッチを書いてそれをその まんまコードに書き出しさらにその プレビューも確認するこのですねAIを 使ったフロント開発環境の作り方っていう のを解説していきたいと思いますえちなみ に私のチャンネルはAIやWEBに関する 便利なツールや情報を共有している チャンネルですチャンネル登録がお済みで ない方はチャンネル登録のどお願いいたし ますえそれでは本題に入っていきますえと いうことでえ今回はですねえこんな感じの ラフの絵からえコードを書き出すって... Read More

Key Insights

• Cursorは、VS Code系の操作感を持つAIテキストエディターとして紹介され、拡張機能を追加することでスケッチ作成、コード生成、HTML表示を一つの環境にまとめられる。
• UI Sketcherは、描画ボード上で作ったラフな画面構成を選択し、Make Realを実行することで、対応するHTMLコードをCursorのエディターへ書き出す拡張機能である。
• HTML Previewは、生成されたHTMLの表示結果をCursor内で確認するための拡張機能であり、動画ではコマンド検索からプレビューを開く手順が使われている。
• OpenAI APIキーは、UI Sketcherからコードを生成するための設定として登録される。新しいシークレットキーを作成し、Cursorの指定欄へ入力して成功表示を確認する。
• 生成先ファイルは、Make Realを押す前にHTMLなどの拡張子を付けて保存する必要がある可能性がある。コードが出ない場合に確認すべき条件として説明されている。
• スケッチからの生成は、サインアップ画面の入力欄やリンクを含むHTMLの初期案を短時間で作れるが、完成品質を保証するものではなく、人による改善が前提となる。
• スクリーンショットからの生成は、ブログやTwitter風投稿のメニュー、テキスト、数値などを再現できる一方、画像のパスを用意していない例では画像が反映されなかった。
• Cursor、UI Sketcher、HTML Previewの組み合わせは、フロント開発の初期段階でワイヤーフレームをコードへ変換し、表示確認まで進めるための作業環境である。

Questions & Answers

Q: CursorでAIフロント開発環境を作る方法は？

Cursorをダウンロードして開き、基本設定の拡張機能画面からUI SketcherとHTML Previewをインストールする。次にUI SketcherへOpenAI APIキーを登録し、Open Drawing Boardを開けば、スケッチの作成、コード生成、HTML表示を同じエディター内で進められる。

Q: UI SketcherをCursorに導入する方法は？

Cursor左上のメニューから基本設定を開き、拡張機能の検索欄でUI Sketcherを検索してインストールする。導入後はコマンド検索でUIを検索し、UI SketcherのOpen Drawing Boardを選択すると、tldrawと同様に操作できる描画画面が開く。

Q: UI SketcherにOpenAI APIキーを設定する方法は？

Cursorのコマンド検索からOpenAI APIトークンを設定する項目を選び、OpenAIのAPIキー作成ページで発行した新しいシークレットキーを入力して送信する。入力後に成功を示す表示が出れば、UI SketcherのAPI設定は完了する。

Q: ラフスケッチからHTMLを生成する方法は？

UI Sketcherの描画ボードで画面のワイヤーフレームを作り、コード化したい要素をすべて選択してMake Realを押す。すると、選択したラフを基にしたHTMLコードがCursorのエディター側へ書き出されるため、必要に応じて内容やデザインを修正する。

Q: Make Realを押してもコードが生成されないのはなぜ？

新しく開いたファイルに名前や拡張子が付いていないことが原因の可能性がある。動画内では、新規ファイルをHTML形式で保存してからMake Realを実行するとコードを生成できたため、HTML、JS、CSS、Pythonなどの適切な形式でファイルが作成されているか確認する。

Q: 生成したHTMLをCursorでプレビューする方法は？

HTML Preview拡張機能をインストールし、Cursorのコマンド検索からHTMLのプレビューを開くコマンドを選択する。これにより、UI Sketcherが書き出したHTMLの表示結果をエディター内で確認でき、入力欄やリンクなどの動作も試せる。

Q: スクリーンショットからUIをコード化する方法は？

再現したいWeb画面のスクリーンショットを取得し、UI Sketcherの描画画面へアップロードしてMake Realを実行する。動画内のブログ画面やTwitter風投稿の例では、メニューや日本語テキスト、反応数などは生成されたが、画像自体は反映されなかった。

Q: 生成されたUIはそのまま完成品として使えますか？

生成結果は初期案として利用できるが、そのまま完成品になるとは限らない。動画でも、人が制作した方がきれいで美しいWebサイトになる場合があると説明されており、細かな指示の追加、画像パスの準備、デザインやコードの調整が必要になる。

Summary & Key Takeaways

• 環境構築には、AIテキストエディターのCursorを使用する。Cursorの基本設定から拡張機能画面を開き、スケッチをコードへ変換するUI Sketcherと、生成したHTMLを表示するHTML Previewをインストールする。プレビュー機能は、別の対応拡張機能に置き換えることもできる。

• UI Sketcherの設定では、Cursorのコマンド検索からOpenAI APIトークンの設定項目を開く。OpenAIのAPIキー作成ページで新しいシークレットキーを発行し、入力欄へ貼り付けて送信する。成功表示を確認したら、UI SketcherのOpen Drawing Boardを実行して描画画面を開く。

• 描画画面でワイヤーフレームを作り、対象を選択してMake Realを押すと、対応するコードがエディター側へ書き出される。HTML Previewのコマンドを実行すれば表示も確認できる。ラフやスクリーンショットから初期案を作れる一方、画像の再現やデザイン品質は完全ではなく、人による調整が必要である。