.penファイルのデザイン提案・実装スキル。Pencil MCPツールを使用して、プロのデザイナーとしてUIデザインを作成・編集する。ユーザーが.penファイルのデザイン作業を依頼した場合、またはUIデザイン・レイアウト・コンポーネント作成を要望した場合にトリガー。
Pencil MCPツールを使用して.penファイルのデザインを提案・実装するスキル。
get_editor_state(include_schema: true) で現在の状態を取得する。
open_document で対象ファイルを開く（新規なら "new"）include_schema: false を使用batch_get でドキュメント構造を読み取る。
reusable: true）を検索して利用可能な部品を把握readDepth: 2 で全体構造を確認デザインタイプに応じて適切なガイドラインを取得する。
| デザインタイプ | get_guidelines topic |
|---|---|
| ランディングページ | landing-page |
| モバイルアプリ | mobile-app |
| Webアプリ/ダッシュボード | web-app |
| デザインシステム利用 | design-system |
| スライド | slides |
| テーブル含む | table |
新規デザインの場合は get_style_guide_tags → get_style_guide(tags) でスタイルガイドも取得する。
実装前にテキストでデザイン方針を提示する:
ユーザーの承認を待つ。承認なしに実装しない。
承認後、batch_design で変更を適用する。
実装後に品質を確認する。
get_screenshot で視覚的に確認snapshot_layout(problemsOnly: true) でレイアウト問題を検出スクリーンショットとともに変更内容をユーザーに提示する。問題点や改善提案があれば併せて報告する。
pencil-tool-patterns.md - batch_design操作の具体パターン集