mcpField
T
taste-design-stitch

taste-design-stitch

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

taste-design-stitch について

Google Stitchが生成したUIを整えるデザインスキルです。余白、タイポグラフィ、色、視覚的な階層に関する判断を支援し、Google Labs公式のStitchスキル群に属します。

主な機能

  1. 01余白の選択を調整
  2. 02タイポグラフィを支援
  3. 03色の選択を改善
  4. 04視覚的な階層を強化

活用シーン

  1. 01Google StitchのUI出力の調整
  2. 02画一的なインターフェース表現の改善

インストール

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

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

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

同梱ファイルstub.yaml

詳細

taste-design-stitch

カタログ用のスタブ — スキルの完全版:google-labs-code/stitch-skills

判断ツリー

  1. スキルの完全版はすでにインストールされていますか? この場所にあるスキルに、まだ das: ブロックがあるか確認します:

    • グローバル:grep -q "^das:" ~/.agents/skills/taste-design-stitch/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"
    • プロジェクト:grep -q "^das:" .agents/skills/taste-design-stitch/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"
    • das: ブロックがない → スキルの完全版がインストール済みです。これを呼び出して続行します
    • das: ブロックがある → ステップ 2 に進みます
  2. スコープを検出してから、インストールします:

    スコープを検出するには:

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

    グローバル(-g を付けてインストール):

    npx skills add google-labs-code/stitch-skills --skill taste-design-stitch -g -y
    

    プロジェクト(-g を付けずにインストール):

    npx skills add google-labs-code/stitch-skills --skill taste-design-stitch -y
    

    Claude Code: 会話から離れずに実行するには、どちらかのコマンドの先頭に ! を付けてチャットメッセージとして送信します。

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

  • スキル名:taste-design-stitch
  • トリガーフレーズ:「taste design」、「stitch taste」、「improve stitch UI」、「stitch aesthetics」

機能

Google Stitch の UI 出力に美的判断とデザインセンスを適用します。間隔、タイポグラフィ、色、視覚的階層について独自の判断を加え、生成されたインターフェースをありきたりな AI の初期設定から脱却させ、計算されたものではなく、丁寧に作り込まれた印象に仕上げます。Google Labs 公式の Stitch スキルエコシステムの一部です。

コメント