illustrator-mcp-server 1.3.2 → 1.4.0

package/README.ja.md

@@ -2,11 +2,11 @@
 
 # Illustrator MCP Server
 
-[![npm](https://img.shields.io/npm/v/illustrator-mcp-server.svg)](https://www.npmjs.com/package/illustrator-mcp-server)
-[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
-[![Platform](https://img.shields.io/badge/Platform-macOS%20%7C%20Windows-lightgrey.svg)]()
-[![Illustrator](https://img.shields.io/badge/Illustrator-CC%202024%2B-orange.svg)](https://www.adobe.com/products/illustrator.html)
-[![MCP](https://img.shields.io/badge/MCP-Compatible-purple.svg)](https://modelcontextprotocol.io/)
+[![npm](https://img.shields.io/npm/v/illustrator-mcp-server.svg?style=flat-square&colorA=18181B&colorB=18181B)](https://www.npmjs.com/package/illustrator-mcp-server)
+[![License: MIT](https://img.shields.io/badge/License-MIT-18181B.svg?style=flat-square&colorA=18181B)](LICENSE)
+[![Platform](https://img.shields.io/badge/Platform-macOS%20%7C%20Windows-18181B.svg?style=flat-square&colorA=18181B)]()
+[![Illustrator](https://img.shields.io/badge/Illustrator-CC%202024%2B-18181B.svg?style=flat-square&colorA=18181B)](https://www.adobe.com/products/illustrator.html)
+[![MCP](https://img.shields.io/badge/MCP-Compatible-18181B.svg?style=flat-square&colorA=18181B)](https://modelcontextprotocol.io/)
 [![Ko-fi](https://img.shields.io/badge/Ko--fi-FF5E5B?style=flat&logo=ko-fi&logoColor=white)](https://ko-fi.com/cyocun)
 
 Adobe Illustrator のデザインデータを読み取り・操作・書き出しする [MCP (Model Context Protocol)](https://modelcontextprotocol.io/) サーバー — 63 のツールを内蔵。
@@ -15,6 +15,25 @@ Claude などの AI アシスタントから Illustrator を直接操作し、We
 
 ---
 
+## 🎨 ギャラリー
+
+以下の作品はすべて、Claude との自然言語の会話だけで制作されています。Illustrator の手動操作は一切行っていません。
+
+<table>
+<tr>
+<td align="center"><img src="docs/images/example-event-poster.png" width="300" alt="イベントポスター — SYNC TOKYO 2026" /><br><b>イベントポスター</b></td>
+<td align="center"><img src="docs/images/example-logo-concepts.png" width="300" alt="ロゴコンセプト — Slow Drip Coffee Co." /><br><b>ロゴコンセプト</b></td>
+</tr>
+<tr>
+<td align="center"><img src="docs/images/example-business-card.png" width="300" alt="名刺 — KUMO Studio" /><br><b>名刺</b></td>
+<td align="center"><img src="docs/images/example-twilight-geometry.png" width="300" alt="Twilight Geometry — 幾何学的抽象風景画" /><br><b>Twilight Geometry</b></td>
+</tr>
+</table>
+
+> 詳しいプロンプトや使用ツールは[作例の詳細](#作例-smpte-テストパターン)をご覧ください。
+
+---
+
 > [!TIP]
 > このツールの開発・維持には費用がかかっています。
 > 役に立ったらぜひ応援お願いします — [☕ コーヒー奢ってください!](https://ko-fi.com/cyocun)
@@ -271,7 +290,7 @@ Claude Desktop のプロンプト一覧から選択できるワークフロー
 
 </details>
 
-### 操作系 (37)
+### 操作系 (38)
 
 <details>
 <summary>クリックして展開</summary>
@@ -313,6 +332,7 @@ Claude Desktop のプロンプト一覧から選択できるワークフロー
 | `create_path_text` | パスに沿ったテキストの作成 |
 | `place_symbol` | シンボルインスタンスの配置・差し替え |
 | `select_objects` | UUID指定でオブジェクトを選択（複数選択対応） |
+| `create_crop_marks` | トンボ（トリムマーク）の作成。ロケールに応じた自動スタイル選択（日本式ダブルライン / 西洋式シングルライン） |
 | `place_style_guide` | アートボード外にビジュアルスタイルガイドを配置（カラー・フォント・スペーシング・マージン・ガイド間隔） |
 | `undo` | 操作の取り消し/やり直し（複数ステップ対応） |
 
@@ -339,10 +359,99 @@ Claude Desktop のプロンプト一覧から選択できるワークフロー
 |---|---|
 | `preflight_check` | 入稿前チェック（RGB 混在、リンク切れ、低解像度、白オーバープリント、透明+オーバープリント相互作用、PDF/X 適合等） |
 | `check_text_consistency` | テキスト整合性チェック（ダミーテキスト検出、表記揺れパターン検出、全テキスト一覧） |
-| `set_workflow` | ワークフロー設定（Web/Print モード切り替え、座標系デフォルト設定） |
+| `set_workflow` | ワークフロー設定（Web/Print モード切り替え、自動検出された座標系のオーバーライド） |
+
+</details>
+
+---
+
+## 座標系
+
+サーバーはドキュメントの設定から座標系を自動検出します：
+
+| ドキュメント種別 | 座標系 | 原点 | Y軸 |
+|---|---|---|---|
+| CMYK / 印刷 | `document` | 左下 | 上向き |
+| RGB / Web | `artboard-web` | アートボード左上 | 下向き |
+
+- **CMYK ドキュメント**では Illustrator ネイティブの座標系を使用。印刷デザイナーの感覚と一致します
+- **RGB ドキュメント**では Web スタイルの座標系を使用。AI が扱いやすい形式です
+- `set_workflow` で自動検出された座標系を手動でオーバーライドできます
+- すべてのツールレスポンスに `coordinateSystem` フィールドが含まれ、使用中の座標系を確認できます
+
+---
+
+## 作例: SMPTE テストパターン
+
+1920×1080 の SMPTE カラーバーテストパターンを、Claude への自然言語の指示だけで作成した例です。
+
+**プロンプト:**
+
+> 映像用の1920x1080のテストパターンつくって
+
+**出力結果:**
+
+<img src="docs/images/example-smpte-test-pattern.png" width="720" alt="Claude と illustrator-mcp-server で生成した SMPTE カラーバーテストパターン" />
+
+**アートボード構造** (`get_document_structure` の出力):
+
+<details>
+<summary>クリックで展開</summary>
+
+```
+Labels
+├── title-safe-label        (text)    — "TITLE SAFE (10%)"
+├── action-safe-label       (text)    — "ACTION SAFE (5%)"
+├── credit-label            (text)    — "Generated by illustrator-mcp-server"
+├── test-label              (text)    — "SMPTE COLOR BARS — TEST PATTERN"
+├── format-label            (text)    — "Full HD — 16:9"
+└── resolution-label        (text)    — "1920 x 1080"
+
+Center Cross
+├── title-safe              (path)    — 1536×864 タイトルセーフ枠
+├── action-safe             (path)    — 1728×972 アクションセーフ枠
+├── cross-circle            (path)    — 150×150 センターサークル
+├── cross-v                 (path)    — 垂直クロスヘア
+└── cross-h                 (path)    — 水平クロスヘア
+
+Color Bars
+├── pluge-black … pluge-navy   (path ×9)  — PLUGE / グレースケール下段
+├── rev-white … rev-blue       (path ×7)  — 補色バー中段
+└── bar-white … bar-blue       (path ×7)  — 75% SMPTE カラーバー
+```
 
 </details>
 
+> 使用ツール: `create_document`, `manage_layers`, `create_rectangle` ×23, `create_line` ×2, `create_ellipse`, `create_text_frame` ×6, `modify_object` ×4, `save_document`, `export`
+
+---
+
+## 作例: Twilight Geometry
+
+幾何学的な抽象風景画 — 「好きなアートを自由に作って」という指示だけで、Claude が構想から完成まですべて自律的に制作した作品です。
+
+**プロンプト:**
+
+> あなたが考えるアート作品を思いつくままにイラストレーターで作ってみて。時間はたっぷりある。好きなように作っていこう。
+
+**制作中の Claude の言葉:**
+
+> 「Twilight Geometry（幾何学の黄昏）」というタイトルで、幾何学的な抽象風景画を作ろうと思う。深い夜空のグラデーション背景に、幾何学的な山並み、月、星を配置する構成で。
+
+> ダイヤモンド型の星を5つ配置。微妙な色味の違い — 暖かい白、冷たい青、ラベンダーの紫 — で星の種類を表現。星座のような繊細な線で結び、ワイヤーフレームの三角形と六角形を空に浮かべて幻想的な雰囲気を強化。
+
+> 水面に月の光が揺らめく反射線を入れて、徐々に短くなる水平のきらめき線で遠近感を出す。
+
+**完成後の Claude の感想:**
+
+> 想像以上にいい雰囲気になった。幾何学と自然のハイブリッドな世界観が出せたと思う。
+
+**出力結果:**
+
+<img src="docs/images/example-twilight-geometry.png" width="720" alt="Twilight Geometry — Claude と illustrator-mcp-server で生成した幾何学的抽象風景画" />
+
+> 使用ツール: `create_document`, `manage_layers` ×4, `create_rectangle` ×2, `create_gradient` ×2, `create_path` ×11, `create_ellipse` ×14, `create_line` ×4, `create_text_frame` ×2, `modify_object`, `set_z_order`, `export`
+
 ---
 
 ## 既知の制約
@@ -414,7 +523,7 @@ npm test
 npx tsx test/e2e/smoke-test.ts
 ```
 
-E2E テストは新規ドキュメントを作成し、テストオブジェクトを配置して全 106 ケース（登録済み全ツールカバー）を 6 フェーズで自動実行します。
+E2E テストは新規ドキュメント（RGB + CMYK）を作成し、テストオブジェクトを配置して全 182 ケース（座標系の自動検出を含む登録済み全ツールカバー）を 10 フェーズで自動実行します。
 
 ---
 

package/README.md

@@ -2,11 +2,11 @@
 
 # Illustrator MCP Server
 
-[![npm](https://img.shields.io/npm/v/illustrator-mcp-server.svg)](https://www.npmjs.com/package/illustrator-mcp-server)
-[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
-[![Platform](https://img.shields.io/badge/Platform-macOS%20%7C%20Windows-lightgrey.svg)]()
-[![Illustrator](https://img.shields.io/badge/Illustrator-CC%202024%2B-orange.svg)](https://www.adobe.com/products/illustrator.html)
-[![MCP](https://img.shields.io/badge/MCP-Compatible-purple.svg)](https://modelcontextprotocol.io/)
+[![npm](https://img.shields.io/npm/v/illustrator-mcp-server.svg?style=flat-square&colorA=18181B&colorB=18181B)](https://www.npmjs.com/package/illustrator-mcp-server)
+[![License: MIT](https://img.shields.io/badge/License-MIT-18181B.svg?style=flat-square&colorA=18181B)](LICENSE)
+[![Platform](https://img.shields.io/badge/Platform-macOS%20%7C%20Windows-18181B.svg?style=flat-square&colorA=18181B)]()
+[![Illustrator](https://img.shields.io/badge/Illustrator-CC%202024%2B-18181B.svg?style=flat-square&colorA=18181B)](https://www.adobe.com/products/illustrator.html)
+[![MCP](https://img.shields.io/badge/MCP-Compatible-18181B.svg?style=flat-square&colorA=18181B)](https://modelcontextprotocol.io/)
 [![Ko-fi](https://img.shields.io/badge/Ko--fi-FF5E5B?style=flat&logo=ko-fi&logoColor=white)](https://ko-fi.com/cyocun)
 
 An [MCP (Model Context Protocol)](https://modelcontextprotocol.io/) server for reading, manipulating, and exporting Adobe Illustrator design data — with 63 built-in tools.
@@ -17,6 +17,25 @@ Control Illustrator directly from AI assistants like Claude — extract design i
 
 ---
 
+## 🎨 Gallery
+
+All artwork below was created entirely by Claude through natural language conversation — no manual Illustrator operation involved.
+
+<table>
+<tr>
+<td align="center"><img src="docs/images/example-event-poster.png" width="300" alt="Event poster — SYNC TOKYO 2026" /><br><b>Event Poster</b></td>
+<td align="center"><img src="docs/images/example-logo-concepts.png" width="300" alt="Logo concepts — Slow Drip Coffee Co." /><br><b>Logo Concepts</b></td>
+</tr>
+<tr>
+<td align="center"><img src="docs/images/example-business-card.png" width="300" alt="Business card — KUMO Studio" /><br><b>Business Card</b></td>
+<td align="center"><img src="docs/images/example-twilight-geometry.png" width="300" alt="Twilight Geometry — abstract geometric landscape" /><br><b>Twilight Geometry</b></td>
+</tr>
+</table>
+
+> See [detailed breakdowns](#example-smpte-test-pattern) below for prompts, tool usage, and artboard structure.
+
+---
+
 > [!TIP]
 > Developing and maintaining this tool takes time and resources.
 > If it helps your workflow, your support means a lot — [☕ buy me a coffee!](https://ko-fi.com/cyocun)
@@ -341,12 +360,101 @@ Pre-built workflow templates available in the Claude Desktop prompt picker.
 |---|---|
 | `preflight_check` | Pre-press check (RGB mixing, broken links, low resolution, white overprint, transparency+overprint interaction, PDF/X compliance, etc.) |
 | `check_text_consistency` | Text consistency check (placeholder detection, notation variation patterns, full text listing for LLM analysis) |
-| `set_workflow` | Set workflow mode (web/print) to configure default coordinate system |
+| `set_workflow` | Set workflow mode (web/print) to override auto-detected coordinate system |
 
 </details>
 
 ---
 
+## Coordinate System
+
+The server automatically detects the coordinate system from the document:
+
+| Document type | Coordinate system | Origin | Y axis |
+|---|---|---|---|
+| CMYK / Print | `document` | Bottom-left | Up |
+| RGB / Web | `artboard-web` | Top-left of artboard | Down |
+
+- **CMYK documents** use Illustrator's native coordinate system, matching what print designers expect
+- **RGB documents** use a web-style coordinate system that is easier for AI to work with
+- Use `set_workflow` to override the auto-detected coordinate system if needed
+- All tool responses include a `coordinateSystem` field indicating which system is active
+
+---
+
+## Example: SMPTE Test Pattern
+
+A 1920×1080 SMPTE color bar test pattern, created entirely through natural language instructions to Claude.
+
+**Prompt:**
+
+> Make a 1920x1080 video test pattern
+
+**Result:**
+
+<img src="docs/images/example-smpte-test-pattern.png" width="720" alt="SMPTE color bar test pattern generated by Claude via illustrator-mcp-server" />
+
+**Artboard structure** (via `get_document_structure`):
+
+<details>
+<summary>Click to expand</summary>
+
+```
+Labels
+├── title-safe-label        (text)    — "TITLE SAFE (10%)"
+├── action-safe-label       (text)    — "ACTION SAFE (5%)"
+├── credit-label            (text)    — "Generated by illustrator-mcp-server"
+├── test-label              (text)    — "SMPTE COLOR BARS — TEST PATTERN"
+├── format-label            (text)    — "Full HD — 16:9"
+└── resolution-label        (text)    — "1920 x 1080"
+
+Center Cross
+├── title-safe              (path)    — 1536×864 stroke rectangle
+├── action-safe             (path)    — 1728×972 stroke rectangle
+├── cross-circle            (path)    — 150×150 center circle
+├── cross-v                 (path)    — vertical crosshair
+└── cross-h                 (path)    — horizontal crosshair
+
+Color Bars
+├── pluge-black … pluge-navy   (path ×9)  — PLUGE / grayscale bottom strip
+├── rev-white … rev-blue       (path ×7)  — reverse color middle strip
+└── bar-white … bar-blue       (path ×7)  — 75% SMPTE color bars
+```
+
+</details>
+
+> Tools used: `create_document`, `manage_layers`, `create_rectangle` ×23, `create_line` ×2, `create_ellipse`, `create_text_frame` ×6, `modify_object` ×4, `save_document`, `export`
+
+---
+
+## Example: Twilight Geometry
+
+An abstract geometric landscape artwork — created entirely by Claude, with no human design direction beyond "make whatever art you want."
+
+**Prompt:**
+
+> Make an art piece of your own imagination in Illustrator. Take your time. Create whatever you like.
+
+**Claude's process:**
+
+> I'll create "Twilight Geometry" — an abstract landscape with geometric celestial elements. A deep gradient twilight sky, layered mountain silhouettes, a crescent moon with decorative rings, and stars scattered across the canvas.
+
+> Diamond-shaped stars in different colors — warm whites, cool blues, lavender purples — each one subtly different to suggest different types of stars. Constellation lines connecting them. Wireframe triangles and a hexagon floating in the sky for a mystical atmosphere.
+
+> A water surface at the bottom with the moon's light reflected as shimmering wavy lines, fading as they descend.
+
+**Claude's reflection:**
+
+> It turned out better than I expected. I think the hybrid world of geometry and nature came through well.
+
+**Result:**
+
+<img src="docs/images/example-twilight-geometry.png" width="720" alt="Twilight Geometry — abstract geometric landscape art generated by Claude via illustrator-mcp-server" />
+
+> Tools used: `create_document`, `manage_layers` ×4, `create_rectangle` ×2, `create_gradient` ×2, `create_path` ×11, `create_ellipse` ×14, `create_line` ×4, `create_text_frame` ×2, `modify_object`, `set_z_order`, `export`
+
+---
+
 ## Known Limitations
 
 | Limitation | Details |
@@ -416,7 +524,7 @@ npm test
 npx tsx test/e2e/smoke-test.ts
 ```
 
-The E2E test creates a fresh document, places test objects, runs 106 test cases across 6 phases covering all registered tools, and cleans up automatically.
+The E2E test creates fresh documents (RGB + CMYK), places test objects, runs 182 test cases across 10 phases covering all registered tools and coordinate system auto-detection, and cleans up automatically.
 
 ---