pencil.dev向けのデザインプロンプトを生成するスキル。画面の要件・機能仕様を整理し、デザインツールに投げるための構造化されたプロンプトを日本語で出力する。「デザイン依頼」「デザインプロンプト作って」「pencilに投げたい」「画面デザイン作りたい」「UIデザインのプロンプト」などのトリガーで発動。新しい画面を作るとき、既存画面を改善するとき、デザイナーに要件を伝えるときにも使える。
pencil.devに投げるための構造化されたデザインプロンプトを生成する。 ユーザーの口頭説明・既存コード・仕様ドキュメントからインプットを収集し、pencil.devが理解しやすい形式で出力する。
以下の3つのソースから情報を集める。すべて揃う必要はなく、利用可能なものを使う。
doc/features/ 配下に関連するドキュメントがあれば読む情報が足りない場合は、1つずつ質問して補完する。特に以下は必ず確認する：
doc/design/INDEX.md を読み、利用可能なデザイントークン・レイアウトパターンのIDを確認する。
該当する.penファイル（通常は doc/design/common.pen）がエディタで開かれていれば、batch_get でデザイントークンを取得してプロンプトに含める。
開かれていない場合は、INDEX.mdの情報をベースにトークンの参照先を記載する。
以下のテンプレート構造に沿ってプロンプトを生成する。
# [画面名] デザイン依頼
## コンポーネントフレームワーク
Chakra UI V3
## この画面の目的
[1〜2文で画面の目的を簡潔に記述]
## 前提情報
- **ユーザー**: [誰が使うか + ITリテラシーの想定]
- **対応デバイス**: [PC / SP / 両方]
- **関連する既存画面**: [あれば記載]
- [その他、デザインに影響する前提条件]
## 画面構成
### [セクション名1]
- [要素と配置の説明]
- [操作方法]
### [セクション名2]
...
## 補助機能
[メインの画面構成以外の補助的な機能があれば記載]
## データの具体例
[抽象的な「テキスト」ではなく、リアルなサンプルデータを記載]
[テーブルやリストがある場合はコードブロックで具体例を示す]
## 状態バリエーション
- **通常時**: [デフォルトの状態]
- **空の状態**: [データがないとき]
- **ローディング**: [読み込み中]
- **エラー時**: [エラー発生時]
[必要に応じて追加: 選択中、編集中、確認ダイアログ等]
## SP版での考慮点
[SP対応が必要な場合のみ記載]
- [レイアウトの違い]
- [操作方法の違い（タップ、スワイプ等）]
- [コンポーネントの置き換え（Dialog → BottomSheet等）]
## デザイントークン
[INDEX.mdまたはcommon.penから取得した情報を記載]
- カラー: [プライマリ、セカンダリ等]
- タイポグラフィ: [見出し、本文等]
- スペーシング: [余白の基本単位]
## 共通レイアウトパターン
[該当するパターンを記載]
- [SideMenu / BottomMenu / FormCard / Dialog / BottomSheet 等]
## デザインで特に考えてほしいポイント
1. [最も重要なデザイン課題]
2. [次に重要な課題]
3. [その他の考慮点]
生成したプロンプトはマークダウンのコードブロックで囲んで出力する。ユーザーがそのままコピペしてpencil.devに貼れるようにする。