自然言語からHTMLとCSS、JSまで生成してくれるAIツール

AIによってプログラムを生成するツールは色々あるのですが、HTML・CSS・JSを生成してくれる日本語対応のツールをご紹介します。

JIT.codes
※利用にはメールアドレスの登録が必要です。


『シンプルモダンなログインフォーム IDとパスワード入力 IDはメールアドレス パスワードは8文字まで』
というオーダーをしてみました。
背景が黒なので文字が見えにくいですが、必要な物は生成されています。

<div class="login-form">
  <h2>Login</h2>
  <form>
    <div class="form-group">
      <label for="email">Email:</label>
      <input type="email" id="email" placeholder="Enter email" required>
    </div>
    <div class="form-group">
      <label for="password">Password:</label>
      <input type="password" id="password" placeholder="Enter password" maxlength="8" required>
    </div>
    <button type="submit">Login</button>
  </form>
</div>

生成されたHTMLのソースを見てみると、最初のinputはtypeがemailになっていますし、パスワードのinputはmaxlengthが8に設定され、オーダー通りとなっています。

次はJSも生成されるよう、下記の内容でオーダーしました。
『ハンバーガーメニュー クリックするとアイコンが×にアニメーションで変化する メニューが開いている場合はbodyのスクロールを止める』

ハンバーガーメニュー開閉のJSは動いたのですが、『アイコンが×にアニメーションで変化する』が理解できなかったようで、生成されませんでした。(記号の×をcorss markに変更して再度オーダーしましたが、結果は変わりませんでした。)

画面上部の「Explore」からは、誰かがオーダーしたものを見ることができます。(私が確認した時点では、生成されたはずのJSのコードがごっそり抜けていますのでご注意。)
https://jit.codes/explore

生成されるものは完璧ではありませんが、ベースとして使えば、イチからコーディングするより時間短縮になるかなと思います。