Pencil Renderer

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.

Security Scan

The skill's declared purpose (translate DNA codes to Pencil .pen frames) matches its instructions and references, and it requests no extra credentials or installs—behavior is internally consistent.

Purpose & Capability

Name/description match the SKILL.md and reference files: all operations are calls to a Pencil MCP surface (mcp__pencil__*) to open documents, map DNA axes to Pencil properties, run batch design operations, and capture screenshots. Nothing in the package asks for unrelated cloud or system credentials or tools.

Instruction Scope

Runtime instructions are narrowly scoped to Pencil MCP operations (get_editor_state, open_document, get_style_guide, batch_design, get_screenshot) and to deterministic DNA→Pencil mappings from the provided references. The only potentially notable operation is G(..., "ai", ...) which triggers MCP-side image generation — this is consistent with rendering and is called via the MCP API, not by the skill reading arbitrary system files or env vars.

Install Mechanism

Instruction-only skill with no install spec, no external downloads, and no code executed locally — lowest install risk.

Credentials

The skill declares no required environment variables, no primary credential, and no config paths. That matches its instructions which call the platform's MCP APIs rather than asking for secrets directly.

Persistence & Privilege

always is false and there is no indication the skill modifies other skills or system settings. The skill can be invoked autonomously (platform default), which is expected for an orchestrator-invoked renderer.

Assessment

This skill appears to do exactly what it says: translate DNA codes into Pencil frames using the Pencil MCP backend. Before installing, confirm that your platform's MCP integration is trusted and that any credentials for Pencil MCP are managed by the platform (not this skill). Note that MCP-side operations may include AI image generation (G(..., "ai", ...)) and creating/storing .pen files/screenshots — consider whether those outputs may be visible to other users or logs in your environment. If you rely on sensitive or proprietary DNA inputs, ensure the MCP service's data handling/privacy policies meet your requirements. No environment variables or local installs are required by the skill itself.

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

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]

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)