Taste Lab
Taste Lab · 画像
Taste Labは、あらゆるウェブサイトのURLをベテランデザイナーのように読み解き、そのうえでAIコーディングツールに、実際に構築に使える短いブリーフを渡すAIデザインアナライザーである。ページから正確な測定値を引き出し、それをデザインDNAと呼ぶシステムレベルのルールへと凝縮し、結果をMarkdownファイルとJSONトークンセットとして保存する。魅力はこれに尽きる。AIツールにサイトの見た目をコピーさせて、汎用的なグラデーションの寄せ集めが返ってきた経験があるなら、これがその欠けていた入力になるはずだ。
Taste Lab について
Taste Labとは
Taste Labは、ある具体的で厄介な問題を解決する。AIコーディングツールはページのコードを書けるが、なぜそのデザインがそう見えるのかは分からない。だからトレーニングで覚えた汎用スタイルに頼ってしまう。Taste Labは、稼働中のウェブサイトを構造化されたデザインコンテキストに変えることで、その隙間を埋める。
仕組みは4段階で、それぞれ別の役割が担当する。1つの工程が正確な測定値を抽出する。別の工程がその数値の間に繰り返し現れるルールを検出する。3つ目の工程がデザイナーが意図的に下したトレードオフを推測し、最後の工程がファイルを書き出す前に弱い部分をふるい落とす。出力は曖昧なムードボードではない。すべての色・ウェイト・余白の値に、正確な16進コード、ピクセル値、または比率が付く。ウェブサイトデザイン分析がここまで具体的になることは珍しい。
最大の制約は範囲である。Taste Labは既存のページを分析するので、ゼロからデザインを考案したり、壊れたレイアウトを直したりはできない。読み込ませるページの品質にも左右される。雑なソースページからは雑なブリーフしか出ない。デザインの判断を置き換えるものではなく、エージェントに与える調査工程として扱うのが正しい。
はじめ方
- tastelab.xyzにアクセスし、デザインを逆解析したいサイトのURLを貼り付ける。
- 4つのエージェントに、抽出・パターン検出・テイスト推論・最終レビューの各工程を順に走らせる。
- 実行が終わったら、生成された2つのファイル、MarkdownブリーフとJSONトークンセットをダウンロードする。
- それらのファイルをAIコーディングツールにコンテキストとして投入し、推測ではなく実測値に沿って構築させる。
- ソースサイトがデザインを変更し、ブリーフを更新する必要が出たら、分析を再実行する。
AIツール情報
Taste Labの料金、対応プラットフォーム、性能を簡単に確認できます。
こんな人におすすめ
このツールが最も力を発揮するユーザー、タスク、シーン。
ユーザー
- フロントエンド開発者：既存ブランドや競合の見た目を、すべての値を手作業で調整せずにAIコーディングエージェントに合わせたいときに役立つ。
- プロダクトデザイナー：稼働中のページを監査し、その余白・書体・配色システムを1回の工程で記録するのに便利。
- 個人開発者：デザイナーを先に雇わずに、AIが作ったプロトタイプへ一貫した視覚言語を与える手段になる。
タスク
- 競合のデザインシステムを逆解析する：トークンを抽出し、レイアウトの裏にある選択を研究できるようにする。
- AIビルダーにデザインコンテキストを渡す：汎用スタイルに流れるままにせず、正確な値をツールに与える。
- 既存サイトを記録する：チームメイトに渡したり、参照用に残したりできるブリーフを生成する。
シーン
- AIエージェントでランディングページを作り直しているが、最初の下書きが参考サイトとまるで似ていない。
- よくできたページがなぜ落ち着いて意図的に感じられるのか、スクリーンショットをただコピーするのではなく理解したい。
- 複数サイトのデザイン上の判断を並べて比べ、自分の方向性に生かしたい。
主な機能
URLからブリーフへのパイプライン
では実際に何が返ってくるのか。完全なデザインブリーフである。パイプラインは4つのエージェントを順に走らせ、それぞれが同じページをより鋭いレンズで読み込み、最終的にAIツールが構築に使えるファイルだけが残る。URL以外に設定するものはなく、作業の流れは短い。この素直さが狙いである。
正確な測定値の抽出
最初の工程が、幅広いカテゴリにわたってページから正確で客観的な値を引き出す。色は16進コード、余白とサイズはピクセル値、書体はウェイトとトラッキングの数値として出る。概算は一切ない。これは重要だ。AIツールは推測に任せると丸い数値へ流れやすく、そのずれはレイアウト全体で積み上がる。
システムレベルのルール検出
生の数値を並べる代わりに、Taste Labはその背後で繰り返されるルールを検出する。似た余白の値が十数個あれば、基準単位とスケールに一つにまとまる。各ルールには根拠の行と、それがなぜ存在するかを説明する短いデザイン目標が付く。データだけでなく、論理が見える。
テイストDNAの原則
最も役立つのは推論の層である。Taste Labはいくつかの原則を書き出す。それぞれが1つのデザイン判断、それを引き起こした要因、なぜそう決めたか、何を手放したかを扱う。少なくとも1つ、抑制の原則を含めるのは意図的である。良いデザインはしばしば、デザイナーが加えるのを拒んだものにかかっている。それがここで捉えられる。多くのツールが飛ばす部分だ。
MarkdownとJSONの二重出力
実行のたびに2つのファイルが手元に書き出される。人向けのMarkdownブリーフと、ツール向けのJSONトークンセットである。Markdown版は共有や編集のできるデザインメモのように読める。JSON版はAIコーディングのワークフローに直結する。エージェントは参照できる機械可読な値を手に入れる。
品質ゲート
出力を書く前に、Taste Labは埋め草の言葉を探し、JSON構造を検証するアンチスロップの工程を走らせる。小さな違いだが、これは効く。受け取るブリーフは、AIツールが既定で生み出す曖昧で自信ありげな言い回しで水増しされる可能性が低くなる。
メリットとデメリット
メリット
- 稼働中のURLを、曖昧な説明ではなく正確で構築可能なデザイン値に変える。
- 推論の層が、各選択がなぜなされたか、何を手放したかを説明する。
- 人向けのブリーフと、AIツール向けのJSONトークンセットの両方を出力する。
- 作業の流れを単一の入力に保つので、結果が出るまでに設定するものがほとんどない。
デメリット
- 既存ページしか分析しないので、何もないところからデザインを生み出すことも、壊れたレイアウトを直すこともできない。
- 出力の品質はソースページに大きく左右される。雑なサイトからは雑なブリーフしか出ない。
- サイトに明確な料金やAPIの情報がなく、チーム利用や自動化を見据えた計画が立てにくい。
よくある質問
ウェブサイトのURLを、あなたのAIエージェント向けの構造化されたデザインブリーフに変える。稼働中のページから正確な測定値を抽出し、その背後のルールを検出し、コーディングツールが従える短いデザインコンテキストをMarkdownとJSONで書き出す。
関連コンテンツ
Taste Labに関連するツール、スキル、記事を探す。
Taste Labの代替ツール
Google EmbeddingGemma 2
Google DeepMind · ライティング · 画像 · コーディングGoogle EmbeddingGemma 2 は 7 億 4000 万パラメータのオープンなモデルで、テキスト、コード、画像、音声、動画フレームを同じ 768 次元空間のベクトルに変え、スマートフォンやノート PC 上で動く。
Tractionwave
TractionWave · 画像 · マーケティングTractionWaveは静止画広告のアテンションヒートマップを作るAIツールだ。PNGかJPGを入れると、予測された注目位置、優先順位付きホットスポット、修正案が返る。予算を投じる前の判断に使う。
Imejis.io
Imejis.io · 画像 · マーケティングImejis.io はエージェントとマーケティングチームのための AI デザインスタジオだ。ふだんの言葉で画像を説明すれば、コピーを書き、レイアウトを組み、全サイズへ自動で組み替え、完成ファイルを書き出す。