AnthropicがリリースしたClaude Designは、AIモデルを活用した革新的なUI設計ツールである。従来、高品質なユーザーインターフェースをAIで設計するには多大な労力と調整が必要だったが、この新製品はその課題を大きく改善する可能性を秘めている。実際の使用感としては、コメント機能を通じた反復的なデザイン改善、既存コードベースの参照、Claude Codeへのシームレスなエクスポートなど、実用的な機能が搭載されている。使用制限の厳しさや一部のバグといった課題は残るものの、Figmaをはじめとする既存デザインツールに対する真の競合製品として、企業のデザインワークフローを変革する潜力を持つプロダクトだと評価できる。
Claude Designの登場
Anthropicについて話すのはもう十分だと思っていました。本当にそう思っていたんです。でも彼らが新しいものをリリースしました。Claude Designです。これは私にとって本当にワクワクするプロダクトローンチなんです。なぜなら、これらのモデルで優れたユーザーインターフェースを設計することは可能なのですが、かなりの労力と微調整が必要だったからです。そして今回のリリースを見る限り、人々は本当に興奮しているようです。
過去に、モデルを使ってアプリケーション用の優れたデザインを作る方法についていくつか動画を作ってきました。そして歴史的に見て、私はClaudeモデルを使うのが最も成功率が高かったんです。これは実は、私がClaude Codeのサブスクリプションを維持し続けている理由でもあります。UI作成に使うのが好きなんです。LawnやShoeのような最近のプロジェクトはすべて、主にOpusモデルを使ってデザインを行っています。
Geminiも少しは使いましたが、最近行っているデザイン作業の大部分はすべてOpusを使っています。そして、モデルをデザインに特化させる新しいインターフェースやハーネスというアイデアに非常に興奮しています。Anthropicが公開したデザインスキルが、モデルのUI設計能力を大幅に向上させているのは周知の事実です。
そしてそれが単なるマークダウンであることを考えると、それがこれほどの影響を持つのは驚きです。数段落のコンテキストを追加するだけで、モデルのデザイン能力が向上するんです。では、それを中心に製品全体を構築したらどうなるのか?まだ試していないので分かりません。そして私はClaude Designを初めて試した時の正直な反応を皆さんにお伝えしたいと思います。
最近、控えめに言ってもAnthropicに対して少し厳しかったことは分かっています。でも、これには本当に興奮していますし、オープンマインドで臨むつもりです。できればこれが、サブスクリプションを維持する理由になってほしいですね。
スポンサー紹介:Clerk
でも、これらすべてのサブスクリプションにお金を払い続けるなら、私も収入を得る必要があります。では、今日のスポンサーのために少し休憩しましょう。
AIの進化でソフトウェアの作成はずっと簡単になりましたが、同時に問題のあるソフトウェアも増えました。私がよく見る問題のうち2つは、課金設定が不適切で、ユーザーに悪用されたり無料で入手されたり、キャンセルされたり、トライアルを悪用されたりすること。こういった問題と常に戦っています。そしてもう1つは、モデルが理解して対処できる方法で安全な認証を設定することです。
これは予想以上にずっと難しいです。エージェントに認証を正しく行わせる方法を見つけようと多くの時間を費やしました。そして私は同じソリューションに戻り続けています。Clerkです。この人たちは認証を理解していて、開発者にとって非常に簡単な方法で実現しています。
初日から、Clerkの焦点は常に、開発者のために可能な限りシンプルに安全性を確保することでした。Clerkで行う必要があることはすべてコードで実行されます。そしてコードはこれ以上ないほどシンプルです。Nextアプリにプロキシをコピー&ペーストします。Clerkプロバイダーを追加すれば完了です。その後、サインインボタンとサインアップボタンを追加するだけです。showコンポーネントを使用して、サインイン状態やサインアウト状態など、さまざまな条件やフラグ、ユーザーに追加できる独自のカスタムフィールドを設定できます。
それすらも面倒なら、ドキュメントはデフォルトでエージェントクイックスタートになっています。プロンプトをコピーして、アプリに移動して、プロンプトを貼り付ければ完了です。そして課金の追加はさらに簡単です。Clerkでサブスクリプションを設定するのがこれほど簡単になったことはありません。
サブスクリプションはとにかくユーザーレベルで管理されるので、それらを組み合わせるのは理にかなっています。これを見たとき、ああ、そう、それが正しい方法だと気づきました。あのshowコンポーネントを覚えていますか?特定のプランが有効なユーザーにのみ表示したい機能がある場合、こんなに簡単にできたことはありません。通常、このようなものを設定するのがどれほど煩わしいか分かりますか?これらのパターンを使うことで、エージェントにとって、そして最も重要なことに、これらのパターンでどれほど安全になるか分かりますか?サーバー側でも機能するからです。
エージェントが気に入るOAuthを使ってください。soyv.link/clerkで試してみてください。
Claude Designを試す
では、すぐに始めましょう。記事は後で読みますが、まず飛び込みたいと思います。デザインボタンをクリックしましょう。Firefoxベースのブラウザをこのようなものに使うのは必ずしも信頼していないので、Heliumに切り替えました。
今はChromiumベースのブラウザを使います。チームのデザインシステムをインポートできます。プロトタイプを作成できます。エンジニアリングのブロックを解除できます。コンピューター上のフォルダーからコードベースをインポートできます。Claude Codeにエクスポートできます。なるほど。
ああ、ここで非常に興味深い点がありました。プロンプトが「これを行う6つの方法は何か?」というものでした。モデルを使う際に私がよく推奨することの1つは、生成を実行してから気に入らなければ再試行するだけでなく、複数の生成を依頼して、バリエーションを持たせるよう指示することです。なぜなら、同じプロンプトで何度も再生成すると、似たような出力が得られるからです。でも、バリエーションのあるセットを作るように指示すれば、それらの間の違いはより大きくなります。
プロトタイプ、スライドデッキ、テンプレートから、その他。面白いですね。デザインシステムも設定できます。チュートリアルをやってみましょう。
デザイン、エンジニアリング、プロダクトは妥当ですね。皆さんは私のことを主にセールスとマーケティングで知っているでしょうが、これらが実際にやるべきことに合っています。私のメールアドレスがどこかで漏洩したんでしょうか?どこで?ああ、素晴らしい。ええ、ありがとうAnthropicは私のメールアドレスを目立つように表示してくれて。これを検閲しないといけません。
これについては何もできません。Anthropicは人々が時々スクリーンシェアすることを理解していないからです。クソったれAnthropicめ。Chromeの拡張機能を作って私のメールアドレスを非表示にできないでしょうか?修正しました。ページのレイアウトが壊れたのが好きです。この拡張機能は良くありません。でも、これで私のメールが漏洩しても、email@incompetent.comに置き換えられるので、私の気持ちが伝わるはずです。
この新しいものについて学びましょう。続けます。プロダクトモックアップ、ランディングページ、インタラクティブプロトタイプ。本当に興味深いのは、デザインシステムをインポートできることですが、コードベースを使用するようには見えません。最初のパスを作成するためのものです。
本当にFigmaのような世界を狙っているようです。FigmaとAdobeの株価を今日見ると納得できます。Figmaはすでに打撃を受けています。IPO中にFigmaの株をたくさん買った人間として言いますが、IPO以来85%下落しています。これは狂気じみています。実際にありえません。IPOを待ってFigmaに残っていた人で、売却できるようになる前に困った人たちには同情します。
チップ1、モックアップを作る。デザインモックは高忠実度にコミットする前に、クイックワイヤーフレーム探索から始めます。画面が何をするか言ってください。Claudeがオプションをスケッチします。コンテキストを持ってきてください。画像をドロップするか、コマンド+Vでスクリーンショットを貼り付けます。インポートメニューからローカルフォルダーをマウントすれば、Claudeがあなたのコードベースをライブで読み込みます。変更したいものを指し示してください。
ツールバーのコメントをクリックします。任意の要素をクリックして注釈を付けます。複数残してください。送信時に1つのメッセージにバッチ処理されます。値をライブで調整します。ノブモードでCSSの値をドラッグできます。サイズ、色、スペーシングをプレビューに直接適用します。その後、Claudeにあなたの調整を適用するよう促します。面白いですね。Claude Codeに引き渡します。
パッケージ、仕様、構造を開発準備完了のフォルダーにまとめます。ダウンロードします。その後、Claude Codeに「このデザインを作成して」と指示します。テンプレートとして保存することもできます。クールです。では、何をすべきか分かりました。T3 Codeサイトは実在のウェブサイトですが、素晴らしいとは言い難いです。では、それを修正しましょう。最初のプロトタイプをやってみましょう。
T3 Codeのデザイン作成
ワイヤーフレーム作成をします。コードベースを添付します。Whisperを使いましょう。ここにも音声ボタンがありますが、信用していません。このページを再デザインしたいと思います。マーケティングサイトは、試してみたい開発者にとってT3 Codeがいかに素晴らしいかを紹介するものであるべきです。
強調したいことのいくつかは、以下のリストにあります。1つ目、既存のすべてのハーネスが使用可能で、独自のサブスクリプションを持ち込めることを紹介すべきです。Claude Code、Codex、Open Code、Cursorを使っているなら、すでにT3 Codeでカバーされています。2つ目、完全にオープンソースで、フォークも非常に簡単です。T3 Codeの何かが気に入らなければ、自由にフォークして好きなように作り直してください。
3つ目、私たちはパフォーマンスと品質体験に取り憑かれています。私たちはエージェントオーケストレーションを行い、プロジェクトで作業しているすべてのエージェントを管理するための最高のコーディングアプリです。4つ目、GitとGitHubとの統合のための素晴らしいワークフロー。変更を加えた後にPRをファイルするワンクリックボタン。5つ目、並列作業用に設計されています。
複数のことに同時に取り組んでいる場合、または複数のプロジェクトに同時に取り組んでいる場合、T3 Codeはそのすべてを確実に実現します。Claude Code、Codex、Open Code、Cursorを正しく大文字化したのが好きです。Whisper Flowは素晴らしいです。これは広告ですらありません。ただ、とても満足しているだけです。ここでは順序が間違っています。
これらを変更する必要があります。大したことではありません。デザインを完全にダークモードにしてください。私たちのユーザーはライトモードと明るい色に敏感です。どうするか見てみましょう。チャットには言いたいことがたくさんあります。アンチフラッシュバン団。本当です。私たちは繊細な花なんです。皆さんが理解してくれて嬉しいです。
最善を尽くしています。こんなに明るいUIで申し訳ありません。このUIは非常にFigmaっぽい感じがしますが、Claudeや過去にAnthropicで見た他のUIとはかなり異なります。これらの小さなタブは、以前見たものとは大きく異なります。このデザインや作業を共有できるコメントセクションのアイデアは、他の人がコメントを残して、エージェントにこれらすべてを修正または対処するよう指示できる点が本当に素晴らしいです。
本当にクールです。ここには私が好きなアイデアがあり、AIとの協働デザインのための新しいインターフェースが間違いなく必要です。控えめに言っても、今のところ期待を持っています。ただ、Tailwindの友人たちには申し訳なく思います。彼らはちょうどUI.shの作業を始めたばかりで、ターミナルから同様のことを行う方法です。
まだ試す機会がありませんでした。参加しているかどうかも分かりません。Juliaは入っていると言っていますが、私は入っていません。これを試すのが非常に楽しみです。これまでにやったことを見てみましょう。デザインシステムとプラン。既存のマーケティングサイトから情報を取得しています。フォント、色、ミュートされたテキスト、ボーダー、微妙なノイズオーバーレイをアクセントカラーとして、アプリからブルーを使用した単一のシグナルカラー。それで問題ありません。
ムード、ダーク、ミニマル、ハイコントラスト、開発ツールの雰囲気、グラデーションなし、絵文字なし、ヘアラインボーダー、モノアイブロウ構造。そして、作成するセクションがあります。これを論理ファイルに分割して、icons.jsx、style.cssにしています。つまり、コードを書いているわけです。ただ、統合するためのコードではありません。
念のため非常に明確にしておくと、この製品の目的はコードベース上で使用することではありません。コードベースの周りでモックを作成することです。そして、大企業でクレイジーなデザインシステムを使って働いたことがないなら、彼らがどこまでやるか分からないかもしれません。でも、私がTwitchにいたときは、彼らがFigmaに持っていたシステムと、サイト作業時に実際のコードベースに持っていたシステムを同期させるために多くの作業が費やされました。
デザイナーが設計する際に使用する全く同じコンポーネントとオプションを持つようにすることで、新しいものをデザインすることなく、コードでほぼ再現できるようにしました。Twitchで構築したコンポーネントライブラリを使えばよかったのです。Figmaから与えられたUIは、そのコンポーネントライブラリに非常によくマッピングされていました。
歴史的に困難だったのは、Figmaからのデザインを取得して、エージェントに正しく実装させることです。多くの試みがありましたが、デザインがデザインシステムとコンポーネントライブラリを適切に使用しておらず、それと実際のコードベースとの関係が十分に明確でない場合、エージェントは苦労するだけでした。
だから、これがどうなるか非常に興味があります。デザインがどれだけ優れているかだけでなく、Claude Codeに引き渡したときにどうなるかもです。間違いなく時間がかかっています。予想通りですが、デザイナーと働いたこともありますが、もっと時間がかかります。なぜこれに興奮しているのか、もう少し話させてください。
デザイナーとの協働体験
過去に、本当に一緒に働くのが好きだったデザイナーについて話したことがあります。そして、最高のデザイナーは、スタックのすべての他の側面と最高の関係を持っている人だといつも感じてきました。フルスタックのスペクトラムについて皆さん考えたことがあると思いますが、一方にバックエンドがあり、もう一方にフロントエンドがあります。
でも、私たちが構築するアプリケーションはもっと広がります。一方には、インフラストラクチャがあり、チップ設計があります。さらに進む多くのものがありますが、反対方向にも進みます。バックエンドは削除しましょう。その部分について話すためにここにいるわけではないので。フロントエンドがこの切れ目になるとしましょう。
そして、反対側にはユーザーがいます。でも、フロントエンド開発者は必ずしもユーザーのために直接物を作っているわけではありませんし、ましてやそれについてユーザーと話しているわけでもありません。通常、間に他のステップがあります。フロントエンドとユーザーの間のどこかにデザイナーがいます。
そして、大企業では、何らかの形のプロダクトマネージャーもいることがよくあります。PMとユーザーの間に移動するサポート担当者がいる場合もあります。でも今は、Twitchでの私の経験にできるだけ近くしたいと思います。ユーザーが問題を抱えています。プロダクトマネージャーがそれらの問題を特定し、すべてのレポートやユーザーが経験している他のことを調べ、その中の一部に連絡して話し、提案やユーザーストーリーを収集したら、それをデザイナーに持ち帰り、ユーザーが抱えている問題を解決したり、ユーザーが望むものを構築したりした場合に、この製品がどのように見えるかのデザインを作成するために前後します。
やり取りが終わったら、多くの場合、フロントエンド開発者に渡されます。そして、フロントエンド開発者とデザイナーは、何が実装可能で何がそうでないか、何が機能して何が機能しないかなど、すべてについて前後します。
でも、私のキャリアを通じて学んだことがあるとすれば、これらの領域間のギャップを橋渡しできればできるほど、より良い状態になるということです。フロントエンド開発者として、デザインとうまく話し、バックエンドともうまく話すことができれば、本当に、本当に有益です。Twitchでの私のキャリアを最も向上させたことの1つは、フロントエンドに移ったときに、バックエンドを深く気にかけ、APIやインターフェースを考え抜き、バックエンドチームと協力することに多くの時間を費やした数少ないフロントエンドエンジニアの1人だったことです。
当時Twitchを支えるGraphQLレイヤー全体であるバックエンドAPIを運営していた人と話したときのことを覚えています。彼は、フロントエンド開発者と話している人がいかに少ないかに失望していて、私が電話をして彼と近況を確認するために連絡したことにショックを受けていました。フロントエンド開発者はまったく気にしていないと思っていたからです。大部分がそうだったからです。
そして、Twitchで多くの影響を与えることができた理由の1つは、この立場から、バックエンドを支援し協力することに多くの時間を費やし、デザインとのギャップを橋渡しすることにも多くの時間を費やしたからです。プロダクトマネージャーと直接仕事をするところまで進み、最終的にはユーザーと直接話して彼らの問題を修正し始めました。
これはT字型のことであることを明確にしておきます。フロントエンドに本当に深い場合、バックエンドにもかなり深く、デザインに少し深く、それほど多くなくてもプロダクト管理に関与し、それでもユーザーと話すことに時間を費やすことは非常に価値があります。これらの各バーが、私が物事に費やしている時間とその分野の人々と話している時間だとすると、これはTwitchでの私の経験の後半を比較的よく表していると思います。
これをすべて持ち出しているのは、私が一緒に仕事をした素晴らしいデザイナーたちのおかげです。特に1人のデザイナーをいつも挙げています。彼女の名前はIrisです。彼女は、私がよりフロントエンド志向の人間になるきっかけを間接的に作ってくれたデザイナーでした。当時、私はバックエンドだったんですが、フロントエンドのことを扱っていただけでした。新しいTwitchアプリを出します。
Irisは彼女が触れるすべてのものに深く関わっていました。彼女には開発経験がありませんでした。開発者では全くありませんでした。だから、彼女が私に実装するのが本当に面倒なデザインをくれたとき、私は強く押し戻しました。問題は、彼女がくれたデザインが角丸のボーダーとポップアウトを多用していたことでした。このようなカードがあり、角が丸くなっていましたが、マウスオーバーすると飛び出すボタンもここにありました。
これはPopperのようなものが信頼できる前の時代でした。問題は、これがホバーボタンで、これが外側に表示されて、背景でこれらの角を丸くするためにオーバーフロールールを有効にすると、これが壊れてしまうことです。そのオーバーフロールールがこれを垂直方向に飛び出せないようにするからです。面倒です。
そして、これを非開発者に説明するのは非常に難しいです。ここにいる開発者の一部でさえ、私が何を話しているのか理解していないと確信しています。CSSのオーバーフロールールは本当にひどいです。オーバーフロールールについて多くの面白い事実を知っています。詳細でみなさんを退屈させることはしません。ここにいるのはそのためではありません。
Claude Designのためにここにいます。でも、これは技術的な詳細に非常に深く根ざした問題です。Irisにはたくさんの質問がありました。Irisの仕事はプロダクトのものを受け取ってデザインを作り、私が彼女ができないことを伝えたときに修正することだったので、少しイライラしていました。それで、少しイライラしながらも少し彼女の相手をしました。どうでもいいやと思って。
数時間後、彼女は私が抱えていた懸念を完全に対処したデザインを持って戻ってきました。彼女は角丸のレイヤーをさらに追加しましたが、背景色は使用しませんでした。だから、もうオーバーフロールールを有効にする必要がなくなりました。そして、ポップアウトのものを再び飛び出させることができました。そして、彼女がデザインを異なる人々の任意のニーズセットに合わせるための正しい質問をする技術を完璧にしたことに気づいたとき、私は驚きました。
驚いたのは、彼女が開発者とだけそれをやっていたわけではなかったからです。プロダクトの人々ともやっていました。ユーザーともやっていました。彼女はただ、与えられた問題を解決したかったのです。エンジニアとしての私たちがやることに似ています。問題を集めて理解できれば、解決できます。
そして、デザインが私がフロントエンドやバックエンドでやっていたことと似ていることに気づいたとき、バックエンド開発者のほとんどの場所での仕事は、データベースとデータ表現をユーザーが使用するアプリケーションと接続することです。彼女は、私が構築しなければならないものとユーザーが必要とするものの間の橋渡しを、同様の方法でしていました。そして、これが根本的なレベルで私の脳を再配線しました。
そして、Irisが彼女の仕事で本当に優れていることによって、時間を取って間接的にこれを教えてくれたことに本当に感謝しています。Irisは信じられないほど素晴らしかったです。約1年後、彼女が突然ランダムなCSS質問をしてきました。「待って、何?どこで関係あるの?Twitchではこのスタイルのものを使っていないよ」という感じでした。これはSlack経由でした。
突然、足音が聞こえました。彼女が立ち上がって、私のところまで歩いてきて、ラップトップを渡しました。そして、デザインを確定して私の問題にする前に、これをユーザーに見せるためのプロトタイプを本当に作りたいんです。通常はこんなことであなたを困らせませんが、プロトタイプがうまく機能することを確認したいだけなんですと言いました。
そして、彼女は自分で作ったモックアッププロトタイプを見せてくれました。繰り返しますが、コード経験はゼロです。そして、彼女が見せてくれたのは、最終的にMod Viewになったものの最初のプロトタイプでした。これは今でも私が構築したお気に入りのプロジェクトです。彼女は機能するプロトタイプを作りました。実際のバックエンドで動作するようなものではありませんが、すべての要素がリサイズ可能でした。
このようなリサイズのものがあり、物を動かす機能がありました。そして彼女はバニラHTML、CSS、jQueryでそれを自分で構築しました。信じられません。これはAIやバイブコーディングのようなものがずっと前の話です。これは2019年、もしかしたら2018年でした。信じられないほどクールです。そのことに対して彼女を本当に尊敬しています。そして、これがAnthropicがここで料理しているものに私が興奮している理由です。
彼女のようなやる気のある人に、有用で遊べるものを作るために必要なツール、つまり自分でテストしたり、ユーザーに見せたり、開発者に見せたりできるものを与え、ユーザーとプログラマーとしての私の間の中間的な役割をより協力的で柔軟な方法で行えるなら、それは魔法です。
そして、彼らがこれを正しくやれば、Irisのような人々がそれで世界を征服するだろうと知っています。うまくいったことを願いましょう。T3ロゴはありますが、まだT3 Codeというテキストがあります。今これをどうやっているんでしょうか?やっていません。このプレビューをフルスクリーンにする方法はありますか?ああ。1つのコマンドサーフェースからすべてのコーディングエージェントをオーケストレートします。
アンダーラインでの単語の折り返しが好きではありません。特に、アンダーラインがその文字に当たっているここでは。Either Codeはエージェント開発のためのコントロールプレーンです。すでに支払っているハーネスを持ってきてください。Claude Code、Codex、Open Code、Cursorを、所有するすべてのプロジェクトで並行して実行します。ダウンロードリンク。どのように機能するかを見る。
これは好きではありません。私の画面を取得しました。新しいスクリーンショットを作りましたか?こんな感じではありません。ああ、ここにインタラクティブな偽のUIを作りました。面白いです。それから、これがヒーローアニメーションの作業を続けます。すでに支払っている機能のドットドットドット。T3 Codeはトークンを再販売しません。すでに持っている資格情報でClaude Code、Codex、Open Code、Cursorをプラグインします。
私たちがオーケストレートします。あなたはプランを維持します。これらのどれも正しいロゴを取得しませんでした。面白いですね。ここに新しい偽のUIを作りました。正確ではありません。ここでの単語の折り返しが悪いです。これは実行可能ですが、確実にやるべき仕事があります。ヒーログリッドがトグルで、そこでオフにできるのが好きです。
ああ、プレビューの傾きはオンオフにすると小さなアニメーションがあります。それはかわいいです。そのタイプのものには傾きが本当に好きです。さて、フィードバックをしましょう。これは中程度の画面サイズで単語が折り返されます。ああ、送信ボタンとは別にコメントボタンがあります。これらのヘッダーアイテムのほとんどは必要ありません。コメントを残します。オープンソースの性質を強調していません。
まあ、ここでもアンダーラインでの折り返しがかなり悪く見えます。ああ、調整はページの一部です。調整パネルにコメントできます。それは面白いです。オンオフにします。それは便利です。細かいことですが、Claude デスクトップアプリで経験した壊れた体験を考えると、これはすでに大幅により洗練されています。
ものに絵を描くこともできます。ああ、それは私たちExcalidrawタイプにとって非常に有用でしょう。このコピーをトリミングします。ここでサポートされているハーネスのロゴを取得する必要があります。このバーはかなり恥ずかしいです。確かにもっと良いスクロールヒントが必要です。ユーザーがスクロールし続けられることを示すもっと良いヒントが必要です。モックはどこですか?ああ、モックUIを取り除いたのですか?どこかで取り除いたと思います。オーケー、これらすべてのコメントがあります。
全部チェックして送信できます。それはクールです。全部チェックしたか分かりませんが、やってみましょう。ここでUIが更新されていません。更新するにはそれを押す必要がありますか?そこに行きます。クールです。ええ、それは修正されました。この単語の折り返しはまだ壊れていますが、私はそれをすべてトリミングするように言いました。リフレッシュ。
そうしますか?まだそこにあります。でもそこでの単語の折り返しは嫌いです。スクロールヒントは少なくともこのサイズではページサイズに合っていません。ええ、まだAIがここでデザインをやっているもので、好きではないものがあります。トップバーは混乱しています。一般的に折り返しがひどいです。スクロールヒントは私が試した画面サイズでは表示されません。
もう一回やってみます。何をするか知っていますか?2つ目を起動してみます。マーケティングサイトV2。別の新鮮なスクリーンショット。複数必要な場合は複数作るように頼むだけですか?これは疑問のあるメニューです。なぜ誰もこれにOpus 3を望むのでしょうか?冗談でしょう?なぜそれがここにあるのでしょうか?比較して好きなものを選べるように4つの異なるバージョンを作ってください。
今回はコードベースを渡しませんでした。これが正しい判断だと思います。これなしでどうするか見てみましょう。この1つは凍結しているようです。メッセージを送信しました。更新されていません。これは気に入っていました。他のものに行きます。ファイルが見つかりません。
今日はほとんどClaudeを使っていません。実際、今日はほとんどありません。そして現在のセッションでは、20xプランにまだいます。そして現在のセッションでは、合計0%使用しています。今週は6%だったと思いますが、今は7%です。ああ、Claude Designはここで独自の別物です。そして18%使用しています。ああ、素晴らしい。金曜日の午後5時にリセットされます。現在は金曜日の午後6時です。これは速く消費されるでしょう。
そして、これが進行中かどうか分かりません。これは死んでいます。ああ、修正しました。修正を見せてくれなかっただけです。別のものに戻ります。複数構築するように言いました。そして、ここでフロントエンドデザインスキル、同じマークダウンファイルを使用していることが分かります。これらはそれが使用するすべてのデザインだからです。
V1は編集洗練版です。わあ、この応答タグ全体を作り直させてください。レスポンスタグが出力に漏れています。スクロールヒントが常に表示されるようになりました。素晴らしい。嫌いです。Anthropicのようなことを唯一やる会社だと思わせる細かいことがたくさんあります。その1つは、新しいモデルがはるかに高い解像度の画像を処理できることです。
GPT 5.4のようなOpenAIモデルに画像を貼り付けて、テキストが小さすぎて読めないから使えないと言われたことが何度あったか分かりません。Opus 4.7ははるかに高い解像度を処理できます。これは非常に問題の少ない問題であり、非常に良いことです。それに非常に感謝しています。そして、それが本当に良い位置に置かれていると思います。自分自身のスクリーンショットを撮って何がどこにあるか知ることができるからです。
私が提供するスクリーンショットからより多くのコンテキストを取得できます。そして、より高い解像度を見ることができれば、一般的により正確になることができます。ここで私たちを残した場所です。好きではありません。もっとコメントをしましょう。UIにコメントを残して、一度にすべてやってもらえるのが好きです。
これの隣のロゴはT3 T3 Codeのように読めます。2つ目のT3を削除するか、テキストを完全に削除する必要があります。まだコメントモードです。このバーが嫌いです。取り除いてください。ユーザーはスクロールできます。大丈夫です。このようなステータスピルはもう絶対にやめてください。本当のロゴを取得できますか?コードにあるはずです。大丈夫じゃなくても心配しないでください。
これはひどいです。取り除いてください。この領域でスクロールが多すぎます。分かりにくいです。もっと見るものがあります。下部をトリミムします。できれば次のセクションが覗いているように。このセクション全体が大きすぎます。これらは本当に恥ずかしいです。そして、実際にデザインにフィードバックを与えているときの私の姿がどんなものか知りたければ、これとそう遠くありません。
これらのセクションに番号を付ける必要はありません。ここに他のハーネスのロゴを浮かせたいです。ここに他のハーネスのロゴを浮かせてください。素敵なUIタッチです。これが実際に何であるかをユーザーが知るために、UIのスクリーンショットをページのかなり上の方に配置する必要があります。クールです。これらすべてのコメントを選択します。
このワークフローは本当に好きです。送信するためにすべてのコメントを手動でチェックしなければならないのは好きではありません。ああ、以前に残したコメントをクリアしませんでした。それは実際に非常に迷惑です。どうでもいいです。書いたばかりのものを送信します。この他のものがどうなっているか見てみましょう。これまでのところ、デザインファイルがあります。
編集版。なんてこった、これは嫌いです。リンクのフォントをひどく台無しにしました。正確ではないモックUIを作りました。ターミナルバージョンを入手しました。少し悪くないですが、まだ私の好きなものとは程遠いです。インストールはそのようには機能しません。他のもののようにコードベースにアクセスできないので理解できますが、それでも良くありません。
これらのレスポンスタグに非常に面白がっています。これはOpus 4.7とは別に作業されたと思うので、Opus 4.7のサポートはまだ完璧ではありません。使用状況はどうですか?31%使用していて、まだ使用可能なデザインを取得していません。ああ、なんてこった。これらの制限に達する前に良いデザインを取得できるか見てみましょう。指を交差させて。
制限が異なる層で異なるかどうか疑問に思います。そうでなければ、これはかなり厳しい制限だからです。どうやら、プロにいる人々はクラッシュして使用量がなくなる前に2つのプロンプトしかできなかったようです。だから、これはすべての人で同じレベルではないと推測しています。
知らない人のために、プロは月額20ドルだったと思いますし、Max 20xは私がいるもので、月額200ドルです。ええ。オーケー。V3を終了します。これはこれまでのものより良いです。実際にこれが好きです。作ったモックUIは好きではありませんが、これは私が作業できる方向です。ええ、そのAppleロゴ。そこでApple SVGを幻覚しました。
それはそれほど難しくないようなことの1つです。ブランドロゴを使用するためのツールを追加しなかったことに驚いています。これには非常に良いものがたくさんあります。SVGLのように、私がいつも使っているものです。私の人生を大幅に良くしてくれました。SVGLを使うと、私たちが話して使用するほとんどすべてのもののSVGをワンクリックでコピーまたはダウンロードできます。
Apple SVGが必要ですか、どうぞ。T3 SVGが必要ですか、どうぞ。Claude SVGが必要ですか、Codex SVGが必要ですか、Open Code SVGが必要ですか、Cursor、必要なほとんどすべてのもの。SVGLは救世主であり、SVGLにはRaycast拡張機能があります。だから、Claudeと入力してEnterを押せば、今クリップボードにあります。
ロゴをたくさん使う人にとっては人生を変えるものです。皆さんに見せたい本当に有用なことがもう1つあります。それは今日のスポンサーです。
スポンサー紹介:Infinite Red
エージェントはアプリの構築が本当に上手になりました。それがウェブアプリである限り。まったく同じエージェントにモバイルアプリを構築させようとしてどれだけ苦労したか言えません。彼らはモバイルをまったく理解していないようです。
だからこそ、理解している専門家がいることがとても役立ちます。常に必要というわけではないかもしれませんが、必要なときに入ってきて、モバイルで正しい方向に進んでいることを確認できる1人か2人、あるいは4人か5人の人がいることは、これまで以上に不可欠に感じられます。だから私はInfinite Redをとても愛しています。Infinite Redチーム全体がReact Nativeの業界専門家であり、正しく設定してくれます。
アプリをゼロから構築する場合でも、古いアプリを軌道に戻す場合でも、あなた、あなたのチーム、エージェントがモバイルアプリを成功裏に構築できるようにすべてが設定されていることを確認する場合でも。だから、ZoomからAmazonからStarbucksまで、すべての人が彼らとアプリで仕事をしてきました。私は本当にReact Nativeが大好きですが、間違えるのは少し簡単すぎます。
だからこそ、専門家に助けてもらって正しくやることを確実にしたいのです。Gas BuddyのMaxによると、React Nativeのイディオムを取得し、状態管理、パフォーマンスチューニング、サードパーティモジュール選択に関する多数の暗い路地を回避することにおいて、経験に代わるものはありません。Infinite Redの私たちのチームは、プロジェクト全体を通じてこれを提供してきました。ユーザーは良いアプリに値します。
soyv.link/infiniteで正しくやることを確認してください。これはFarrell Bによって構築されました。彼は別の素晴らしい開発者です。まだの場合はTwitterで彼をフォローしてください。彼は素晴らしく、SVGLを作ってくれて本当に感謝しています。これは私の人生をより良くするツールの1つです。面白いですね。作った異なるデザインについて教えるためにindex htmlを作りました。
プレビュートークンが必要です。何?オーケー、ここには壊れたものがたくさんあります。それは正しいフォルダーではありません。何が起こったのですか?リフレッシュ。ファイルが見つかりません。リフレッシュしたら、永遠に消えましたか?使用量の10%以上をあきらめたばかりで、デザインが消えました。
ファイルはどこに行きましたか?ファイルは消えたようです。まあ、アップロードフォルダーのみが残っています。再構築させてください。これは特に残念です。なぜなら、最近の他のAnthropicのローンチよりもはるかに多くの努力がこの製品に注がれたことが明らかだからです。これは、私が期待するよりも洗練されていますが、それでも私が期待する同じAnthropicイズムがあります。
これらのものにもう少し磨きをかけてくれればと本当に願っています。これは残酷だからです。今、デザインファイルボタンをクリックするのが怖いです。これが完全に消えてしまうかもしれないからです。それのように。これらのバグの問題は、製品のようにではなく、製品を恐れさせることです。
ああ、これはプロトタイプに使用する有用なものから、これを注意深く監視していなければ、作業しているものが完全に消えるかもしれないに変わりました。撮影していなければ、好きだったデザインが1つあったという証拠はありませんでした。それはただエーテルに消えていたでしょう。
NMGが言いました。戻ってきたら、Theoが手で頭を抱えています。悪いに違いありません。ここには多くの良いものがあり、通常よりもはるかに洗練されていますが、期待していたよりも壊れています。何をするか分かっていますか?アセットフォルダーがあります。ロゴを取得しましょう。SVGをダウンロードします。Open Code。
それはひどくレンダリングされています。そしてCursor。これは素晴らしいです。SVGをここにドラッグアンドドロップできて、今それらについて知っていることです。メッセージにもそれらを入れますが、それは好きではありません。でも、これを試してみましょう。浮かべるべきすべてのロゴのSVGがここにあります。ワードマークなしでこれらを使用してください。きれいでフレンドリーにしてください。
ロゴは今よりもはるかに大きくする必要があります。ここで見るように、ロゴは奇妙に投げられていて、少し小さいです。どうするか見てみます。そして、ここに戻って、それらを戻してくださいと言います。どうするか見てみます。今、私の使用状況はどこですか?47。ほぼ50%です。なんてこった。オーケー、今話しています。今本当に進歩しています。
皆さんがよく見えるようにこれをやります。ああダメ、リサイズすると消えました。タブにプリセット。それができますか?ええ、これは私が心に描いていたものにずっと近づいています。今、本当にそこに到達しています。実際、これで開始して快適でしょうし、エクスポート機能を試す前に使用量がなくなりたくありません。
このサブスクリプションはClaude Designですでに50%を超えているので、残りのClaude Codeサブスクリプションの残りで残りの反復を行うことができます。そのエクスポートボタンを押してみましょう。Claude Codeに引き渡します。コマンドをコピーします。ターミナルに移動します。カスタムCloudコマンドを取得します。貼り付けます。どのディレクトリに移動するか指示すべきですが、しません。
どうするか見てみるだけです。プロジェクトディレクトリにそれらを投げ込むか、他の場所に置くか、これらのファイルをどこでフェッチするか興味があります。オーケー、フェッチしています。今、このリポジトリで実際のマーケティングコードベースを探索させてください。クールです。そのディレクトリに行く必要があることを見つけました。正しいことをやっています。
このフルスタック体験が、これをやってここにドロップして進むような感じで、これを正確に取得すれば、かなり興奮するでしょう。これがデザインの復元でどうなっているか見てみましょう。まだ進行中で、使用量は動いていません。うまくいけばここで正しいことをやってくれるでしょう。有用な情報。冷凍ガムを2分間氷で冷やします。
靴がすぐに剥がれます。何?このセクションが有用かどうか疑問に思っていたなら、有用ではないことを確認したばかりだと思います。オーケー、チャットの人々はある程度有用だと言っていますが、今、新しいデザインシステム、グローバル、ナビゲーションでlayout.astroを書き直します。調整パネル、スクロールヒント、番号付きアイブローはスキップします。
ユーザーは明示的にそれらを拒否しました。送信したHTMLにそれらを保持しているのは興味深いです。HTML自体だけではなく他のものがHTMLファイルに含まれているようです。これを見て、プロジェクトを見てみましょう。index htmlを取得しました。ここには多くはありません。T3 Codeマーケティングが有用なものです。style CSSもあります。Tailwindのようなものではなく、従来のCSSをやっているようですが、ページ上にたくさんのCSSをインラインにもしています。大量に。
非常に伝統的なHTML CSS。ライブラリや何も使っていません。それはシステムに縛られすぎないようにするための良い基点です。でも、望むなら独自のデザインシステムを持ち込むこともできます。これらすべてのJSXコンポーネントがあります。これらのアップロードは何ですか?貼り付けた画像があります。クールなスクラップです。
ドロップしたアセットがあります。これをすべて1つのものに入れて、私の意図を見るために使用できるチャット履歴も一緒に入れるのはクールです。少し長く、これは大量にコンテキストを膨張させるかもしれませんが、良いアイデアです。このアイデアは好きです。ツール間に超高級なプロプライエタリなブリッジを構築する代わりに、ソリューションが文字通りすべてのコンテキストをzip化してリンクと一緒にエージェントに投げることです。好きです。
情報を渡すこの方法は本当に好きです。でも、このデザインに7分かかっていて、制限が怖いです。Claude使用状況はどうですか?オーケー、Claudeは現在のセッションで2%にしか上がっていませんが、Claude Designsは今週55%です。ああなんてこった、まだ新しいページを構築しています。V2を取り戻しました。
V3はまだ作り直す必要がありますが、V2を取り戻しました。4つのバリアント全部が戻ったと言いました。実際、そうみたいです。再び消えたら大変です。このタブは開いたままにしておきます。怖いからです。まだ検証中で、これが何を意味するのか少し怖いです。それはかわいい小さなラップトップアニメーションですが、何が起こっているかの十分なコンテキストではありません。
シンカーデザインが完了しました。サイトをチェックしてください。これはかなり良いです。ここから絶対に作業できます。実際にこの製品が好きだと思います。これは絶対に作業可能です。おそらくオフストリームでこれを仕上げるつもりです。たくさんのものをトリミングして、あちこちでロゴを交換して、物を少しタイトに、近くに、必要のないセクションを削除して、モックを少し正確にします。
でもなんてこった、これは良い出発点です。ああ、調整にコメントできます。それはクールです。ロゴのサイズ、配置、動きの量の調整がありました。コメントできることは知っていましたが、実際に物事をやらせるためにコメントを使用できることは知りませんでした。今回もデザインは消えませんでした。これは良いことです。このことに温かくなっています。
この製品は好きです。確実に価値があります。ああ、調整を大きくすると、大きすぎるので見づらくなります。面白いです。フルにプリセットすると。ああええ、それとデフォルトを失い、選んだものがUIを少し壊します。ロゴサイズの広がりで、それらも機能しません。
オーケー、調整を修正させることはできますが、調整でサイトを修正させることはできません。試しました。制限を押し続けたくありません。これを悪く思いたくないからです。久しぶりにAnthropicから好きなものを手に入れたという事実が好きです。これは良いからです。これはAnthropicがこれまでに出荷した最高のソフトウェアです。
それが高いハードルではありませんが、彼らにとっては挑戦です。ええ、これを実現させたエンジニアの皆さん、脱帽です。Anthropicでのエンジニアリングの大混乱をもう少しコントロールできるか見てください。明らかに皆さんは気にかけていて、有用で良いものを作りたいと思っているからです。そして同じ態度が会社全体にもう少し存在すれば、私はおそらくそれほどクラッシュしないでしょう。
少なくとも使用制限に達するまで、これを使用している自分が本当に見えます。これらのデモだけですでに65%になっているからです。ええ、私がFigmaだったら、今すぐ怖くてたまらないでしょう。これは実際にすでに非常に有用だからです。少しの磨き、いくつかの機能、もう少しデザイナー重視で、これが正当に非常に良い製品になるのを見ることができます。
Claude Codeほど大きくなるでしょうか?おそらくそうではありませんが、それほど遠くもないと思います。特に、プレゼンテーションデザインの世界で本当に勝つなら。これが、マーケティング責任者、デザイナー、会社の他のすべての人が、会社のClaudサブスクリプションであなたが持っているもの、やっていることに興味を持つものになれば。
これらのエンタープライズプランを多くの企業にとってはるかに魅力的にしました。ここで使用した使用量を考えると、間違いなく少し高価です。それがコストにどう対応するか分かりませんが、大量の潜在力が見え、この製品がどこに行くかを見るのが本当に楽しみです。
Anthropicが実際に異なる、有用で、彼らの強みを利用する製品を構築しているのを見るのは素晴らしいことです。彼らのデザインの味は常に良かったです。モデルと彼らが生成するものの両方で、また会社として、彼らがデザインするものでも。彼らが出すものの美学を常に少し嫉妬していて、今、自分でそれに少し近づけると感じています。
このデザインは、さらに作業を進めて、T3 Codeのより良いランディングページを作ろうとするのに実際に十分良いです。そして、このような製品を出してくれて非常に感謝しています。これはクールで刺激的です。そして、多くの問題にぶつかり、かなり高価になると思いますが、彼らが何か違うこと、実際にクールで有用なことをするのを見るのは素晴らしいことです。
もう一度、これに取り組んだすべての人に感謝します。この機能について本当に興奮しています。たくさん使用するつもりですし、皆さんもそうするかどうか興味があります。どう思うか教えてください。そして次回まで、リンギングを続けてください。
コメント