セットアップ
プラグインを試す
Designプラグインには、フロー記述とコンポーネントライブラリを読み取り、配線済みのクリック可能なHTMLビルドを出力するように構成された/design-handoffが既に含まれています。管理者がプラグインを管理していてまだ利用できない場合は、このステップをスキップしてください。以下の内容はこれを必要としません。
/design-handoffGenerate developer handoff specs from a design./ux-copyWrite or review UX copy — microcopy, error messages, empty states, CTAs.ツールを接続する
Claude Coworkは、お使いのシステムと直接連携することでより強力になります。権限とアクセスはあなたが管理します。ツールアクセスについて学ぶ（新しいタブで開きます）。
設定するには、Coworkでカスタマイズ → コネクタに移動してください。
作業フォルダを設定する
使用するファイル（フロー記述または仕様書、コンポーネントライブラリのエクスポート、トークン、サンプルコンテンツ）をマシン上の1つのフォルダにドラッグし、Coworkにそのフォルダを指定してください。Coworkはそこから読み取り、プロトタイプのHTMLをサブフォルダに書き戻します。定期的にプロトタイプを作成する場合は、そのフォルダからCoworkプロジェクトを作成（新しいタブで開きます）すると、ライブラリと規約が維持されます。
プロンプト
これをClaude Coworkにコピーする
このフォルダ内のフローのクリック可能なHTMLプロトタイプを、デザインシステムライブラリのコンポーネントのみを使用して構築してください。ナビゲーションを配線し、現実的なプレースホルダーデータを使用して、prototype/index.htmlに書き出してください。そうすればブラウザでクリックして試せます。
これがうまくいく理由
自分の素材だけに限定してください。 UIを創作しないこと。すべてが実際のライブラリに対応します。
各インタラクションが何をすべきかを記述してください。 クリックすると実際に画面が移動します。ユーザーは画像ではなくフローをテストします。
現実的なサンプルコンテンツを依頼してください。 lorem ipsumは使わず、画面が実際の製品のように見えるようにします。
ソースファイルを直接渡してください。 トークンとCSSはそのままプロトタイプに反映されます。
より良いドラフトを得る
参考にする例を追加してください。 気に入った例をフォルダに入れると、Coworkがその構造とトーンに合わせます。
不確実な点にフラグを立てるよう依頼してください。 「自信がない部分にはフラグを立ててください」と追加すると、ドラフトを確認する際に最初に見るべき箇所がわかります。
Coworkを自分用に調整する
プラグインの/design-handoffは汎用的な出発点です。ステップ2で実際に参加者に見せられるビルドが生成されたら、Coworkにあなた独自のバージョンのスキルを書くよう指示してください。コンポーネントの命名規則、データフィクスチャ、インタラクションの規約、そしてプロトタイプが常に収まるラッパーページを組み込みます。数分の対話で、それ以降はあなたの基準でスキルが実行されるようになります。
このタスクでこれまでに行ったことをスキルにしてください。または、私のフィードバックを反映して/design-handoffスキルを編集してください。
繰り返し使えるようにする
アーティファクトとして共有する
メールで送り回さなければならないプロトタイプは古くなってしまいます。Coworkにアーティファクトとして公開するよう依頼すれば、すべてのレビュアーとテスト参加者が1つのリンクを持つことになります。更新するにはスキルを再実行する（またはスケジュール設定する）だけです。
そのプロトタイプをアーティファクトとして公開してください。隅に小さな「v2、v3」のバージョンスタンプを追加してください。
仕様が変わるたびに再構築する
仕様が変われば、依頼しなくてもプロトタイプが追従するべきです。プロンプトに/scheduleと入力するか、CoworkのサイドバーでScheduledを開き、カスタマイズしたスキルがフォルダ内の内容から毎朝再構築されるように設定してください。
/schedule 平日午前7時に、Prototypes/Invite-Flowの変更を確認し、/design-handoffを再実行して、prototype/index.htmlを再構築し、バージョンスタンプを更新してください。
平日は毎朝7時に、プロジェクトフォルダ内の仕様またはライブラリの変更を確認し、/design-handoffを再実行して、バージョンスタンプを更新したクリック可能なHTMLを再構築します。
チームメイトと共有する
カスタマイズされた/design-handoffには、コンポーネントマップ、データフィクスチャ、ラッパーページが組み込まれています。これを共有すれば、チームのどのデザイナーも同じ方法で仕様からクリック可能なビルドまで進めるようになり、コンセプトテストがフレームを手作業で配線できる人を待つ必要がなくなります。