CLAUDE CODEにデザインを理解させる小技（アスキーアート＋色分け指示）

正直に言うと、 CLAUDE CODEはフロントの理解が弱い。

バックエンドやロジックはかなり優秀なんだけど、 UIの「微妙なニュアンス」が伝わらないことが多い。

よくあるストレス

こんな経験ない？

レイアウト指示したのにズレる 余白が微妙に違う Flexの意図を理解してない 「それじゃない」UIが出てくる

で、修正依頼すると

👉 なんかズレた修正が返ってくる 👉 さらにズレる 👉 おじいちゃんと会話してる気分になる

「分かってる？分かってない？」状態になるやつ

ざっくりは理解できる

ちなみに完全にダメなわけじゃない

画面キャプチャ HTMLモック Figmaのスクショ

こういうのは割とちゃんと理解する

ただし問題はここ👇

👉 微調整が壊滅的に弱い

解決策①：アスキーアートで構造を固定する

これが一番効く

レイアウトを「文章」じゃなくて 構造として見せる

例 +-------------------------------+ | Header | +-------------------------------+ | Sidebar | Main Content | | | | | | +-------------+ | | | | Card | | | | +-------------+ | +-------------------------------+ | Footer | +-------------------------------+ ポイント ブロック単位で分ける 横並び・縦並びを明示 ネストも見せる

👉 AIが「構造」として理解できるようになる

解決策②：色で役割を指定する

さらに効くのがこれ

DIVごとに色を割り当てる

指示例 Header: 赤 Sidebar: 青 Main: 緑 Card: 黄色

そしてこう言う👇

色ごとにDIVを分けて、その通りにレイアウトして

これやると何が起きるか

👉 AIが「視覚的な区切り」を理解する

解決策③：CSSを言語化する

これめちゃ重要

「いい感じに」って言うと100%失敗する

NG いい感じに中央寄せ バランスよく配置 OK display: flex justify-content: space-between gap: 16px width: 300px固定

👉 曖昧さを全部消す

組み合わせるとこうなる

最強パターン👇

アスキーアートで構造 色でブロック定義 CSSを具体的に指示 実際の指示テンプレ 以下のレイアウトを作ってください

構造： +----------------------+ | Header | +----------------------+ | Sidebar | Main | +----------------------+

色分け： Header: 赤 Sidebar: 青 Main: 緑

CSS条件：

• 全体はflex
• Sidebarは幅250px固定
• Mainは残り幅
• gap: 16px

👉 これでほぼズレなくなる

なぜこれが効くのか

CLAUDE CODEは

文章 → 解釈が曖昧 構造 → 強い 制約 → 強い

つまり

👉 「解釈」させると負ける 👉 「制約」すると勝つ

まとめ

CLAUDE CODEにUIを理解させるコツ

アスキーアートで構造を固定 色で役割を分離 CSSは具体的に書く 曖昧な表現は禁止 おまけ

これやらないとどうなるか

👉 「なんか違うUI」が無限生成される

これやると

👉 一発でかなり近いものが出る