UIGEN-X-32B-0727レビュー：指示をウェブサイトに変えるローカルモデル

執筆： Andrew Miller · 2025年8月7日

アーカイブ記事です。 2025年8月に執筆されたもので、その後、料金やモデル、機能が変わっている可能性があります。最新の状況はおすすめのAIコーディングモデルをご覧ください。

汎用のチャットボットにウェブページを頼むと、動くコードは出てきても、本当のデザインが伴っていないことがよくあります。UIGEN-X-32B-0727は、フロントエンドのコードを書くために特化して学習させた言語モデルです。Tesslateによるもので、Qwen 3をベースにしており、HTML、CSS、JavaScriptを書く前にデザインを計画し、推論します。

UIGEN-X-32Bのウェブサイトのスクリーンショット — UIGEN-X-32Bの公式サイト

いきなりコードに進むのではなく、3つの段階で作業します。

依頼の内容を分析します。
ページの構造とデザインシステムを示します。
コンポーネントに分けたきれいなコードを書きます。

仕様

機能	詳細
モデルのサイズ	32Bパラメーター（複数シャード、フル精度で約61GBのVRAM）
ライセンス	Apache 2.0（商用利用可）
推論が先	コードを生成する前に複数の段階で計画
UIフレームワーク	React、Next.js、Tailwind、Chakra、Material UI、Flutter、Electronなど
ビジュアルスタイル	Glassmorphism、Neomorphism、Cyberpunk、Brutalism
モバイル	React Native、Expo、Flutter
状態管理	Zustand、Pinia
アニメーション	Framer Motion、GSAP
アイコンライブラリ	Lucide、Heroicons、Font Awesomeなど

必要なもの

要件	推奨
OS	Ubuntu 20.04以降、またはWSL2/macOS
GPU	最低48GBのVRAM（たとえばRTX A6000やH100）
RAM	32GB以上のシステムメモリ
ソフトウェア	Python 3.10以降、vLLM、Node.js、npm

インストール

ステップ1：vLLMをインストールしてモデルを配信する

pip install vllm

次に実行します。

python3 -m vllm.entrypoints.openai.api_server \
  --model "TestlateAI/UAGX-32B" \
  --port 8000

これで約14のシャードがダウンロードされ、localhost:8000のOpenAI互換APIでモデルが配信されます。

ステップ2：ウェブの画面をインストールする

git clone https://github.com/TesslateAI/UIGEN-T2-Artifacts.git
cd UIGEN-Demo
npm install

必要に応じて次を編集します。

開発用の設定はvite.config.js
モデルの一覧に"UAGX-32B"を加えるにはsrc/app.tsx

次に実行します。

npm run dev

画面はhttp://localhost:5173にあり、モデル自体はHugging Faceにあります。

指示の例

以下の結果は、この記事を書いた時点での報告に基づいています。

マッチングアプリ

指示："Create a modern dating app UI using React and Tailwind. Include profile cards, swipe animation, and a match list."（ReactとTailwindでモダンなマッチングアプリのUIを作って。プロフィールカード、スワイプのアニメーション、マッチの一覧を含めて。）

結果は、配色の説明付きのタブ形式の画面、構造化されたプロフィールのコンポーネント、ReactとTailwindによるアニメーションでした。

SaaSの分析ダッシュボード

指示："Create a responsive analytics dashboard using Next.js and Tailwind. Dark mode, glassmorphism cards, collapsible sidebar."（Next.jsとTailwindでレスポンシブな分析ダッシュボードを作って。ダークモード、グラスモーフィズムのカード、折りたためるサイドバー。）

レスポンシブなサイドバーのレイアウト、グラフのプレースホルダー、控えめなホバー効果のあるカード、正しいTailwindの設定が出力されました。

React Nativeの習慣トラッカー

指示："Create a habit tracking app in React Native using Expo with tabs: dashboard, calendar, profile."（ExpoとReact Nativeで、ダッシュボード、カレンダー、プロフィールのタブを持つ習慣トラッカーのアプリを作って。）

コードは正しく生成されましたが、プレビューは描画に失敗しました。現在のウェブの画面では、複雑なモバイルのレイアウトでよく知られた問題です。

点数

観点	点数（1〜5）
UIの推論	5.0
コードの構造	4.5
フレームワークの正確さ	4.5
見た目の描画	4.0
モバイル対応	3.5
VRAMの効率	3.0

注意点：最低でも48GBのカードが必要で、フル精度で動かすには約61GBが必要なので、ほとんどの人は自宅では動かせません。弱点はモバイルのレイアウトです。コードは正しくても、プレビューはそうでないことがよくあります。

結論：ハードウェアを持つ開発者やプロダクトデザイナーにとっては、プロジェクトの退屈な最初の数時間を省いてくれます。最も力を発揮するのはUIの定型部分、SaaSのダッシュボード、マーケティングのランディングページ、ReactやNext.jsのプロトタイプで、フロントエンドの仕事を学ぶ教材としても役立ちます。