はじめに
Hugging Face で公開されている WEBGEN-4B-Preview-GGUFは、HTML＋Tailwind CSS のシンプルなWebサイトをプロンプトだけで生成してくれるモデルです。
今回は、このモデルを使って 「山田太郎のポートフォリオサイト」 を自動生成する実験をしてみました。
実験結果
数分の推論で出力されたHTMLをブラウザで開いたところ、以下のようなポートフォリオサイトが完成しました。
シンプルなナビゲーションと柔らかいグラデーション背景、自己紹介やCTAボタンが整っており、短時間でサイトの叩き台ができました。
感想
・名前を「山田太郎」に差し替えるだけで、自分用のポートフォリオに早変わり
・背景やレイアウトも自然で、すぐに利用可能なクオリティ
・制作物カードやお問い合わせフォームを追加すれば、実用度はさらにアップ
おすすめの用途
・ポートフォリオサイトの雛形
就活や転職、コンテスト応募用に「即席ポートフォリオ」を用意するのに便利。
・イベントやサービスのランディングページ
簡単な告知ページやキャンペーンLPを数分で用意できる。
・Webデザイン学習教材
生成されたHTML＋CSSを読みながら、「AIはどんな設計をするのか」を学ぶ教材として活用可能。
・チーム内のアイデア共有
「こんな雰囲気のサイトどう？」とAIにデモを作らせ、デザイナーやエンジニアと早期に共有できる。
手順
1. Colab環境の準備
!pip install -U llama-cpp-python huggingface_hub
2. モデルの取得
from huggingface_hub import hf_hub_download
model_path = hf_hub_download(
repo_id="gabriellarson/WEBGEN-4B-Preview-GGUF",
filename="WEBGEN-4B-Preview-Q4_K_M.gguf"
)
3. モデルを読み込み
from llama_cpp import Llama
llm = Llama(model_path=model_path, n_ctx=4096, n_gpu_layers=-1)
4. プロンプトを投げる
prompt = """
Make a single-file portfolio website for "Yamada Taro".
Style: modern, clean, soft pastel palette, Tailwind CSS.
Sections: navbar, hero, about, skills, projects, contact.
Constraints: semantic HTML, no external JS.
"""
out = llm(prompt, max_tokens=1800, temperature=0.6, top_p=0.9)
5. 出力をHTMLに保存して表示
with open("portfolio.html", "w", encoding="utf-8") as f:
f.write(out["choices"][0]["text"] + "</html>")
まとめ
WEBGEN-4B-Preview-GGUF を使えば、数分で「自分の名前入りのポートフォリオサイト」を形にできます。
今回は山田太郎の例で試しましたが、叩き台としては十分なクオリティで、デザインやテキストを調整すればすぐ実用化も可能です。
AIにベースを作らせ、自分で磨き上げる——そんな新しいWeb制作のスタイルを実感できた実験でした。
こんにちは、だいすけです。
ぼくはフリーランス・エンジニアで、 AR や 機械学習のアプリの実装をしています。
お仕事のご相談こちらまで。
rockyshikoku@gmail.com
Core MLを使ったアプリを作っています。
機械学習関連の情報を発信しています。