昨年の 2 月の平凡な月曜日、アンドレイ・カルパティはツイートを発信し、インターネットに新しい流行語「バイブコーディング」をもたらしました。
数時間以内に、人々は Bolt、v0、Lovable などのツールが、設計されていないモックアップからアプリを生み出すのを目撃しました。
インターネットは歓声を上げました — デモリールでのスピードは素晴らしく見えますが、より経験豊富なグループは静かにうめいていました、AI が以前は不可能だった速度で大規模なコードベースに技術的負債を追加し始めたからです。
デモ優先の AI が成熟したチームに失敗する理由#
ここでは、シニアデザイナー、開発者、マーケターがどのように痛みを感じているかを示します。
デザイナー：プレファブデザインシステム ≠ あなたのデザインシステム#
今日のワンクリック生成器は、自分の色、ボーダー半径、フォントを選びます。彼らが認識できないハウススタイルと衝突した瞬間、彼らは新しい 16 進数の値をハードコーディングし、あなたのブランドトークンを上書きし、グリッドを乱し、デザイナーがスタイルの不一致のスクリーンショットをバグトラッカーに送信する羽目になります。
あなたが絵を描くとき、あなたは形や線を慎重に作り上げるために時間を費やします。素晴らしいデザインは意図の一貫性から生まれます。
今日の AI デザイナーは、あなたに鶏の落書きでいっぱいのページ、消しゴム、そして「頑張って」と言います。
開発者：ワンショットコード生成 ≠ 生産コード。#
「完全に動作する」React ページは、テストもアクセシビリティタグも、関心の分離もない 1200 行の単一コンポーネントとして届きます。差分はCVS のレシートのように見えます。
それをマージする開発者は、今や将来のリファクタリングに抵抗するタールボールを所有することになります。コードはジュニアのサイドプロジェクトを相続するように感じます、しかしこの場合のジュニアは、決して眠らず教えることができない LLM です。
クリーンでメンテナブルなコードは、どれだけの行を削減できるかで測定されます。既存のコードベースのコンテキストや多くの微調整がない場合、AI の傾向は冗長すぎることです。
マーケター：偽データ ≠ 実験。#
マーケティングは今や 15 分でランディングページを作成できますが、すべての推薦文、価格、CTA はまだ_lorem ipsum_です。
ページを CMS に接続し、分析に接続することは、マークアップの半分を手動で書き直すことを意味します。すべての 10 倍スプリントはエンジニアリングのバックログに落ち着きます。
ページを生成することはできますが、収益を得るには待たなければなりません。
私たちに残されたものは？#
すべてを「80/20 の後遺症」と呼びましょう：AI は 20% の時間で仕事の最初の 80% を生成します… その後、チームは最後の 20% の作業を修正するために次の 80% の時間を費やします。
これは健康的なコラボレーションの完璧な逆転です。人間は退屈な作業に溺れ、機械に技術を扱うように懇願します。
しかし、ここで重要なのは、教訓は AI が詐欺であるということではなく、大規模なチームの問題は速い AI だけでは解決できないということです。
もちろん、「食事計画アプリを作って」と言うのは楽しいおもちゃですが、私たちが見てきたように、忠実さのないスピードはボトルネックを下流に移動させるだけです。
私たちが必要なのは、あなたのコンポーネント、トークン、データ、テストにすでに存在する技術を尊重することです。私たちは大人向けの AI が必要です。
大人向けの AI の二面契約#
提案があります：もし私たちが有能なチームを念頭に置いて AI を構築し始めたらどうなるでしょうか？
そのためには、AI ソフトウェアのビルダーとそれを使用する専門家の両方から、2 つのマインドセットの変化が必要です。
ビルダーは…#
- スタックを尊重する。 リポジトリにすでに存在するすべてのピクセル、プロップ、トークン、スキーマ、テストは、提案ではなく規範になります。専門家は AI の出力がどのようになるかを簡単に予測できるべきです。
- 自分の専門分野に留まる。 もう一つのキャンバスを発明するのではなく、ツールは最高のチームがすでに使用しているソフトウェアに埋め込まれます：Figma、IDE、ヘッドレス CMS など。専門家は自分のツールを選ぶために努力しており、AI だけでは_切り替えるための十分な理由にはなりません。_
- 制御を公開する。 コード生成は日中に行われます —CLI フック、読みやすい差分、そして人間のレビューゲートを通じて — シニアエンジニアが品質基準を維持できるようにします。専門家は、機械が何をしているかを示す限り、機械を扱うのに十分賢いです。
専門家の世界が AI の暴走列車に完璧に追いつく必要はありません。ツールビルダーが多くのものを壊さないようにする責任があります。
専門家は…#
- コンテキストを提供する。 プロセスを文書化し、プロトタイプを実際のコンポーネントにマッピングし、デザイントークンを渡し、最初のテストを作成するために労力をかけます。モデルに忠実さを持たせるための戦いのチャンスを与えます。ビルダーはこれを利用して AI の生成をはるかに決定論的にします。
- 責任を持つ。 マージされた PR は、最も複雑な工芸品に対して依然として人間の名前がかかっています：UX の磨き、パフォーマンス予算、洗練されたコピーなど。ビルダーはオールスター AI を設計する必要はなく、基礎作業で一貫性を保つことに集中できます。
- AI の限界を認識する。 デザイナー、開発者、マーケターは、主に深いスキルのある分野間の翻訳層として AI を使用します。ビルダーはチームを置き換える AI を作る必要はなく、むしろ引き継ぎのコミュニケーションを促進する AI を開発するべきです。
ビルダーがすべてのチームの正確な使用例を予測する必要はありません。代わりに、彼らは専門家が自分のニーズに合わせて AI を適応させる挑戦に立ち向かうことを信頼できます。
大人向けの AI がある特定の月曜日にどのように機能するか
さて、それはすべて素晴らしいことです：人々は人々のことに集中し、AI は AI のことに集中します。しかし、実際にはどのように見えるのでしょうか？
再び私たちの 3 つのペルソナ — デザイナー、開発者、マーケター — の視点を取り入れ、彼らにとっての_理想的な_世界がどのようなものかを見てみましょう。
デザイナー、まだ Figma で#
デザイナーはヒーローカードのコーナー半径を調整し、ライブハンドオフパネルが触れる正確な React プロップをフラグ付けするのを見ます。
トークン監査ボットは、値がデザインシステムを破る場合にのみ彼に通知します — もうスクリーンショットのスプレッドシートは必要ありません。
赤線を引くことから解放された彼は、午後を微細なインタラクションの調整やモーションデザインとのペアリングに費やし、すべてを本当に_歌わせます_。
より多くの時間を磨きに費やします。トークンのドリフトバグはもはや提出されません。
開発者、まだ IDE で#
開発者は最新の「デザインからコード」PR を引き出します：それはすでに合理的なコンポーネントに分割され、テストスタブが承認され、差分はコーヒーを飲みながらレビューできるほど小さいです。
彼女はパフォーマンスベンチマークを実行します — 数値は保持され、生成器が越えない事前設定された予算のおかげです。
ボイラープレートがなくなった彼女は、実際に製品を前進させるアクセシブルなキーボードフローやエッジケースのロジックに飛び込みます。
AI がフレームワークを引き継ぐことで、レイアウトバグのレビューサイクルは半分に減少します。
マーケター、まだ CMS で#
マーケターは先週のランディングページのバリアントを複製し、見出しのコピーを入れ替え、「実験をステージする」をクリックします。
AI は分析を接続し、コントロールのスナップショットを作成し、成長チームのレビュー用にタグ付けされた PR を開きます —Jira チケットも、開発のバックログの遅延もありません。
彼らは同じダッシュボードで A/B テストをスケジュールし、節約した時間を使ってローンチのためのソーシャルフックを作成します。
キャンペーンの速度は 2 倍になり、「小さなコピーの変更」に費やされるエンジニアリングの時間はほぼゼロに縮小します。
同じツール、より少ない退屈、より深い所有権。各役割はシステムにコンテキストを提供し、責任を持ち、AI に重労働をさせます — それが契約の実行です。
あなたのカーソルを保持し、あなたの ChatGPT を保持してください — 接着剤層 AI は、チームの共有スタックにしっかりと座りながら、それらと仲良くする必要があります。
大人向けの AI に向けての構築方法#
では、私たちはその完璧な月曜日にどれだけ近づいているのでしょうか？
Builder では、私たちは独自の立場にあり、特に大規模なチームの需要に応えるためにビジネスの方向を迅速に調整しています。
小さな歴史の教訓#
Builder は 2019 年にヘッドレス CMS とビジュアルエディタとして立ち上げられ、その目標はシンプルでした：開発者が自分の JavaScript フレームワークコンポーネントを表面化させ、非開発者がコードに触れずにそれらのコンポーネントを配置できるようにすることです。
それを実現するために、私たちはMitosisというオープンソースのレイヤーの上にエディタを構築しました。このレイヤーは、コンポーネントを一度記述し、チームがすでに実行している任意の JS フレームワークにコンパイルします。
この初期の方向性のおかげで、生成 AI の波が到来する前に、私たちの製品の 3 つの「成熟した部分」がしっかりと整いました：
- 完全機能のビジュアル編集： 私たちの Webflow のようなエディタは、デザイナーやマーケターがコンポーネントやページを調整するためのスペースを作り出し、任意の JS フレームワークにコンパイルされます。
- 決定論的なコンポーネントマッピング： 各 Figma フレームとそのデザイントークンは、実際のバージョン管理されたコンポーネントと双方向でやり取りできます — 見た目が似ているスニペットではありません。
- 実際のコンテンツを持つデータソース： CMS はマーケティングコンテンツを保持しますが、エンジニアが正確な UI 状態を構築するために必要なすべてのデータも保持します。
したがって、大規模な言語モデルが実用的になったとき、私たちは AI を白紙の状態に無理やり追加するのではなく、すでにスタックを尊重しているエディタ、マッパー、CMS にレイヤーを追加しました。
この先行優位性が、私たちの現在の AI 機能が基本を再発明するのではなく、退屈さを取り除くことに集中できる理由です。
これまでに作成したもの#
私たちの製品は、一連の段階的に採用可能なレイヤーとして機能します。大規模な書き換えは必要ありません。
- ビジュアルエディタ → コード. Bolt や v0 を思い描いてくださいが、Webflow レベルの調整可能性を持っています。AI にページのドラフトを作成させるか、任意の URL を貼り付けて即座に編集可能なクローンを作成し、手動で任意のクラス、トークン、またはブレークポイントを微調整します。21st.dev（またはあなた自身のリポジトリ）からの生産準備が整ったコンポーネントをドロップし、あなたの CSS を尊重するデザインを出荷します。
- Figma → ビジュアルエディタ（およびコード）. 無料の Figma Visual Copilot プラグインをインストールし、フレームを描画し、_エクスポート_をクリックします。Copilot はフレームの正確なオートレイアウトのジオメトリをクリーンでレスポンシブなフレームワークコードに変換し、リポジトリに直接ドロップするか、Builder のビジュアルエディタで微調整のために開きます。デザイナーはまだ Figma リンクを渡し、開発者は生産準備が整ったコードをスキャフォールドするために 1 つの CLI コマンドを実行します — 推測なし、スタイルのドリフトなし。
- リポジトリ → ビジュアルエディタ → リポジトリ PR [近日公開]。 誰でも任意の GitHub リポジトリをビジュアルエディタにインポートし、変更を自動的に PR として送信できる製品を間もなく発表します。マーケターやデザイナーは、すでに良好な形のコードでエンジニアリングチケットを提出できます。
- コンポーネントマッピング. Builder にどの_Figma_ボタンがどの_コード_ボタンに対応するかを一度教え、「公開」をクリックすれば設定完了です。それ以降、そのコンポーネントを使用するすべてのデザインエクスポートは、あなたのリポジトリからの_本物_のものを生成された差分にドロップします — プロップ、トークン、すべて — そのため、コードレビューはアイデアに焦点を当て、スタイルの不一致ではなくなります。
- Builder Publish: それは単なる_lorem ipsum_のパッチではなく、あなたの完全なヘッドレス CMS です。任意のページをリアルタイムのコンテンツと分析に接続し、マーケティングが開発者に頼ることなく A/B テストを実行できるようにします — そして、すべての機能が同じ屋根の下で提供される現代的な CMS に付随する完全なスキーマ、バージョニング、単一の真実のソースの特典を得ます。
まだ取り組んでいること#
私たちは近づいていますが、まだ完成していません。次のリストは：
- 手動コンテキストを減らす。 より多くのトークンとコンポーネントを自動検出し、マッピングがデータ入力ではなく自動補完のように感じられるようにします。
- より深い制御。 パワーユーザーがエディタを離れずにすべての AI ドラフト — プロップ、テスト、パフォーマンス予算 — を解析できるようにします。
- より広範なデザインシステムのサポート。 今日の Shadcn、明日のカスタムキット。マッピングは 1 クリックで完了すべきであり、週末を費やすべきではありません。
その「完璧な月曜日」のビジョンが私たちの目指す方向であり、私たちのロードマップは一つの機能ずつそこに到達させるでしょう。
私たちはあなたのフィードバックに非常に興味があります：デザイン、コード、マーケティングの間にまだどのようなギャップを感じていますか、そして「大人向けの AI」がどこであなたの痛みを最も軽減できるでしょうか？
あなたの考えをコメントに残すか、私たちのソーシャルメディアでタグ付けしてください（リンクはフッターにあります）。
80/20 を正しくする
もし_ソフトウェア 2.0_がネットワークがコードを書くことができることを教えてくれ、_ソフトウェア 3.0_の熱狂がそれらが全体のインターフェースを書くことができることを思い出させるなら、今日私たちが歩んできた中間の道 — それを_ソフトウェア 2.5_と呼びましょう — は、学習したプログラムが依然としてリント、予算、そして日光を必要とすることを主張します。
退屈な制約が非凡な自由を生み出します。
スピードは魅力的ですが、単独では 80/20 の法則をひっくり返し、人間を清掃作業に深く引き込んでしまいます。大人向けの AI はその取引を逆転させます。
ツールビルダーは、ウサギの穴ではなくレールを約束します。専門家はコンテキストと責任を約束します。マッピングされたコンポーネント、トークンのロック、すべての人間のレビューが次の世代をより予測可能にし — 予測可能性が本当の速度に複利をもたらします。
私たちは新しい世界に引きずり込まれる必要はありません。私たちは自分のペースでそこに歩いて行くことができ、どのモデルも偽造できない技術に時間を費やすことができます。