keyline

keyline-mcp

keyline.dev：各クライアント向けのサンプル、ベンチマーク、セットアップ方法を掲載しています。

AI エージェント向けのデザインエンジン：エージェントのためのCanvaです。 keylineは、Claude Code、Claude Desktop、Cursor、Codex、Gemini CLI、あらゆるMCPクライアントで使える無料のMCP サーバーです。エージェントがソーシャル投稿、広告、バナーを小さなJSONシーンとして一度記述すれば、keylineがあらゆるサイズの画像や動画をレンダリングします。実際のテキストを指定したフォントと色で、実行のたびに同じように出力します。

ブラウザーは不要で、トークンも削減できます。 ヘッドレスChrome、Puppeteer、Playwrightは不要です。Skia上で動作するネイティブRustバイナリが1つあれば十分です。編集のたびに各サイズで何が問題かを返すため、エージェントはスクリーンショットではなく測定値をもとにデザインを修正できます。ヘッドレスChromeを操作するエージェントと比べてトークンを2分の1、Playwright MCPと比べて6分の1に削減できます（ベンチマーク）。

1つのプロンプトで5つのサイズに対応します。レイアウトは4:5の投稿から728×90のリーダーボードまで適応し、keylineのチェック機能がレンダリング前に収まらない要素を検出します。

動きのあるキャンペーンも、keyline.devでご覧いただけます。掲載されている画像も上の画像も、すべてkeylineで作成されています。

なぜ

現在公開されているデザインの多く（セール投稿、イベントのチラシ、広告セット）は、CanvaやAdobe Expressのようなツールで作られています。これらのツールはマウスを使う人向けに作られており、エージェントのバックエンドとして適したものはありません。

• CanvaとAdobe Expressではシーングラフが非公開です。エクスポートできるのはピクセルであり、デザインではありません。
• ブラウザベースのレンダラーであるPolotnoなどは、サーバー上でヘッドレスChromeを必要とします。

keyline-mcpは欠けていた要素です。エージェントを第一に考えたデザインツールであり、言語モデルが低コストかつ再現可能な方法で作成、チェック、エクスポートできるよう、デザイン形式とレンダラーをゼロから構築しています。デザインはピクセルではなく、レイアウト、トークン、スタイル、コンポーネントを備えた型付きレイヤーツリーという構造化データのまま保持されます。そのため、エージェントは画像を再生成するのではなく、デザインを正確に編集できます。

仕組み

flowchart LR
    A[Agent] -- "layer_add / layer_update" --> S[(Scene JSON)]
    S --> L["Layout per size<br/>scale → constraints"]
    L --> C["Checks<br/>defects · advisories · facts"]
    C -- "ok, or what to fix" --> A
    L --> R["Skia renderer<br/>GPU, CPU fallback"]
    R --> P["PNG, JPEG, WebP, PDF, animated PNG, GIF, MP4 or WebM per size"]

1. マスターとなるレイアウトは1つです。 デザインをマスターサイズで一度だけ作成し、対象サイズを指定します。
2. サイズに応じて適応するレイアウトです。 行、列、グリッド、デザインツールの制約によって、制約ソルバーを使わずに各サイズでデザインを再レイアウトできます。サイズやアスペクト比のクラスごとに、任意のレイヤーを変更できます。
3. プレビューではなくチェックです。 編集の応答では、各サイズでの問題点と、その修正に必要な測定値が示されます。
4. デフォルトはGPUで、必要なときは決定論的に動作します。 レンダリングはGPUで実行され、CPUにフォールバックできます。CPUの出力は常に完全に再現可能です。

まずはこちらをご覧ください： docs/concepts.md ではモデルを、docs/scene.md ではシーン形式を、docs/tools.md ではツールと設定を説明しています。

LLMを第一に、LLMのみを対象に

GUIはなく、今後も追加する予定はありません。デザイン上のあらゆる判断は、次の問いを基準に評価します。正しい画像を作るために、エージェントが使うトークンはいくつか？ 実際のモデル（Claude Code経由のClaude）で実際の複数セクション広告を作成し、この数を測定します。

• 少数のツールをまとめて実行： プロパティごとに1つではなく、ツールは6つです。1回の呼び出しで広告全体を作成できます。
• 短い応答： 編集の応答には、変更されたID、バージョン、okまたは問題点のみが含まれ、シーン全体は返されません。
• デフォルト値は省略： 一般的なレイヤーのフィールド数は4～6個です。
• 標準的な名前： CSSに概念があるものには、CSSの名前と値を使います（フレームのflexboxやgridのフィールド、fontWeight、borderRadius、rgba()の色など）。そのため、モデルは最初から正しいシーンを記述できます。レイアウト自体はkeyline独自のもので、ドキュメント化されていますが、ブラウザーと完全に同じではありません。
• セマンティックな対象指定： レイヤーはroleで指定するため、エージェントがシーンを読み込んでIDを探す必要はありません。
• ピクセルを使わない検証： 修正すべき欠陥、判断すべき注意事項、評価すべき事実を、それぞれ修正に必要な測定値とともに提示します（詳細）。
• 名前で指定し、作り出さない： アイコン、図形、スタイル、トークン、コンポーネントは名前で指定します。アイコンだけでも、実際のチラシを再構築するコストを1回あたり$0.22–0.62から$0.15–0.19に削減できました。
• 推測ではなく測定： すべての変更を複数回の実際のモデル実行で評価し、keyline-benchに記録しています。
• センスの判断はモデルに委ねます： サーバーが指摘するのは客観的な欠陥のみで、残りは事実として報告します。

機能

• レイヤー： text、image（PNG、JPEG、SVG）、video、icon、rect、ellipse（弧とリングも）、polygon（星形も）、path（SVG のパスデータまたは名前付きシェイプ）、line、frame（入れ子、クリッピング、スタック、グリッド）、spacer、firstFit、およびコンポーネント用の use
• レイアウト： スタック（CSS フレックスボックス：間隔、パディング、配置、整列、折り返しを指定できる行と列。fill、flexGrow、優先度にも対応）、グリッド（CSS グリッド：トラック、名前付き領域、スパン）、最小値／最大値とアスペクト比を指定できる hug／fill／パーセントサイズ、適合するものを選ぶ方向リストと firstFit、制約、9 か所への配置、サイズごとのスケール係数、サイズごとおよびアスペクト比ごとの変更（media）、一般的なソーシャルメディアと広告フォーマット向けのサイズプリセット、プラットフォームが覆うセーフエリア
• テキスト： フィット、折り返し、または 1 行表示。インラインマークアップ（<b>、<i>、<span style=…>、タグとしてのスタイル名）、ウェイト、イタリック、文字間隔、行の高さ、大文字／小文字、バランスの取れた折り返しまたは見栄えを重視した折り返し、単語の背後のハイライト、下線と取り消し線、曲線に沿ったテキスト、ドットリーダー、画像、パターン、グラデーションで塗りつぶしたテキスト、アウトライン、フレームをくり抜くテキスト。フォントは CSS ウェブフォントのように機能します。任意の Google Fonts ファミリーを指定すると、サーバーが初回使用時にダウンロードしてキャッシュします（fonts/index.json で管理）。Inter は同梱されており、独自のフォントファイルも追加できます
• ペイント： 重ね合わせた塗り（単色、線形／放射状／円錐状グラデーション、画像、パターン、フィルムグレイン）、線（内側、中央、外側、辺ごと、破線、矢印付き、手描き風）、シャドウ（外側と内側。切り抜きやテキストの形状に沿ったもの）、ぼかしと背景ぼかし、マスク（グラデーション、シェイプ、パス、別のレイヤー、または画像）、破れたエッジ、16 種類のブレンドモード、角丸、回転、傾斜、反転
• 画像： 塗りつぶし、フィット、トリミング、またはタイル表示。注視点を画面内に保つことができます。調整（明るさ、コントラスト、彩度、グレースケール、セピア、色相、デュオトーン、色合い、ハーフトーン）
• アイコン： 約 5,000 種類を内蔵。名前で指定でき、Lucide のアウトラインアイコンと Font Awesome Free のソリッド、レギュラー、ブランドアイコンを任意の色で使用できます
• 再利用： 任意のレイヤーに設定できる名前付きスタイル、使用箇所のすべてのフィールドを更新するトークン（{{brand}}。任意のフィールドや文中で使用可能）、一度だけ、またはデータ行ごとに配置するコンポーネント、テンプレート。テンプレートは URL またはパスで読み込むシーンファイルで、変数を設定して値の各行につき一度レンダリングします
• モーション： GSAP 形式のアニメーション：開始効果と終了効果（フェード、上方向へのフェード、ポップ、ズーム、ぼかしイン）、不透明度、スケール、回転、オフセット、傾斜、ぼかし、色のキーフレーム（GSAP のイージングに対応）、random() による開始、子要素の段階的な開始、文字や単語に分割して個別に動かすテキスト、自動で描画される線、カウントアップする数値
• 動画： レイヤーとしての動画クリップ。トリミング、スロー再生、ループ再生が可能で、その上にタイトルやグラフィックを重ねられます。カット、フェード、スライド、プッシュ、ワイプ、ズームでつないで順に再生するショット。各クリップ固有の音声を動画に含め、サウンドトラックとミキシングできます
• アセット： コンテンツハッシュで保存されます。URL の取得には http(s) のみを使用し、プライベートアドレスとローカルアドレスは拒否されます
• 出力： サイズごとに PNG、JPEG、WebP、ベクター PDF、アニメーション PNG、アニメーション GIF、MP4、WebM を出力できます。任意の時点の静止画、広告ネットワーク向けのファイルサイズ上限、オプションのコンタクトシートプレビューにも対応し、利用可能な場合は GPU でレンダリングします

クイックスタート

Claude Code（macOS または Linux）：プラグインが keyline をダウンロードし、リリースの SHA256SUMS と照合します。または、PATH 上の keyline-mcp を使用します。

/plugin marketplace add keyline-dev/keyline
/plugin install keyline@keyline

Claude Desktop（Apple シリコン搭載 Mac、または Windows）：最新リリースから keyline-mcp-<version>.mcpb をダウンロードし、ダブルクリックします。デザインとレンダリング結果は ~/keyline 内のデザインごとのフォルダーに保存されます。Claude に使用させる画像やロゴもここに配置できます。代わりに任意のフォルダーを使用するには、Settings → Extensions → keyline → Configure を開いてフォルダーを追加し、Save をクリックします。

その他のクライアント：インストールしてから追加

各リリースには SHA256SUMS ファイルとビルドアテステーションが含まれています。gh attestation verify <file> --repo keyline-dev/keyline で検証してください。その後、keyline をクライアントに追加します。コマンドは keyline-mcp です。クライアントが見つけられない場合は、フルパスを指定してください（which keyline-mcp）。

codex mcp add keyline -- keyline-mcp

{ "mcpServers": { "keyline": { "command": "keyline-mcp" } } }

その後

エージェントにデザインを依頼します：「この写真を使って、1080×1350、1200×1000、300×600 のスカイスクレーパーサイズの郵便投票チラシを作ってください。」

• ファイル： デザインごとに ~/keyline/<name>/ フォルダーが作成され、シーンと renders/ が格納されます。エージェントは画像、動画、テンプレートをパスで追加し（バイト列を送信するより低コストです）、後のセッションでは名前を指定してデザインを呼び出します。Claude Code プラグインでは、代わりにプロジェクトフォルダーが使われます。それ以外では、--folder ~/work ~/brand を指定すると ~/keyline が置き換わります。デザインは最初のフォルダーに保存され、ファイルはすべてのフォルダーから読み込まれます。フラグはコマンドの後に指定するか（claude mcp add keyline -- keyline-mcp --folder ~/work）、JSON 設定の args に指定します。Docker では、デザインは /data ボリュームに保存されます。他のフォルダーをマウントして渡してください。
• 動画： ffmpeg を PATH に設定する必要があります。それ以外は、アニメーション PNG や GIF も含めて、ffmpeg がなくても動作します。
• オプション： すべての設定はフラグ（--folder、--no-motion、--data、--fonts、--renderer、--ffmpeg、--encoder）で指定します。keyline-mcp --help と docs/tools.md を参照してください。
• エージェントを使わない場合： keyline-mcp render scene.json --out renders/ はすべてのサイズをレンダリングし、! の不具合がある場合は 1 で終了します。GitHub Actions では uses: keyline-dev/keyline@v0 を使って、リポジトリのシーンをレンダリングできます（詳細）。
• Linux サーバーでの GPU 利用： Vulkan ドライバー（NVIDIA 製または Mesa）が必要です。GPU がない場合、keyline は CPU でレンダリングします。

ツール

すべての入力形式と応答形式はdocs/tools.mdに記載されています。

一般的な呼び出し：

{
  "sceneId": "s5b0a42a5e",
  "layers": [
    {
      "id": "headline",
      "type": "text",
      "x": 60,
      "y": 40,
      "width": 960,
      "fontSize": 64,
      "fontWeight": 800,
      "textAlign": "center",
      "color": "#1B2A5C",
      "text": "Proven <span style=\"color:#D0202E\">RESULTS</span> for WILLOWMERE Families",
      "constraints": {
        "horizontal": "stretch",
        "vertical": "top"
      }
    },
    {
      "type": "image",
      "asset": "photo",
      "y": 220,
      "width": 1080,
      "height": 460,
      "constraints": {
        "horizontal": "stretch",
        "vertical": "stretch"
      }
    },
    {
      "id": "cta",
      "type": "frame",
      "y": 830,
      "width": 1080,
      "height": 100,
      "fill": "#D0202E",
      "constraints": {
        "horizontal": "stretch",
        "vertical": "bottom"
      },
      "children": [
        {
          "id": "cta-text",
          "type": "text",
          "text": "VOTE BY MAIL",
          "x": 394,
          "y": 21,
          "fontSize": 48,
          "fontWeight": 800,
          "color": "#FFFFFF",
          "constraints": {
            "horizontal": "center",
            "vertical": "center"
          }
        }
      ]
    }
  ]
}

およびその応答。テストで使用するサイズ（1080×1350は等倍、1200×1000は0.85倍、300×600のスカイスクレイパーは0.28倍）の場合：

added headline,image1,cta v2 ok
smallest text: portrait 48px (cta-text), wide 41px (cta-text), sky 13px (cta-text)

開発

cargo test                                         # unit and end-to-end tests
UPDATE_GOLDEN=1 cargo test --test e2e              # regenerate reference PNGs (deliberately; also e2e_features, e2e_paint, …)
cargo test --test llm_e2e -- --ignored --nocapture # a real model builds an ad; prints cost
cargo test -- --ignored web_fonts google_fonts     # web fonts download once and stay cached (network)
KEYLINE_MCP_BENCH=<label> cargo test --test llm_e2e -- --ignored --nocapture       # keep the run in ../keyline-bench/reference-ad/
KEYLINE_MCP_BENCH=<label> cargo test --test recreate_e2e -- --ignored --nocapture  # rebuild a local design from its image, scored

• ユニットテストでは、レイアウト、テキストのフィッティング、ピクセル単位のチェックを含むレンダリング、ストレージ、URLの安全性、編集をカバーします。
• レイアウトテストでは、レンダリングせずに、レイアウト後のすべてのレイヤーの位置とサイズを確認します。
• エンドツーエンドテストでは、stdio経由で実際のサーバーを実行し、複数のサイズでデザインを構築して、PNGを参照画像と比較します。グリフのラスタライズはプラットフォームによって異なるため、画像はOSごとに保存されます。また、OSのバージョン間でもグリフのエッジにわずかな違いがあるため、小さな許容誤差を設けて比較します。
• LLMテストではClaude Codeをヘッドレスで実行するため、Claudeのサブスクリプションを使用し、APIキーは不要です。欠陥が残っていないことを確認し、ツール呼び出し数、トークン数、API相当のコストを報告します。KEYLINE_MCP_BENCHを指定すると、比較用に各実行を保存します。対象はkeyline-benchの参照広告（このリポジトリの隣にチェックアウトするか、KEYLINE_BENCHで指定）と、その画像から再構築したデザインです（参照画像には実在する人の素材が使われていることが多いため、gitで無視されるbench/recreate/local/に保存します）。見た目の近さで評価します。
• リリース：v*タグをpushすると、Linux用の.debとtarball（amd64およびarm64）がビルドされ、GitHubリリースに添付されます。

コントリビューションはCLAUDE.mdに従ってください。Rustのみを使用し、cargo fmtとclippy -D warningsが通る必要があります。変更はrust-skillsのルールに照らしてレビューされます。新しい依存関係には承認が必要で、寛容なライセンスで提供されている必要があります。また、すべての機能にユニットテストとエンドツーエンドテストを追加してください。

ライセンス

Functional Source License 1.1, Apache 2.0 future license（FSL-1.1-ALv2）：keylineと競合する用途、つまりkeylineを代替する、または実質的に同等の機能を提供する商用製品やサービスでkeylineを他者に提供する場合（ホステッドサービスとして提供する場合を含む）を除き、どのような目的にも、商用利用を含め、無料で使用、変更、再配布できます。自社内での使用、研究、教育、クライアント向けの業務はすべて許可されています。**各リリースから2年後、そのリリースはApache License 2.0でも利用できるようになります。**競合目的のライセンスについては、作者にお問い合わせください。

コントリビューター契約に基づくコントリビューションを歓迎します。コントリビューターは変更部分の著作権を作者に譲渡します。

サードパーティの各要素には、それぞれのライセンスが適用されます。Skia（BSD-3-Clause）はskia-safeバインディング（MIT）経由、resvg（Apache-2.0またはMIT）、rmcp（Apache-2.0）、csscolorparser（MITまたはApache-2.0）、Inter（SIL OFL 1.1）、Lucideアイコン（ISC）、Fonticons, Inc.によるFont Awesome Freeアイコン（CC BY 4.0）。