最初からコンポーネント設計で頼む

「まず全体を作ってから分割しよう」という考えでClaude Designを使い始めて、見事に詰んだ。デザインは最高なのに、Reactに落とそうとした瞬間に「どこで切るの？」という問題が噴出した。今は最初からコンポーネント単位で頼むフローに変えている。

まずコンポーネント一覧を出させる

ページ全体を頼む前に、必要なUIコンポーネントをリストアップさせる。

このランディングページで必要なUIコンポーネントを
Atomic Design（Atoms / Molecules / Organisms）に沿って一覧形式で出して。
実装時の役割と、含むべき要素も添えて。

これをやるだけで、「HeroSection / FeatureCard / NavBar / TestimonialBlock」みたいなリストが出てくる。そこから個別に作っていくと、後のコード実装がスムーズになる。

失敗談：全部入りで頼んだら修正が地獄だった

採用ページをまるごと一枚で作ってもらったことがある。デザインの完成度は高かったが、後から「このデザインをコンポーネントに分割して」とClaude Designに追加依頼したら、命名が全然ブレた。さっきは HeroSection だったのに今度は TopBanner になったりして、Claude Codeに渡したときに整合性がゼロだった。

最初からコンポーネントを意識してデザインを進めないと、後で必ず詰む。

※Claude Design: Anthropic Labsが開発したAIビジュアルデザインツール。テキストプロンプトからUI・スライド・マーケ資料などを生成する。※Claude Code: AnthropicのAIコーディングツール。Claude DesignのデザインをそのままコードにするCLIツール。

バリエーションをまとめて出させる

Buttonコンポーネントを以下のバリエーションで作って：
- 種類: Primary / Secondary / Ghost
- サイズ: SM / MD / LG
- 状態: Default / Hover / Disabled / Loading
全バリエーションを1枚のデザインシートに横並びで出して。

こう指定すると、バリエーション対応表が一枚で出てくる。Storybookのstoriesに1:1で対応させやすいし、デザイントークンの定義にもそのまま使える。

使い回せる指示フォーマット

【役割】UIデザイナー
【対象コンポーネント】{名前}
【バリエーション】{一覧}
【デザイントーン】{ブランドカラー・フォント}
【出力形式】全バリエーションを横並びにしたデザインシート

このフォーマットをプロンプトの先頭に置くと、コンポーネントが変わるだけで使い回せる。各コンポーネントのデザインを個別に詰めてから、Claude Codeに「このコンポーネントをTailwindで実装して」と渡す流れが今のNANAKAZOKUの標準になっている。

実装への繋ぎ方についてはNext.jsで実装するも参照してほしい。

※プロンプト: AIへの指示文。Claude Designでは自然言語でデザインを指示する。