-本日のアジェンダ-
1限目
学科 生成AI基礎⑥
コードの生成AIについて
2限目
学科 生成AI基礎⑥
コード生成AIのご紹介
3限目
学科 生成AI基礎⑥
課題制作
4限目
学科 生成AI基礎⑥
課題制作
5限目
学科 生成AI基礎⑥
課題制作
本日のテーマ
コードの生成AIについて
主なAIツール:
AI CODE「エーアイ コード」(基本的に無料):
テキストでUI要素（例：「シンプルでモダンなナビゲーション 日本語」）を指定すると、対応するHTMLとCSSを生成します。
ナビゲーション、ボタン、カード、フォームなど、様々なUI要素に対応しています。
Cursor「カーソル」（基本的には無料） / UI Sketcher: 「ユーアイ スケッチャー」（OpenAI APIキー:の料金※無料枠もあり）
手書きのスケッチやドラッグ＆ドロップ操作からWebサイトの画面、コンポーネント、レイアウトを作成し、HTMLとCSSに変換します。
OpenAIのAPIキーが必要です。
FRONT-END.AI「フロントエンド ドット エーアイ」（有料）:
デザインカンプ（Figmaなど）からWeb画面（HTMLと一部のCSS）を自動生成するクラウドサービスです。
VS Codeエディタとの連携も可能です。
UI to Code「ユーアイ トゥー コード」（現時点で無料）:
プロンプトに応じてHTML、CSS（Tailwind CSS）、JavaScriptコードを生成します。
生成されたコードはチャット内で展開されるため、コピーしてファイルに貼り付ける必要があります
コメント