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