Claude Design と Figma Make の出力を並べて読む：UI 生成 AI で「ピクセル」が消えた後に残るもの
同じデザインシステムと PRD を Claude Design と Figma Make に読み込ませて出力を並べたとき、デザイナーの仕事の本質はどこに移るのか。個人開発と UI 設計を 12 年続けてきた立場から、二つの出力傾向を読み解きます。
Claude Designの全体像（ — Figma・Canvaと並ぶ選択肢になりうるのか
2026年4月17日に発表されたClaude Designの位置づけを、アプリ開発者の実務視点で整理します。既存デザインツールと何が違うのか、LPを1ショット生成して確かめた実力、誰にとって価値があるのか、FigmaやCanvaと併用する考え方、使い始める前に知っておきたい注意点まで扱います。
Cowork × 複数MCPオーケストレーション：Figma / GitHub / Stripe を連携させる個人開発自動化システムの全設計図
Cowork で Figma・GitHub・Stripe などの複数 MCP を横断するオーケストレーションを設計・実装する方法を徹底解説。個人開発者がゼロから構築できる自動化システムの全設計図を公開します。
Claude × 画像生成AI — アプリ用ビジュアル素材の作成から編集までの
Claudeの画像生成機能でアプリ用のイラスト・背景・UIアイコンを制作する流れをまとめました。素材別のプロンプト例、生成品質を上げるテクニック、Figmaへの取り込みと最適化、SVG化と形式選択、タスク管理アプリを例にした素材一式の実装例、他サービスとの比較まで扱います。
Claude × Figma × Stitch × Canva — アプリアイコンのデザイン比較と最適化ワークフロー
Figma・Stitch・Canvaの3ツールで同じアプリアイコンを実際に制作し、特性・操作性・AI連携を比較しました。ケーススタディに基づく比較表、Claudeを活用したデザインレビューワークフロー、実装時間の分析、プロジェクトに応じた使い分けの基準までを実践的に解説します。
Cowork コネクタ活用ガイド — 外部サービスとの連携で AI の力を最大化
Coworkのコネクタ機能で、CanvaやFigma、Slack、Asanaといった外部サービスとClaudeを連携させる方法を解説します。利用可能な主なコネクタと接続手順、MCP Appsによる対話型ツール統合、実践的な活用例、Claude in Chromeとの使い分けまでを整理しました。
Figma × Claude Code 連携ガイド — MCP でデザインとコードを双方向に橋渡し
FigmaのMCPサーバーを使い、Claude Codeとデザインデータを双方向に連携する方法を解説します。セットアップの手順、デザインからコードを生成するDesign to Code、コードからデザインへ反映するCode to Canvas、FigJam連携、トラブルシューティングまで扱います。