codeswithroh/tastemaker

何を解決するか

AIで生成されたユーザーインターフェースは、通常、インディゴからパープルのグラデーションやソフトシャドウのカードといった「単一文化」のデザインに陥りがちです。これは、モデルが実際のデザインセンスやユーザーの好みの記憶を持たないためです。Tastemakerは、コーディングエージェントに構造的なデザインシステムと計算制約のセットを提供し、UIがプロフェッショナルでユニーク、かつアクセシビリティを満たすことを保証します。

動作方法

Tastemakerは、Claude Code、Windsurf、Gemini CLIなどのコーディングエージェントのスキルとして機能し、一般的なデフォルトを厳格なデザインワークフローに置き換えます：

• 計算によるパレット生成： リストから選ぶのではなく、Pythonスクリプトを使って、プロジェクトの「ムード」（例：プレミアム、テクニカル、遊び心）に基づき、OKLCH色空間を使用して新しく、コントラスト検証済みのパレットを生成します。
• ピクセルベースの抽出： モデルのテキストによる「雰囲気」の説明に頼るのではなく、スクリプトで実際のピクセル値を参照画像から読み取ります。
• 強制的な制約： コントラストマトリクススクリプト（check_contrast.py）が数学的に色の組み合わせがWCAGアクセシビリティ基準を満たしているかを検証し、可読性を単なる提案ではなく、硬い制約として扱います。
• スロップ防止スキャン： 専用スクリプト（anti_slop_scan.py）が一般的なAIデザインの定番（例：一般的なグラデーション、h-screenの使用、プレースホルダーテキスト）を検出・警告します。
• 永続的なメモリ： デザインの決定はローカルファイル（.tastemaker/style-lock.md）にロックされ、個人の好みはグローバルプロファイル（~/.tastemaker/profile.md）に保存され、セッションやプロジェクト間で一貫性が保たれます。

対象ユーザー

デザインシステムを手動で管理したり、モデルのデフォルトの美学的傾向と戦ったりせずに、高品質で視覚的に明確なランディングページやアプリ画面を構築したいAIコーディングエージェントを利用する開発者。

特徴

• 動的パレットジェネレーター： ムードと調和ルールに基づき、プロジェクトごとにユニークで読みやすいカラースキームを生成。
• リアルアセットの取得： Openverse、Iconify、unDrawと統合し、著作権フリーの写真、アイコン、イラストを取得。
• Firestore不要のローカル実行： ホストされたバックエンドやAPIキーを一切必要とせず、ユーザーのマシン上で完全に実行。
• モーション統合： GSAPとScrollTriggerをデフォルトで実装し、プロフェッショナルなアニメーションを提供。共通のアニメーションエラーを防ぐための監査スクリプトも備える。
• デザインロック： プロジェクト固有のログと耐久性のあるユーザープロファイルに決定を記録することで、「スタイルのずれ」を防止。