mcpField
I
ink-google

ink-google

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

ink-google について

ink-google は Claude の artifact 出力向けデザインスキルです。高いコントラスト、存在感のある文字、抑制した色使い、明快な構成で編集的なビジュアルを適用します。

主な機能

  1. 01インク風の編集デザインを適用
  2. 02コントラストと文字表現を重視
  3. 03抑制した色使いと明快な構成

活用シーン

  1. 01編集的な artifact のデザイン
  2. 02Claude artifact のビジュアル設定

インストール

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

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

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

同梱ファイルstub.yaml

詳細

ink-google

カタログ用スタブ — スキルの全容:google-labs-code/design.md

判断ツリー

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

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

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

    [ -e ~/.agents/skills/ink-google ] && echo "global" || echo "project"
    

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

    npx skills add google-labs-code/design.md --skill ink-google -g -y
    

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

    npx skills add google-labs-code/design.md --skill ink-google -y
    

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

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

  • スキル名:ink-google
  • トリガーフレーズ:「ink design」、「ink style」、「editorial design」、「artifact design」

機能

Claude のアーティファクト出力に、独特なインクスタイルのエディトリアルデザインを適用します。高いコントラスト、力強いタイポグラフィ、最小限に抑えた色使い、すっきりとした構成が特徴です。Google Labs の design.md プロジェクトに基づいており、視覚的なデザイン意図をエージェントが読み取れる形式で表現するシステムです。

コメント