Claude Design Systemインポートでデザインからコードへの移行を加速

Claude Designは、デザインシステム全体をGitHubから直接インポートする機能をサポートするようになった。ClaudeがランダムなUIを生成する代わりに、あなたのコンポーネントライブラリ、カラーパレット、タイポグラフィ、スペーシングルールを学習し、それからあなたの基準を尊重したプロトタイプを構築する。これが重要なのは、デザイナーが望むものと開発者が実装するものとの間のギャップを埋めるからだ。

設定するには、リポジトリのルートに design-system-spec.json ファイルを作成し、デザイントークン、コンポーネントファイル、SVGアセットをマッピングする。ファイルはシンプルだ。ClaudeにリポジトリのURLを指定し、フレームワーク（React、Vueなど）を指定し、デザインリソースへのパスを列挙するだけである。これを一度コミットすれば、Claude Designを開くたびにシステムをインポートできる。

実際のワークフローはこうだ。あるプロダクトマネージャーが自社SaaS向けの新しい設定パネルを説明する。「設定ページを3つのタブ（プロフィール、請求、チーム）で再構築して。通知トグルは環境設定に移動して」と。Claude Designはあなたのシステムの実際のコンポーネントと色を使ってプロトタイプを生成する。デザイナーはキャンバス上でそれを確認し、スライダーでスペーシングを調整し、要素に直接実装メモを追加する。そして「Claude Codeに送信」を押すと、Claude Codeはスクリーンショットではなく、機械可読なスペックとしてすべてを受け取り、実装できる。すでにClaude ProやMaxを利用しているチームにとって、これはモックアップをコードに貼り付けて手作業で再構築するという苦痛なステップをなくす。

1つ制約がある。インポートはスナップショットである。インポート後にコンポーネントライブラリを更新した場合は、Claude Codeで /design-sync コマンドを実行して更新する。システム更新後にテストを再ビルドするようなものだと考えよう。同期は1つのコマンドであり、手作業のプロセスではない。