# CC Learn - Why Claude Design Is Already My Favorite

Claude Design（β版）を使った実践レビュー。既存プロジェクトのリデザインやゼロからの新規作成を検証し、初期ワイヤーフレーム作成が2〜3日→5〜10分（95%削減）、デザイン→コード変換が即時（100%削減）と劇的な効率化を実証。技術スタックはNext.js・Tailwind CSS・Framer-motion・Rechartsを自動生成。Claude Codeとのリポジトリ連携・GitHub連携も可能。過剰トークン消費やブランドガイドライン乖離などの注意点も整理されている。

## ポイント
- Claude Designはhttps://claude.ai/designからアクセス可能、Pro/Teamプラン必須で段階的ロールアウト中
- 既存プロジェクトをドラッグ&ドロップして'Redesign this'と入力するだけでリデザイン可能
- 初期ワイヤーフレーム95%削減・レスポンシブ実装100%自動・プロトタイプ→本番が週単位→数時間
- Next.js・Tailwind CSS・Framer-motion・Rechartsを自動生成、Claude Codeとのリポジトリ丸ごと連携も対応
- トークン過剰消費対策として必要最小限のフォルダのみ添付、色・フォント・コンポーネントライブラリは事前テキスト共有が有効

## 関連ページ
[[CC Learn - Claude Design Just Dropped - Full Tutorial (Slides, Websites, Designs)]] [[CC Learn - Everything NEW in Claude Code Explained (March 2026 Edition)]] [[CC Learn - The Ultimate Claude Code Guide | MCP, Skills & More]] [[2026-04-21 Claude Code最新ワークフロー学習]] [[MCP vs CLI 選択基準]]

## 関連概念（未作成）
`Claude Design ブランドガイドライン統合ワークフロー` `デザイン→コード変換コスト比較（Claude Design vs Figma→Dev handoff）` `Claude Design 商用利用ライセンス確認チェックリスト`