pencil-renderer

Pencil Renderer

美的DNAコードを、MCP経由でPencilの.penフレームに変換します。

インターフェース

入力：

• DNAコード：[layout, color, typography, motion, density, background]
• コンポーネントタイプ：hero | card | form | nav | footer | section | button | input
• 任意：名前、寸法、親フレームID

出力：

• .penファイル内のフレームID
• レンダリングされたフレームのスクリーンショット

ワークフロー

1. ドキュメントの準備を確認

// Check if editor open
mcp__pencil__get_editor_state({ include_schema: false })

// If no editor, open or create
mcp__pencil__open_document({ filePathOrTemplate: "new" })

2. スタイルの基盤を取得

// Get available style guide tags
mcp__pencil__get_style_guide_tags()

// Get style guide matching DNA mood
// Map DNA to relevant tags:
// - dark color → ["dark-mode", "moody"]
// - light color → ["light", "clean"]
// - spacious density → ["airy", "whitespace"]
// etc.
mcp__pencil__get_style_guide({ tags: [mapped_tags] })

3. DNAをPencilのプロパティに変換

参照：references/dna-to-pencil.md

DNA軸からPencilプロパティへのマッピングは決定論的です。 例：centeredレイアウト → alignItems: "center"、対称的なパディング

4. デザイン操作を実行

参照：references/batch-design-patterns.md

mcp__pencil__batch_design({
  filePath: "<path>.pen",
  operations: `
    frame=I(document, {type: "frame", name: "Hero-Brutalist", ...properties})
    heading=I(frame, {type: "text", content: "Headline", ...typography})
    // ... additional operations
  `
})

5. 結果をキャプチャ

// Screenshot for visual verification
mcp__pencil__get_screenshot({ nodeId: "frameId" })

6. 返却

Frame ID: [id]
DNA: [layout, color, typography, motion, density, background]

さらに、スクリーンショット画像。

コンポーネントテンプレート

タイプ	構造
hero	コンテナ + 見出し + サブ見出し + CTAボタン
card	コンテナ + 画像領域 + コンテンツ + アクション
form	コンテナ + ラベル + 入力欄 + 送信
nav	コンテナ + ロゴ + リンク + アクション
footer	コンテナ + 列 + リンク + 法的情報
section	コンテナ + 見出し + コンテンツグリッド
button	フレーム + テキスト + アイコン用スロット
input	フレーム + ラベル + フィールド + 検証

DNA変換クイックリファレンス

DNA軸	主なPencilプロパティ
レイアウト：中央揃え	alignItems: "center"、均等なパディング
レイアウト：非対称	オフセット位置、変化をつけた間隔
レイアウト：ベントー	スパンに変化をつけたグリッド
色：ダーク	暗い塗り、明るい前景
色：グラデーション	fill: {type: "linear", stops: [...]}
タイポグラフィ：ディスプレイ重視	大きな見出しサイズ、高いコントラスト
タイポグラフィ：ミニマル	控えめなスケール、単一のフォントファミリー
密度：ゆったり	gap: 24-48、余裕のあるパディング
密度：コンパクト	gap: 8-16、狭いパディング
背景：単色	単色の塗り
背景：テクスチャ	パターン／画像にはG()

制約

• 単一の目的：DNAをフレームにレンダリングします。ヒアリングや反復は行いません。
• Pencil MCPが必須：利用できない場合は即座に失敗します
• 決定論的なマッピング：同じDNAからは常に同じ構造が生成されます
• 合成可能：オーケストレーターから呼び出され、ユーザーから直接呼び出されることはありません

参照資料

• references/dna-to-pencil.md — 軸の完全なマッピング
• references/batch-design-patterns.md — 一般的な操作シーケンス
• aesthetic-system/references/dna-codes.md — DNA軸の定義

統合

呼び出し元：

• design-explorationオーケストレーター（Pencilバックエンドが利用可能な場合）

組み合わせるもの：

• aesthetic-system（DNAの解釈用）