Tastemaker icon

Tastemaker

Tastemaker は、コーディングエージェント向けのワークフロー機能。短い要件から UI を一貫したビジュアルシステムに整え、ファイル、アセット、コントラスト確認、ローカルのプロジェクト記憶で支えます。

Tastemaker

Tastemaker とは何か

Tastemaker は、コーディングエージェント向けのワークフロー機能で、参照、ルール、再利用可能なプロジェクト記憶にデザインの判断を結びつけることで、より一貫した UI の生成を支援します。サイトでは、センスを尋ねるプロンプトを繰り返す代わりに、エージェントが実行できるプロセスを与える手段として位置づけられています。

実際には、Tastemaker は要件を読み取り、画面を定義し、ビジュアルシステムを固定し、アセットを生成し、視覚的な証拠を作成し、後で使えるように決定を保存します。結果は別のホスト型サービスではなく、ファイルとアセットとしてプロジェクト内に存在することを意図しています。

サイトで示されている主な機能

要件駆動の画面スコープ設定

Tastemaker は、カラー、タイポグラフィ、レイアウトの決定を生成する前に、プロダクト要件から画面範囲を定めます。ページには、ランディングページのヒーロー、価格、CTA、オンボーディング状態、ダッシュボード状態、設定画面などの例が示されています。

カラ―システム生成とコントラストチェック

参照ピクセルを読み取るか、新しいパレットを生成してから、コントラスト基準に対して合法的な色の組み合わせを計算できます。サイトでは WCAG 風のコントラストチェックとスタイルロックのプロセスが明示されています。

アセットとブランド要素の調達

このワークフローは、アイコンファミリー、画像、構築されたマーク、ファビコンを含む完全なビジュアル言語を調達します。ホームページでは、絵文字のプレースホルダーを避け、検証済みアセットを画面と一緒に含めると説明されています。

1 回の工程での UI 検証とモーション

Tastemaker は、特徴をテキストのままにせず、UI モックアップ、フロー、チャート、ビフォーアフターの状態に変換します。ホームページでは、GSAP のモーションも同じ工程で出荷され、比較ページでは reduced-motion の挙動も考慮されていると述べています。

ローカルのプロジェクト記憶

プロジェクトの決定はローカルに保存されるため、エージェントは将来の作業で好みを再利用できます。サイトには、`.tastemaker/style-lock.md`、`decisions.log`、および keep/reject の選択を記録するプロファイルファイルが示されています。

ファイルベースの出力

この製品は、ホストされたブラックボックスではなく、プレーンなプロジェクトファイルと連携するよう設計されています。ページでは、主な出力形式として Markdown、Python、SVG、CSS、JavaScript が示されています。

Tastemaker が適する場面

  • マーケティングページの設計

    通常のプロンプトよりも意図的なビジュアルシステムで、エージェントにランディングページやアプリ画面を構築してほしいときに使います。サイトの比較ページでは、スキル導入前後の違いを示すために、コーヒー定期購読のランディングページが使われています。

  • 状態を持つプロダクト画面の構築

    空、読み込み中、表示済み、設定ビューが 1 つのシステムのように感じられる必要がある、複数状態のプロダクト UI に使います。ホームページでは、オンボーディング、ダッシュボード、設定の状態がスコープに含まれる出力として明示されています。

  • 参照からカラ―システムへの変換

    参照画像はあるが、エージェントに実際のピクセルから使いやすいパレットを導き出してほしい場合に使います。Tastemaker は参照の読み取り、生成パレット、コントラスト検証をうたっています。

  • デザイン決定をリポジトリに残す

    チームが UI 出力をホスト型ツールに閉じ込めず、リポジトリ内のファイルとして保存したいプロジェクトで使います。サイトでは、製品コードの横にローカルの Markdown、ログ、CSS、SVG、JavaScript の出力が示されています。

  • セッションをまたいだビジュアルの一貫性維持

    繰り返しの UI タスクで、毎回決め直すのではなく過去の選択を引き継ぎたいときに使います。Tastemaker は keep/reject の決定をローカルプロファイルに保存し、将来のプロジェクトに利用します。

Pros and Cons

Pros

  • 曖昧なプロンプトに頼るのではなく、名前付きの段階を持つ具体的なワークフローを示している。
  • 検証可能なプロジェクトファイルとアセットを生成するため、出力の確認や再利用がしやすい。
  • コントラストチェックとスタイルロックを含み、画面間の見た目のぶれを抑えやすい。
  • プロジェクトの決定をローカルファイルに保存するため、好みをタスク間で引き継げる。
  • 基盤となるワークフローを変えずに、無料のコアの上に少数の美的モードを追加で利用できる。

Cons

  • 料金ページは利用できず、/pricing URL は page not found エラーを返すため、公開サイト上のプラン詳細は不完全です。
  • 統合ガイダンスは簡潔で、インストールコマンドといくつかの対応エージェント名以外のセットアップ詳細は限られています。
  • 公開資料は UI ワークフローと出力に重点を置いており、より広いプロダクト管理や非ビジュアルなデザイン用途については扱っていません。

FAQ

コーディングエージェントで Tastemaker を使うにはどうすればよいですか?

Tastemaker はコーディングエージェント向けのスキルとしてインストールされ、エージェントに UI の構築、スタイリング、改善を依頼すると起動します。サイトには `npx skills add codeswithroh/tastemaker` を使うターミナル風のインストールコマンドが示されており、Claude Code はプラグインマーケットプレイスまたは手動インストールでも利用できると説明されています。

Tastemaker はプロジェクトのワークフローで何をしますか?

ホームページでは、Tastemaker はコーディングエージェント向けにデザインの好みを定義し、確認し、構築し、記憶するワークフローだと説明されています。手順には、プロダクト要件の読み取り、ビジュアルシステムの固定、アセットの調達、UI 形式での検証作成、将来の作業のための決定の保存が含まれます。

Tastemaker はどのような出力を生成しますか?

公開ページでは、出力はローカルのプロジェクトファイルとアセットとして示されており、`.tastemaker/style-lock.md`、`.tastemaker/decisions.log`、およびロゴ、アイコン、イラスト、CSS、SVG、Markdown、Python、JavaScript などの生成デザインアセットが含まれます。

料金ページやプランの詳細はありますか?

サイトによると、無料コアは無料のままで、スポンサー限定の美的モードは月額 $8 で利用できます。ただし、pricing URL 自体は現在 page not found エラーを返すため、別途確認できる料金ページはありません。

Tastemaker はどのツールやエージェントをサポートしていますか?

ホームページでは Tastemaker は Claude Code、Windsurf、Gemini CLI 向けのエージェントと相性がよいとされており、魔法のフレーズ、アカウント、ホストされた API なしでワークフローが起動すると説明されています。それ以外の深い統合ドキュメントはサイト上で提供されていません。

Quick Facts

カテゴリ
開発者ツール / AI エージェント ワークフロー
主な利用者
UI を形作るコーディングエージェントと開発者
プラットフォーム
ローカルファイル出力を伴う Web サイト
ソースドメイン
tastemaker-skill.online
インストール
`npx skills add codeswithroh/tastemaker`
価格
無料コア; スポンサー限定モードは月額 $8
Tastemaker - AI Tool, Features, Use Cases & Alternatives | UStack