天宮設計インテリジェントエージェント実世界テスト - 1文で反復可能なWebページを生成する
AIが美しいウェブページを生成することはもはや珍しいことではない。課題は継続的な改善にある。AIが生成したページの多くは一見すると素晴らしいように見えるが、別のページを追加しようとすると、AIが突然「誤作動」を起こすことがある…。
させて AI 美しいウェブページを作成することは、もはや目新しいことではない。
問題は、この反復作業を継続できるかどうかだ。
たくさんの AI 一見するとページは素晴らしく見えるが、別のページを追加しようとすると…AI 突然「記憶が飛んで」、全く異なる配色とレイアウトの新しいページが生成される可能性は非常に高い。
デモ作成には問題ないのですが、公式ウェブサイト、製品プロトタイプ、顧客提案などに使うとなると、途端に面倒なことになります。本当に必要なのは、継続的に修正、拡張、そして他者への引き渡しが可能なデザインアセットなのです。
最近、Kunlun TechはTiangong 3.1をリリースし、Tiangongのデザインを採用しました。知的体私たちはデザインを無限のキャンバスに配置し、製品要件定義書、ブランド情報、参考ウェブサイト、スクリーンショットなどを盛り込み、天宮デザインは…知的体これにより、継続的に変更可能なウェブページやアプリのUIプロジェクト群を生成することができます。
それでは早速、実際のテストに移りましょう。
天宮スーパーをオープンします知的体公式サイトでは、ページ左上にある「天宮設計」を選択してください。知的体。
天宮デザインにおいて知的体要件を入力するだけで、簡単に設計を完了できます。
ケース1：ウェブデザイン
カスタマイズされた旅行ウェブサイトをデザインします。
入力ボックスの下で、テーマカラーをカスタマイズしたり、デスクトップ用ウェブページまたはモバイル用ウェブページを生成するかを選択したりできます。
天宮デザイン知的体ライブラリですぐにコードを書き始めるのではなく、まず、私たちの真のニーズを理解し、それからプロセスを計画・設計する。。
最初のステップは、配色、フォントとフォントサイズ、ページレイアウトなど、デザインの方向性を決定することです。単純つまり、抽象的な記述を再利用可能な設計仕様に変換することを意味する。
天宮デザイン知的体このプロジェクトは、ホームページ、目的地ページ、カスタマイズソリューションという3つの主要ページに意図的に分割されました。各ページの要点を説明するために表が使用され、実際の公式ウェブサイトプロジェクトと同様に情報アーキテクチャが整理されました。
最終結果を見てみましょう。
完成品は予想以上に出来が良かった。
これら3つのページはそれぞれ、旅行サービス、目的地情報、カスタマイズソリューションを紹介しており、それぞれに独自の焦点を当てているものの、ナビゲーション、フッター、カード、ボタン、ブランドカラーは統一されている。すべてのページの設計ガイドライン、ページ構造、およびコンポーネントスタイルは、一貫性を保つ必要があります。非常に上質な感触です。
天宮デザイン知的体彼らはまた率先して行動するだろう推薦する追加の質問これは、継続的な最適化に役立ちます。
最適化の方向を直接入力します。例えば、次のようになります。
アールデコ調の旅行スタイルに変更してください。
天宮デザイン知的体これにより、元のプロジェクトにさらに手を加えることができ、ページ構造を維持したまま視覚的な表現を調整できます。このバージョンは、より洗練された印象を与えます。
また、職人にデザインを任せよう知的体すべての画像のプレースホルダー自動一致する画像を生成するこれにより、設計図の最終成果物がより美的に魅力的なものとなる。
各デザイン図面には、右上隅に[何か]があります。徹底的な編集ボタン。
一度選択したら、ページ上の要素をクリックすると、画面右側にモジュールのテキストフォント、フォントサイズ、色、要素サイズ、レイアウト、ボックスモデルなどの情報が表示されます。直接編集も可能です。：
ページ上の各箇所に個別のコメントを追加したり編集したりできます。例えば、タイトルを選択してコメントを追加してみましょう。
タイトルが「これまでとは違う美しい景色との出会い」に変更されました。
天宮デザイン知的体ミーティング自動彼らは設計仕様書を抽出し、修正作業を完了するのを手伝ってくれました。レイアウト、タイポグラフィ、フォントサイズはオリジナルと全く同じです。
各反復作業は非常に精密に行うことができます。N番目のバージョンであっても、最初に提出されたバージョンと同じ要件を満たすことになるので、心配する必要はありません。 AI 途中で文脈が失われる。
調整後、プロジェクトをエクスポートするか、プロトタイプを生成するかを選択できます。
天宮デザイン知的体このツールは、プロジェクトをレイヤーごとにFigmaにコピーしたり、zipファイルとしてエクスポートしたりすることをサポートしており、プロジェクトを直接埋め込んだり、二次的な修正を加えたりすることが容易になります。
キャンバスに基づいてプロトタイプを生成することも、プロジェクト全体に基づいてプロトタイプを生成することもできます。
天宮デザイン知的体まずは設計文書を確認し、インタラクティブなプロトタイプを作成することから始めましょう。
最終結果を見てみましょう。
配色とウェブサイトの構造は素晴らしく、必要な入り口とナビゲーションバーがすべて揃っています。自動カードのアニメーション効果が追加されたことで、10点満点中9点という高評価を得た。
ケース2：アプリのプロトタイプ設計
既にPRDがある場合は、それをナレッジベースに直接アップロードして、天宮設計に...知的体製品要件定義書（PRD）の要件に従ってプロトタイプを設計する。
まず、PRDをナレッジベースにアップロードします。
天宮デザイン知的体最初のステップは、K-Sisterの履歴書最適化ツールをモバイルアプリとして位置づけるという、デザインの方向性を確定することです。 AI 求職ツール、そしてプロフェッショナルなブルーの色調と温かみのあるテクノロジーに精通した美学を組み合わせたビジュアルスタイル。
天宮デザイン知的体作業の途中で、ページ構成が不完全であることが判明しました。当初、ページ構造は1ページの骨組みしか含まれていませんでした。そこで、10ページのモバイルページからなる完全な構成に修正しました。これは非常に配慮の行き届いた対応であり、多くのデザイン上の問題を未然に防ぐことができました。
計画が確定した後、天宮設計知的体実際のアプリの処理プロセスに従って、ページごとに生成されます。
最終結果を見てみましょう。
天宮デザイン知的体完全な機能チェーンが構築されており、これは使用順序に完全に沿って構築されたページで構成される、一連の求人検索最適化プロセスとして理解できます。
診断レポートのページはよくデザインされています。総合スコア、4次元スコア、リスク警告はいずれも非常に包括的です。
ケース3：クローニング設計
私は天宮のためにデザインしました。知的体参考画像をもとに、K-Sister Research Societyのブランドを冠した、その参考画像に合わせたデザインのカスタマイズされた旅行ウェブサイトを作成しました。
画像に示されているスタイルを参考に、「K-Sister Research Society」ブランド向けのカスタマイズされた旅行ウェブサイトを作成してください。コンテンツはご自身で作成していただいて構いません。
天宮デザイン知的体私たちが提供する参考画像に基づいて、彼らは一連のデザインガイドラインを分析し、それらのデザイン言語を私たちのニーズと組み合わせて、新しいウェブサイトに適用します。
重要なのは、ウェブページのピクセル単位で完璧な複製を作成することではなく、デザイン言語を学び、それを柔軟に適用することである。。
例えば、天宮設計知的体オリジナルの配色を学ぶ：
オリジナルのレイアウトと配置を学びましょう：
最終的に生成されたページを見てみましょう。
参照画像とは全く異なるが、詳しく調べてみると、配色、カードの角の丸み、レイアウト、画像の切り抜き方法など、すべてに元の画像の痕跡が見られる。
知識を習得するのと同じように、重要なのは丸暗記ではなく、知識を柔軟に応用し、ある事例から別の事例へと推論を導き出す能力である。
過去には、 AI デザイン作業は、まるでブラインドボックスを開けるようなものです。美しい1ページのビジュアルを作るには、何度も試行錯誤を繰り返す必要があります。見た目は悪くないかもしれませんが、ページ間の論理的なつながり、ユーザー操作の経路、機能的なループなどを詳しく見ていくと、往々にして複雑な構造になっているものです。
天宮デザイン知的体デザインプロセスは明確なビジネスニーズを中心に展開され、まず全体的なデザインの方向性を概説し、次にページを細分化してコンポーネントとスタイルを統一します。無限のキャンバスの中で、デザインは継続的な問い直し、局所的な調整、そして反復的な改善を可能にする、進歩的なプロセスとなります。
製品の目標、主要な問題点、機能モジュール、ビジュアルスタイルを明確に表現できる限り、AI それは可能になるでしょう速い実用的な基本バージョンを構築できます。ツールの操作スキルに縛られる必要はありません。最初の草案に基づいて、判断を下し、情報を取捨選択し、詳細を洗練させることに集中できます。
もちろん、複雑な現実世界のビジネスロジックや、高度なブランドカスタマイズのニーズに直面した場合、美観、インタラクティブな体験、ビジネス上のトレードオフといった観点からの人間のデザイナーの判断は、依然としてかけがえのないものです。
このタイプのデザイン Agent この技術の出現は、製品設計の出発点を間違いなく大きく前進させた。
デザイン Agent それは、誰もがプロトタイプを使ってより直感的にアイデアを表現し、検証できるようにする、いわば敷居の低いアイデア翻訳機のようなものです。また、基本的なレイアウト作業の一部をデザイナーが行うのにも役立ち、より高度な美的判断、ユーザーエクスペリエンスの最適化、複雑なシステム設計に集中するためのエネルギーをより多く確保できるようになります。