ブリーフからの画面スコープ設定
このワークフローは、色やタイポグラフィの選定を行う前に、プロダクトブリーフから画面のスコープを定めるところから始まるため、レイアウトシステムは推測ではなく構造から始まります。
Tastemaker
認証するTastemakerは、製品コンテキストとビジュアル参照をUI画面、アセット、コントラスト確認済み配色、ローカルなデザイン決定に変える、Claude Code、Windsurf、Gemini CLI向けのワークフロー機能です。
Tastemaker とは
Tastemaker は、コーディングエージェントがより一貫したビジュアルシステムでインターフェースを構築できるようにするワークフロー機能です。製品コンテキストと参照資料を取り込み、それを画面、アセット、チェック、そしてエージェントが後の作業で再利用できる記憶済みのデザイン決定へと変換します。
エージェントに「もっとセンスがよくなる」ことを求めるのではなく、この製品は具体的な手順に焦点を当てています。画面のスコープを定め、パレットの土台を作り、コントラストを確認し、アセットをまとめ、インターフェースを構築し、決定事項をローカルに保存します。ホームページでは Claude Code、Windsurf、Gemini CLI のようなエージェント向けとして位置づけられており、出力はホスト型サービスの背後ではなくプロジェクトの隣に保存されます。
機能
コントラスト確認付きの生成パレット
ソース画像から参照ピクセルを読み取ったり、プロジェクトのムードに合わせて新しいパレットを生成したりしたうえで、すべての合法的な色の組み合わせをコントラスト計算で確認できます。
構築されたビジュアルアセット
Tastemaker は、一貫したアセットセットを出力します。絵文字の代替や不完全なビジュアルシステムではなく、アイコン、必要に応じた画像、構成されたマーク、ファビコンを生成します。
テキストのみの主張ではなくレンダリング可能な証拠
同じパスで UI モックアップ、フロー、チャート、ビフォーアフター状態、GSAP モーションを生成できるため、画面は説明文ではなく証拠として作られます。
ローカルファイル内のプロジェクト記憶
解決済みのプロジェクト設定はローカルファイルに保存され、開発者の決定は後続作業のためのプロファイルとして引き継がれます。
リポジトリに適した出力
サイトでは、Markdown、Python、SVG、CSS、JavaScript を使ったプレーンテキストのファイルベース出力モデルが示されており、結果をリポジトリ内で検査できます。
Tastemaker が適する場面
マーケティングおよびプロダクトのランディングページ
一貫したパレット、適切な書体の組み合わせ、実際のアイコン、モーションを備えたランディングページをコーディングエージェントに生成させたいときに使います。
アプリケーションの UI ステート
一貫したビジュアルシステムから空状態、読み込み状態、表示済み状態を構築する必要があるプロダクトやアプリのシェルに使います。
参照を基にしたリデザイン
参照画像、ムードボード、既存のブランド方針を、エージェントが元にして構築できる実際のトークンやアセットに変えたいときに使います。
導入前後のプロンプト比較
同じプロンプトがスキル導入前後でどのように振る舞うかを確認したい比較作業に使います。
デザインシステムの継続性
後続の画面でも同じビジュアル決定を維持し、セッション間でぶれないようにするためのローカルなスタイル記憶が必要なプロジェクトで使います。
Pros and Cons
Pros
- 曖昧なプロンプトに頼るのではなく、明確な手順を持つ具体的なワークフローを使います。
- リポジトリ内に置かれる、検査可能なプロジェクトファイルとアセットを生成します。
- 色の決定を目視に任せず、数学的にコントラストを確認します。
- ソース画像のピクセル読み取りを含む、参照ベースのビジュアルグラウンディングをサポートします。
- 決定事項をローカルに保持するため、後続作業で承認済みの選択を再利用できます。
Cons
- 料金ページは 404 を返すため、利用可能な料金情報はホームページの文面からしか得られません。
- ソースには、統合やチームレベルのワークフローに関する完全なドキュメント一式がないため、それらの部分は部分的にしか裏付けられていません。
- 広範なアプリケーションロジックやバックエンド作業よりも、UI とデザイン出力に重点を置いているようです。
FAQ
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 作業を対象としています。
Quick Facts
- カテゴリ
- 開発者向けツール
- 主な用途
- コーディングエージェント向けの UI・デザインワークフロー
- 対応エージェント
- Claude Code、Windsurf、Gemini CLI
- インストール
- `npx skills add codeswithroh/tastemaker`
- 出力
- Markdown、Python、SVG、CSS、JavaScript、およびローカルのプロジェクトファイル
- 料金形態
- 無料のコア機能と、月額 8 ドルのスポンサー限定モード
Tastemakerの代替品
Paper
Paperは、キャンバス、コード、AIエージェントをつなぎ、チームが1つのワークフローで作成・共有・出荷できるデザインツール。デスクトップアプリ、MCP対応のエージェントアクセス、実コンテンツとデザイントークンのワークフローに対応。
Orca
Orcaは、コードエージェントでの開発・実装を支援するAgent Development Environment。分離されたworktree上で複数のCLIエージェントを並列実行し、デスクトップとモバイルの連携ワークフローに対応します。
AI Magicx
AI Magicxは、チャット、画像、動画、音声、音楽、メール、開発タスクを1か所で扱える統合AIワークスペース。複数モデルを使い分ける手間を減らします。
blop
blop は、リポジトリ内でブラウザテストをコードとして記述し、CIで実行、失敗をクラスタリングし、壊れたテスト修正用のPRも開けるQA agentです。
RLAMA
RLAMAは、macOS、Linux、WindowsでRAGシステムとインテリジェントエージェントを構築できるローカルAIプラットフォーム。ローカル処理、対話型ターミナル、HTTP APIに対応。
Kastra
KastraはAIシステム向け認可基盤。プロンプト、ツール呼び出し、シェルコマンド、APIリクエスト、ブラウザ操作を実行前に確認し、ポリシー適用と署名付き監査証跡でローカル/企業AIを統制します。