デザインシステムでClaude CodeのCSS推測を修正する方法

開発者がClaude Codeで株式分析ダッシュボードを構築中、よくある悩みに直面しました：AIが同じ位置ずれのdivに対して何度も壊れたCSSを生成する問題です。6回の試行で、パディングの修正、flexからgridへの切り替え、overflow: hiddenの追加などが失敗するか、問題を悪化させるだけでした。

問題：視覚的フィードバックなしでデザインするAI

開発者は、Claude Codeには視覚的フィードバックがないことに気づきました—ブラウザの出力を見ることができません。説明からパターンマッチングを行い、スタイリングを推測するため、「コンピュータを使ったことのない人がデザインしたような、技術的には有効なCSS」を生成することが多いのです。

解決策：デザインシステムで制約を与える

トークンを渡す代わりに、完全なデザインシステムの仕様を提供します。開発者は以下を使用しました：

/* spacing */
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 32px;

/* colors */
--bg-primary: #0f1117;
--bg-card: #1a1d27;
--accent: #3b82f6;
--text-primary: #e2e8f0;
--text-muted: #64748b;
/* type scale */
--text-sm: 12px;
--text-base: 14px;
--text-lg: 18px;
--text-xl: 24px;

そして指示します：「これらの値のみを使用してください。ハードコードされた数値はどこにも含めないでください。」これにより、Claudeは任意の決定をするための白紙の状態ではなく、推論のための枠組みを得ることができます。

構造とスタイルのプロンプトを分離する

ClaudeにHTMLとCSSを同時に書かせることは絶対に避けてください。開発者はプロセスを分割しました：

• 最初のプロンプト：「このダッシュボードのHTML構造のみを生成してください。スタイル属性、CSS、クラスはまだ含めないでください。意味的な構造だけです。」
• 2番目のプロンプト：「この構造に対して、上記のデザインシステムのみを使用してCSSを書いてください。」

これにより、Claudeはスタイルを適用する前にHTMLを固定された契約として扱うことを強制され、自身の出力に関する前提を見失うことを防ぎます。

結果：次のコンポーネントは6回の試行から1回に減りました。開発者はまた、このデザインシステムをCLAUDE.mdファイルで強制して、毎回貼り付ける手間を省けるかどうかという疑問も提起しました。