Setup & Installation
Or with the ClawHub CLI, for registry-managed skill folders outside a full OpenClaw workspace:
Version History
- Added in-depth reference: dna-to-pencil.md, detailing complete DNA axis to Pencil property mappings. - Added batch-design-patterns.md, describing standard operation sequences for design execution. - No changes to workflow or interface; new reference files enhance documentation and implementation clarity.
What This Skill Does
Translates aesthetic DNA codes into rendered frames in Pencil .pen files via MCP. Takes a DNA code array and component type as input, returns a frame ID and screenshot. Designed to be called by orchestrators rather than used directly.
Deterministic DNA-to-property mapping ensures the same DNA code always produces the same frame structure, making it reliable as a composable building block in design orchestration workflows.
When to use it
- Rendering a hero section frame from a brutalist DNA code during design exploration
- Generating card component mockups across multiple aesthetic variations
- Producing form layout frames for visual review without manual design work
- Creating nav and footer frames as part of an automated design pipeline
- Capturing screenshots of rendered UI components for proposal comparison
Example Workflow
Here's how your AI assistant might use this skill in practice.
User asks: Render a hero component using DNA [centered, dark, display-heavy, none, spacious, solid]
- 1Check Pencil editor state with mcp__pencil__get_editor_state; open document if none is active
- 2Retrieve style guide tags matching the DNA mood (dark color → ["dark-mode", "moody"]) via mcp__pencil__get_style_guide_tags and mcp__pencil__get_style_guide
- 3Map each DNA axis to Pencil properties: centered → alignItems center, dark → dark fill with light foreground, display-heavy → large heading sizes
- 4Execute mcp__pencil__batch_design to create the hero frame with headline, subhead, and CTA button elements
- 5Capture the result with mcp__pencil__get_screenshot and return the frame ID plus screenshot
Frame ID in the .pen file and a screenshot image of the rendered hero component