mcpField
T
tesseract-design

tesseract-design

github.com/mirage-hqデザイン・UI1621.4k 回インストール1 日前に更新
リポジトリ

tesseract-design について

tesseract-designは、Tesseractでポスター、SNS画像、スライド、図解、インターフェースのモックアップなどを作るスキルです。PNGを成果物として出力し、修正用の編集可能な.ts rctソースも保持します。

主な機能

  1. 01briefをビジュアル方針に変換
  2. 02編集可能なネイティブレイヤーの作成
  3. 03フォントと画像素材の読み込み
  4. 04レイアウトのプレビューと確認
  5. 05ソース文書とPNGの出力

活用シーン

  1. 01ポスターやSNS画像の制作
  2. 02スライドや図解のデザイン
  3. 03静的なUIモックアップの作成
  4. 04複数サイズへのデザイン展開

インストール

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

$npx skills add https://github.com/mirage-hq/tesseract --skill tesseract-design

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

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

agents/
openai.yaml
assets/
icon.svg
references/
cli-version.txt
conversion.md
installation.md
static-authoring.md
telemetry.md
versions.md

詳細

Tesseract でデザインする

Premiere Pro や After Effects など、ほかの編集ツールとの間でファイルを変換する方法については、変換をお読みください。共有された古い .tsrct ファイルを開く場合、ツールを更新する場合、または読み込みやレンダリングの差異を調査する場合は、バージョンと互換性をお読みください。

ユーザーの概要をもとにデザインを作成し、tsrct preview で静止画としてレンダリングします。PNG を主な成果物として納品し、修正に備えて編集可能な .tsrct ソースも保持してください。ポスター、ソーシャルグラフィック、スライド、図、インターフェースのモックアップなど、依頼に合った形式を選びます。

一部のコマンドでは、CLI が基本的な使用状況のテレメトリーを送信する場合があります。収集されるデータとオプトアウトの方法については、テレメトリーをお読みください。ユーザーに代わってテレメトリーを有効にしないでください。

デザインの方向性を定める

すでに提供されているコンテキストを活用してください。デザインの目的、対象者、メッセージやアクション、想定される媒体、コピー、ブランドアセット、ビジュアルリファレンス、指定された寸法やバリエーションが含まれます。提供されたリファレンスとアセットを確認してください。デザインを大きく左右する情報が不足している場合に限り質問し、選択の余地がある項目については妥当な前提を明示して作業を進めてください。修正では、既存の方向性と範囲を維持してください。

ブリーフとコンテンツに沿ったビジュアルの方向性を選びます。文字の階層、余白、グリッド、色、画像を検討してください。現実的なコピーと提供されたアセットを使い、顧客の証拠や主張を創作するのではなく、プレースホルダーのコンテンツだと明示してください。依頼された各形式に合わせて、構成と文字を調整します。レスポンシブなバリエーションを伴うウェブ/UI モックアップでは、デスクトップ画像を縮小するのではなく、各幅に合わせてコンテンツを再配置してください。

作成とプレビュー

  1. このスキルのルートを、SKILL.md があるディレクトリから特定します。インストールに従い、セッションごとに一度、必要な CLI バージョンを確認して、解決済みの実行ファイルパスを全体で使用してください。
  2. 静止画の作成に従って、移植可能なドキュメントを作成または修正し、実際のキャンバス寸法を設定して、フォント/画像をインポートし、編集可能なレイヤーを保存します。必要なフィールドについて、インストール済みのスキーマを確認してください。API を創作したり、ブラウザー/CSS の動作を前提にしたりしないでください。
  3. テキスト、図形、図の要素、レイアウトのジオメトリは、編集可能なネイティブレイヤーとして保持してください。写真、ロゴ、その他提供されたラスターアセットには画像を使用します。レイアウト全体を一枚の画像にフラット化しないでください。関連する要素やコンポーネントには、必要に応じて名前付きグループを使用してください。
  4. 早い段階で PNG をレンダリングして開き、保存済みの構成を修正してください。階層、配置、余白、改行、クリッピング、画像のトリミング、コントラスト、想定する表示サイズでのテキストの読みやすさを確認します。大きなデザインや細部の多いデザインは、全体表示だけでなく拡大表示でも確認してください。レンダリングに成功しただけでは、デザインが優れているとは限りません。

デザインを納品する

最終デザインまたは依頼された各バリエーションを、保存済みのソースから preview でレンダリングしてください。Poster.png、Social-square.png、Home-mobile.png のような分かりやすい名前を付け、対応している場合は画像をインラインで表示します。PNG をインライン表示する場合も、各最終 PNG と、それに対応する編集可能な .tsrct ソースへのリンクを、明確なラベル付きで記載してください。リンクには絶対ローカルパスを使用し、実際の画像寸法を明記します。継続作業に役立つ作業用 JSON とアセットは、プロジェクトと一緒に保持してください。

PNG が完成品の納品物です。動画の書き出し、サウンド処理、アニメーションは不要です。アセットの不足、未確認の出力、レンダラーの制限があれば説明してください。ウェブ/UI モックアップでは、静止画のデザインと、実装済みウェブサイトや動作するインタラクションを区別してください。スライドは、編集可能な Tesseract ソースを伴う PNG レイアウトです。PowerPoint ファイルや印刷用データを納品したと示唆しないでください。

コメント