pencil-replicator

pencil-replicator

Chrome で表示中の Web 画面を Pencil (.pen) ファイルに高精度で再現する Agent Team スキル。

概要

このスキルは 3 つの専門エージェントが連携して動作する:

screen-analyzer  →  (chrome-analysis.md)  →  design-builder
                                                    ↕  (フィードバックループ)
                                              quality-reviewer

エージェント	役割	MCP
screen-analyzer	Chrome 画面の構造・スタイル・テキストを徹底分析	Chrome DevTools
design-builder	分析結果に基づいて .pen ファイルを構築	Pencil
quality-reviewer	Chrome vs Pencil の差分検出と修正指示	Chrome DevTools + Pencil

精度目標: quality-reviewer の 10点満点スコアが 7点以上（「見分けがつかない」レベル）

---

Step 1: ヒアリング

ユーザーに以下を確認する:

1. 対象 URL: Chrome で開いている画面の URL（例: localhost:2626）
2. .pen ファイル: 既存ファイルへの追加 か 新規作成 か
   • 既存ファイルの場合: ファイルパスを確認
   • 新規作成の場合: new を使用
3. 対象セクション: 画面全体 か 特定のセクションのみか

確認できたら Step 2 へ。

---

Step 2: リーダー（自分）の準備

ToolSearch で Pencil MCP をロードしてから以下を実行:

ToolSearch(query: "+pencil get_editor_state")
ToolSearch(query: "+pencil open_document")
ToolSearch(query: "+pencil get_style_guide_tags")
ToolSearch(query: "+pencil batch_get")
ToolSearch(query: "+pencil get_guidelines")

2-1. .pen ファイルの準備

# 新規作成の場合
mcp__pencil__open_document(filePathOrNew: "new")

# 既存ファイルを開く場合
mcp__pencil__open_document(filePathOrNew: "{ユーザー指定のパス}")

# 現在の状態確認
mcp__pencil__get_editor_state(include_schema: true)

2-2. スタイルガイドの取得・適用

mcp__pencil__get_style_guide_tags()
# → 適切なタグを選択（例: "web-app", "dashboard", "saas"）
mcp__pencil__get_style_guide(tags: ["web-app", ...])

2-3. コンポーネント一覧の取得

mcp__pencil__batch_get(
  patterns: [{"reusable": true}],
  readDepth: 2,
  searchDepth: 3
)

2-4. コンテキストファイルの書き出し

以下の情報を .claude/pencil-replicator/pencil-context.md に書き出す:

# Pencil コンテキスト

## .pen ファイル情報
- パス: {path}
- ドキュメントID: {id}

## スタイルガイド
{get_style_guide の結果の主要情報}

## デザインシステムコンポーネント
{batch_get で取得したコンポーネント一覧（name, nodeId）}

## ガイドライン
{get_guidelines(topic: "web-app") の主要ルール}

2-5. 進捗ファイルの初期化