Claude Code の /design-sync で claude.ai/design のデザインシステムを CLI から操作してみた
この記事で分かること
Claude Codeの/design-sync機能を使って、claude.ai/designのデザインシステムをCLIから操作する方法が分かる。デザインとコードの連携を自動化する具体的な手順が得られる。
詳細要約
Claude Codeの`/design-sync`コマンドを使えば、CLI上でclaude.ai/designのデザインシステムを直接操作できる。実際の利用では、まず`/design-sync`と入力すると利用可能なデザインファイル一覧が表示され、そこから操作対象を選択する。同期後は、生成したコードにデザイントークンが自動適用されるため、手動でスタイル値を確認する手間が省ける。