昨年の 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 の出力がどのようになるかを簡単に予測できるべきです。
- 自分の専門分野に留まる。 Yet-Another-Canvas を発明するのではなく、ツールは最高のチームがすでに使用しているソフトウェアに組み込まれます：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 テストをスケジュールし、節約した時間を使ってローンチのためのソーシャルフックを作成します。
キャンペーンの速度は倍増し、「小さなコピー変更」に費やされるエンジニアリングの時間はほぼゼロに縮小します。
同じツール、より少ない退屈、より深い所有権。各役割はシステムにコンテキストを提供し、責任を持ち、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 はフレームの正確な Auto-Layout ジオメトリを、リポジトリに直接ドロップできるクリーンでレスポンシブなフレームワークコードに変換します。デザイナーは依然として Figma リンクを渡し、開発者は生産準備が整ったコードをスキャフォールディングするために 1 つの CLI コマンドを実行します — 推測なし、スタイルのドリフトなし。
- リポジトリ → ビジュアルエディタ → リポジトリ PR [近日公開]。 誰でも任意の GitHub リポジトリをビジュアルエディタにインポートし、変更を自動的に PR として送信できる製品を間もなく発表します。マーケターやデザイナーは、すでに良好な形のコードでエンジニアリングチケットを提出できます。
- コンポーネントマッピング. Builder にどの_Figma_ボタンがどの_コード_ボタンに対応するかを一度教え、「公開」をクリックすれば設定完了。それ以降、そのコンポーネントを使用するすべてのデザインエクスポートは、あなたのリポジトリからの_本物_のものを生成された差分にドロップします — プロップ、トークン、すべて — コードレビューはアイデアに焦点を当て、スタイルの不一致ではなくなります。
- Builder Publish: それは単なる_lorem ipsum_のパッチではなく、あなたの完全なヘッドレス CMS です。任意のページをリアルタイムコンテンツと分析に接続し、マーケティングが開発者に頼ることなく A/B テストを実行できるようにします — そして、すべての機能が同じ屋根の下にある現代的な CMS に付随する完全なスキーマ、バージョン管理、単一の真実のソースの特典を得ます。
まだ取り組んでいること#
私たちは近づいていますが、まだ終わっていません。次のリストは：
- 手動コンテキストを減らす。 より多くのトークンとコンポーネントを自動検出し、マッピングがデータ入力ではなく自動補完のように感じられるようにします。
- より深い制御。 パワーユーザーがエディタを離れずにすべての AI 草案 — プロップ、テスト、パフォーマンス予算 — を開けることを許可します。
- より広範なデザインシステムのサポート。 今日の Shadcn、明日のあなたのカスタムキット。マッピングはワンクリックで行うべきであり、週末を費やすべきではありません。
その「完璧な月曜日」のビジョンは私たちが向かっているところであり、私たちのロードマップは一つの機能ずつそこに到達させてくれます。
私たちはあなたのフィードバックに非常に興味があります：デザイン、コード、マーケティングの間にまだどのようなギャップを感じていますか？「大人向けの AI」がどのようにあなたの痛みを最も軽減できるでしょうか？
あなたの考えをコメントに残すか、私たちのソーシャルメディアでタグ付けしてください（リンクはフッターにあります）。
80/20 を正しくひっくり返す
もし_ソフトウェア 2.0_がネットワークがコードを書くことができることを教えてくれ、_ソフトウェア 3.0_のハイプがそれらが全体のインターフェースを書くことができることを思い出させてくれるなら、今日私たちが歩んできた中間の道 —_ソフトウェア 2.5_と呼びましょう — は、学習したプログラムが依然としてリント、予算、そして日光を必要とすることを主張します。
退屈な制約が非凡な自由を生み出します。
スピードは魅力的ですが、それだけでは 80/20 の法則をひっくり返し、人間を清掃作業に深く浸らせます。大人向けの AI はその取引を逆転させます。
ツールビルダーはレールを約束し、ウサギの穴を約束しません。専門家はコンテキストと責任を約束します。すべてのマッピングされたコンポーネント、すべてのトークンロック、すべての人間のレビューが次の世代をより予測可能にし — 予測可能性が実際の速度に複利するのです。
私たちは新しい世界に引きずり込まれる必要はありません。私たちは自分のペースで歩くことができ、どのモデルも偽造できない工芸に時間を費やすことができます。