✓ Verified 💻 Development ✓ Enhanced Data

Pencil Renderer

Render DNA codes to Pencil .pen frames.

Rating: 4 (240 reviews)
Downloads: 31,846 downloads
Version: 1.0.0

Overview

Render DNA codes to Pencil .pen frames.

Complete Documentation

View Source →

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

javascript

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

javascript

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

Reference: references/dna-to-pencil.md

DNA axis → Pencil property mapping is deterministic. Example: centered layout → alignItems: "center", symmetric padding

4. Execute Design Operations

Reference: references/batch-design-patterns.md

javascript

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

javascript

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

6. Return

markdown

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)

Installation

Terminal bash


openclaw install pencil-renderer

Copied!

💻Code Examples

mcppencilget_style_guide({ tags: [mapped_tags] })

mcppencilgetstyleguide-tags-mappedtags-.txt

### 3. 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

### 4. Execute Design Operations

Reference: `references/batch-design-patterns.md`

example.js

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

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

example.js

// 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] })

example.js

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
  `
})