Claudeでデザインする：Figmaからコードファーストプロトタイピングへのシフト

AI駆動のプロトタイピングが従来のデザインモックアップに取って代わる

デザイナーにとって、仕様書やFigmaモックアップを作成する従来のワークフローは、LLM を使用してコードベース内で直接機能的なプロトタイプを構築できる能力に取って代わられつつあります。Claude を使って動作するコードを生成することで、デザイナーは問題の記述からライブでインタラクティブな機能へと、デザインツールでコンポーネントを作成したりドキュメントを整形したりする「付随的な中間作業」なしで移行できます。

このシフトにより、デザイナーはアイデアの実現可能性を証明し、すぐに実ユーザーでテストできるようになります。エンジニアに概念実証を作らせる代わりに、デザイナーは「feature」（プルリクエスト）として、意図通りに動作するものを提出でき、デザインとエンジニアリングチーム間で通常必要とされるやり取りを減らすことができます。

コードファーストデザインワークフロー

AI を通じてデザインをコードに直接実装することは、従来のワイヤーフレーム作成を省く特定の反復ループに従います：

Problem Definition: 問題と提案された解決策の説明を書きます。
AI Generation: 説明をエディタ内でClaudeへのプロンプトとして使用し、基本的な機能を生成します。
Rapid Iteration: コピーの微調整、キーボードショートカットの追加、プロンプトの調整など、無制限の反復で機能を洗練させ、手動デザイン更新の摩擦を排除します。
User Validation: 変更を開発環境にプッシュし、即座にユーザーフィードバックを得ます。
Submission: 動作するプロトタイプをプルリクエストとして提出し、レビューを受けます。

このアプローチは、Jane Street の内部SQL方言である JSQL 用の LLM プロンプトインターフェースの作成で実証されました。デザイナーは静的なモックアップではなく、実際の成果物と共に数日間生活しテストしました。

AI統合デザインにおける課題

力を与える一方で、コードファーストデザインへの移行は開発ライフサイクルに新たな緊張をもたらします：

レビューアのジレンマ

レビューアが「完全に仕上げられた」機能を提示されたとき、協働的なデザイン入力の機会が減少する可能性があります。これを緩和するために、Jane Street はこれらの提出に対して特定のメンタルモデルを採用しています：

Prototypes as Living Docs: コードは使い捨てとみなされ、提案として機能します。
Feedback-Centric Review: レビューアの主な役割は、コードだけでなくデザインとユーザー体験に対するフィードバックを提供することです。
Production Handoff: デザインが検証されると、レビューアは通常アイデアを引き継ぎ、別の機能として実装し、プロダクションレベルのコード品質を確保します。

創造的制約

LLM に依存することで、デザイナーの思考が流動的で創造的な状態から純粋に反復的なものへとシフトするリスクがあります。デザイナーは AI が生成できると信じる範囲に制約されるため、白紙のキャンバスや紙とペンのアプローチで浮かび上がるような型破りなアイデアを見逃す可能性があります。

コミュニティの視点と反論

このシフトに関する技術的議論は、いくつかの重要なトレードオフを浮き彫りにしています：

Engineering Friction: 一部のフロントエンドエンジニアは、書面化された仕様書の減少が認知的負荷を増大させると報告しています。彼らは、意図された変更を判断するために生成されたコードを読むことと、"slop"（意図しない AI 生成の変更）を読むことが、Figma ファイルに従うよりもフラストレーションが大きいと指摘しています。
Design Quality vs. Speed: AI が「初期段階の発散的探索」を加速する一方で、出力品質が現代のウェブの定石に従いがちで、特にスペースが限られるモバイルインターフェースにおいては手作りデザインの精度に欠けると主張するデザイナーもいます。
The Role of Design Tools: 一部の実務者は、協働と高精細な仕上げのために依然として Figma を好み、AI は初期プロトタイプに最適で、最終的な調整は Figma がツールとして残るべきだと示唆しています。

"ここでの利点はデザイナーがコードを学ぶことです…しかし、コードでデザインすることはテクノロジー優先です。デザインの目的—人間の目的のために成果物を形作ること—は、コードの厳格なルールから始めるのではなく、むしろそうしない方が良いと主張できるでしょう。"

技術的背景：OCaml と Bonsai

Jane Street では、このワークフローは特に有用です。なぜなら同社は OCaml と Bonsai フレームワークを含む特殊な技術スタックを使用しているからです。これらのマイナーな言語に不慣れなデザイナーにとって、LLM は橋渡しとなり、関数型プログラミングの熟練に何年もかからずにコードベースへ技術的に貢献できるようにします。