Slingshot brand kit

Slingshot ブランドキット

Slingshot 独自のブランドを、エージェント型ブランドシステムとして構築しました。これは、同社が他社向けに作っているものと同じパーツを、まず自社で使ったものです。slingshot.fyi を支えるブランドです。

パーツ	内容
キット	brand/：ルーター（readme.md）と5つのガイド（ボイス、レイアウト、タイポグラフィ、カラー、マーク）です。すべてのルールには理由が記載されているため、誰かが明文化していないケースにも、人やエージェントが適用できます。
トークン	brand/tokens.json にすべての値を一元管理し、dist/tokens.css はそこから生成します。
CLI	slingshot-brand はガイドとトークンを表示し、ファイル内にブランドトークンではない色が使われていないかチェックします。
MCP	slingshot-brand-mcp は、作業中のあらゆる MCP クライアント（Claude Code、Claude Desktop、Cursor）に、ガイド、トークン、カラーのチェック機能を提供します。

使い方

npx -p @slingshot-fyi/brand-kit slingshot-brand guide            # which guide to read for the task
npx -p @slingshot-fyi/brand-kit slingshot-brand guide voice      # one guide
npx -p @slingshot-fyi/brand-kit slingshot-brand tokens           # tokens as CSS custom properties
npx -p @slingshot-fyi/brand-kit slingshot-brand check src/*.css  # exits 1 if any colour is off-brand

このリポジトリをクローンし、npm install を一度実行すれば、同じコマンドを npx slingshot-brand … として使えます。

MCP サーバーを Claude Code に追加します。

claude mcp add slingshot-brand -- npx -y @slingshot-fyi/brand-kit

次の3つのツールを公開します：brand_guide、brand_tokens、check_colors。

テスト方法

npm test では、すべてのルールに理由があること、生成された CSS がすべてのトークンを網羅していること、カラーのチェックでブランドカラーが特定され、それ以外が警告されることを確認します。また、MCP サーバーを起動し、stdio 経由で各ツールを呼び出します。

キット自体のテストには、Slingshot がすべてのキットで行う方法を採用しています。他のコンテキストを何も持たない新しいエージェントにキットを渡し、新しいものを作るよう依頼します。そして、エージェントが推測したことをすべて、ルールが不足している箇所として扱います。

フォント

ステートメント用書体の Exposure は別途ライセンスされており、このリポジトリには含まれていません。Geist と Geist Mono は SIL Open Font License の下で提供されています。

ライセンス

コードは MIT ライセンスです（LICENSE を参照）。Slingshot の名称、マーク、コピーは Slingshot に帰属します。