mcpField
T
taste-skill

taste-skill

github.com/podoデザイン・UI29276 回インストール3 日前に更新
リポジトリ

taste-skill について

taste-skill は、コーディングエージェント向けのフロントエンドデザインスキルです。調査に基づく方向選び、ブラウザーでの確認、複数幅のスクリーンショット評価を通じて、ウェブサイトやアプリ画面のデザインを磨きます。

主な機能

  1. 01調査に基づくデザイン案
  2. 02ウェブサイトとアプリ画面のアートディレクション
  3. 03ブラウザーでの UI 検査
  4. 04複数幅でのスクリーンショット評価

活用シーン

  1. 01ランディングページやポートフォリオの設計
  2. 02製品ページのリデザイン
  3. 03平凡に見えるダッシュボードのレビュー

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/podo/design-agent-skills --skill taste-skill

インストール後、Claude Code で/taste-skillを入力して読み込まれたか確認します。

同梱ファイルstub.yaml

詳細

taste-skill

カタログ用スタブ — スキルの完全版はこちら：Leonxlnx/taste-skill

判断ツリー

  1. 完全版のスキルはすでにインストールされていますか？ 上流ではこのスキルを design-taste-frontend と呼んでいるため、このポインターの隣にインストールされます（ポインターは置き換えられません）。

    • グローバル：f=~/.agents/skills/design-taste-frontend/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
    • プロジェクト：f=.agents/skills/design-taste-frontend/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
    • installed → スキルは design-taste-frontend としてインストールされています。スキルを呼び出して続行してください
    • pointer → ステップ 2 に進みます

  2. 対象範囲を判定してから、インストールします：

    [ -e ~/.agents/skills/taste-skill ] && echo "global" || echo "project"

    グローバル：

    npx skills add Leonxlnx/taste-skill --skill design-taste-frontend -g -y

    プロジェクト：

    npx skills add Leonxlnx/taste-skill --skill design-taste-frontend -y

    Claude Code： 会話を離れずにコマンドを実行するには、! で始まるコマンドをチャットメッセージとして送信します。

Claude Code プラグイン経由：

/plugin marketplace add Leonxlnx/taste-skill
/plugin install taste-skill@taste-skill

注意事項

  • 必要条件： Node.js 22 以降と、インストール済みの Chrome、Edge、または Chromium（同梱のインスペクターおよびスクリーンショット用スクリプトに必要）。アセット用スクリプトの実行にはネットワークアクセスが必要です（オープンコレクションから画像を取得します。API キーは不要です）
  • ライセンス： MIT
  • ダウンロードサイズ： 約 39 MB。

インストール後の呼び出し

  • スキル名：design-taste-frontend
  • トリガーフレーズ：「design taste」、「good taste」、「anti slop」、「premium UI」、「make this look designed」、「this page looks generic」

機能

ウェブサイトやアプリ画面のアートディレクションを行います。モデルがデフォルトで生成しがちなありきたりな見た目（3 行にわたる中央揃えの見出し、小さなラベル、アイコンカードの列、淡いグラデーション）を対象とします。スクリプトが、調査に基づく複数の方向性（アイデア、構成、タイポグラフィシステム、配色、ヒーローとセクションの設計図、題材の世界観を表す画像）を提示し、そこから 1 つを選びます。その後、装飾を加えない基本スタイルをインスペクタースクリプトで実際のブラウザー上で計測し、複数の幅でスクリーンショットを確認して、評価基準に照らして判断し、修正して再確認します。ダッシュボード、設定画面、受信トレイなどのアプリ画面には、別の実行手順を使用します。ランディングページ、製品ページ、ポートフォリオ、1 ページ構成のサイト、ダッシュボードの作成、スタイル変更、レビューを行うときや、ページがありきたり、または「AI が作った」ように見えるときに使用してください。

同梱のスクリプトには Node 22 以降と、インストール済みの Chrome、Edge、または Chromium が必要です。スクリプトの 1 つは、ネットワーク経由でオープンコレクションから画像を取得します。作業ファイルは、プロジェクトのルートにある .taste-skill/ に書き込まれます。

使用しない場合

  • バックエンドコード、API、データパイプライン、CLI ツールなど、UI 以外のタスク
  • ユーザーが明示的に汎用的な UI やテンプレート風の UI を求めている場合
  • ネイティブの iOS または Android インターフェース（mobile-app-design または swiftui-design-skill を使用してください）

コメント

Markdown 対応