Pencil Renderer

Interface

• DNA code:

  [layout, color, typography, motion, density, background]

• Component type:

  hero | card | form | nav | footer | section | button | input

• Optional: Name, dimensions, parent frame ID

• 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
// 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. Translate DNA to Pencil Properties

references/dna-to-pencil.md

centered

alignItems: "center"

4. Execute Design Operations

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. Capture Result

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

6. Return

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

Component Templates

hero

card

form

nav

footer

section

button

input

DNA Translation Quick Reference

alignItems: "center"

fill: {type: "linear", stops: [...]}

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

• design-exploration

  orchestrator (when Pencil backend available)

• aesthetic-system

  (for DNA interpretation)