Activity
デザインシステム管理
デザイントークン・コンポーネントライブラリ・ガイドラインを一元管理し、デザインと実装のトークン同期およびコンポーネント一貫性レビューを通じてUI品質を維持する
デザインdesign-system-management
詳細定義
デザイントークン・コンポーネントライブラリの一元管理と継続的な整備を通じて、デザインと実装の一貫性を維持するプロセス
アクション
アウトプット
所属サブプロセス
AI活用例
3件Storybook MCP でコンポーネントカタログ連携ツールStorybook
Component Manifest（バリデーション済みprop型・使用例・JSDoc）、コンポーネント検索で重複生成防止、Story URL取得でビジュアル検証。既存DSコンポーネントの自動再利用。
Code to Canvas — コードからFigmaへ逆変換ツールFigma
Claude Codeで構築したUIをFigmaの編集可能フレームに変換。スクリーンショットではなく実際に編集可能。マルチスクリーンフローの一括キャプチャ、実装UIのデザインレビュー逆輸入に。
Figma ↔ Claude Code 双方向デザインループ記事railly.dev
Figma MCP + Code to Canvasの完全双方向ワークフロー。デザイナーがFigmaで変更→Claude CodeがMCPで差分取得→コード更新→Code to Canvasで戻す。デザインとコードの乖離をリアルタイム解消。