mcpField
T
tesserai

tesserai

ローカル
tesserai.design開発ツール05 週間前に更新
リポジトリ公式サイト

tesserai について

@tesserai/cliは、デザインシステムをプロジェクトに導入し、コマンドラインから同期するツールです。MCPを介して、トークン、コンポーネント、コントラストチェック、ガイドラインをコーディングエージェントに提供します。

主な機能

  1. 01デザインシステムのコンポーネントとテーマCSSを導入
  2. 02編集済みファイルを保って更新を同期
  3. 03コンポーネント使用状況とシステム上書きをスキャン
  4. 04別スタック向けにシステムをエクスポート
  5. 05アクセシビリティチェック付きStorybookを生成

活用シーン

  1. 01共有デザインシステムをプロジェクトに追加
  2. 02未使用コンポーネントやスタイル上書きを確認
  3. 03コーディングエージェントにプロジェクトの設計ルールを提示

MCP 対応

CLIはstdio経由で導入済みデザインシステムをコーディングエージェントに提供し、初期化時にサーバーを登録できます。エージェントはトークン、コンポーネント、コントラストチェック、ガイドラインを読み、システム内で変更を適用できます。

設定

ローカルサーバーの設定はどのクライアントでも共通です。コピーしてクライアントの MCP 設定ファイルに貼り付けてください。

mcp.json · 共通設定
{
  "mcpServers": {
    "design-tesserai-tesserai": {
      "command": "npx",
      "args": [
        "-y",
        "@tesserai/cli"
      ]
    }
  }
}
起動コマンドnpx -y @tesserai/cli

ローカルサーバーにはマシン上の実行環境（Node.js 18 以上など）が必要です。設定ファイルの場所はクライアントごとに異なります。

パッケージ
npm@tesserai/cli0.2.2

ツール

17

掲載時のツール一覧 · 3 週間前に更新

パラメーター型必須説明
intostringいいえ以前にインポートしたシステム（リンク /systems/<id>）：新規作成する代わりに、コードの変更内容で更新し、ユーザーが確認できるようにします
namestringいいえシステム名（デフォルト：package.json から取得）
notesarrayいいえ値ではない、知っておくべき情報。例：「ダークモードは antd の darkAlgorithm に由来するため、自動的に入力されます。」
dryRunbooleanいいえ取り込まれる内容のみを報告します
tokensobjectはい見つかったデザインの外観を記述する DTCG ドキュメント。すべてのトークンに $extensions['tesserai.source'] = 'path:line' が設定されています

詳細

@tesserai/cli

tesserai のデザインシステムを、自分で所有するコンポーネントとしてプロジェクトにインストールします。ターミナルから最新の状態に保てます。MCP を通じて、コーディングエージェントにも同じトークン、コンポーネント、ルールを提供できます。

Node.js 22 以降と Tailwind CSS 4 が必要です。React は Base UI、Radix、React Aria に対応し、Vue は Reka UI に、Svelte 5 は Bits UI に対応します。

開始方法

tesserai.design でデザインシステムを作成してダウンロードできます。アカウントは不要です。または、アカウントから共有し、そのリンクを使ってインストールできます。sync はそのリンクを引き続き参照します。

npx @tesserai/cli init ./acme.tesserai.json
npx @tesserai/cli init https://tesserai.design/s/AbCdEf123456 --dir ./apps/web

init は、コンポーネント、テーマ CSS、tesserai/design-system.json をプロジェクトに書き込みます。CLI を開発依存関係として追加します。また、Claude Code 用の MCP サーバーを .mcp.json に登録し、プロジェクトで Cursor を使用している場合は Cursor 用に .cursor/mcp.json にも登録します。

コマンド

コマンド説明
init <link or bundle>システムをプロジェクトにインストールします
sync [link or bundle]最新版を取得して再生成します。変更したファイルは保持され、新しいバージョンはその隣に書き込まれます。--dry-run は実行計画を表示します
scanアプリでのシステムの利用状況を確認します。各コンポーネントの使用箇所とオプション（使用頻度の高い順）、一度も使われていないコンポーネントとオプション、オーバーライド（コンポーネントのスタイルを変更する className、style、sx と、変更内容）、同じオーバーライドの繰り返し（システム側で変更すべき内容）、手作業で編集された生成ファイル、採用スコア、システムを迂回している値を確認します。--fix は完全に一致する箇所を置き換え、--upload はスキャン結果をシステムとともにビルダー（Pro）に保存します
doctorプロジェクト、システム、マニフェスト、ソースリンクを確認します
export <format>別のスタック向けにシステムを出力します：scss、ts、panda、stylex、mui、mantine、chakra、swift、kotlin、dart
storybook各コンポーネントのストーリー、ライトモードとダークモード、アクセシビリティチェックを含む Storybook を作成します
mcpstdio 経由でコーディングエージェントにシステムを提供します
login / logoutアカウントで非公開に保存されているシステムにサインイン／サインアウトします

オプションを確認するには、npx @tesserai/cli <command> --help を実行してください。

コーディングエージェント向け

init がサーバーを登録します。手動で追加する場合：

claude mcp add tesserai -- npx -y @tesserai/cli mcp

エージェントは、システムの概要、トークン、コンポーネント、コントラストチェック、デザインガイドラインを読み取れます。また、システムの範囲内に収まる変更を適用することもできます。

ライセンス

MIT です。CLI がプロジェクトに書き込むコンポーネントと CSS は、自由にご利用いただけます。

コメント

Markdown 対応

MCP は初めてですか？

プロトコルの概要から最初のサーバーの導入まで、よくある疑問にまとめて答えます。

AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。