Activity
デザインデリバリー
デザイン成果物を開発チームに引き渡す工程。仕様書共有・Design-to-Codeによる直接コード生成など、手段を問わずデザインと実装の橋渡しを行う
デザインdesign-delivery
詳細定義
デザインを開発チームに引き渡すための詳細な仕様作成と情報共有活動。寸法、色、フォント、アセット、インタラクション仕様を明確に伝達し、正確な実装を支援する。
AI進化方向性
デザイントークン自動同期・コード自動生成により、デザイナーと開発者の引き継ぎ摩擦がゼロに。AIがデザインスペックと実装の差分を自動検出
アクション
アウトプット
所属サブプロセス
AI活用例
5件デザイントークン自動同期・コード自動生成により、デザイナーと開発者の引き継ぎ摩擦がゼロに。AIがデザインスペックと実装の差分を自動検出
Claude Code /handoff コマンドでハンドオフ自動化ツールMC Dean
63のデザインスキル集の /handoff コマンド。寸法・挙動・エッジケース・QAチェックリスト付きの開発者向けパッケージを自動生成。
Claude Code Hooks でデザインワークフロー自動化ドキュメントAnthropic
PostToolUseでCSS自動フォーマット、PreToolUseでデザイントークン保護、Stopで仕様準拠検証。ライフサイクルイベントでデザインQAを自動化。
Figma MCP → プロダクション品質のReactコンポーネント出力ツールZenn kimmaru
get_variable_defsでデザイントークン自動抽出→CSS変数/Tailwind設定に変換→バリアント・ステート含むReactコンポーネント生成→Storybook連携でドキュメントも自動生成。
Webflow MCP — ノーコードデザインのAI連携ツールWebflow
CMS管理・コレクション作成・クラス更新・変数管理・SEO監査・カスタムコード適用。3分セットアップで自然言語からWebflowプロジェクトを操作。
非技術メンバーの環境構築・オンボーディング記事Builder.io
Claude Code /setup スキルでSSHキー・Node.js・パッケージマネージャーを自動セットアップ。Plan Modeで変更提案のみ先に確認、権限モードでAI自律度をコントロール。