s0xDk/refactoring-ui-skill

解決する課題

AI が生成したユーザーインターフェースが「素人っぽく」見えたり「何かが違う」と感じられる問題を解決します。Claude Code に具体的な機械的デザインルールのセットを提供することで、AI は推測やアドホックな値を使用する代わりに、『Refactoring UI』という書籍に基づいたプロフェッショナルなデザインシステムを適用できるようになります。

仕組み

これは Claude Code 用の「スキル」であり、一連の Markdown ファイルと CSS tokens で構成されています。AI に対して、スペーシング、タイポグラフィ、カラー、シャドウの具体的なスケールを提供するとともに、曖昧な UI の不満を機械的な修正に変換するための診断テーブルを提供します。アクティブ化されると、Claude はこれらの固定されたスケールと手法を使用して、単なるフォントサイズだけでなく、ウェイトとカラーを通じて視覚的な階層と奥行きを構築します。

対象者

プロのデザイナーでなくても、Web インターフェースの視覚的な品質を向上させたいと考えている Claude Code を利用する開発者。

ハイライト

• 固定のデザインスケール: 制約されたスペーシング、書体、カラー、シャドウのスケールを使用して、一貫性を確保します。
• 診断ツール: 「安っぽく見える」といった曖昧なフィードバックを、具体的で実行可能なデザイン修正に変換します。
• 詳細なリファレンス: HSL と色相回転を使用してゼロからカラーパレットを構築するためのシステムが含まれています。
• コントラスト検証済みの Tokens: コントラストが検証されたスターター用の CSS tokens セットを提供します。