From pencil-replicator
Replicates Chrome web screens into Pencil .pen files using agent team for DevTools analysis, Pencil construction, and quality review. Ideal for UI design capture from live sites.
npx claudepluginhub sean-sunagaku/claude-code-plugin --plugin pencil-replicatorThis skill uses the workspace's default tool permissions.
Chrome で表示中の Web 画面を Pencil (.pen) ファイルに高精度で再現する Agent Team スキル。
Converts Stitch page HTML or URLs to Pencil .pen designs by parsing DOM/Tailwind, mapping HTML elements to Pencil nodes/styles, and generating sequential batch_design for precise layout fidelity.
Reviews and improves UI designs for iOS and Web using 5 specialist agents (UX, visual, accessibility, mobile UI, copy designers) that discuss and edit in Pencil tool.
Reads/writes Figma .fig files via CLI for tree inspection, XPath queries, exports (PNG/SVG/JSX-Tailwind), token analysis; includes MCP server and Vue SDK for programmatic design automation.
Share bugs, ideas, or general feedback.
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点以上(「見分けがつかない」レベル)
ユーザーに以下を確認する:
localhost:2626)new を使用確認できたら 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")
# 新規作成の場合
mcp__pencil__open_document(filePathOrNew: "new")
# 既存ファイルを開く場合
mcp__pencil__open_document(filePathOrNew: "{ユーザー指定のパス}")
# 現在の状態確認
mcp__pencil__get_editor_state(include_schema: true)
mcp__pencil__get_style_guide_tags()
# → 適切なタグを選択(例: "web-app", "dashboard", "saas")
mcp__pencil__get_style_guide(tags: ["web-app", ...])
mcp__pencil__batch_get(
patterns: [{"reusable": true}],
readDepth: 2,
searchDepth: 3
)
以下の情報を .claude/pencil-replicator/pencil-context.md に書き出す:
# Pencil コンテキスト
## .pen ファイル情報
- パス: {path}
- ドキュメントID: {id}
## スタイルガイド
{get_style_guide の結果の主要情報}
## デザインシステムコンポーネント
{batch_get で取得したコンポーネント一覧(name, nodeId)}
## ガイドライン
{get_guidelines(topic: "web-app") の主要ルール}
.claude/pencil-replicator/progress.md を作成する。Compaction 後もこのファイルを読めば現在地がわかるようにする。
# 進捗状況
## 基本情報
- 対象 URL: {URL}
- .pen ファイル: {path}
- スクリーン ID: (未作成)
## セクション進捗
(画面分析後に更新)
## 既知の問題
(なし)
画面の複雑度に応じて作業モードを選択する:
| 複雑度 | 目安 | モード | 説明 |
|---|---|---|---|
| シンプル | 要素 20 個以下 | 直接作業 | team-lead が直接 Chrome 分析 + Pencil 構築 |
| 中程度 | 20-50 個 | screen-analyzer + 直接構築 | 分析のみ screen-analyzer に委任 |
| 複雑 | 50 個以上 | フルチーム | 3エージェント全員起動 |
team-lead が自ら Chrome DevTools で分析し、Pencil で構築する。 agents/screen-analyzer.md と agents/design-builder.md の手順を参照しながら作業する。
1. ToolSearch で Chrome DevTools + Pencil MCP をロード
2. Chrome DevTools で画面のスクリーンショットを取得(参照画像として保持)
3. chrome-devtools で画面分析 → chrome-analysis.md に書き出し
4. UI要素インベントリ: スクリーンショットを見ながら全要素が分析に含まれているか確認
5. Pencil で構築(5-10 ops ずつ + Pencil スクショ確認)
6. 【必須】各セクション完成後に Chrome スクショ vs Pencil スクショの直接比較
- 要素の過不足チェック(Chrome にあって Pencil にない要素はないか)
- テキスト内容の一致チェック(原文をそのまま使っているか)
- レイアウト・色・サイズの目視比較
7. 差異があれば即座に修正してから次のセクションへ
8. progress.md を随時更新
9. 全セクション完成後に全体スクショ比較で最終レビュー
重要: chrome-analysis.md はあくまで数値参考。Chrome 実画面との目視比較が最終的な品質保証。 分析ファイルだけを見て構築すると、分析漏れがそのまま再現漏れになる。
Step 4 に進む。
TeamCreate(team_name: "pencil-replicator", description: "Chrome 画面を Pencil に再現するチーム")
TaskCreate("Chrome 画面分析", description: "Chrome DevTools で画面を徹底分析し chrome-analysis.md を生成")
# → Task ID: A
TaskCreate("Pencil 構造構築", description: "chrome-analysis.md を読んで .pen ファイルを構築", blockedBy: [A])
# → Task ID: B
TaskCreate("品質レビュー", description: "Chrome vs Pencil の差分検出・修正指示", blockedBy: [B])
# → Task ID: C
重要: 各エージェントは subagent_type: "general-purpose" で起動する(MCP ツールへのアクセスに必要)。起動時に agents/*.md の内容をプロンプトに含める。
起動順序(逐次): screen-analyzer → 完了確認 → design-builder → 完了確認 → quality-reviewer
逐次起動のメリット:
Agent(
subagent_type: "general-purpose",
team_name: "pencil-replicator",
name: "screen-analyzer",
model: "opus",
run_in_background: true,
prompt: """
あなたは screen-analyzer です。pencil-replicator チームの一員として画面分析を担当します。
## あなたの役割とシステムプロンプト
{Read("~/.claude/skills/pencil-replicator/agents/screen-analyzer.md") の内容をここに貼り付ける}
## CSS → Pencil 変換マッピング
{Read("~/.claude/skills/pencil-replicator/references/css-mapping.md") の主要部分}
## 今回の作業
- 対象 URL: {URL}
- コンテキストファイル: .claude/pencil-replicator/
- チームメンバー: screen-analyzer(自分), design-builder, quality-reviewer, team-lead
TaskList で自分のタスクを確認し、作業を開始してください。
"""
)
Agent(
subagent_type: "general-purpose",
team_name: "pencil-replicator",
name: "design-builder",
model: "opus",
run_in_background: true,
prompt: """
あなたは design-builder です。pencil-replicator チームの一員として Pencil 構築を担当します。
## あなたの役割とシステムプロンプト
{Read("~/.claude/skills/pencil-replicator/agents/design-builder.md") の内容をここに貼り付ける}
## CSS → Pencil 変換マッピング
{Read("~/.claude/skills/pencil-replicator/references/css-mapping.md") の主要部分}
## 今回の作業
- .pen ファイルパス: {path}
- コンテキストファイル: .claude/pencil-replicator/
- チームメンバー: screen-analyzer, design-builder(自分), quality-reviewer, team-lead
TaskList で自分のタスクを確認し、blockedBy が解消されるまで待機してから作業を開始してください。
"""
)
Agent(
subagent_type: "general-purpose",
team_name: "pencil-replicator",
name: "quality-reviewer",
model: "opus",
run_in_background: true,
prompt: """
あなたは quality-reviewer です。pencil-replicator チームの一員として品質検証を担当します。
## あなたの役割とシステムプロンプト
{Read("~/.claude/skills/pencil-replicator/agents/quality-reviewer.md") の内容をここに貼り付ける}
## レビューレポートテンプレート
{Read("~/.claude/skills/pencil-replicator/references/report-template.md") の内容}
## 今回の作業
- 対象 URL: {URL}
- .pen ファイルパス: {path}
- コンテキストファイル: .claude/pencil-replicator/
- チームメンバー: screen-analyzer, design-builder, quality-reviewer(自分), team-lead
TaskList で自分のタスクを確認し、blockedBy が解消されるまで待機してから作業を開始してください。
"""
)
エージェントが自律的に作業する間、リーダーは以下を行う:
screen-analyzer: Chrome 画面分析 → chrome-analysis.md 書き出し → design-builder に通知
design-builder: chrome-analysis.md 読み込み → .pen 構築 → quality-reviewer に通知
quality-reviewer: Chrome vs Pencil 比較 → スコアリング
├─ 7点以上: PASS → team-lead に報告
└─ 6点以下: FAIL → design-builder に具体的な修正指示
└─ design-builder: 修正 → quality-reviewer に再レビュー依頼(最大2往復)
以下の状況では team-lead が介入する:
SendMessage(type: "message", recipient: "{エージェント名}", content: "{具体的な指示}")
quality-reviewer から PASS 報告を受けたら(またはフルチームモードを使わない場合も)、 必ず Chrome の実画面と Pencil のスクリーンショットを並べて目視確認する。
# 1. Chrome で対象ページを表示
mcp__chrome-devtools__list_pages()
mcp__chrome-devtools__take_screenshot() → Chrome 実画面
# 2. Pencil のスクリーンショットを取得
mcp__pencil__get_screenshot(nodeId: "{スクリーンのルートノードID}") → Pencil 再現結果
# 3. 以下の7観点で比較
| # | チェック項目 | 確認内容 |
|---|---|---|
| 1 | 要素の過不足 | Chrome にある全ての UI 要素が Pencil にも存在するか(逆も確認) |
| 2 | テキスト一致 | テキストが Chrome の原文と完全一致するか(言語・内容) |
| 3 | レイアウト | 要素の配置順序・方向・間隔が一致しているか |
| 4 | 色 | 背景色・テキスト色・ボーダー色が視覚的に同一か |
| 5 | タイポグラフィ | フォントサイズ・ウェイトが一致しているか |
| 6 | アイコン・装飾 | アイコンの種類・位置、角丸・シャドウが一致しているか |
| 7 | 全体印象 | ぱっと見で同じ画面に見えるか |
差異が見つかった場合:
2つの画像を見比べて 要素の過不足がなく、テキストが一致し、レイアウトが同等 であれば完了。
# 各エージェントにシャットダウン依頼
SendMessage(type: "shutdown_request", recipient: "screen-analyzer", content: "作業完了、シャットダウンをお願いします")
SendMessage(type: "shutdown_request", recipient: "design-builder", content: "作業完了、シャットダウンをお願いします")
SendMessage(type: "shutdown_request", recipient: "quality-reviewer", content: "作業完了、シャットダウンをお願いします")
# チーム削除
TeamDelete(name: "pencil-replicator")
各エージェントは ToolSearch で MCP ツールをロードする手順を持っている。ToolSearch の結果でツールが返ってこない場合は、Chrome/Pencil アプリが起動しているか確認する。
evaluate_script を使った JavaScript の実行結果が不完全な場合、より深い depth やより広い要素選択で再分析を依頼する。
セクション数が多い場合、画面を上から下に 3 分割して段階的に構築するよう指示する。
chrome-analysis.md の CSS 値と Pencil のノード値を突き合わせて、どのプロパティがずれているか特定してから修正指示を出す。
progress.md を読めば現在地がわかる。以下の手順で再開:
.claude/pencil-replicator/progress.md を読む以下は実際の構築で判明した制限。詳細は references/css-mapping.md のセクション 12 を参照。
fill にそのまま渡すと透明になる → Pencil 構造化構文 {type: "gradient", gradientType: "linear", rotation: N, colors: [{color, position}]} を使うI() で layout: "horizontal" を指定してもサイレントに除外される。justifyContent、alignItems も同様。必ず I() の後に U() で再設定し、batch_get で保存を確認するI() で指定しても 0 になる場合がある → U() で明示的に再設定"line-through" 等は Pencil 非対応(サイレント除外)→ 完了状態はグレーテキスト色 + 緑チェックアイコンで代替表現" & がリテラル表示される → テキスト content にはシングルクォートや実文字を使う("Do Now" → 'Do Now')position: "absolute", right, bottom は動作しない。x/y は flexbox layout 内では無視される → FAB 等のフローティング要素は「親を layout: "vertical" + alignItems: "center" にして最後の子要素にする」パターンで対応alignItems: "center" の場合、子の width: "fill_container" だけでは横幅が伸びない → alignSelf: "stretch" を併用するChrome の表示テキストを推測で書かない。必ず以下のいずれかから取得する:
messages/ja.json 等のローカライゼーションファイルから正確なキーと値を取得t("key") 呼び出しから i18n キーを特定し、翻訳ファイルと照合よくある失敗パターン:
agents/screen-analyzer.md: 画面分析エージェントの詳細定義agents/design-builder.md: Pencil 構築エージェントの詳細定義agents/quality-reviewer.md: 品質検証エージェントの詳細定義references/css-mapping.md: CSS → Pencil プロパティ変換マッピングreferences/icon-mapping.md: lucide-react → Pencil icon_font 変換マッピングreferences/report-template.md: quality-reviewer レビューレポートテンプレート