一、はじめに
AIプログラミング（AI coding）は現在の注目すべきトピックですが、それは単一の機能ではなく、様々な方向性に分かれています
その中の1つの方向性は、UIの生成で、特にWebページのUIの生成です
UIの生成は視覚デザインに関わるもので、専用のAIツールが必要です海外にはこのような製品が多く存在し、例えばv0.dev、lovable.dev、bolt.new
などがあります__JHSNS_SEG_9fbe43da_10__これらはあなたの文字での説明に基づいて、自動的にWebページを設計し生成し、デプロイして公開することができます
私はずっとこれらのUIジェネレーターがどれくらい便利かテストしたいと思っていましたが、残念ながら有料版を開放していないと完全な体験（最新で最も強力なモデルを含む）ができません。
二、豆包
先週、私は字节系列の豆包がUIジェネレーター機能を公開し、ウェブアプリを直接生成できることを発見しました。
公式はさらに「アプリ作成 1.0」と注釈を加え、注目を引こうとしています。
その理由は、下層の豆包大モデルが1.6バージョンをリリースし、コード生成能力が大幅に向上したからです。公式は宣伝は、複数のテストセットでスコアが国際トップクラスに属しています。
好奇心から、簡単なテストを行いました。完全に無料で、国内ユーザーにとっては、この国産ツールの方が海外の競合製品より使いやすくなっています。
三、基本機能
メニューの「AIプログラミング」オプションをクリックすると、プログラミングインターフェースに入ります。__JHSNS_SEG_9fbe43da_28__大きな入力ボックスと、下にいくつかのサンプルがあります。
話は短くして、直接入力します：
ECサイトを作成します。
システムはすぐにコード生成ページに切り替わり、左側はAIの対話欄で、右側は連続して生成されるウェブページのコード（下図）です。
コード生成が完了すると、右側は生成されたウェブページのプレビューに切り替わります。
展示のためにこのページを共有します（右上の「共有」ボタンをクリック）。
皆さんで結果を見てください（ここをクリック）。
申しますと、これはシステムが直接生成したもので、私が何の修正もしていない。
私は思うのですが、10文字未満の入力でこんなウェブページが生成できるのはまあまあ、私の期待を超えていた。
このページは使えるように見えますが、多くの細部を修正する必要があります。
四、ビジュアルエディタ
編集を試したところ、豆包のエディタ機能がとても良くできており、完全にビジュアルエディタで、コードを知らない人でも扱えるようになっており、他の競合製品はこの程度にはなっていないようです。
豆包のビジュアルエディタは、AIエディタと手動エディタに分かれています。
4.1 AIエディタ
AIエディタとは、左側のAIボックスに直接指示を入力し、AIに編集を手伝ってもらうものです。
編集プロセスは下の図の通りで、タイトルを選択し、「表現を最適化し、アートフォントに変更」という指示を入力すると、すぐに反映されます。
一つの指示で複数の箇所を修正でき、変更するたびにシステムがリアルタイムで保存するため、手動で保存する必要はありません。
4.2 手動エディタ
手動エディタとは、フロントエンドで直接文字や画像を自分で修正するものです。
まず、「編集」ボタンをクリックして編集状態に入ります。
次に、修正したい要素を選択して編集します。
例えば、AIが生成したウェブページの画像はしばしば不適切なため、交換する必要があります。
上の図では、画像はBluetoothイヤホンであろうが、AIはノートパソコンの画像を配置してしまい、変更が必要です。
編集モードでこの画像を選択すると、下部に編集ボックスが表示されます。
そこには3つのオプションがあります。
- スマートイメージ生成：AIが画像を生成します。
- 一括検索：システムの図庫を検索します。
- ローカル画像の置き換え：ローカルの画像をアップロードします。
最初のオプション「スマートイメージ生成」を選択し、「Bluetoothイヤホン」と入力すると、AIが生成したBluetoothイヤホンの画像が得られます。
五、テキストからウェブページへの変換
豆包の今回の更新では、「テキストからウェブページへの変換」機能もあり、とても実用的だと思います。
それは長いテキスト（会議記録、旅行ガイド、ニュース報道、論文など）がAIによって解釈され、自動的にウェブページに変換されます。
具体的には、対話ボックスの下に一列の機能ボタンがあり、最初のものが今回追加された「テキストを秒でウェブページに変換」です
。
それをクリックすると、入力ボックスにシステムのヒントが表示されます：「以下の内容を分析し、明瞭で美しい視覚的なHTMLウェブページに変換してください」
。そのヒントの下に長いテキストを貼り付ければよいです。例えば、研究报告書を貼ると、AIは内容を要約し、要約した内容をウェブページとして生成します
。より実用的なのは、長いテキストがAIによって生成できることです。具体的な手順は、チャットインターフェースでAIに長いテキストを生成させ、その後AIプログラミングに切り替えて「上記の内容をHTMLウェブページに変換する」という指示を入力することです。
例えば、まずAIとチャットして、「3日2夜の6月杭州旅行プランを立てて」と言う。
AIはたっぷりと説明し、長い文章を生成する（クリックしてご覧ください）。次に、AIプログラミングに切り替えて、「上記の情報をインタラクティブなHTMLウェブページに変換して」と入力。
ウェブページが生成される（クリックしてご覧ください）。
この機能があることで、AIのコンテンツ生成とウェブページ生成が一体化した。
そうして、遊び方は無限に広がる。例えば、会議の録音ファイルをアップロードして会議記録サイトを生成する；文献をアップロードして内容紹介サイトを生成する；AIに財務報告書を分析させることで、折れ線図やプロセス図の分析サイトを生成する。
六、まとめ
試用してみて、豆包の今回のウェブページ生成機能について、私は良い印象を持っています。とても実用的で、完成度も高く、便利なツールです。
まず、モデルが生成するページの効果は、私の想像以上で、使いものがります。
次に、ビジュアルエディタはとても便利で、操作が簡単で、初心者やプログラミングに詳しくないプロジェクトマネージャーやデザイナーにも適しています。
豆包チームがこの機能を重点的に作り上げたことは、彼らがAIプログラミングの現状をよく理解していることを示しています：AIが生成するページは、一度で理想的な状態に達することはできず、編集機能をしっかり作り、修正や最適化をしやすくする必要があります。
最後に、海外の競合製品と比べると、より良いローカライズがあります。中国語のインターフェースや使い方のヒントだけでなく、生成されるウェブページのスタイルも、明らかにローカライズされたテンプレートを使用しており、海外のデザイナーのスタイルではありません。
もし欠点を言えば、おそらくJSのスクリプト能力がまだ満足にないということで、いくつかのページのインタラクティブな効果が一度で成功しないし、AIと何度も調整する必要がある
（おわり）