本動画は、OpenAIのGPT-5.4モデルがフロントエンド開発において著しく劣っているという事実を、実例とベンチマークを通じて検証するものである。特にUIデザインにおいて他社モデル(Claude OpusやGemini)に大きく後れを取っており、OpenAIが公開した「デザインスキル」に関する記事は実質的に機能しないことが明らかにされる。カード要素の過剰使用、限定的なテンプレートバリエーション、デザインの画一性といった構造的問題が指摘され、その背景には訓練データの質と更新頻度の差があると推測される。
OpenAIモデルへの信頼と失望
皆さんもご存知の通り、私はOpenAIのモデルが本当に好きなんです。特にコーディングにおいてはそうですね。私が構築するほぼすべてのものにGPT-5.4を使っています。90%の時間、このモデルを使っているんです。ShuからLawn、T3 Codeまで、私が構築してきたあらゆるものに使用してきました。Codeexは、これらすべてにわたって私が解決してきた最も難しい問題を支えてくれました。ただし一つだけ例外があります。
何がその例外かというヒントを差し上げましょう。皆さんはそれをこれらすべてで見たはずです。なぜなら、今皆さんが見ているものすべては、CodeexやGPT-5.4によって作られたものではないからです。OpenAIのモデルはフロントエンドにおいて本当に、本当にひどいんです。
でもそれはこの動画のタイトルではありません。この動画のタイトルは「OpenAIは間違っている」とか「OpenAIはあなたに嘘をついている」みたいなものです。ABテストをしているんです。申し訳ありません、事前にお詫びしておきます。
OpenAIの主張と現実のギャップ
では、私は何について話しているのでしょうか。それはこれとこれとこれについてです。お願いですから、こんなことしないでください。もしあなたが必要な思考と意図性を注ぎ込めば、実際に5.4からかなり素晴らしいフロントエンドを得ることができます。こちらでベストプラクティスをチェックしてみてください。
ああ、もう。はっきり言います。これは嘘です。GPT-5.4から良いフロントエンドを得ることはできません。この恥ずかしい記事、このばかげた主張を検証していきたいと思います。OpenAIは明らかに、私たちがGPTモデルで良いフロントエンドを作れないのはスキルの問題だという立場を取っているようです。これはガスライティングです。愚かです。不快です。
先に進む前に2つほど。まず第一に、これは間違いなく著者の責任ではありません。もし皆さんの誰かがこの記事についてSherwinに文句を言ったら、私は非常に怒りますからね。2つ目の素早い話題は、実は素晴らしいものです。今日のスポンサーです。
AIはかなり賢いですが、ブラウザを与えるとさらに賢くなります。いつも言っていることですが、皆さんはもうご存知ですよね。でも、エージェントにブラウザへのアクセスを与えると問題が発生し始めます。その中で最も大きな問題は認証です。今日のスポンサーはKernelで、彼らはこれを解決したと思います。
彼らは新しいマネージド認証プラットフォームを持っており、これを使うとプログラム的に実際のウェブサイトにサインインできます。これ以上簡単にはできません。まず、認証接続を作成します。そしてそれは文字通り4行のコードです。それが起こると、ユーザーがアクセスして任意のウェブサイトの認証情報でサインインできるURLが生成されます。
一度サインインすれば、それは彼らのマネージド認証プラットフォーム上に永続化されたプロファイルになります。ですから今後は、そのプロファイルの正しい識別子を使用する限り、任意のブラウザセッションでサインインでき、今後すべてのウェブサイトに対して実際のサインインフローを処理してくれます。
そうです。一度サインインすれば、永遠に機能するんです。いや、そんなはずはない。私は二要素認証を使っています。私もです。1Passwordを通じて使っています。そして誰が1Passwordとの統合を持っているか分かりますか。本当に、これはとてもクールです。ほんの数時間前に発見したばかりで、遊んでみるのがとても楽しみです。soyv.link/kernelで自分でチェックしてみてください。
検証の流れ
大まかな順序を説明しましょう。まず彼らの推奨事項を見ていきます。次に、他のモデルがこれに対してどれだけ優れているかを見ます。そして最後に、なぜこれらのモデルがフロントエンドにおいてこれほどひどいのかについて、皆さんと一緒に理論化し推測します。
「GPT-5.4で楽しいフロントエンドをデザインする:5.4を洗練された本番対応のフロントエンドデザインに導くための4つの実践的テクニック」。ちょっと待ってください。申し訳ない、気分が悪くなりました。ああ、こんなクリンジなものを読むのは久しぶりです。GraphQLの時代に戻ったような気分です。
皆さんに頭の中でイメージしてほしいんです。まだスクロールしませんよ。彼らはこれを、本番対応の素晴らしいフロントエンドだと考えている例で開始しています。もし彼らがこの記事を書いたなら、皆さんが想像するのは、おそらく疑いの余地を与えて、この最初の例は少なくともまともに見えるだろうということですよね。
皆さんの頭の中で、これがどう見えると期待するかアイデアを浮かべてください。覚えておいてください、私はLawnをOpusとGemini 3.1の組み合わせでデザインしました。Shuはほぼ完全にOpusでデザインしました。そしてT3 CodeのホームページはOpusのワンショットでした。
AIを使った良いデザインがどのようなものかというアイデアが頭の中にあるところで、最初の例を見る準備はできていますか。えー、でも2番目のものを待ってください。究極のスロップです。
冗談ですか。すべてがカードで、テキストはカードに収まってさえいません。切り取られているんです。そして彼らはこれを例として使っているんです。冗談ですか。本気ですか。
内部での認識と信頼の崩壊
透明性を期します。私はすでにこれに関与している人々とプライベートで会話しました。彼らはこれが二度と起こらないことに同意しています。でも、これを指摘する機会として利用したいと思います。なぜならこれはクソみたいなことで、人々がAIを信頼しない大きな理由の一部だからです。
OpenAI、Google、Anthropicなどの企業が、彼らがやったクールなことについてこのような投稿をして、推奨するものが完全なゴミで、どんな開発者でも見抜けるようなものだと、信頼があっという間に侵食されるんです。
私がこれを知ったのは、人々が私にDMを送ってきて、5.4が良いフロントエンドをやっていないと言ってきたからです。彼らはAIがそれをできるとは思っていませんでした。そして私は「そうだよ、5.4はフロントエンドがひどい。別のモデルを使いなさい」と言いました。すると彼らは「いや、本当に良いって書いてあった。この『delightful frontends』の記事を見て」と言いました。そうやって私はこれについて知り、死にたくなりました。
とにかく、スクリーンショットを焼くだけでなく、実際に読んでみましょう。
記事の主張を検証する
「5.4は前任者よりも優れたウェブ開発者で、より視覚的に魅力的で野心的なフロントエンドを生成します。特に、改善されたUI機能と画像の使用に焦点を当てて5.4をトレーニングしました」。
UIに画像を入れるのは少し良くなっているようですが、残りはそうではありません。そして私たちの友人Familyが指摘したように、Kimmy K2.5はこれよりもUIがはるかに優れています。ZedのMichaelaからの良い指摘です。
実際、私はバイブコーディングされたアプリのホバー状態を特にチェックします。なぜならUIはしばしばそれらを持っているべきように見えるのに、モデルがそれを忘れてしまい、開発者がチェックしなかったことが明らかになるからです。それは良い指摘です。私も同じように見始めます。
記事に戻りましょう。「適切なガイダンスがあれば、モデルは微妙なタッチ、よく練られたインタラクション、美しい画像を組み込んだ本番対応のフロントエンドを生成できます」。微妙なタッチ、よく練られたインタラクション、美しい画像。すべてここに表示されています。とても美しいですね。
とにかく、「プロンプトが不十分に指定されている場合、モデルはしばしばトレーニングデータからの高頻度パターンに戻ります。これらのいくつかは実証済みの慣例ですが、多くは単に過剰に表現された習慣であり、避けたいものです」。
「結果は通常、もっともらしく機能的ですが、一般的な構造、弱い視覚的階層、そして私たちが頭の中で視覚化するものに及ばないデザインの選択に向かって漂流する可能性があります」。
画像使用に関する推奨
彼らが持っている最初の例は画像についてです。「アップロードされた画像や事前生成された画像の使用をデフォルトとします。そうでない場合は、画像生成ツールを使用して視覚的に素晴らしい画像アーティファクトを作成します。ユーザーが明示的に要求しない限り、ウェブ画像を参照したりリンクしたりしないでください」。
ページ内の画像の使用は、ある程度、ページ自体に取り組む際に私たち自身が決定すべきことだと感じます。モデルに画像を作って入れさせたことは一度もありません。実際、一度試してみましたが、本当にクリンジでした。ですから、個人的にはお勧めしませんが、クールではあります。画像を使うことはできます。
彼らはこの長いプロンプトを書いて、モデルがすべきでないことをやらないようにしようとしました。そしてこれは非常に見覚えがあります。「これらのハードルールを使用してください」。
ハードルールの検証
1つ、コンポジション。最初のビューポートは、ダッシュボードでない限り、ダッシュボードとしてではなく、1つのコンポジションとして読まれなければなりません。ブランド第一。ブランド化されたページでは、ブランドまたは製品名はヒーローレベルのシグナルでなければならず、単なるナビゲーションテキストやアイブロウではありません。どの見出しもブランドを圧倒してはいけません。
ブランドテスト。ナビゲーションを削除した後、最初のビューポートが別のブランドに属する可能性がある場合、ブランディングが弱すぎます。タイポグラフィ。表現力豊かで目的のあるフォントを使用し、InterやRoboto、Arial、systemのようなデフォルトスタックを避けてください。
ここでFamilyからの良い指摘があります。「ストアブランドのClaude frontend MD」。正解です。皆さんがご存知でなければ、Claude Codeや他のもののためのスキルがあります。これを私は頻繁に使用しています。これがなければ、Opusはデザインがあまり得意ではない傾向がありますが、これがあると驚くほど良くて一貫性があります。
全体として、これは文字通りただのMarkdownファイルで、スキルをトリガーするとプロンプトに注入されます。そしていくつかの共通点に気づくでしょう。ブランドという単語はまったく出てきません。それはクールです。でもタイポグラフィは出てきます。
「美しく、ユニークで、興味深いフォントを選択してください。ArialやInterのような一般的なフォントを避けてください。代わりに、フロントエンドの美学を高める特徴的な選択を選んでください」。予期しない、個性的なフォントの選択。特徴的なディスプレイフォントと洗練されたボディフォントをペアにします。
これはAnthropicのものの私のお気に入りの部分の1つです。「一般的なAI生成の美学を決して使用しないでください。InterやRoboto、Arial、systemフォントのような使い古されたフォントファミリー、白い背景に紫のグラデーションのような陳腐なカラースキーム、予測可能なレイアウトとコンポーネントパターン、文脈特有の個性を欠いたクッキーカッターのデザインを避けてください」。
彼らはクリンジな紫のものが起こるのにうんざりしていたんですね。ここに別の面白いものがあります。「雑然さを減らす。ピルクラスター、統計ストリップ、アイコン行、ボックス化されたプロモ、スケジュールスニペット、複数の競合するテキストブロックを避けてください」。
これらすべては、それがUIを生成したOpenAIモデルであることを知るための私のシグネチャーです。何もしない15個のピルのようなものは非常に一般的です。そして不要な奇妙な統計バーも。ええ。
例外。既存のウェブサイトやデザインシステム内で作業している場合は、確立されたパターン、構造、視覚言語を保持します。ああ、それから彼らはこれらのツールを実際に使用してより良くデザインする方法についてまともなフィードバックを与えています。ありがたいことに、このアドバイスはフロントエンドがより優れたモデルに適用されます。
デザイン原則とビジュアルリファレンス
最初のポイントはデザイン原則から始めることです。メインタイトル用の1つのH1見出し、6つ以下のセクション、最大2つの書体、1つのアクセントカラー、フォールドの上に1つの主要なコールトゥアクションのような制約を定義すべきです。それはすべて妥当に思えます。
ビジュアルリファレンスを提供します。参照スクリーンショットやムードボードは、モデルがレイアウトリズム、タイポグラフィスケール、スペーシングシステム、画像処理を推測するのに役立ちます。
これは、ユーザーがレビューするための独自のムードボードを生成する例でした。これのどれが私のフロントエンドに役立つのか分かりませんが、確かに。「NYCコーヒーカルチャーとY2K美学にインスパイアされました」。
私は死にそうです、皆さん。私は自分がやっている仕事に対して十分な報酬をもらっていることは知っていますが、これに対しては十分だとは思えません。
「ページを物語として構造化します」。Mダッシュの密度。これは2010年からヒップスターを輸入して、モデルに良いデザインをするよう頼んだようなものです。これは私を傷つけます。
ああ、ここに私が知らなかった面白いことがあります。「実際には、低および中程度の推論レベルがしばしばより強力なフロントエンド結果につながります」。ああ、もう無理です。これを有用にするために知る必要があるランダムで難解なことの量はばかげています。
選択肢の提示
選択肢があります。これらすべてを学ぶことができます。これらの詳細をすべて暗記できます。このモデルにほぼ使えるフロントエンドを吐き出させるために一生懸命働くことができます。
または、彼らがここで話していることの半分程度を取得するフロントエンドスキルを使用することができます。それはクールです。Codeexアプリを通じてスキルインストーラーを使用してフロントエンドスキルをインストールできます。でもそれはしないでください。
もしこれをインストールしたいなら、Skills.shを使ってください。そうすれば異なるツール間で機能します。Skills.shは素晴らしいです。私はそれを頻繁に使っています。そして、ここのトップスキルの1つが先ほど言及したものであることに気づくでしょう。非常に良いスキルです。
他モデルとの比較
では、他のモデルとそのフロントエンド能力を見て、比較して正直な結論に達し、そしてその後、最も重要な部分として、そもそもどうやってここに至ったのかを推測したいと思います。
Draがこれを作ってくれたことに感謝します。彼は本当にクールなコミュニティメンバーです。彼はAmazonでのインターンシップを始めようとしています。また、YouTubeチャンネルも持っていて、興味があれば説明欄にリンクされます。
彼は、異なるモデルがフロントエンドのものにどれだけ良くて悪いかについての私の動画に触発されて、このベンチマークを作りました。私がやろうとしていたことの本当にクールな応用で、私たちが見に行ける具体的なものに固められており、本当に有用です。
彼は各モデルに対して2回の実行を行い、それぞれ5つの生成を行いました。1セットは特にAnthropicのデザインスキルを使用し、もう1セットは使用していません。フロントエンドデザインスキルなしの5.4から始めましょう。
なぜホームページにカードがあるんですか。これは私が人生で見た中で最悪のランディングページの1つです。では、2番目のデザインです。ああ、はは。最初のデザインに非常に似ていますが、より暗く、正直なところやや悪いです。
ランディングセクションのホームページにカード。これは悪い医療製品か、クソみたいなネズミ講のUIのようです。ああ、見て、もっとカード。これらのどれもカードを持っていない—ああ、これはさらに悪いです。OpenAI、何をやっているんですか。
これがさらに悪いかどうか見てみましょう。四角いカードですが、カードです。次にKimmy K2.5を見てみましょう。覚えておいてください、これはほぼ10分の1の価格のオープンウェイトモデルです。
Kimmy K2.5の評価
1つ目。これはクールです。非常にミニマルです。彼らがここでやったこの下部バーはあまり好きではありませんが、悪くはありません。これは使える出発点です。少しのタッチアップと、おそらく1つか2つ追加されたもの、多分アクセントカラーがあれば、これは本当に良くなる可能性があります。素敵なミニマルなスタートです。
デザイン2です。すべて1ページに収まっています。まだ下部にこのステータスバーのようなことをやっていますが、まともです。これはTailwindテンプレートのように感じます。問題なかったです。ここのグローが好きです。グローは実際にある程度上品に行われており、多くのモデルが上品にやらないことです。
左上にクリンジなピルがありますね。「AI駆動のインサイトで」というもので、何も提供しません。ただそれらのものを削除してください。私は新しいUIを作るたびに、すべてのピルを削り取るだけです。そして、その結果としてレイアウトがシフトした場合は、それを修正するように指示するだけです。
次、これはちょっとクールです。ここにはこのようなクリンジなカードがまだありますが、ホバーしたときの小さなアニメーションが好きです。ここの小さなドットが、「無料で作成を開始」に注意を引くコールトゥアクションになっています。それは素敵なタッチです。下部に小さな引用を置いています。後ろの小さなフェードしたドットが、少しの力強さと存在感を与えています。これは良いです。
これがオープンウェイトモデルであることを思い出してください。オープンウェイトモデルがどうやってOpenAIを完全に料理しているんですか。
さて、これはきれいです。カードを使っていますが、グラデーションが本当に好きです。通常は紫のグラデーションが嫌いです。これは悪くありません。さて、他のみんなはそれを嫌っています。分かりました。みんなそれを嫌っています。私は上品なグラデーションを使ったガラス風のレイアウトに弱いんです。
これは大丈夫です。これも半分のモデルがステアリングなしで行う紫青のグラデーションに傾いています。スクロールするといくつかバグがあります。このバーはスクロールするときにバックドロップが表示されるべきで、そうすればそこでこんなにひどくコントラストが悪くなりません。でも良いです。これは本当にしっかりしています。
これがデザインスキルなしのオープンウェイトモデルであることを再度思い出してください。OpusとGeminiも簡単に見てみましょう。ただし、Composer 2も急いで見たいと思います。なぜならComposerは興味深いと思うからです。皆さんは何をベースにしているか知っていますが、この時点では確信が持てません。
Composerの評価
Kimmyだと知らなかった人のために。これはKimmyのものの1つとほぼ同じに見えます。これは上部に何かが欠けているように見えます。「決して埋まらない紙の上のあなたの心」。実際、なかなかまともなコピーです。Kimmyはコピーが得意なので、これらの部分は他の多くのモデルよりも良くなります。
ページをライトのようにするアイデアが好きです。これは実際にページのクールなアイデアです。好きです。黄色のブルータリストレイアウト。多くのモデルが今これをデフォルトとしています。つまり、Shuはこれにかなり打たれました。
そして、横に箇条書きの山があるもう1つのグラディエントフェードしたもの。これは問題ありません。悪くありません。そして今、Opusに移りましょう。まだデザインスキルなしです。Opusはデザインスキルなしだということを覚えておいてください。
Opusの評価
「あなたの思考を記憶してください。美しくつながっています」。これは非常にTailwindテンプレートのUIです。色を過度に使用しなかったのが好きです。そしてこれはデザインスキルなしです。だから彼らは「ねえ、クソみたいな色でスパムしないで」と言う必要がありませんでした。ただこのように出てきて、ちょうどいいです。
デザイン2、同じことです。これはTailwindテンプレートのように見えます。紫と青が多すぎます。彼らがデザインスキルでそれについてヒントを出したのはほとんど理にかなっています。
これが好きです。これはOpusの、このような特定のパステル調の外観と斜体テキスト、丸い角のボタンがあるこの特定のカードのようなテンプレートに深く入り込んでいます。ただし、アニメーションがないので、本当に本当に味気ないです。
また、これがここにある必要はありません。実際にこれは本当に好きです。特に彼らがこれを作った場合、そうだと思いますが。彼らが作ったクールな小さなHTMLベースのアイコンのようなものです。
不要なカードが基本的にステータスバーを形成しています。なぜこれらにはホバー処理があって、最後のものにはなかったんですか。何なんだ。これらのどれもこんなに積極的なホバー処理を必要としません。
そしてもっとクリンジな紫。このレイアウトのKimmyバージョンの方が、これよりもずっと好きでした。特にOpusのクリンジな小さなピルがここにまったく属していないのを見ると。このピルこそが、あなたが見ているものがバイブコーディングされたスロップだと知る鍵です。
そして今、Geminiの時間です。ここに素敵なミニマルなスタートです。次に、ちょっとブルータリストなターミナルレイアウト。好きではありませんが、ここでは嫌いでもありません。
Geminiの評価
これはGeminiが常に手を伸ばすUIの1つです。本当に明るいパステル隣接色と本当に丸いエッジ、傾いたアイテムを持つこの特定の遊び心のある外観。それはかわいいです。素敵な小さなタッチ。
これはデザインをリファクタリングしようとしているときに5回目に出てくるまでは、本当にクールに見えます。ここでの私の懸念は、この特定のテンプレートが非常に特徴的で、Geminiによって手を伸ばされるとすぐに分かってしまうことです。
だから、それは素敵でかわいいですか。ええ、絶対に。それは結果としてやり過ぎに使われるものですか。ええ、絶対に。これもまた非常にTailwindテンプレートっぽく感じます。そしてこれは昔のLinearのホームページのリップオフのように感じます。
みんながLinearをコピーしていた頃を覚えていますか、良き日々でしたね。さて、実際にこれは何に見えるか分かりますか。ええ、Lを受け取ります。
すべてのそれらと比較して、GPTから得られた絶対的なゴミと、ほぼすべてに同じレイアウト。私が皆さんに気づいてほしい最大のことは、他のモデルからどれだけ優れたバリエーションを得たかです。
5.4からのデフォルトはすべて同じに見えます。まったく同じレイアウト、異なる色、同じようにピルとコールアウトが至る所にあり、それらのどれもまともな出発点にさえなっていません。
デザインスキルを使った場合
デザインスキルを与えるとどうなるでしょうか。明確にしておきたいのですが、私たちはOpenAIが提供したデザインスキルを与えているわけではありません。Opusのもの、Anthropicによって構築されたものを与えています。
とは言え、私は彼らのデザインスキルで遊んでみましたが、GPTモデルを使用する場合でも、Anthropicのものよりもわずかに悪いです。
デザインスキルを使用している5.4の例を見ていきましょう。それから他のものを見ます。これはすでに大幅に良くなっています。分かるように、5.4は誘導されないと使えるものに近づけません。
とは言え、これらのカードが浮いているのはちょっとクリンジで、レイアウトはひどいです。コマンドマイナスでもっと良くなるか。なりません。ただそのままです。クール。
次に、エディトリアルスタイルを手に入れました。それでもたくさんのクリンジなカードがあります。何をやっても、至る所にカードがあるだけです。見てください。これらはただ同じものですが、異なる色です。OpenAI。
4つありますね。「静かな庭」バージョン。それでももっとクソみたいなカードです。そしてここに、さらにクソみたいなカードです。少なくともここのテンプレートはクールで、フォントは実際に本当にクールで、このレイアウトによく合っています。これは有望なスタートです。
ちくしょう。Draからの簡単なフィーチャーです。なぜなら、このようなことをやっているYouTuberがもっと必要だからです。私だけで疲れました。誰か他の人が現れて、これに参加してくれるのは本当にワクワクします。これが私たちが見たデザインについての彼の考えです。
3回目の反復。これは典型的なGPT-5.4の病気です。これを見てください。これを見てください。1つのカード、別のカード、別のカード、そしてカード内のカード。ページ全体がカードです。なぜこんなにたくさんのカードがあるんですか。そうですね。
カード症候群の克服
お願いだから、ドロップする次のモデルGPT-5.5はカード症候群から抜け出さなければなりません。疲れました。すべてがカードになっているのに疲れました。
さて、私たちは5.4の合格についての結論を得たと思います。カード病は本物です。とは言え、OpenAIが何を料理したかを見て、カードの疫病をさらに見つけることができるかどうか確認したいと思います。
彼らが投稿した最初のものはこちらです。このものではカードを消し去ったようです。2番目がどうか見てみましょう。この2つのページは同じです。なぜこれらを隣同士に置いたんですか。
これらはまったく同じものですが、異なる写真です。また、この写真は悪いと思います。なぜなら、望まないところに空のスペースが多すぎて、望むところに空のスペースがないからです。
植物がこんなに低くて、上が空っぽだと、このコントラストがゴミになります。ただ悪く見えます。さて、伝統的なカードはありませんが、カードのように画像の角を丸めました。そして、1、2、3のステータスバーと、上に何も追加していないサブテキストがあるこの特定のレイアウトを作りました。
「私たちのアプローチ」。何。なぜそれがそこにあるんですか。そして、これがどうやって2番目の例なんですか。何だこれは。彼らはプロンプトに「アイブロウタイトルなし」を含めていたのに、それでもこれらすべてでやっています。
ああ、これは実際のサイトではもっと良く見えるに違いないですが、複数層のビデオ圧縮後、ゴミです。さて、それはクールでした。まさにこれについて話しています。それは上品です。素敵です。好きです。残りは嫌いですが、これは好きです。
彼らがこれらのコンセプトのそれぞれに対して15以上の生成を行ったことは分かっています。そして私たちは最高のものだけを見ているんです。ああ、多分私たちは最高のものだけを見ているわけではないかもしれません。何だこのクソは。冗談ですか。
ビデオ品質の問題
そして彼らはそのためにまともな品質のファイルをエンコードしてアップロードすることさえできなかった。それは私のビデオだけではありません。スクロールしたときのすべてのちらつきは、彼らのデモビデオにあるもので、私のものではありません。私はビデオを適切にエンコードします。
このGHバイブ、プレミアム、遊び心、決して貴重ではない。そして、皆さんがすでに見たゲーム、それらすべて、100%がカードでいっぱいです。すべてのゲーム例、側面とトップナビにカード、トップにカード。
見てください、すべてが—どうやって彼らはこれを良い例として入れたんですか。冗談ですか。何だこれは。あの角を見てください。最後のレイアウトシフトを見ましたか。彼らはそれを打った。彼らはそれをクリップしようとしました。
いや、実際には最初です。なぜならペナルティはOmen’s oneで、それからこの小さなボックスがより大きなものがあるとUIを伸ばし、それも高くします。ゲームが真ん中で動きます。
どうやってこれが最初のクソみたいな例なんですか、OpenAI。何を言っているんですか。私の言葉ではなく、彼らの言葉です。本番対応のフロントエンド。
この記事を削除すべきだと言いたいところですが、そうすると誰もそれがこんなに悪かったと信じてくれなくなります。ビデオに残せて本当にありがたいです。何だこれは。
ああ、そしてダッシュボードセクション。ああ。この悪い子にどれだけのカードを詰め込めるか見てみましょう。ミームを作ることは悲しみの段階の中にあると確信しています。チャートのどこにあるか分かりませんが、私は間違いなく今その時点にいます。
たくさんのカード。たくさんのカード。「カードレスレイアウトをデフォルトにする」。彼らはスキルでそれを指定していますが、それは聞きません。何のスロップが起こっているんですか。
反応の正当性
そして、私がここで過剰反応しているように思えることは分かりますが、皆さんはこれを理解する必要があります。これは人々が新しいモデルを試す最初のことの1つです。彼らは5.4を試して、何かを構築するように頼み、そしてそれを見て「これはひどい」と言います。
そして彼らは、UIの下の部分が実際にはまともであるという事実を評価しません。CSSが関係しない限り、より難しい問題を解決できます。そしてこれは本当にひどいです。
信じられないのは、GPT-5が巨大なUIの質の飛躍だったからです。以前のどれよりもはるかに優れていて、それ以来横ばいになっているように誓います。多分わずかに悪くなっているかもしれません。おそらく私たちの期待が上がっただけです。ほぼ確実にそうです。でもちくしょう、これは本当にひどいです。
ああ、このカード、このスキルは本当に長いです。ああ、さらにあります。「デフォルトでカードなし。デフォルトでヒーローカードなし。ボックスまたは中央列ヒーローなし。簡潔な呼びかけのためのフルブリード」。
ただこれらに従わなかっただけです。カードという単語は彼らのスキルに13回出現しますが、それでもやります。それでもやるんです。この時点で私はクラッシュアウトしています。
ここの矢印に気づきました。開閉するとき動きません。下を向いてから横を向くはずです。実際のOpenAIサイトでさえもGPT-5でバイブコーディングされています。
ああ、気が狂いそうです。さて、思い出してください、これはOpenAI GPTデザインの最高峰です。常にカードスロップです。だから、実際にUIがまともなモデルにデザインスキルがどのように利益をもたらすかを見てみましょう。
そして、これがどのように起こったかを推測し、皆さんがUIを使って良いフロントエンドを作るのを助けるために時間を取りたいと思います。本当に、本当に高価なものから始めましょう。
他モデルとの詳細比較
Kimmy、すぐにこれまで見た中で最高のものの1つ。素敵でミニマル。クリンジでなく邪魔にならない小さなアニメーションを持つカード。まだカードで、まだイライラしますが、それほど悪くありません。
ここにページレイアウトをうまく使う素敵な本当にブルータリストなものがあります。背景とノイズグラデーションがとても好きです。多くのものがそれらのノイズのものを間違えます。このモデルはうまくやっているようです。
角にあるこのグラデーションボックスのようなものは本当にめちゃくちゃにしました。そこで何が起こっているのか分かりません。それからすべてのモデルが大好きなクリンジなレトロなものがあります。それからエディトリアルスタイルがあります。
これらの多くは、最初にトーンセクションを持っているため、モデル間で同じになります。Anthropicスキルには、ブルータルにミニマル、マキシマリストカオス、レトロフューチャリスティック、オーガニックニュートラル、ラグジュアリーリファインド、プレイフル、トイライク、エディトリアルマガジン、ブルータリスト、ロー、アールデコ、ジオメトリック、ソフトパステル、インダストリアル、ユーティリタリアンなどがあります。
レトロフューチャリスティックの削除
レトロフューチャリスティックの部分。分かりますか。私は何かをやります。非常に私らしくないTheoのことをここでやります。PRをファイルします。ここでこれを削除します。なぜならそれは世界にとってネットネガティブだからです。
今、GitHub Copilotが生成した絶対的な地獄のようなコミットメッセージと説明を賞賛する瞬間を取ってください。コミットメッセージはあまり良くありません。これは単に間違っています。私はマキシマリストカオスを削除しませんでした。別のものを削除しました。マキシマリストカオスは残しました。レトロフューチャリスティックを削除しました。
でも彼らの差分チェッカーは壊れているようです。それが同じ間違ったコミットメッセージを再び生成するかどうか見てみましょう。いや。同じ間違ったコミットメッセージを再び生成しました。素晴らしい。
これは私がAnthropicに人生で与える最大の贈り物の1つになるでしょう。もし彼らが実際にこれをマージすれば、これは人々を非常に幸せにするでしょう。私がこの1つのクリンジな推奨を処理したので、これらのものの多くに忍び込む傾向があります。だってああ、これはひどい。
Kimmyからの他のデザインを見てみましょう。「記憶の芸術」を手に入れました。ええ、これはエディトリアルスタイルです。側面で本当にクリンジなグラフィックをやりました。ランダムな図やイメージをHTMLify しようとしても、そこでは良い仕事をしませんでした。
それから私たちはこの非常に大きくて楽しいマキシマリストスタイルを持っています。これらのいくつかを実際のベースとして使用できます。Opusのような有能なものを見てみましょう。
これはターミナルスタイルです。これも削除したいくらいです。かなりひどいです。ええ、そういうものです。Daraも同意してくれて嬉しいです。ターミナルのものはすべてひどいです。
ああ、これはかわいいです。「アイデアが自分自身を記憶する静かな場所」。そしてレトロフューチャリスティックを手に入れました。それから私たちはこれらの落ち着いたものの別のものを手に入れました。これはかなりクールです。
そこの小さなアニメーションが好きです。植物の最終状態は好きではありませんが、ここで何かを試みたことが好きです。そのタイミングが実際に本当に好きです。その種のものは正しくするのが難しく、それを非常に上品にやりました。
物がフェードインするのはクールですが、これらすべてが後でポップインしました。それを見ましたか。それは悪いCSSバグです。そしてOpusからの最後のもの。これはかなりクールです。彼らは常にテキストに対して同じスタックされたアニメーションをやりますが、それが少しイライラします。
ああ、そこでも同じちらつきをやりました。頑張れよ。悪くないです。それらすべてはある程度作業可能ですが、正直言って私にとってOpusとしては期待外れです。はるかに良いものを見てきました。
そして今、キラーのGeminiです。ここで悪いことをやっています。これらが重なるような。それがそれをやる実際のフォントなのか分かりません。嫌いです。フォントのその部分が好きではありません。残りはクールに見えます。
Geminiで気づいた面白いことの1つは、指示に従う方法が、それらをクソみたいに従って本当に味気ないことをやることによってです。これはブルータリストの例です。だから明らかにそれは「ブルータルで妥協のないセカンドブレイン」について話しています。
デザインスタイルの用語がコピーに漏れています。それが最もGoogleっぽいことではないと言ってください。これは素晴らしいです。素敵でエレガントです。カードのちらつきは、これらすべてを保持しているハーネスからの何かかもしれないと思い始めています。
それからクリンジなターミナルのものがあります。なぜならいつもクリンジなターミナルのものがあるからです。コンテンツが表示されるまでに時間がかかりすぎますが、大丈夫に見えます。同じフォントを使っていますが、どういうわけかAは修正されていますが、Lはされていません。何だこれは。
このフォントで何が起こっているのかまったく分かりません。「あなたの脳でも楽しい」。コピーにこれほど手を加えた事実はばかげています。そしてエディトリアルスタイル、問題ありません。
でもええ、これらのようなものは使えます。これらは実際のものを作ることができる出発点です。だから私はGemini 3.1 Proを多くのデザインの出発点として使ってきました。
その署名のいくつかを見ることができます。ここのこのセクションのように、上部の大きなフォント、本当にカードではないカード。それらはブルータリストな傾斜した部分のようで、フォールド上部のものの上にあります。クールなことを強制できます。
推測と対策
そして今、私たちは重要な部分、推測に到達します。これは皆さんがこれらのツールを使ってより良いデザインを作るのにも役立つはずです。昔、多くの開発者がデザインを行った方法、明確にするために開発をするデザイナーではなく、デザインをする開発者です。
非常に多くの開発者が歴史的にデザインを行ってきた方法は、テンプレートを取得することです。テンプレートを取得するクールな場所の1つの例は、Tailwind Plusライブラリです。これらのいくつかを見ることができます。
これがどのように機能するかというと、彼らは有料サブスクリプションまたは一回払いの一部として含まれるテンプレートを提供します。今どちらか覚えていないからです。以前は生涯一回払いでした。
これらのいずれかに行き、気に入ったものを決定します。カラーパレットで遊びたい場合はそれもいじることができます。Tailwindなので、それほど難しくありません。気に入ったら、コードをコピーペーストしてコードベースに入れ、必要に応じて調整できます。
これは歴史的にデザイン作業が行われてきた主な方法の1つです。これはShadcnのために崩れましたが、明確にするために良いことです。私はビジネスとしてのTailwindには悲しいです。なぜならテンプルの販売は彼らの収入の大きな部分だからです。
でもShadcnのようなものは本当にクールです。なぜならそれはコードベースに存在するデザインシステムの一部としてこれらの再利用可能なコンポーネントを提供してくれるからです。だから自分で調整して修正できます。
サイドバーが必要な場合、これはShadcnチームによって作られた非常に強力でカスタマイズ可能なサイドバーで、これをアプリケーションに統合できます。本当にクール、本当に有用。
訓練データの影響
では、それがGPTと何の関係があるのでしょうか。皆さんがおそらく知っているように、モデルは主に人間によって構築されたデータで訓練されています。これらのモデルが訓練されているコードは、以前に存在したコードです。
そして、彼らが訓練されている多くの差分(これは重要な詳細です)は、私たちが歴史的に行ってきたことと似たようなことをやっています。最終的に起こっていることは、彼らは多くのプルリクエストを取得し、その前後のリポジトリの状態を取得します。
彼らはスマートなモデルに、これをプロンプトしているかのように偽のチャット履歴を生成するように伝えます。彼らはそれを検証可能な報酬を使った強化学習に投げます。そして最終的により賢いモデルが出てきます。
これは大雑把な単純化です。ひどく恐ろしい単純化です。次に彼らがしなければならなかったことで明らかになるように。なぜならこの戦略の問題の1つは、PRがファイルされたリポジトリの開始点が必要だということです。
そしてそれはあなたが使っているリポジトリとは異なります。物事が崩れる可能性があります。だから彼らはこれを行うためにあらゆる種類の偽のシナリオを作成しなければなりませんでした。
そして、私の推測では、これらの偽のシナリオ、特にUIのものは、訓練データでファインチューニングされている実質的にテンプレートのセットを使用しているということです。そして私はそれが分かります。なぜなら生成でそれらを見ることができるからです。
これをフレーム化する方法は、これらのモデルをフロントエンドに使用してきた経験、どの人間がすべきよりもはるかに多く使用してきた経験から言うと、GPT-5.3 Codex、5.3と言っているのは、5.4よりも5.3でフロントエンドをはるかに多くやったからです。この時点で私はただ諦めています。
私の推測では、ホームページやレイアウトについて、雰囲気としては約4つのテンプレートがあります。明確にするために、私は彼らがすべて同じコードを使っているような文字通りのテンプレートを言っているわけではありません。
訓練で良く見えるデザインを与えるために使用されたデザインスタイルとシステムを言っていて、それからRLがそのパターンにさらに陥らせただけです。検証可能な報酬を使った強化学習の問題は、検証可能な報酬に依存していて、どのUIが良いかを簡単に検証できないということです。
だから彼らは何が良いかの参照を持たなければなりません。そして私の推測では、GPTシリーズは良いもののための非常に少数の例を持っているということです。そしてそれらの例の1つ以上が、あまりにも多くのクソみたいなカードを持っているため、私たちが見るカオスが起こっています。
それから私はOpus、具体的には4.5と言いますが、正直なところ4.6はここでほぼ同じに感じます。約10のこれらのテンプレートがあると言います。しかし全体的にはるかに優れています。
Opusが手を伸ばす10すべては、GPT-5.3、そして今5.4も持っている4つよりも有意義に良いと感じます。そしてそれは特定のものや特定の方向に向けられるのもより優れています。
そして今、Gemini 3.1があります。これははるかに多くあると言います。約15のテンプレートのようなものがあります。それらの問題は、いくつかははるかに悪いということです。いくつかは有意義に良いです。そしてステアリングが苦手です。そしてそれが最大のことです。
モックフロントエンドを作っているとき、またはランディングページを作っていて「これを良く見えるようにして」と言うとき。Geminiはより多様性がありますが、多様性の一部はゴミです。
Opusはより少ない多様性がありますが、例のほとんどは本当に良いです。そしてGPTモデルははるかに少ない例を持っていて、それらすべてはゴミです。彼ら自身の記事でさえこれを見ることができます。
左にタイトル付きのテキスト、その後ろに画像、そしてあまり多くの情報はありません。左に画像の後ろにテキスト、そしてあまり多くの情報はありません。左に画像の後ろにテキスト。アイデアを理解してください。
彼らのホームページのすべての例はまったく同じ構造です。ええ。ああ、それらすべてに3つのナビゲーションアイテムもあります。そのトップナビはこれらのデザイン全体で非常に一般的です。陽気です。
モデルの癖
でもすべてのモデルには、あまりにも頻繁に行うことがあります。5.3にはそれらのものがたくさんあり、5.4もそうです。その画像レイアウトのために追加された1つの追加テンプレートを除いて、ほぼ同じです。
Opusには独自の癖があります。特に、上部にステータス付きの小さなピルが大好きです。それはデザインするものすべてにそれらを忍び込ませます。Opusに何かに触れさせるたびに、物からすべてのピルを削除する全体のパスをしなければなりません。イライラします。
また、ここそこでちょっとクリンジなフォントに手を伸ばし、「いや、そのフォントを使わないで。それは悪い」と思い出させなければなりません。また、画像が関与するレイアウトが本当に、本当に苦手です。
悪い寸法の画像を場所に置き、間違ってクロップし、カットオフなどを一貫してやっていることに気づきました。通常は後でマッサージできます。私はしばしばコードに飛び込んで自分でそれをやります。でもええ、Opusは全体的にまだほとんどのデザイン作業のための私の頼りです。
そして、もし私がマゾヒスティックな気分で、わずかに良く見えるものを作るために多くの痛みを喜んで感じるなら、多くの行き来と多くのロールを伴うGemini 3.1です。それが3.1の最大のことです。
まともなUIを得るために5回以上試みなければならないように感じることがあります。でも一度やれば、本当に良いものを得て、それから他のモデルで修正できます。
時々、非常に特定のバグのあるUIのものにGPTを使用します。なぜなら、良くも悪くも、GPTモデルは他のモデルほどバグのあるUIを作らないことに気づいたからです。でも非常に良いUIも作りません。
だから私はこれらの他のモデルが残した混乱をきれいにするために、かなり頻繁にそれらを使います。では、どうやってここに至ったのでしょうか。GPTモデルとこれらの間の違いは何で、こんなに少ないテンプレートしかないのでしょうか。
まあ、私はこれらのプルリクエストが企業から購入されていると思います。これらのデータ再販業者のいくつかと、彼らをクローンするために使いたいからではなく、ソースコードとGitHub履歴を購入するためにビジネスに手を伸ばす企業があります。
彼らはそれを使ってこれらの偽の履歴と訓練データを作成し、ラボに渡してモデルをより良くすることができます。これらのタイプの企業の全産業があります。私はそれらのいくつかに投資することさえできました。ラボをうまく訓練するのに十分なデータを得ることは簡単ではないので、彼らはかなりうまくやっています。
OpusとGeminiの間の多くのデザインが非常に似ているように見えたことに気づいたかもしれません。まるでテンプレートを共有しているかのように。おそらく、モデルを悪いものからフロントエンドで妥当なものに変えたGPT-5のためにOpenAIによって購入されたデータセットがあったのでしょう。
最も辛辣な推測
そしてそのデータセットはますます高度になりましたが、OpenAIは新しいより良いバージョンの前記データで訓練データを更新しませんでした。そして他のラボはそうしました。
これの最も辛辣なバージョンの準備はできていますか。GPTモデルが今UIで悪い理由は、現代のSveltや現代のTailwindやConvexの使用で悪い理由と同じです。彼らは新しいことがあまり得意ではありません。なぜなら彼らのデータの大部分はまだ古いからです。
訓練カットオフが、私が信じるに5.2のために引き上げられたとしても、5.3だったかもしれませんが、彼らは妥当なカットオフまで引き上げました。2025年8月31日が主張されているカットオフです。
とは言え、彼らが購入していたすべてのデータを更新したとは思いませんし、GoogleとAnthropicが得た異なるデータセットがあって、OpenAIは得ていません。それが何かは分かりませんが、UIに有意義に有用ないくつかのデータが下の2つのラボの間で共有されていて、上の1つの訓練データには入っていないことはかなり明確です。
そうは言っても、彼らが確実にここで注意を払っているように見えます。そうでなければなぜこのひどいスロップ記事を作るでしょうか。この記事が存在する唯一の理由は、彼らが内部的にフロントエンドについて考えているからです。
私の推測では、内部的には「GPT-5.4のフロントエンドデザイン問題を修正する必要がある」という何らかの指令があります。そしてそれはおそらく全員総出のタイプのものではありませんが、確かに多くの人が責任を負っているものです。
研究者たちは、モデルをより賢くするためにそれを理解しようとしなければなりません。Codeexの人々は、良いデザインを得やすくするために、より良いツールとスキルを統合しようとしています。
私の推測では、ここの著者たちはおそらくDevrelタイプで、できるところで助けようとしているのでしょう。そして私が持っている推測は、内部的にこれがフロントエンド問題の指令を受け入れて取り組む良い方法のように見えたということです。そのような何かが内部的にあると仮定して。
だから、もしDevrelたちがこれに取り組むように言われたなら、Devrelはモデルをより良くすることはできません。Devrelは特にこれでモデルを魔法のようにより良くすることはできません。だから彼らが取ることを選んだ角度がこれです。
その場合、理解できます。しかし、これが公開される前にOpenAIモデルではないモデルを使用する誰かがこのようなものを見て「ねえ、これについて本当に確信がありますか。本当にこれを投稿する必要があると思いますか。だってちくしょう、これはとてもとてもクリンジです」と言うシステムが必要です。
この記事が公開されたことが信じられません。OpenAIには、このようなことを防ぐために、異なるレビューとプレス計画の方法を探求することを強く勧めます。そして、彼らがやってきた方法でTwitterでそれを押し出すところまで行かないことも強く勧めます。
特にCTOにそれが良いことであるかのようにツイートさせること。そしてTwitterでの返信を見れば、このように感じているのは私だけではないことが分かるでしょう。そしてすべて同じことです。
ほとんどのことにCEXを好みますが、ClaudeはUIとUX作業で圧倒的に勝ちます。またはClaudeコードを使うだけでもいいです。2〜3行の基本的な説明だけでも、Claudeは素晴らしいUIをデザインできます。
申し訳ないですが、CodexとGPTが大好きですが、基本的なページをデザインする能力さえ欠けています。でもClaude Opusを使うときにすべてのサーカスをやる必要はありません。ただデザインが得意なだけです。
Codeexを望むデザインに誘導するのは別のことです。また、それでもあまり良い仕事をしないことは注目に値します。これについてクラッシュアウトするのは終わりだと思います。
結びの言葉
フロントエンドについて1時間私の愚痴を見るように皆さんを誘い込んでしまって申し訳ありません。でもこれは私にとって重要なことなんです。このためにHTMLシャツを着ている理由があります。私は良いユーザーエクスペリエンスについて本当に気にかけています。
そしてOpenAIは、あなたが彼らがユーザーエクスペリエンスで良いと思うことを気にかけています。そしてそれが私がここにいる理由です。皆さんがご存知のように、私は私が話すすべてについて可能な限り正直であろうとします。好きな企業でさえ、持っているスポンサーでさえ。
隠すものは何もありませんが、失うものはたくさんあります。もし私が不誠実であれば、それを指摘してください。なぜなら私は本当に感じている通りに共有するために努力しているからです。そしてこれは、OpenAIの人々と話すときにこれらのことを置くのとまったく同じ方法です。
これが嫌いです。この会社が自分たちのUIがこのような記事をやるのに十分良いと思っているのは狂っています。そして今、私はただ彼らのためにすべてをクソみたいにしなければならない状況に陥っています。
これは悪いです。これはクリンジです。もし他のラボがこれをやったなら、私はそれを無視したかもしれません。他のラボはすでにちょっとクリンジだから。でももし彼らがそれを十分ひどくやったなら、おそらくそれに飛びつくでしょう。
もしAnthropicが、大量のテストを書いて、それが何をやっているか見失わないように多くのものを入れることによって、モデルをより長く実行させることができるという記事をやるなら、私も彼らをからかうでしょう。なぜならCodexモデルでそれをやる必要はないからです。
もう終わりです。これが役立つビデオだったことを願います。今、より良いUIを作れることを願います。どう思うか教えてください。次回まで、ピース、オタクたち。
コメント