pencil-renderer

name	pencil-renderer
description	Render DNA codes to Pencil .pen frames. Does ONE thing well. Input: DNA code + component type (hero, card, form, etc.) Output: .pen frame ID + screenshot Use when: design-exploration or other orchestrators need to render visual proposals using Pencil MCP backend.
effort	high

Pencil Renderer

Translate aesthetic DNA codes into Pencil .pen frames via MCP.

Interface

Input:

• DNA code: [layout, color, typography, motion, density, background]
• Component type: hero | card | form | nav | footer | section | button | input
• Optional: Name, dimensions, parent frame ID

Output:

• Frame ID in .pen file
• Screenshot of rendered frame

Workflow

1. Ensure Document Ready

// 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 Style Foundation

// Get available style guide tags
mcp__pencil__get_style_guide_tags()

// Get style guide matching DNA mood





({ : [mapped_tags] })