chiroro-jr/pencil-design

pencil-design は何をしますか？

Pencil (.pen ファイル) で UI をデザインし、本番コードを生成します。.pen ファイルの操作、Pencil での画面やコンポーネントの設計、デザインからのコード生成時に使用します。Pencil、.pen ファイル、デザインからコードへのワークフロー、または Pencil MCP ツールを使用した UI デザインに関するタスクで起動します。

このスキルは、Pencil デザインツールと連携して、以下のようなタスクを支援します：

• .pen ファイルの作成、読み込み、編集
• 画面レイアウト、コンポーネント、状態の設計
• デザインからの本番コード（例：HTML、CSS、React コンポーネント）の自動生成
• Pencil MCP ツールを使用した設計プロセスの効率化

ワークフローの例：

1. ユーザーが Pencil で UI デザイン（.pen ファイル）を作成または指定します。
2. スキルが .pen ファイルを解析し、構造、コンポーネント、スタイルを抽出します。
3. 解析結果に基づいて、適切なフレームワーク（React、Vue、Angular など）用のコードを生成します。
4. 生成されたコードは、すぐにプロジェクトに統合できる形式で出力されます。

注記: このスキルは、Pencil MCP サーバーが正しく設定され、アクセス可能であることを前提としています。環境変数 PENCIL_MCP_ENDPOINT が設定されていることを確認してください。

設定

export PENCIL_MCP_ENDPOINT=http://localhost:8080/mcp

使用方法

claude_code や cursor などの AI エージェント内で、以下のような自然言語指示を使用します：

• "design.pen ファイルを読み込んで、そのデザインを React コードに変換してください。"
• "新しいログイン画面を Pencil でデザインし、対応するコードを生成してください。"
• "この .pen ファイルのコンポーネント構造を解析して、Vue コンポーネントを出力してください。"

関連リンク

• Pencil プロジェクト
• MCP プロトコル