「任意のプロンプトからHTMLとCSSを生成してその場でプレビュー出来る・「AI CODE」」のご紹介| Webデザイン参考記事まとめアプデ

2023年03月31日(金)

任意のプロンプトからHTMLとCSSを生成してその場でプレビュー出来る・「AI CODE」

0

11

6

9

AI CODE

AI CODEは任意のプロンプトからHTMLとCSSを生成してその場でプレビュー出来るAIコード生成アプリです。特に説明は不要かと思いますがタイトルの通りで指示したUI等をHTML/CSSで作成し、その場でプレビュー出来る、というものになります。

上SSでは「アバター、小見出し、ダミーテキストのある横型のカードUI。色は任せる。」というプロンプトを使いましたが概ねイメージしたものが作られました。アバター画像は壊れていますが、例えばunsplashなどを使うよう指示すれば使ってくれます。

他にもいくつか試しましたが、人に指示する感覚で作れました。例えば「Tailwind.cssを使って」と指示すればTailwind.cssのclassを使ってコードを生成してくれます。

まだβ版でたまに妙な挙動も確認しましたが、基本的には想定したものを作ってくれたので普通に便利そうです。APIキーの入力もユーザー...

WordPressやJQueryなどを中心に、Web開発者のためのチュートリアルやコードスニペットの記事を公開しているTakahashi Yoheiさんのブログかちびと.netの記事『任意のプロンプトからHTMLとCSSを生成してその場でプレビュー出来る・「AI CODE」』についてまとめています。

この記事は特にアプリについて書かれており、気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のかちびと.netで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとかちびと.netの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。