本動画では、主要なフロンティアモデルのフロントエンドデザイン能力を徹底比較している。Gemini 3 Pro、Opus 4.5、GPT 5.2といった最新モデルを用い、同一のプロンプトで複数のデザインを生成させ、その品質と独自性を検証した。特筆すべきは、Claude Code用に公開されているフロントエンドデザインスキル(単なるマークダウンファイル)がOpus 4.5のデザイン能力を劇的に向上させる点である。デフォルト状態では最下位だったOpus 4.5が、このスキルを適用することで他を圧倒する品質と柔軟性を発揮する。Geminiは初期デザインこそ優れているものの、反復的な改善やユーザーの好みへの適応が困難であることが明らかになった。最終的に、フロントエンドデザインスキルを活用したOpus 4.5が、実用的で独創的なデザイン生成において最も優れた選択肢であることが実証された。
フロンティアモデルの現状とデザイン能力
現在のフロンティアモデルは本当に優れています。Gemini 3 Pro、Opus 4.5、GPT 5.2、あるいは今頃リリースされているかもしれないSonnet 5など、どれを使っても素晴らしい仕事ができます。それぞれに長所と短所があります。特にGemini 3 Proはツールでうまく動作しないようですね。
でも、フロントエンドと優れたデザインについてはどうでしょう。みんなが大好きな紫のグラデーションと同じフォントばかりのAI生成っぽい代物ではなく、本当に良いものを作りたい場合、どのモデルがデザインに最適なのでしょうか。特にこの用途ではGemini 3 Proについて多くの人が話しているのを見てきました。
これらのモデルをデザインの得意度で大まかにランク付けするなら、最下位にOpus 4.5を置きます。次にGPT 5.2、そしてGeminiという順番です。でもその上に、おそらく皆さんが予想していないものを置きます。私はこの組み合わせをしばらく使って、取り組んでいる混沌としたサイドプロジェクトすべてで素晴らしいデザインを作ってきました。
Frame.ioの代替となるlawnから、近々リリースする予定の新しいライブラリshoeまで、そして最近サムネイルやアセット作成に大量に使っているイメージスタジオアプリまで。これは本当に見事だと思います。実際にコードを書いたり細かく指示したりせずにこれらすべてのデザインを作れたという事実は、今でも少し信じられないくらいです。
意外な最適解の正体
では、私の秘密は何でしょう。こんなに良いものを作るために使っているモデルは何で、どうやっているのか。ネタバレすると、またOpusです。わかっています。Opusがリストの最下位にあるのに、どうしてなのか。マークダウンファイルです。
おかしく聞こえるのはわかっています。正直なところ、ちょっとおかしいんです。誰もこのことを話すようにお金を払っていません。ただ自分で発見したもので、良すぎて本当だとは思えなかったので、皆さんに見せたかったんです。でもその前に、もう一つお見せしたいものがあります。今日のスポンサーです。
Railwayの紹介
私はTwitchで働いていたところから自分の会社を経営するようになった話をよくします。でも、その間の期間についてはあまり触れません。奇妙だったからです。いくつかの会社と話をして、最終的に自分でやることに決めましたが、決断は本当に難しかったです。ある会社から信じられないほど良いオファーをもらい、それについて考え続けていました。
今でもよく考える会社です。今日のスポンサーであるRailwayについて話せることに、とても興奮しています。そうです、私はこの会社の4人目の従業員になりそうだったんです。断った唯一の理由は、創業者のJakeが自分のことをやるように言ってくれたからです。彼が気にかけているのは、人々が素晴らしいものを作れるようにすることだけだからです。
Railwayを使えばそれがわかります。よく現代のHerokuだと冗談めかして言いますが、実は冗談ではありません。本物のサーバーをデプロイするこれほど簡単な方法は今までありませんでした。GitHubにリポジトリがあって動かしたい場合、Railwayはほぼ常に問題なくやってくれます。Dockerfileの準備はできていますか。対応してくれます。
データベースが必要ですか。デプロイしてくれます。アセットをホストする場所が必要ですか。S3が必要ですか。これらのどれかが必要ですか。すべてカバーしています。Google Analyticsの代替でオープンソースのUamiインスタンスを、文字通り3クリックで20秒以内にデプロイしました。ビルド時間とデプロイ速度が比類ないほど速いため、すべてデプロイされました。
代替手段の最大10倍速いというのは、信じられないことです。そしてGitHubにリンクされれば、mainにプッシュすると自動的にデプロイが更新されます。これらは自分でセットアップするのが面倒な種類のものです。通常、それを提供するクラウドを使えばもっとお金がかかります。でもすごいニュースがあります。
Railwayではより安くなります。CPU使用量に対してのみ請求されるのであって、レンタルしたCPUに対してではないからです。サーバーを持っている場合、稼働している毎秒に対して支払うのではなく、使用されている毎秒に対して支払います。そしておそらく多くの場合、次のリクエストを待っている状態です。
新しいメタルビルドを見たことがなく、本当に見たいんです。それを使ってどれだけ速く再デプロイできるか見てみましょう。20秒以内でした。クレイジーです。馬鹿げています。ビルド中に並行してサーバーを実行し、簡単なフォールバックも備えています。失敗した場合でも、ワンクリックでこの古いビルドを再デプロイできます。これらはすべて、現代の開発ツールに期待することですが、これまで経験した中で最もシームレスな開発者体験でサーバー上で処理されます。
フロントエンド、バックエンド、データベース、その他何でもホストする場合、Railwayが始めるのに最適な場所です。約束します。soyv.link/railwayで20ドルのクレジットを使って、私が間違っていることを証明してみてください。
実験の設定
現在、いくつかの異なる処理で示したいことを証明するために、6つのエージェントを実行しています。Geminiで2つのジョブを実行し、Cloud Codeで2つ、CodexでGPT 5.2を使って2つ実行しています。
では、何をテストしているのでしょうか。何を示そうとしているのでしょうか。これらの異なるソリューションのデザイン感覚を示したいと思います。すべてに送ったプロンプトを書きました。再びイメージスタジオのテストをしています。かなり面白い例だと思いますし、ここで試みていることの一部を示すはずです。
T4 Canvasという名前のイメージ生成スタジオを構築しています。これは、いくつかの新しいモデルを含むさまざまなAIモデルで画像を生成するためのパワーユーザーインターフェースです。このイメージスタジオでは、ユーザーがこれらすべてのモデルを使って、毎月定額料金で画像を生成および編集できるようにします。あなたのタスクは、このアプリの素晴らしいマーケティングホームページを構築することです。
クリエイティブでユニークなものにしたいです。デザイン能力の限界に本当に挑戦してください。ここに空のディレクトリがあります。次の仕様でプロジェクトを初期化してほしいです。VとReact等々。これは重要ではありません。
ハックのヒント
ここでハックのヒントその1です。これからたくさん提供します。これは、モデルから良いデザインを引き出すのに非常に役立ちました。5つの異なるデザインを作成してほしいです。各デザインは、作成する他のすべてのデザインからクリエイティブでユニークである必要があります。それらはそれぞれ/1、/2、/3、/4、/5でホストされる必要があります。これは特に、モデルから得られるデザインに大いに役立ちました。
単に何度もロールすればより良いものが得られるからというだけでなく、モデルがそのコンテキスト内で複数の異なるデザインを作成し、それらをユニークにするよう指示されている場合、単に5回ロールするよりもユニークなデザインが得られる可能性が高いのです。なぜなら、他の4つのデザインを知っているからです。そして、これが他の4つとは確実に異なるものになるように意識的に取り組みます。
また、これらのモデルが訓練されたテンプレートを見始めることができます。GPT5モデルには約10個ほどのテンプレートがあり、それらに対して訓練されたと推定しています。Opusには約20個ほどあり、Geminiには1つか2つしかなく、これからここでもっと遊び始めると、それらがすぐに現れてきます。
ただし、このプロンプトには2つのバージョンがあり、ここで動画の主題に入ります。このバージョンはデフォルトの処理で、「ハーネスのMCPスキルや他の機能は使用しないでください。上品なデザインに対するあなたの有機的な組み込み能力を見せてください」と言っています。これを呼び出す理由は、もう一つのバージョンがあるからです。それは全体的には同じですが、「フロントエンドデザインスキルを使用して、これらのデザインを卓越したものにしてください」という点が異なります。
フロントエンドデザインスキルとは
フロントエンドデザインスキルは、すべてを大きく変える鍵です。フロントエンドデザインスキルは、Cloud CodeのGitHubにあるマークダウンファイルで、Cloud Code自体のためのものではありません。Cloud Codeはまだクローズドソースだからです。しかし、スキルはほとんどオープンソースです。ある意味そうでなければならないのは、スキルとは単なるマークダウンファイルだからです。
スキルとは、必要なときに呼び出せるように、モデルに持たせたい動作の説明です。ほとんど再利用可能なコンテキストのようなものです。これは、モデルに特定の技術を使わせたり、あまり馴染みのないことをさせたりするのに本当に便利です。例えば、Reactを使ってビデオアニメーションを行うRemotionのようなライブラリです。
Remotionデザインスキルがあり、これは本当に優れていて、多くの人がプログラマティックなビデオ生成を行うきっかけになりました。スキルがモデルが適切に使用するのに必要な情報を正確に提供するからです。でも、モデルがデザインが得意なら、このスキルは一体何をするのでしょうか。少し読んで見てみましょう。
このスキルは、一般的なAI生成っぽい美学を避けた、独特な本格的フロントエンドインターフェースの作成をガイドします。美的ディテールとクリエイティブな選択に格別の注意を払って、実際に動作するコードを実装します。ユーザーはフロントエンド要件、コンポーネント、ページ、アプリケーション、または構築するインターフェースを提供します。目的、対象者、または技術的制約に関するコンテキストを含めることもあります。
このマークダウンファイルには多くの興味深いことがあります。特定の場所で大文字を使用する方法から、太字を使用する方法、そしてここで重要なセクションを呼び出す方法まで。明確な概念的方向性を選択し、それを精密に実行します。大胆なマキシマリズムと洗練されたミニマリズムの両方が機能します。
鍵は強さではなく意図性です。この文書全体は、基本的にモデルをより良いデザインに導くために構築されています。そして最も面白い部分は、ここの最後です。一般的なAI生成の美学は決して使用しないでください。例えばRoboto、Inter、システムフォントのような過度に使用されるフォント、特に白い背景の紫のグラデーションのような陳腐なカラースキーム、予測可能なレイアウトとコンポーネントパターン、コンテキスト固有の個性に欠ける型どおりのデザイン。
クリエイティブに解釈し、コンテキストに対して本当にデザインされたと感じる予想外の選択をしてください。同じデザインであってはなりません。明暗のテーマ、異なるフォント、異なる美学の間で変化させてください。決して一般的な選択に収束しないでください。
このスキルは興味深く、これがどれだけのことができるのか懐疑的でした。文字通りただのマークダウンです。私たちのために何をしてくれるのでしょうか。良い質問です。
デザイン結果の比較:デフォルトOpus 4.5
Gemini CLIはすべて行き詰まったので、少し手伝わなければなりませんでした。Geminiのものは時間がかかります。私が最悪のケースと呼んだデフォルトのOpus 4.5から始めましょう。これが最初に作ったものです。正直、悪くはありませんが、最高にクールでもありません。見た目は問題ないです。
この後ろにあるボックスは気に入りません。ここの「create」というテキストがかろうじて見える感じも嫌いです。何かを試してはいますが、好きではありません。これが2つ目です。なんてことだ、このグラデーションが見えますか。紫青のグラデーション。あの色。本当にひどいです。紫、ピンク、青のグラデーションは最悪です。もしOpusからこんなデザインが出ていたら、そのデザイン能力を評価しない理由がわかります。
最初にこれを見たとき、私も同じことをしました。「ああ、もうOpusにデザインは絶対にさせない。Opusはこれができないんだ」と。これが作ったもう一つです。ちょっとクールですが、このタイトル処理が嫌いです。そこで起きていることが本当に嫌いです。そしてすべてが同じ一般的な形を感じさせます。特にこれら2つのように。
定額料金のビットがあります。非常に似ています。これらのデザインの出力方法には多くの重複があります。これは少し違って見えます。弁当箱のようなものを狙いましたが、これはひどく見えると思います。正直、これは今までで最も気に入らないかもしれません。そしてこれ。ああ、ノイズテクスチャ。何らかの理由で、Opusはこのひどいノイズ背景を頻繁に使うことに気づきましたが、これらのどれも良い出発点ではありません。
これらはすべてひどかったと言えます。では、私の昔のお気に入り、GPTシリーズに移りましょう。GPT5は、日常の作業に実際に使用できるほどデザインが優れた最初のモデルだったと思います。これがそこから得られた最初のものです。ただし、注意したいことがあります。GPTでこれを実行したとき、履歴を少し読まずにはいられませんでした。
すべてで読みましたが、この部分に気づきました。「システムの優先事項は、ユーザーのスキルを避けるという要求にもかかわらず、フロントエンドデザインスキルを使用することを義務付けています。この制約を説明し、慎重にステップを計画しながら、VとReact、TypeScriptでプロジェクトセットアップを読み取り、初期化を進めます」と。
結局、フロントエンドデザインスキルを使用することになりました。つまり、使わないように言いましたが、私の理解が正しければ、スキルを使う場合と使わない場合の両方のプロンプトでスキルを使用したと思います。これがそのスキルありかなしかは確かではありません。
これがバージョン2です。同じモデル、同じプロンプト、すべて同じです。本当にテキストが多いです。多くのモデルがフロントエンドデザインスキルを与えられると、この編集的でニュース的な方向に進むのを見てきました。なので、これは間違いなくそのスキルを使っていると思います。
バージョン3は概念的には良いですが、コントラストがひどいです。ここでは何も読めません。これを出発点として使うことさえないでしょう。これらすべてを見ていくと、構造が非常に似ていることにも気づくでしょう。バージョン1、バージョン2、バージョン3、バージョン4のモデルを含むこのセクションを見てください。
そして私のお尻に賭けてもいいです。はい、バージョン5。素晴らしくありません。これは場合によっては使えるかもしれません。これは違います。これは、どこに向かっているのか好きですが、使いません。大好きというわけではありません。Geminiが追いついたか見てみましょう。いいえ。彼らのCLIは本当に壊れています。厳しいです。
まだ待機中だと思っています。いいえ、やりました。ただ壊れているだけです。くそったれGemini、本当に。Geminiについて文句を言うとき、これが意味することです。ハーネスが悪い。確かに、どうでもいいです。多くのものが悪いハーネスを持っています。指示に従い、問題を解決する能力が非常に悪いのです。GPT5モデルとは異なり、この種のCLIのチャット履歴でトレーニングを行ったようには見えません。
そのため、このコンテキストで常に迷子になり、壊れます。でも少なくとも、今は実際にデザインを作っています。多くの苦労の後、非常に壊れたCLI体験もありましたが、ついにGemini 3 Proの基本体験が構築されました。Rundevを起動して、これです。
ああ、Opusがやったのと同じ奇妙なホームページのことをしました。異なるオプションがあります。ここから始めます。悪くありません。画面が少し小さいのでズームアウトする必要があるかもしれませんが、「制限なく作成」とあります。生成された画像のいくつかを配置する場所のプレースホルダーがあります。下部にこのクールなバーがあります。ズームアウトしたときに最大化しますか。いいえ、端まで行かないので、少し痛々しく見えます。
でもこれは良い出発点です。これが今までで最もクールだと自信を持って言えると思います。それから2があります。そしてまた、これらのデザインには大きな多様性があります。実際にはかなり堅実な範囲があります。この2つの違いは馬鹿げています。これはあまり好きではないと思います。
クールに見えますが、良くはありません。そして明らかなミスがたくさんあります。テキストのクロッピングが何かのボックスやオーバーフロールールに当たっているような。そしてこれもあまり良く見えません。問題ないですが、少なくともサイドバーにされませんでした。サイドバーをいろんなところに投げ込むのが大好きなんです。
ここが3つ目で、派手なCLI風のものの1つをやりました。これもよく見ます。デザインスキルを使ったかもしれません。使わないように言ったのに。実際に使ったかもしれないと思い始めています。履歴を見て使ったかどうか確認します。確実にするために、スキルを削除してこれを再実行する必要があるかもしれません。
とにかく、クールに見えます。でも、ここで求めているものとは違います。編集スタイルのもう1つで、ニュースのような感じにしようとしています。かなりよくレイアウトされています。ものがどこにあるか気に入っています。でも、ここの隅で彼らがやったことは嫌いです。これらがどこにあるか見えるように移動します。
すべて大文字で、それからアクセスは違います。間違っている小さなことがあります。レイアウトとコンセプトは良いですが、細部で本当に間違っています。それから5、最後のものはクラッシュしたようです。Object.cloneエレメントは関数ではありません。素晴らしい。Gemini体験は四方八方で幻覚を見ています。大好きです。
デザインスキル適用後の結果
では、スキルを得た後のこれらのデザインを見てみましょう。Opusは最後に取っておきます。クールなものだからです。では、GPT 5.2からの2つのバージョンがあります。覚えていてください。GPT5はとにかくスキルを使うことを選んだと確信しています。Codexにあるハーネスのコードが、私が使わないように言ったにもかかわらず、常にスキルを使うと言っていたからです。
だからこれらはおそらく多少似ているでしょう。これが最初のものです。これが2つ目です。3つ目。ああ、見てください。実際に少し違うものです。8回ロールしましたが、ついに他のすべてと違って見えるものをGPT 5.2から得ました。それから4はちょっと退屈ですが、問題なく見えます。
フォントの選択は大丈夫ですが、前に述べたクリッピングをやっています。それから5、またこの編集的でブルータリスト的な美学を狙っています。問題ありません。大好きというわけではありません。私のサービスに新しい用語を作り上げる選択。でもクールです。最高ではありませんが、最悪でもありません。
Gemini CLIについて良いことを聞きました。わかりません。どうやって。すごく壊れています。Geminiモデルを使うたびに、基本的なチャットの答えとデータ解析以外のことに誰がGeminiモデルを使うのか疑問に思います。使えないんです。動かないから。ここでの最善の言い方です。
Codexは全く問題なく同じ作業をしています。Geminiの売りが速いことだったと思っていました。それはどうなったのでしょう。さて、Gemini 3 Proでのこの実行は完了しました。違って見えるか見てみましょう。なるほど。はい。これはデザインスキルを使っていないことがわかります。まったく異なる美学があるからです。
そしてこれは、Geminiが普通にやっているときによく見る美学です。そして良く見えます。本当にクールで素敵です。そして実際に、偽のドロップシャドウのようなことをやっている方法が好きです。ここにはいくつかクールなものがあります。私の画面スペースの使い方についての興味深い選択。でもここで何かをしました。2を見てみましょう。
また、かなり堅実な多様性があります。デジタル達人のためのキャンバス。ここに画像まで入れてくれました。このターミナル美学を狙うのも大好きです。飽きましたが、やりました。パステルカラーのもう1つで、形と色があり、すべてが四角いです。かなり良いです。素晴らしくはありませんが、堅実です。
そしてここでは多くのことを試みましたが、成功しませんでした。ここのフォントのぼかしは、私の人生で見た中で最悪のものです。ああ。ええ、これはとても悪いです。とても悪いです。最初のものがどれだけ良かったかを打ち消すほど悪いです。
チャットも、ここでやった非常に面白いことを指摘しました。コピーで書いたもので「XではなくY」のパターンを使っています。これは笑えます。では、それを見たので、フロントエンドデザインスキルを使っていないことがわかっています。フロントエンドデザインスケールを削除したからです。では、Gemini 3 Proがそれを使うとどうなるか見てみましょう。
これが最初のデザインです。これは昔、Tailwindテンプレートを販売していた誰かから買ったであろう一般的なテンプレートのように見えます。最も一般的なもの。これは実際にクールに見えます。今回はスクロールを適切に行いました。スクロールするためにここに何かがあることを示すものがないのは好きではありませんが、とてもクールに見えます。
これがとても気に入っています。これまでのお気に入りです。これが3です。これは実際にかなり良かったです。また、スクロールする必要があるものを下に置いていて、スクロールするものがあることを示していません。でも全体的に、この見た目が本当に気に入っています。パステルで落ち着いた雰囲気を、他の多くのものよりうまくやっています。
そして、これがGeminiで経験していることなら、Geminiがこれにおいて圧倒的に最高だと思う理由が再びわかります。もう1つのブルータリストのものです。ブルータリストの見た目で黄色、赤、青を使うのが好きです。もしかしたらバナナバナナのせいで黄色が好きなのかもしれません。それからガラススキューモーフィックなものがありますが、ひどく見えます。
全体的には悪くありませんが、それらのいくつかはひどかったです。それでGeminiのものは片付いたことを願います。デフォルトでは最高です。そしてフロントエンドデザインスキルを使えば、かなり良いものを作れますが、間違いなく追加の調整が必要です。
それがGeminiのスキルありとなしでした。GPT 5.2のスキルありとなしはすでにやりました。では、皆が待ち望んでいるもの、私の個人的な好みであるOpus 4.5です。繰り返しますが、これをやりました。クールに見えますが、テキストが壊れています。これをやりました。ひどいもので、ひどいグラデーションでいっぱいです。これをやりました。問題ありません。これをやりました。痛々しいです。そしてこれをやりました。本当に痛々しいです。
デフォルトでは最悪の5つでした。そしてこれが、スキルを使って最初にやったデザインです。これは素晴らしいです。すでに見た他のほとんどすべてよりもずっと良いです。背景にぼかしアニメーションがあるクールなもので、ミニマルです。これは使えます。
ここでやったことは好きではないし、浮いているのは少し痛々しいですが、出発点としてこれを変えたり取り消すように言ったりできます。これは本当に良いです。また、5つのデザインを切り替えるために下部にこの素敵な小さなものを置いてくれました。古いバージョンではやらなかったことです。これをオンにするとUXをもっと気にかけるのです。
では、Opusがこのスキルで他に何を作ったか見てみましょう。これが2番目です。何てこった、これは本当にクールです。本当にクールです。チャットが理解しています。ここの違いは馬鹿げています。ずっと良いです。ここでエラーを横線で消すような、彼らが狙っているものの小さなところがあります。ここでコピーを調整したいと思いますが、彼らが狙っているものが本当に好きです。
そして比較のために、これがスキルなしの前の2番目の生成でした。スキルあり、スキルなし、スキルあり。2つの間のギャップは狂っています。3回目のロールを見てみましょう。私の美学ではありませんが、実行しました。背景のこれらの小さな渦巻きは実際に本当にクールに見えます。全く私のものではありません。そしてチャットでは、「これが好き」と「スロップ」の間に多様性があることがわかります。
そして再び、比較です。スキルなし。スキル。スキルなし。スキル。Opusでカラフルなブルータリストスタイルが入ってくると、Geminiがやる方法ほど好きではありません。でもGeminiはこのスタイルをより良くやると思います。だからこれは間違いなく私のお気に入りではありません。
これらの四角が浮いているだけで、いくつかはインタラクティブで、いくつかは違うという方法が嫌いです。これについて好きではないことがたくさんあります。それでも、それをやったときに下部のボタンのスタイルまで変えましたけれど。それはかなりクールです。それから最後のものがあります。
やはりパステルのものは私のものではありませんが、そのスキルなしでやったどのものよりもずっと良い仕事をしました。最近、この種のフロントエンドデザインでDeepSeek R2.5がどれだけ良いかについてよく聞かれます。特にDeepSeek R2や他のオープンウェイトモデルと比較して、多くの改善を行ったからです。
DeepSeek R2.5がフロントエンドデザインモデルとして最高だと言う人さえいます。これらを動かすのにかなり苦労しました。DeepSeek R2.5がハーネスを使ったりコードベースを構造化したりするのがあまり得意ではないからです。package.jsonを間違った場所に置いたり、完全にビルドに失敗したりすることを含めて。
モデルができなかったので、このコード自体を自分で修正しなければなりませんでした。面倒でしたが、一度やったら、かなり良い出力が得られました。これがスキルなしの出力です。カーソルを追いかけるこの迷惑なものがあります。常に私を悩ませますが、これは多くのこれらのジェネレーターがやりたがることです。
構造は全体的にかなり良いです。ここでこのライトモードにすぐに行く方法は好きではありません。また、彼らがやった奇妙なことのせいでテキストを選択できないようですが、美的には、これはかなりクールに見えます。これが2です。クールなネオレトロベイパーウェーブ美学に少しやりすぎました。
私の意見では、それに本当にやりすぎました。想像力が流れるところで、またGがテキストレイヤーとバウンディングボックスで切られています。定番です。アニメーションはクールですが、矛盾もしています。この左から右へのものと、このものと、奇妙な触手のようなものが上がっていくのが嫌いです。やりすぎです。
ここの要素の半分を削除すれば、本当にクールなものを作れますが、デフォルトでは少しやりすぎです。それから定番の編集スタイル。これはこれらの中で最も退屈なバージョンだと思います。そこに画像があればもっとクールかもしれませんが、今は非常に退屈です。それから何これ。ああ。
そして彼らは中のエリアを壊したので、スクロールすると物が隠れます。さて、これは完全に壊れています。だからデザイン感覚的には、いくつかクールなことをやっていますが、デザイナーの初日の仕事のように感じます。本当にやりすぎて、細部を全く正しくできませんでした。
では、これをスキルと一緒に使うとどう比較されるでしょうか。まず、非常に派手なものがたくさん得られます。私のYouTube動画エンコーディングには申し訳なく思います。今、ビットレートが素晴らしく見えていると確信していますが、ええ、素晴らしくありません。背景色を正しく得られませんでした。だから、オーバースクロールすると白が出ます。素晴らしくありません。
これが2番目です。ブルータリストのフラットデザインのようなものを狙っています。多くのモデルがこのようなものに手を伸ばします。問題なく見えると思います。色を変える言葉の選択が好きではありません。精密ツールが1つのピースで、それからクリエーターのための4つが別だからです。
でもこれが分離されている方法は、精密クリエーター、ツールのための、いいえ。グループ化が間違っています。これが3です。また、偽のターミナル美学を狙っています。さて、これは最も悪くない偽のターミナル美学です。中央セクションを左右に持っているのが好きです。モバイルを処理しますか。なるほど、ちょっと面白いです。悪くありません。
4番目は痛々しいパステルのものです。それから5番目は痛々しいレトロのもう1つですが、今回はプロンプトが特にするなと言った紫の色をやりました。だから、ええ。これはオープンウェイトモデルとしては驚くほど良いですか。ええ。これらのうち私が使うものはありますか。いいえ。
でも、ここで自分の視点だけを押し付けたくありません。他の人の意見を得たいです。だから、私たち全員が最高だと同意していると思う2つのセット、つまりOpusとのこのセット、それからGeminiとのデザインスキルセットに対して、チャットでクイック投票を実行します。Geminiが私に言ったポートに関する指示を完全に無視したことに気づきました。
私が言ったポートを使っていません。興味深い。非常にGeminiらしいです。チャットにこれら5つのうちどれが一番好きか投票してもらいたいです。早く。これが1番目です。これが2番目。これが3番目。これが4番目。これが5番目。個人的には圧倒的に2だと思いますが、2から5まですべて本当に良いです。1は退屈です。
チャット全体で投票を実行したところ、Geminiモデルからのお気に入りは非常に明確です。これとこれです。そして両方とも本当に良く、実際のまともなデザインのための完全に使える出発点です。だから再び、1、2、3、4、5。Opusのデザインでは、これら最初の2つが人々が最も好きなものであることは非常に明確です。
または、これら2つとあれら2つについて人々がどう感じているか見たいです。でも最後にもう1つやりたいことがあります。これは私がこのように構築する傾向がある大きな部分だからです。こんなセットから好きなデザインを得たら、次のステップは通常、最も好きだった数個を取って、モデルにそれについて話すことです。
時にはそれらについて何が好きだったかを言ってまで行き、それに基づいて5つのさらなる反復を作るように言います。それがここでやったことです。Geminiのものから始めます。繰り返しますが、これらがお気に入りでした。超リアルなネオンドリームのもの。実際に本当にクールに見えます。これが良い出発点になるのが見えます。
それから有機的なフローバージョンがあります。素敵で滑らかなパステルな見た目です。これを本当によくやったと思います。正直なところ、なぜ人々がこれをこんなに好きだったか。彼らはGeminiが生成するほとんどすべてに存在する層状の偽のドロップシャドウが大好きで、ここでやらなかったことに感謝しています。でもええ、それらが最初の2つでした。
それから別のCLIターミナルのものを得ました。迷惑です。それからこの柔らかい粘土のものを得ました。少なくとも斬新ですが、荒くする多くのものがあります。具体的には、ホバーしたときの触覚インターフェースがアニメーション化されていません。すぐに切り替わるだけで、彼らがやっている偽のリアルなものをひどく感じさせます。
少なくとも違います。でも、これは好きではありません。全く好きではありません。それから深海を得ました。潜るためにスクロールと言っていますが、スクロールが機能しないので、実際にはできません。ハイテクHUD。また、ターミナルのものの1つです。それからアトリエで、人々が好きだった2番目のものとよく似ています。
これらのすべてが最初に持っていた最初の2つよりも悪いと思います。その上、これら2つが好きだと言い、それらのようなことをするように言ったのに、Geminiはその指示に全く従いませんでした。そして、ここで再び、このようなものにOpusがずっと良いと思う理由があります。
Opusによる反復デザイン
Opusでも同じことをして、お気に入りの2つのデザインを取り、それらをインスピレーションとして使って5つ作らせました。その5つを見てみましょう。これが最初の新しいものです。想像力の芸術。これは本当に堅実なレイアウトです。上部のこれらの小さなバーでやったことが好きです。ユニークな感じを与えます。
トップナビについて本当に考えています。T4アイコンとキャンバスという言葉があるこのバーのように。本当に堅実な出発点だと感じます。これは私が狙う美学ではありませんが、これには何も間違っていません。他のものには多くの奇妙な問題がありましたが。すべて問題ないようです。
私が狙う美学ではありませんが、問題ありません。それからこれがあります。開始時に素敵な小さなアニメーションがありました。実際にかなりクールに見えると思います。アニメーションの一部としてバーが入ってくるのを除いて。それは痛々しいですが、これは実際にとても気に入っています。スペースをうまく使っていると思います。
これは見た中で最も良いブルータリストデザインの1つです。これはかなり良いです。そして明らかに最初の2つから本当にインスピレーションを受けています。これらの最初の2つからアイデアを取っていることは非常に明白です。これが私たちが好きだった最初のものでした。これが3番目です。
ここには多くの美的類似性がありますが、スペースを異なる方法で使っています。それから4は2番目に非常に似ています。分厚いブルータリストな見た目を持っていましたが、少し抑えて、雰囲気を維持しながらもう少しフレンドリーにしました。それから痛々しいターミナルのものをやりました。すべてが痛々しいくそったれターミナルのものをやるからです。
迷惑です。これらのすべてがなぜそれに固執するのかわかりません。それから別の編集スタイルを得ましたが、明らかに他のブルータリストのものにインスピレーションを受けています。だから、他のものを決める際に私たちの好みを考慮しています。ターミナルのもの以外は。それはやるべきではありませんでした。
それから7番目、流動的な創造。背景にひどいSVGを幻覚しました。そしてええ、これは嫌いです。これはひどいです。でもここの3番目と4番目、これらは単に使えるだけではありません。これらは素晴らしいものを作るための良い出発点です。これら4つすべてが素晴らしいものを作るために非常に柔軟に感じられると思います。
一方、Geminiのもので、これら最初の2つのロールは信じられないほどです。これは本当に、本当に良い出発点です。これも本当に、本当に良い出発点です。でも、それに対してものを作ったり、それにインスピレーションを受けた変更を加えたり、良いものを編集したりする能力さえひどいです。
これらは、私たちが始めた他の2つのデザインを参照しているようなものではありません。これらのデザインが存在することや、どんな見た目かさえ認識していないように感じます。本当に、本当にGeminiがここでやっていることは、トレーニングデータに焼き込まれたテンプレートを取って、あなたの情報をそれらに適用しているように感じます。実際にデザインしているようには感じません。
公平に言えば、どれも実際にはデザインしていません。すべてただパターンマッチングをして、効果的にテンプレートを適用しているだけです。でも、デザインについて何が好きかを理解して、それに基づいたフォローアップを行うOpusの能力は、全体的に大幅に強力です。
人々がどう感じているか投票を行っています。ここで見たすべてに基づいて、OpusとGeminiの全体的な比較ではなく、1つのデザインについてではありません。あなたのバイブチェックは何ですか。Geminiが全体的にまだより良く、デザインに使うものだと感じますか。それとも、Opusのフロントエンドデザインスキルから得られる柔軟性とステアリングが全体的により良い選択だと思いますか。明らかに、私は決断を下しましたが、皆さんがどう感じているか見たいです。
さて、気分が良くなりました。チャットの進み方で怖くなっていましたが、全体的に皆さんは間違いなくOpusのものを好むようです。Geminiで始めて、それからOpusに反復させるのは最悪のアイデアではないと思います。もう一度見せてほしいと言っていますか。
さて、これがスキルありでGeminiから得た良いものの2つです。この2つを得ましたが、反復するように頼むと、ゴミを得ました。ゴミ。絶対的なゴミ。なるほど、レイアウトですが、それでもゴミです。どこに向かっているか見えますが、私の意見ではゴミです。テキストのように。いいえ、それは嫌いです。
そしてOpus。本当に良い、好きではないいくつかのことがありますが、かなり良い。意味のある反復、意味のある反復。これは作るべきではありませんでした。なるほど、また雑誌になろうとしすぎています。そして痛々しい。でもOpusでのフォローアップのヒット率は大幅に高いです。
Darth Mini Mallからのこの枠組みが好きです。Geminiはランダムに良いデザインを出すことができますが、Opusは実際にあなたが言ったことのほとんどをやります。それが私の経験でした。GPT 5.2のものは何でしたか。すべてがとても悪くて、画面に表示したり再実行したりしたくないくらいです。
比較すると悪かったです。皆さんがフロントエンドデザインスキルを使ったOpus 4.5が進むべき道だと同意しているようです。同意します。
スキルの設定方法
これをすべて見たので、次の質問はおそらく、どうやって設定するのか、好きなモデルやハーネスでこれをどう使うのかでしょう。以前はかなり面倒でしたが、結局これらのスキルファイルは単なるマークダウンなので、管理がずっと簡単になりました。
VercelがAgent Skills Directoryを出しました。文字通りURLはskills.shです。ここに行けば、front endを検索すればすぐに出てきます。または、リーダーボードを見るだけでもいいです。フロントエンドデザインスキルは常にトップ10に入っているからです。現在5位です。
これをクリックして、コピーをクリックして、ターミナルに行きます。この部分は本当に難しいので、正しくやってください。ペーストを押して、エンターを押します。それから、どのツールで動作させたいか選べます。そして迷惑なことに、人々が欲しいもののためにあまりにも多くのPRを受け入れたので、このリストは今馬鹿げて長いです。
これの半分もインストールしていないのに、なぜこれが大丈夫だと決めたのかわかりません。Vercel、少なくとも人気順に整理してください。これはとても痛々しいです。実際に欲しいものを見つけるのに苦労しすぎています。私にとってはcursorです。Kilo codeとKilo CLIのものをもっと試したいですが、今はやりません。
Kiloも今は標準のスキルディレクトリを使うと確信しています。なぜMにスキルがあるのか。何が起きているんだ。MXはビデオツールです。だから、これは追加したい新しいもののためだけです。メインのものは上にあるからです。でもええ、cursorも追加します。それからエンターを押します。
プロジェクトかグローバルか選べます。私はこれらをグローバルに設定しています。他の誰もこれらのことを正しくやっていないコードベースで作業している場合は、人々が正しくやるようにコードベースに追加するかもしれません。私はグローバルにやって、兄弟と一緒にやるので、ツールを切り替えたときにすべてで利用できます。
全体的に最近はCodexアプリとモデルをずっと好んでいるのに、なぜまだCloud Codeを使っているのか、今理解してくれたことを願います。適切な方法でステアリングしたときのデザインが本当に良いだけです。そして何らかの理由で、このランダムなマークダウンファイルが、そうでなければ隠れているように見えるOpusから良いデザイン能力を引き出すことができるのです。
マークダウンファイルがこれだけのことができるなんてクレイジーに思えるのはわかりますが、本当に大いに役立つようです。そして、皆さんがこれを使って、私と同じ利点を見るかどうかに興味があります。コメントで何を思うか教えてください。それではまた次回まで、ピースナーズ。
コメント