操作ガイド

D2C・D2C⁺でコードを生成する

D2C⁺は、選択したデザイン、コンポーネント、レイヤーからフロントエンドコードを生成します。React、Vue、Flutterに対応し、デザインのコンポーネントをプロジェクトのコンポーネントライブラリに対応付けられます。

利用条件

D2C⁺にはEnterprise Full-feature SeatまたはDev Seatと、エンタープライズスペース内のファイルが必要です。そのスペース内の個人ドラフトも対象です。エンタープライズスペース外のファイルには対応していません。

Dev Viewでコードを生成する

  1. エンタープライズスペース内の対象デザインファイルを開きます。
  2. 右上のDev Viewを有効にします。
  3. 右パネルのD2Cの選択欄でD2C⁺を選びます。
  4. ページ、コンポーネント、レイヤーを選択してコードを生成します。

コードライブラリとの対応付けが不要なら、コンポーネントパーサーの設定は必要ありません。プロジェクトのコンポーネントタグやプロパティを使う場合は、DSMで対応関係を設定します。

開発の流れに組み込む

ローカルMCPとリモートMCPからもdesign_to_codeを利用できます。詳しい設定とコンポーネントの対応付けは、D2C⁺クイックスタート(英語)を参照してください。生成した画面をプロジェクトに組み込み、必要なデータ、権限、業務上の動作を実装してテストします。