Pencil Renderer

What it does

This Pencil Renderer skill translates design specifications described as a "DNA code" into visual pencil sketches using the Model Context Protocol (MCP). It takes a set of parameters defining layout, color, typography, motion, density, and background, and generates a corresponding .pen file frame representing that design. The skill also provides a screenshot of the rendered frame for review.

When to use it

• Quickly visualize UI component designs based on specific aesthetic guidelines.
• Generate initial mockups or prototypes from textual descriptions of desired visual styles.
• Explore different layout and style options without manual drawing.
• Create pencil sketch representations of components like hero sections, cards, forms, navigation bars, footers, buttons, and input fields.

Key capabilities

• DNA Code Translation: Converts design parameters (layout, color, typography, motion, density, background) into Pencil properties.
• .pen Frame Generation: Creates .pen files containing visual representations of designs.
• Screenshot Output: Provides a screenshot image of the rendered frame.
• Component Templates: Supports pre-defined component templates including hero, card, form, nav, footer, section, button and input.
• Style Guide Integration: Utilizes style guide tags to inform design choices (e.g., "dark-mode" for dark color schemes).

Example prompts

• “Create a pencil sketch of a hero section with a centered layout and a dark color scheme.”
• “Generate a card component with an image area, content, and actions using a light and clean style guide."
• "Render a form input field with a label and validation."

Tips & gotchas

• The skill operates on a single design translation – no iterative refinement or conversation is supported.
• Understanding the "DNA code" parameters and their mapping to Pencil properties (as described in references/dna-to-pencil.md) will improve results.
• This skill utilizes MCP for tool integration; it's not a general-purpose design tool.