# Tastemaker Tastemakerは、製品のコンテキストやビジュアルリファレンスをUI画面、アセット、コントラストを確認済みのカラーパレット、ローカルなデザイン判断へと変換する、コーディングエージェント向けのワークフロースキルです。Claude Code、Windsurf、Gemini CLIなどのエージェントを対象としています。 - Findings24: - ウェブサイト: - 料金: Freemium - カテゴリー: AIコードアシスタント, AIデザインアシスタント, AI開発者ツール ## Tastemakerとは？ Tastemaker は、コーディングエージェントがより一貫したビジュアルシステムでインターフェースを構築できるようにするワークフロー機能です。製品コンテキストと参照資料を取り込み、それを画面、アセット、チェック、そしてエージェントが後の作業で再利用できる記憶済みのデザイン決定へと変換します。 エージェントに「もっとセンスがよくなる」ことを求めるのではなく、この製品は具体的な手順に焦点を当てています。画面のスコープを定め、パレットの土台を作り、コントラストを確認し、アセットをまとめ、インターフェースを構築し、決定事項をローカルに保存します。ホームページでは Claude Code、Windsurf、Gemini CLI のようなエージェント向けとして位置づけられており、出力はホスト型サービスの背後ではなくプロジェクトの隣に保存されます。 ## Tastemakerでできること ### ブリーフからの画面スコープ設定 このワークフローは、色やタイポグラフィの選定を行う前に、プロダクトブリーフから画面のスコープを定めるところから始まるため、レイアウトシステムは推測ではなく構造から始まります。 ### コントラスト確認付きの生成パレット ソース画像から参照ピクセルを読み取ったり、プロジェクトのムードに合わせて新しいパレットを生成したりしたうえで、すべての合法的な色の組み合わせをコントラスト計算で確認できます。 ### 構築されたビジュアルアセット Tastemaker は、一貫したアセットセットを出力します。絵文字の代替や不完全なビジュアルシステムではなく、アイコン、必要に応じた画像、構成されたマーク、ファビコンを生成します。 ### テキストのみの主張ではなくレンダリング可能な証拠 同じパスで UI モックアップ、フロー、チャート、ビフォーアフター状態、GSAP モーションを生成できるため、画面は説明文ではなく証拠として作られます。 ### ローカルファイル内のプロジェクト記憶 解決済みのプロジェクト設定はローカルファイルに保存され、開発者の決定は後続作業のためのプロファイルとして引き継がれます。 ### リポジトリに適した出力 サイトでは、Markdown、Python、SVG、CSS、JavaScript を使ったプレーンテキストのファイルベース出力モデルが示されており、結果をリポジトリ内で検査できます。 ## 利用シーン ### マーケティングおよびプロダクトのランディングページ 一貫したパレット、適切な書体の組み合わせ、実際のアイコン、モーションを備えたランディングページをコーディングエージェントに生成させたいときに使います。 ### アプリケーションの UI ステート 一貫したビジュアルシステムから空状態、読み込み状態、表示済み状態を構築する必要があるプロダクトやアプリのシェルに使います。 ### 参照を基にしたリデザイン 参照画像、ムードボード、既存のブランド方針を、エージェントが元にして構築できる実際のトークンやアセットに変えたいときに使います。 ### 導入前後のプロンプト比較 同じプロンプトがスキル導入前後でどのように振る舞うかを確認したい比較作業に使います。 ### デザインシステムの継続性 後続の画面でも同じビジュアル決定を維持し、セッション間でぶれないようにするためのローカルなスタイル記憶が必要なプロジェクトで使います。 ## よくある質問 ### Tastemaker はどのようにインストールして使い始めますか? Tastemaker は、\`npx skills add codeswithroh/tastemaker\` のようなコマンドでコーディングエージェントのワークフローにインストールします。ホームページでは、エージェントに UI の構築、スタイリング、改善を依頼したときに、特別なフレーズやホスト型 API なしで起動できるとも説明されています。 ### Tastemaker はどのコーディングエージェントをサポートしていますか? Claude Code、Windsurf、Gemini CLI のようなコーディングエージェント向けに設計されています。ホームページでは、Claude Code のプラグインマーケットプレイスと手動インストール経路にも言及されています。 ### Tastemaker は無料ですか、有料ですか? ソースでは、無料のコア機能と、月額 8 ドルで利用できるスポンサー限定の Aesthetic Modes が示されています。別の料金ページはサイト上にありません。 ### Tastemaker はプロジェクトに何を残しますか? このワークフローは、\`.tastemaker/style-lock.md\`、\`decisions.log\`、\`profile.md\`、\`design/assets\`、および実際の画面用の実装ファイルなど、具体的なプロジェクトファイルとアセットを生成します。 ### Tastemaker はどのような UI 作業向けですか? ランディングページ、アプリのシェル、プロダクト画面、比較など、エージェントが参照ベースのビジュアル、確認済みの色のコントラスト、アセット、モーションを必要とする UI 作業を対象としています。 ## クイック情報 - **カテゴリ**: 開発者向けツール - **主な用途**: コーディングエージェント向けの UI・デザインワークフロー - **対応エージェント**: Claude Code、Windsurf、Gemini CLI - **インストール**: \`npx skills add codeswithroh/tastemaker\` - **出力**: Markdown、Python、SVG、CSS、JavaScript、およびローカルのプロジェクトファイル - **料金形態**: 無料のコア機能と、月額 8 ドルのスポンサー限定モード