クロードが Web デザインを永久に変更しました (チュートリアル)

原作者：Sam Crawford | Web Design Expert

オリジナルソース：https://www.youtube.com/embed/iVRsoSG3WuI

🎯 私のコミュニティに参加してください: https://www.skool.com/the-margin ウェブサイトの構築を私たちに依頼してください: https://bycrawford.com/hire-us プレミアムウェブサイトのチェックリスト: https://bycrawford.com/premium-website-checklist タイムスタンプ: 0:00 - Claude Design: プレミアム Web デザインのワークフローを破壊する新しい AI ツール 0:09 - 実際の作業で AI をテストする: ベテラン Webデザイナーの生の視点 1:02 - クロード デザインが標準の画像ジェネレーターやコード ジェネレーターと異なる点 1:40 - 言葉でデザインする: 戦略的プロンプトが新しいピクセルになる方法 2:09 - トークン コストの警告: ディープ デザイン ワークフローでの高使用率の管理 2:33 - エージェンシーの実験: 生ぬるいリードに 40 件の冷たい提案を送る 3:28 - プレミアム取引の終了:インスタント モックアップで発見のギャップを埋める 4:50 - フィンガープリントの発見: AI Web デザインの遅れの明らかな兆候 6:30 - 型を破る: AI フィンガープリントを排除するための 5 ステップのチェックリスト 7:33 - ステップ 1: URL とフルページのスクリーンショットによる構造アーキテクチャのマッピング 7:50 - ステップ 2: ブランドの完全性の導入と実質資産の保持の強制9:07 - ステップ 3: 正確な UI 設計仕様でセリフの外観を無効にする 10:36 - ステップ 4: 分離コンポーネントの反復のためのサージカル モードに入る 11:45 - ステップ 5: 交渉の余地のない人間の品質レビューとビジュアル品質保証 12:18 - 失敗モード 1: コンテキスト外のストック画像の幻覚の根絶 12:51 - 失敗モード 2:静的、非応答性、および複雑なコンポーネントのトラブルシューティング 14:10 - 障害モード 3: ナラティブ ドリフトおよびビジュアルとコピーの位置合わせエラー 15:17 - 最終判定: クロード ビルドではなくクロード デザインと呼ばれる理由 17:19 - デザインの未来: なぜ AI は床を上げるが天井を動かすことができないのか 18:47 - 実行可能な戦略: 運転エージェンシーと創設者にとっての膨大な時間の活用 Anthropic は Claude Design をドロップしたばかりですが、Web デザイナー、開発者、エージェンシーのオーナーにとって状況は完全に変わりつつあります。これは、乱雑な Figma ファイルやスタイルのない一般的な HTML ページを吐き出す別の基本的な AI チャットボットではありません。 Claude Design は実際に、タイポグラフィー、色、間隔、構造階層をライブ キャンバス上に直接レイアウトするため、ピクセルの代わりに単語を使用してデザインすることができます。しかし、素早い AI 生成を実行すると、すぐに認識可能な「AI フィンガープリント」が明らかになり、プレミアム クライアントはすぐに見つけることができます。このビデオでは、当社の代理店が AI の無駄を取り除き、デフォルトのテンプレートを上書きし、洗練されたブランド固有のモックアップを作成するために使用している正確な 5 ステップのワークフローを説明します。外科的編集やカスタム UI 仕様の利用など、一般的なレイアウトをハイエンドの Web コンセプトに変える正確な即時調整を共有します。さらに重要なことは、このツールを実際に活用してエージェンシーのライブ実験を実行したことを明らかにすることです。つまり、カスタム埋め込みモックアップを使用して生ぬるいリードに 40 件のピッチを送信し、前例のない応答率を達成し、開発者が Figma に触れる前に 10 件のプレミアム契約を締結しました。また、ツールがどこで機能しなくなるのか、複雑なコンポーネントをどのように処理するのか、大量の設計セッションでの大量のトークン消費を管理する方法についても詳しく説明します。