デザインシステムで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は任意の決定をするための白紙の状態ではなく、推論のための枠組みを得ることができます。