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" })
- Get Style Foundation // 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] })
- Translate DNA to Pencil Properties
Reference: references/dna-to-pencil.md
DNA axis → Pencil property mapping is deterministic. Example: centered layout → alignItems: "center", symmetric padding
- Execute Design Operations
Reference: references/batch-design-patterns.md
mcp__pencil__batch_design({
filePath: "frame=I(document, {type: "frame", name: "Hero-Brutalist", ...properties})
heading=I(frame, {type: "text", content: "Headline", ...typography})
// ... additional operations
})
-
Capture Result // Screenshot for visual verification mcp__pencil__get_screenshot({ nodeId: "frameId" })
-
Return Frame ID: [id] DNA: [layout, color, typography, motion, density, background]
Plus screenshot image.
Component Templates Type Structure hero Container + headline + subhead + CTA buttons card Container + image area + content + actions form Container + labels + inputs + submit nav Container + logo + links + actions footer Container + columns + links + legal section Container + heading + content grid button Frame + text + icon slot input Frame + label + field + validation DNA Translation Quick Reference DNA Axis Key Pencil Properties Layout: centered alignItems: "center", equal padding Layout: asymmetric Offset positions, varied gaps Layout: bento Grid with varied spans Color: dark Dark fill, light foreground Color: gradient fill: {type: "linear", stops: [...]} Typography: display-heavy Large heading sizes, high contrast Typography: minimal Restrained scale, single family Density: spacious gap: 24-48, generous padding Density: compact gap: 8-16, tight padding Background: solid Single fill color Background: textured G() for patterns/images Constraints Single concern: Render DNA → frame. No interview, no iteration. Pencil MCP required: Fails fast if unavailable Deterministic mapping: Same DNA always produces same structure Composable: Called by orchestrators, not users directly References references/dna-to-pencil.md — Complete axis mapping references/batch-design-patterns.md — Common operation sequences aesthetic-system/references/dna-codes.md — DNA axis definitions Integration
Called by:
design-exploration orchestrator (when Pencil backend available)
Composes:
aesthetic-system (for DNA interpretation)